forked from jmoenig/morphic.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
test.html
executable file
·188 lines (164 loc) · 7.66 KB
/
test.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Morphic!</title>
<script type="text/javascript" src="morphic.js"></script>
<script type="text/javascript">
var worldCanvas, world, mo, hi, hint1, hint2, tm;
window.onload = function () {
worldCanvas = document.getElementById('world');
world = new WorldMorph(worldCanvas);
// world.worldCanvas.focus(); // +++
// world.keyboardHandler.focus(); // +++
world.isDevMode = true;
mo = new Morph();
mo.isDraggable = true;
mo.setPosition(new Point(150, 270));
world.add(mo);
mo = new CircleBoxMorph();
mo.isDraggable = true;
mo.setPosition(new Point(150, 50));
mo.color = new Color(200, 100, 10);
mo.setExtent(new Point(200, 100));
mo.holes.push(new Point(50, 20).extent(new Point(150, 60)));
world.add(mo);
new HandleMorph(mo);
mo = new Morph();
mo.isDraggable = true;
mo.setPosition(new Point(450, 350));
mo.color = new Color(100, 200, 10);
mo.setExtent(new Point(40, 170));
world.add(mo);
new HandleMorph(mo); // , null, null, null, null, 'moveCenter');
mo = new Morph();
mo.texture = 'snap_logo_sm.png';
mo.isDraggable = true;
mo.setPosition(new Point(650, 250));
mo.color = new Color(100, 10, 200);
mo.setExtent(new Point(120, 270));
mo.holes.push(new Point(20, 20).extent(new Point(150, 60)));
mo.holes.push(new Point(20, 120).extent(new Point(150, 60)));
world.add(mo);
mo = new BlinkerMorph();
mo.isDraggable = true;
mo.setPosition(new Point(50, 350));
world.add(mo);
mo = new BoxMorph(30, 5, new Color(20, 5, 100));
mo.isDraggable = true;
mo.setPosition(new Point(30, 400));
mo.color = new Color(200, 0, 200);
mo.setExtent(new Point(180, 120));
world.add(mo);
new HandleMorph(mo); // , null, null, null, null, 'moveCenter');
mo = new DialMorph();
// mo.isDraggable = true;
mo.setPosition(new Point(500, 40));
world.add(mo);
// new HandleMorph(mo); // , null, null, null, null, 'moveCenter');
hi = new StringMorph(
'Hello, World!', 48, 'serif');
// hi.isDraggable = true;
hi.enableSelecting(); // +++
hi.isEditable = true;
hi.setPosition(new Point(275, 200));
world.add(hi);
hint1 = new StringMorph(
'right click...', 20, 'serif');
hint1.isDraggable = true;
hint1.isEditable = true;
hint1.setPosition(new Point(350, 270));
world.add(hint1);
hint2 = new StringMorph(
'(or double touch)', 10, 'sans-serif');
hint2.isDraggable = true;
hint2.isEditable = true;
hint2.setPosition(hint1.bottomLeft());
world.add(hint2);
tm = new TextMorph(
"Ich wei\u00DF nicht, was soll es bedeuten, dass ich so " +
"traurig bin, ein M\u00E4rchen aus uralten Zeiten, das " +
"kommt mir nicht aus dem Sinn. Die Luft ist k\u00FChl " +
"und es dunkelt, und ruhig flie\u00DFt der Rhein; der " +
"Gipfel des Berges funkelt im Abendsonnenschein. " +
"Die sch\u00F6nste Jungfrau sitzet dort oben wunderbar, " +
"ihr gold'nes Geschmeide blitzet, sie k\u00E4mmt ihr " +
"goldenes Haar, sie k\u00E4mmt es mit goldenem Kamme, " +
"und singt ein Lied dabei; das hat eine wundersame, " +
"gewalt'ge Melodei. Den Schiffer im kleinen " +
"Schiffe, ergreift es mit wildem Weh; er schaut " +
"nicht die Felsenriffe, er schaut nur hinauf in " +
"die H\u00F6h'. Ich glaube, die Wellen verschlingen " +
"am Ende Schiffer und Kahn, und das hat mit ihrem " +
"Singen, die Loreley getan."
);
tm.isEditable = true;
// tm.isDraggable = true;
tm.enableSelecting(); // +++
tm.maxWidth = 300;
// mo.backgroundColor = new Color(255, 255, 180);
// tm.alignment = 'right';
tm.fixLayout();
tm.setPosition(new Point(800, 50));
world.add(tm);
new HandleMorph(tm);
mo = new SpeechBubbleMorph('Morphic\nrocks.');
mo.isClickable = true;
mo.isDraggable = true;
// mo.popUp(world, new Point(850, 400), true);
mo.setPosition(new Point(350, 400));
world.add(mo);
// new HandleMorph(mo);
mo = new FrameMorph();
mo.isDraggable = true;
mo.setPosition(new Point(820, 300));
mo.setExtent(new Point(300, 250));
world.add(mo);
mo = new SliderButtonMorph('vertical');
mo.setPosition(new Point(50, 50));
world.add(mo);
mo = new SliderButtonMorph('horizontal');
mo.setPosition(new Point(50, 10));
mo.setExtent(new Point(200, 20));
world.add(mo);
mo = new SliderMorph();
mo.setPosition(new Point(600, 200));
mo.setExtent(new Point(15, 300));
mo.fixLayout();
world.add(mo);
mo = new ScrollFrameMorph();
mo.contents.acceptsDrops = true;
mo.contents.adjustBounds();
mo.setPosition(new Point(1200, 50));
mo.setExtent(new Point(350, 250));
world.add(mo);
new HandleMorph(mo);
mo = new TriggerMorph(
null, // target
function () {console.log('tiggered'); },
'Click!',
null, // font size
null, // font style
null, // environment
'this is a hint',
null, // label color
null, // bold
null, // italic
function () {alert('double clicked'); }
);
mo.setPosition(new Point(600, 550));
// mo.setExtent(new Point(15, 300));
// mo.fixLayout();
world.add(mo);
loop();
};
function loop() {
requestAnimationFrame(loop);
world.doOneCycle();
};
</script>
</head>
<body style="margin: 0;">
<canvas id="world" tabindex="1" width="800" height="600" style="position: absolute; left: 0px; right: 0px; width: 100%; height: 100%;"></canvas>
</body>
</html>