Skip to content

Commit e672bb7

Browse files
codefraucodefrau
committed
demo: move display creation to squeak.js
1 parent dcb3e39 commit e672bb7

File tree

4 files changed

+135
-193
lines changed

4 files changed

+135
-193
lines changed

‎benchmark/benchmark.js

+3-16
Original file line numberDiff line numberDiff line change
@@ -55,29 +55,16 @@ window.onload = function() {
5555
oReq.send();
5656
};
5757

58-
var canvas = document.getElementsByTagName("canvas")[0];
59-
function createDisplay() {
60-
var display = {
61-
ctx: canvas.getContext("2d"),
62-
width: canvas.width,
63-
height: canvas.height,
64-
mouseX: 0,
65-
mouseY: 0,
66-
buttons: 0,
67-
keys: [],
68-
clipboardString: '',
69-
clipboardStringChanged: false,
70-
};
71-
return display;
72-
};
58+
var canvas = document.getElementsByTagName("canvas")[0],
59+
display = createSqueakDisplay(canvas);
7360

7461
function loadAndRunImage(url) {
7562
var rq = new XMLHttpRequest();
7663
rq.open('GET', url);
7764
rq.responseType = 'arraybuffer';
7865
rq.onload = function(e) {
7966
var image = new Squeak.Image(rq.response, url);
80-
var vm = new Squeak.Interpreter(image, createDisplay());
67+
var vm = new Squeak.Interpreter(image, display);
8168
var run = function() {
8269
try {
8370
vm.interpret(200, function(ms) {

‎demo/simple.js

+31-91
Original file line numberDiff line numberDiff line change
@@ -33,99 +33,34 @@ window.onload = function() {
3333
var head = document.getElementsByTagName("head")[0];
3434
head.innerHTML += '<meta name="viewport" content="initial-scale=' + scale + '">';
3535
}
36-
function createDisplay() {
37-
var display = {
38-
ctx: canvas.getContext("2d"),
39-
width: canvas.width,
40-
height: canvas.height,
41-
mouseX: 0,
42-
mouseY: 0,
43-
buttons: 0,
44-
keys: [],
45-
clipboardString: '',
46-
clipboardStringChanged: false,
47-
};
48-
canvas.onmousedown = function(evt) {
49-
canvas.focus();
50-
display.buttons = display.buttons & ~7 | (4 >> evt.button);
51-
};
52-
canvas.onmouseup = function(evt) {
53-
display.buttons = display.buttons & ~7;
54-
};
55-
canvas.onmousemove = function(evt) {
56-
display.mouseX = evt.pageX - this.offsetLeft;
57-
display.mouseY = evt.pageY - this.offsetTop;
58-
};
59-
canvas.oncontextmenu = function() {
60-
return false;
61-
};
62-
canvas.ontouchstart = function(evt) {
63-
canvas.focus();
64-
display.buttons = 4;
65-
canvas.ontouchmove(evt);
66-
};
67-
canvas.ontouchmove = function(evt) {
68-
canvas.onmousemove(evt.touches[0]);
69-
};
70-
canvas.ontouchend = function(evt) {
71-
display.buttons = 0;
72-
canvas.ontouchmove(evt);
73-
};
74-
canvas.ontouchcancel = function(evt) {
75-
display.buttons = 0;
76-
};
77-
canvas.onkeypress = function(evt) {
78-
display.keys.push(evt.charCode);
79-
};
80-
canvas.onkeydown = function(evt) {
81-
var code = ({46:127, 8:8, 45:5, 9:9, 13:13, 27:27, 36:1, 35:4,
82-
33:11, 34:12, 37:28, 39:29, 38:30, 40:31})[evt.keyCode];
83-
if (code) {display.keys.push(code); return evt.preventDefault()};
84-
var modifier = ({16:8, 17:16, 91:64, 18:64})[evt.keyCode];
85-
if (modifier) {
86-
display.buttons |= modifier;
87-
if (modifier > 8) display.keys = [];
88-
return evt.preventDefault();
89-
}
90-
if ((evt.metaKey || evt.altKey) && evt.which) {
91-
code = evt.which;
92-
if (code >= 65 && code <= 90) if (!evt.shiftKey) code += 32;
93-
else if (evt.keyIdentifier && evt.keyIdentifier.slice(0,2) == 'U+')
94-
code = parseInt(evt.keyIdentifier.slice(2), 16);
95-
display.keys.push(code)
96-
return evt.preventDefault();
97-
}
98-
};
99-
canvas.onkeyup = function(evt) {
100-
var modifier = ({16:8, 17:16, 91:64, 18:64})[evt.keyCode];
101-
if (modifier) { display.buttons &= ~modifier; return evt.preventDefault(); }
102-
};
103-
return display;
104-
};
36+
var display = createSqueakDisplay(canvas, {swapButtons: true});
10537
var loop;
10638
function runImage(buffer, name) {
10739
window.clearTimeout(loop);
108-
canvas.width = canvas.width;
109-
canvas.focus();
110-
var image = new Squeak.Image(buffer, name);
111-
var vm = new Squeak.Interpreter(image, createDisplay());
112-
var run = function() {
113-
try {
114-
vm.interpret(20, function(ms) {
115-
if (typeof ms === 'number') { // continue running
116-
loop = window.setTimeout(run, ms);
117-
} else { // quit
118-
canvas.style.webkitTransition = "-webkit-transform 0.5s";
119-
canvas.style.webkitTransform = "scale(0)";
120-
window.setTimeout(function(){canvas.style.display = 'none'}, 500);
121-
}
122-
});
123-
} catch(error) {
124-
console.error(error);
125-
alert(error);
126-
}
127-
};
128-
run();
40+
display.clear();
41+
display.showBanner("Initializing, please wait");
42+
window.setTimeout(function() {
43+
var image = new Squeak.Image(buffer, name);
44+
var vm = new Squeak.Interpreter(image, display);
45+
display.clear();
46+
function run() {
47+
try {
48+
vm.interpret(20, function(ms) {
49+
if (typeof ms === 'number') { // continue running
50+
loop = window.setTimeout(run, ms);
51+
} else { // quit
52+
canvas.style.webkitTransition = "-webkit-transform 0.5s";
53+
canvas.style.webkitTransform = "scale(0)";
54+
window.setTimeout(function(){canvas.style.display = 'none'}, 500);
55+
}
56+
});
57+
} catch(error) {
58+
console.error(error);
59+
alert(error);
60+
}
61+
};
62+
run();
63+
}, 0);
12964
};
13065
document.body.addEventListener('dragover', function(evt) {
13166
evt.stopPropagation();
@@ -136,7 +71,11 @@ window.onload = function() {
13671
document.body.addEventListener('drop', function(evt) {
13772
evt.stopPropagation();
13873
evt.preventDefault();
139-
var files = evt.dataTransfer.files;
74+
var files = evt.dataTransfer.files,
75+
names = [];
76+
for (var i = 0, f; f = files[i]; i++)
77+
names.push(f.name);
78+
display.showBanner("Loading " + names.join(', '));
14079
for (var i = 0, f; f = files[i]; i++) {
14180
var reader = new FileReader();
14281
reader.onload = (function closure(f) {return function onload() {
@@ -152,6 +91,7 @@ window.onload = function() {
15291
return false;
15392
});
15493
function downloadImage(url) {
94+
display.showBanner("Downloading " + url);
15595
var progress = document.getElementsByTagName("progress")[0];
15696
var rq = new XMLHttpRequest();
15797
rq.open('GET', url);

‎etoys/etoys.js

+5-86
Original file line numberDiff line numberDiff line change
@@ -35,91 +35,10 @@ window.onload = function() {
3535
} else {
3636
canvas.style.width = "80%";
3737
}
38-
canvas.showBanner = function(msg) {
39-
var ctx = canvas.getContext("2d");
40-
ctx.clearRect(0, 0, canvas.width, canvas.height);
41-
ctx.fillStyle = "#F90";
42-
ctx.font = 'bold 48px sans-serif';
43-
ctx.textAlign = "center";
44-
ctx.textBaseline = "middle";
45-
ctx.fillText(msg, canvas.width / 2, canvas.height / 2);
46-
};
47-
function createDisplay() {
48-
var display = {
49-
ctx: canvas.getContext("2d"),
50-
width: canvas.width,
51-
height: canvas.height,
52-
mouseX: 0,
53-
mouseY: 0,
54-
buttons: 0,
55-
keys: [],
56-
clipboardString: '',
57-
clipboardStringChanged: false,
58-
};
59-
canvas.onmousedown = function(evt) {
60-
canvas.focus();
61-
display.buttons = display.buttons & ~7 | (4 >> evt.button);
62-
evt.preventDefault();
63-
return false;
64-
};
65-
canvas.onmouseup = function(evt) {
66-
display.buttons = display.buttons & ~7;
67-
evt.preventDefault();
68-
};
69-
canvas.onmousemove = function(evt) {
70-
display.mouseX = (evt.pageX - this.offsetLeft) * (this.width / this.offsetWidth);
71-
display.mouseY = (evt.pageY - this.offsetTop) * (this.height / this.offsetHeight);
72-
};
73-
canvas.oncontextmenu = function() {
74-
return false;
75-
};
76-
canvas.ontouchstart = function(evt) {
77-
canvas.focus();
78-
display.buttons = 4;
79-
canvas.ontouchmove(evt);
80-
};
81-
canvas.ontouchmove = function(evt) {
82-
canvas.onmousemove(evt.touches[0]);
83-
};
84-
canvas.ontouchend = function(evt) {
85-
display.buttons = 0;
86-
canvas.ontouchmove(evt);
87-
};
88-
canvas.ontouchcancel = function(evt) {
89-
display.buttons = 0;
90-
};
91-
canvas.onkeypress = function(evt) {
92-
display.keys.push(evt.charCode);
93-
evt.preventDefault();
94-
};
95-
canvas.onkeydown = function(evt) {
96-
var code = ({46:127, 8:8, 45:5, 9:9, 13:13, 27:27, 36:1, 35:4,
97-
33:11, 34:12, 37:28, 39:29, 38:30, 40:31})[evt.keyCode];
98-
if (code) {display.keys.push(code); return evt.preventDefault()};
99-
var modifier = ({16:8, 17:16, 91:64, 18:64})[evt.keyCode];
100-
if (modifier) {
101-
display.buttons |= modifier;
102-
if (modifier > 8) display.keys = [];
103-
return evt.preventDefault();
104-
}
105-
if ((evt.metaKey || evt.altKey) && evt.which) {
106-
code = evt.which;
107-
if (code >= 65 && code <= 90) if (!evt.shiftKey) code += 32;
108-
else if (evt.keyIdentifier && evt.keyIdentifier.slice(0,2) == 'U+')
109-
code = parseInt(evt.keyIdentifier.slice(2), 16);
110-
display.keys.push(code)
111-
return evt.preventDefault();
112-
}
113-
};
114-
canvas.onkeyup = function(evt) {
115-
var modifier = ({16:8, 17:16, 91:64, 18:64})[evt.keyCode];
116-
if (modifier) { display.buttons &= ~modifier; return evt.preventDefault(); }
117-
};
118-
return display;
119-
};
38+
var display = this.createSqueakDisplay(canvas);
12039
function loadAndRunImage(url) {
12140
var imageName = Squeak.splitFilePath(url).basename;
122-
canvas.showBanner("Downloading " + imageName);
41+
display.showBanner("Downloading " + imageName);
12342
var progress = document.getElementsByTagName("progress")[0];
12443
var rq = new XMLHttpRequest();
12544
rq.open('GET', url);
@@ -129,11 +48,11 @@ window.onload = function() {
12948
}
13049
rq.onload = function(e) {
13150
progress.style.display = "none";
132-
canvas.focus();
133-
canvas.showBanner("Initializing, please wait");
51+
display.showBanner("Initializing, please wait");
13452
window.setTimeout(function(){
13553
var image = new Squeak.Image(rq.response, imageName);
136-
var vm = new Squeak.Interpreter(image, createDisplay());
54+
var vm = new Squeak.Interpreter(image, display);
55+
display.clear();
13756
var run = function() {
13857
try {
13958
vm.interpret(20, function(ms) {

‎lib/squeak.js

+96
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,102 @@ Object.extend = function(obj /* + more args */ ) {
5959
obj[name] = arguments[i][name];
6060
};
6161

62+
//////////////////////////////////////////////////////////////////////////////
63+
// display & event setup
64+
//////////////////////////////////////////////////////////////////////////////
65+
66+
function createSqueakDisplay(canvas, options) {
67+
options = options || {};
68+
var display = {
69+
ctx: canvas.getContext("2d"),
70+
width: canvas.width,
71+
height: canvas.height,
72+
mouseX: 0,
73+
mouseY: 0,
74+
buttons: 0,
75+
keys: [],
76+
clipboardString: '',
77+
clipboardStringChanged: false,
78+
};
79+
display.clear = function() {
80+
canvas.width = canvas.width;
81+
};
82+
display.setFullscreen = function(flag) {
83+
console.log("Fullscreen: " + flag);
84+
};
85+
display.showBanner = function(msg, style) {
86+
style = style || {};
87+
var ctx = canvas.getContext("2d");
88+
ctx.clearRect(0, 0, canvas.width, canvas.height);
89+
ctx.fillStyle = style.color || "#F90";
90+
ctx.font = style.font || 'bold 48px sans-serif';
91+
ctx.textAlign = "center";
92+
ctx.textBaseline = "middle";
93+
ctx.fillText(msg, canvas.width / 2, canvas.height / 2);
94+
};
95+
canvas.onmousedown = function(evt) {
96+
canvas.focus();
97+
var button = (options.swapButtons ? [4, 1, 2] : [4, 2, 1])[evt.button];
98+
display.buttons = display.buttons & ~7 | button;
99+
evt.preventDefault();
100+
return false;
101+
};
102+
canvas.onmouseup = function(evt) {
103+
display.buttons = display.buttons & ~7;
104+
evt.preventDefault();
105+
};
106+
canvas.onmousemove = function(evt) {
107+
display.mouseX = (evt.pageX - this.offsetLeft) * (this.width / this.offsetWidth);
108+
display.mouseY = (evt.pageY - this.offsetTop) * (this.height / this.offsetHeight);
109+
};
110+
canvas.oncontextmenu = function() {
111+
return false;
112+
};
113+
canvas.ontouchstart = function(evt) {
114+
canvas.focus();
115+
display.buttons = 4;
116+
canvas.ontouchmove(evt);
117+
};
118+
canvas.ontouchmove = function(evt) {
119+
canvas.onmousemove(evt.touches[0]);
120+
};
121+
canvas.ontouchend = function(evt) {
122+
display.buttons = 0;
123+
canvas.ontouchmove(evt);
124+
};
125+
canvas.ontouchcancel = function(evt) {
126+
display.buttons = 0;
127+
};
128+
canvas.onkeypress = function(evt) {
129+
display.keys.push(evt.charCode);
130+
evt.preventDefault();
131+
};
132+
canvas.onkeydown = function(evt) {
133+
var code = ({46:127, 8:8, 45:5, 9:9, 13:13, 27:27, 36:1, 35:4,
134+
33:11, 34:12, 37:28, 39:29, 38:30, 40:31})[evt.keyCode];
135+
if (code) {display.keys.push(code); return evt.preventDefault()};
136+
var modifier = ({16:8, 17:16, 91:64, 18:64})[evt.keyCode];
137+
if (modifier) {
138+
display.buttons |= modifier;
139+
if (modifier > 8) display.keys = [];
140+
return evt.preventDefault();
141+
}
142+
if ((evt.metaKey || evt.altKey) && evt.which) {
143+
code = evt.which;
144+
if (code >= 65 && code <= 90) if (!evt.shiftKey) code += 32;
145+
else if (evt.keyIdentifier && evt.keyIdentifier.slice(0,2) == 'U+')
146+
code = parseInt(evt.keyIdentifier.slice(2), 16);
147+
display.keys.push(code)
148+
return evt.preventDefault();
149+
}
150+
};
151+
canvas.onkeyup = function(evt) {
152+
var modifier = ({16:8, 17:16, 91:64, 18:64})[evt.keyCode];
153+
if (modifier) { display.buttons &= ~modifier; return evt.preventDefault(); }
154+
};
155+
return display;
156+
};
157+
62158
//////////////////////////////////////////////////////////////////////////////
63159
// browser stuff
64160
//////////////////////////////////////////////////////////////////////////////

0 commit comments

Comments
 (0)