2b:null 2c:["$","title",null,{"children":"Epigram | Craig Latta | Observable"}] 31:Td418,// Provide browser services to the SqueakJS virtual machine { /* * Copyright (c) 2013-2016 Bert Freudenberg * * Permission is hereby granted, free of charge, to any person obtaining a copy * of this software and associated documentation files (the "Software"), to deal * in the Software without restriction, including without limitation the rights * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell * copies of the Software, and to permit persons to whom the Software is * furnished to do so, subject to the following conditions: * * The above copyright notice and this permission notice shall be included in * all copies or substantial portions of the Software. * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN * THE SOFTWARE. */ "use strict"; ////////////////////////////////////////////////////////////////////////////// // these functions fake the Lively module and class system // just enough so the loading of vm.js succeeds ////////////////////////////////////////////////////////////////////////////// window.module = function(dottedPath) { if (dottedPath === "") return window; var path = dottedPath.split("."), name = path.pop(), parent = window.module(path.join(".")), self = parent[name]; if (!self) parent[name] = self = { loaded: false, pending: [], requires: function(req) { return { toRun: function(code) { function load() { code(); self.loaded = true; self.pending.forEach(function(f){f();}); } if (req && !window.module(req).loaded) { window.module(req).pending.push(load); } else { load(); } } }; }, }; return self; }; Object.extend = function(obj /* + more args */ ) { // skip arg 0, copy properties of other args to obj for (var i = 1; i < arguments.length; i++) if (typeof arguments[i] == 'object') for (var name in arguments[i]) obj[name] = arguments[i][name]; }; Function.prototype.subclass = function(classPath /* + more args */ ) { // create subclass var subclass = function() { if (this.initialize) this.initialize.apply(this, arguments); return this; }; // set up prototype var protoclass = function() { }; protoclass.prototype = this.prototype; subclass.prototype = new protoclass(); // skip arg 0, copy properties of other args to prototype for (var i = 1; i < arguments.length; i++) Object.extend(subclass.prototype, arguments[i]); // add class to module var modulePath = classPath.split("."), className = modulePath.pop(); window.module(modulePath.join('.'))[className] = subclass; return subclass; }; ////////////////////////////////////////////////////////////////////////////// // load vm, plugins, and other libraries ////////////////////////////////////////////////////////////////////////////// (function(){ var vmDir = "https://caffeine.js.org/js/squeakjs/"; ["vm.js", "jit.js", "plugins/ADPCMCodecPlugin.js", "plugins/B2DPlugin.js", "plugins/BitBltPlugin.js", "plugins/FFTPlugin.js", "plugins/FloatArrayPlugin.js", "plugins/Flow.js", "plugins/GeniePlugin.js", "plugins/JPEGReaderPlugin.js", "plugins/KedamaPlugin.js", "plugins/KedamaPlugin2.js", "plugins/Klatt.js", "plugins/LargeIntegers.js", "plugins/Matrix2x3Plugin.js", "plugins/MiscPrimitivePlugin.js", "plugins/ScratchPlugin.js", "plugins/SocketPlugin.js", "plugins/SpeechPlugin.js", "plugins/SqueakSSL.js", "plugins/SoundGenerationPlugin.js", "plugins/StarSqueakPlugin.js", "plugins/ZipPlugin.js", "lib/lz-string.js", "lib/jszip.js", "lib/FileSaver.js"].forEach(function(filename) { var script = document.createElement('script'); script.setAttribute("type", "text/javascript"); script.setAttribute("src", vmDir + filename); document.getElementsByTagName("head")[0].appendChild(script)})})(); window.module("SqueakJS").requires("").toRun(function() { // if in private mode set localStorage to a regular dict var localStorage = window.localStorage; try { localStorage["squeak-foo:"] = "bar"; if (localStorage["squeak-foo:"] !== "bar") throw Error(); delete localStorage["squeak-foo:"]; } catch(e) { localStorage = {}; } ////////////////////////////////////////////////////////////////////////////// // display & event setup ////////////////////////////////////////////////////////////////////////////// function setupFullscreen(display, canvas, options) { // Fullscreen can only be enabled in an event handler. So we check the // fullscreen flag on every mouse down/up and keyboard event. var box = canvas.parentElement, fullscreenEvent = "fullscreenchange", fullscreenElement = "fullscreenElement", fullscreenEnabled = "fullscreenEnabled"; if (!box.requestFullscreen) { [ // Fullscreen support is still very browser-dependent {req: box.webkitRequestFullscreen, exit: document.webkitExitFullscreen, evt: "webkitfullscreenchange", elem: "webkitFullscreenElement", enable: "webkitFullscreenEnabled"}, {req: box.mozRequestFullScreen, exit: document.mozCancelFullScreen, evt: "mozfullscreenchange", elem: "mozFullScreenElement", enable: "mozFullScreenEnabled"}, {req: box.msRequestFullscreen, exit: document.msExitFullscreen, evt: "MSFullscreenChange", elem: "msFullscreenElement", enable: "msFullscreenEnabled"}, ].forEach(function(browser) { if (browser.req) { box.requestFullscreen = browser.req; document.exitFullscreen = browser.exit; fullscreenEvent = browser.evt; fullscreenElement = browser.elem; fullscreenEnabled = browser.enable; } }); } // If the user canceled fullscreen, turn off the fullscreen flag so // we don't try to enable it again in the next event function fullscreenChange(fullscreen) { display.fullscreen = fullscreen; box.style.background = fullscreen ? 'black' : ''; if (options.header) options.header.style.display = fullscreen ? 'none' : ''; if (options.footer) options.footer.style.display = fullscreen ? 'none' : ''; if (options.fullscreenCheckbox) options.fullscreenCheckbox.checked = fullscreen; setTimeout(window.onresize, 0); } var checkFullscreen; if (box.requestFullscreen) { document.addEventListener(fullscreenEvent, function(){fullscreenChange(box == document[fullscreenElement]);}); checkFullscreen = function() { if (document[fullscreenEnabled] && (box == document[fullscreenElement]) != display.fullscreen) { if (display.fullscreen) box.requestFullscreen(); else document.exitFullscreen(); } }; } else { var isFullscreen = false; checkFullscreen = function() { if ((options.header || options.footer) && isFullscreen != display.fullscreen) { isFullscreen = display.fullscreen; fullscreenChange(isFullscreen); } }; } if (options.fullscreenCheckbox) options.fullscreenCheckbox.onclick = function() { display.fullscreen = options.fullscreenCheckbox.checked; checkFullscreen(); }; return checkFullscreen; } function setupSwapButtons(options) { if (options.swapCheckbox) { var imageName = localStorage["squeakImageName"] || "default", settings = JSON.parse(localStorage["squeakSettings:" + imageName] || "{}"); if ("swapButtons" in settings) options.swapButtons = settings.swapButtons; options.swapCheckbox.checked = options.swapButtons; options.swapCheckbox.onclick = function() { options.swapButtons = options.swapCheckbox.checked; settings["swapButtons"] = options.swapButtons; localStorage["squeakSettings:" + imageName] = JSON.stringify(settings); }; } } function recordModifiers(evt, display) { var shiftPressed, modifiers, ctrlPressed = evt.ctrlKey && !evt.altKey, cmdPressed = evt.metaKey || (evt.altKey && !evt.ctrlKey) if (evt.shiftKey) {shiftPressed = evt.shiftKey} else { if (window.canvas) {shiftPressed = window.canvas.shiftKey} else {shiftPressed = false}} modifiers = (shiftPressed ? window.Squeak.Keyboard_Shift : 0) + (ctrlPressed ? window.Squeak.Keyboard_Ctrl : 0) + (cmdPressed ? window.Squeak.Keyboard_Cmd : 0); display.buttons = (display.buttons & ~window.Squeak.Keyboard_All) | modifiers; return modifiers; } var canUseMouseOffset = navigator.userAgent.match("AppleWebKit/"); function updateMousePos(evt, canvas, display) { var x, y; if (evt.projected) { x = evt.projectedX; y = evt.projectedY;} else { var evtX, evtY; evtX = canUseMouseOffset ? evt.offsetX : evt.layerX, evtY = canUseMouseOffset ? evt.offsetY : evt.layerY; if (display.cursorCanvas) { display.cursorCanvas.style.left = (evtX + canvas.offsetLeft + display.cursorOffsetX) + "px"; display.cursorCanvas.style.top = (evtY + canvas.offsetTop + display.cursorOffsetY) + "px"; } var x = (evtX * canvas.width / canvas.offsetWidth) | 0, y = (evtY * canvas.height / canvas.offsetHeight) | 0;} // clamp to display size display.mouseX = Math.max(0, Math.min(display.width, x)); display.mouseY = Math.max(0, Math.min(display.height, y)); } function recordMouseEvent(what, evt, canvas, display, eventQueue, options) { updateMousePos(evt, canvas, display); if (!display.vm) return; var buttons = display.buttons & window.Squeak.Mouse_All; switch (what) { case 'mousedown': switch (evt.button || 0) { case 0: buttons = window.Squeak.Mouse_Red; break; // left case 1: buttons = window.Squeak.Mouse_Yellow; break; // middle case 2: buttons = window.Squeak.Mouse_Blue; break; // right } if (options.swapButtons) if (buttons == window.Squeak.Mouse_Yellow) buttons = window.Squeak.Mouse_Blue; else if (buttons == window.Squeak.Mouse_Blue) buttons = window.Squeak.Mouse_Yellow; break; case 'mousemove': break; // nothing more to do case 'mouseup': buttons = 0; break; } display.buttons = buttons | recordModifiers(evt, display); if (eventQueue) { eventQueue.push([ window.Squeak.EventTypeMouse, evt.timeStamp, // converted to Squeak time in makeSqueakEvent() display.mouseX, display.mouseY, display.buttons & window.Squeak.Mouse_All, display.buttons >> 3 ]); if (display.signalInputEvent) display.signalInputEvent(); } display.idle = 0; if (what == 'mouseup') { if (display.runFor) display.runFor(100); // maybe we catch the fullscreen flag change } else { if (display.runNow) display.runNow(); // don't wait for timeout to run } } function recordKeyboardEvent(key, timestamp, display, eventQueue) { if (!display.vm) return; var code = (display.buttons >> 3) << 8 | key; if (code === display.vm.interruptKeycode) { display.vm.interruptPending = true; } else if (eventQueue) { eventQueue.push([ window.Squeak.EventTypeKeyboard, timestamp, // converted to Squeak time in makeSqueakEvent() key, // MacRoman window.Squeak.EventKeyChar, display.buttons >> 3, key // Unicode ]); if (display.signalInputEvent) display.signalInputEvent(); } else { // no event queue, queue keys the old-fashioned way display.keys.push(code); } display.idle = 0; if (display.runNow) display.runNow(); // don't wait for timeout to run } function recordDragDropEvent(type, evt, canvas, display, eventQueue) { if (!display.vm || !eventQueue) return; updateMousePos(evt, canvas, display); eventQueue.push([ window.Squeak.EventTypeDragDropFiles, evt.timeStamp, // converted to Squeak time in makeSqueakEvent() type, display.mouseX, display.mouseY, display.buttons >> 3, display.droppedFiles.length ]); if (display.signalInputEvent) display.signalInputEvent(); } function fakeCmdOrCtrlKey(key, timestamp, display, eventQueue) { // set both Cmd and Ctrl bit, because we don't know what the image wants display.buttons &= ~window.Squeak.Keyboard_All; // remove all modifiers display.buttons |= window.Squeak.Keyboard_Cmd | window.Squeak.Keyboard_Ctrl; display.keys = []; // flush other keys recordKeyboardEvent(key, timestamp, display, eventQueue); } function makeSqueakEvent(evt, sqEvtBuf, sqTimeOffset) { sqEvtBuf[0] = evt[0]; sqEvtBuf[1] = (evt[1] - sqTimeOffset) & window.Squeak.MillisecondClockMask; for (var i = 2; i < evt.length; i++) sqEvtBuf[i] = evt[i]; sqEvtBuf[8] = window.display.activeElementID; } function createSqueakDisplay(canvas, options) { options = options || {}; if (options.fullscreen) { document.body.style.margin = 0; document.body.style.backgroundColor = 'black'; document.ontouchmove = function(evt) { evt.preventDefault(); }; if (options.header) options.header.style.display = 'none'; if (options.footer) options.footer.style.display = 'none'; } var display = { headless: false, context: canvas.getContext("2d"), fullscreen: false, width: 0, // if 0, VM uses canvas.width height: 0, // if 0, VM uses canvas.height mouseX: 0, mouseY: 0, buttons: 0, keys: [], clipboardString: '', clipboardStringChanged: false, cursorCanvas: options.cursor !== false && document.createElement("canvas"), cursorOffsetX: 0, cursorOffsetY: 0, droppedFiles: [], signalInputEvent: null, // function set by VM // additional functions added below }; setupSwapButtons(options); if (options.pixelated) { canvas.classList.add("pixelated"); display.cursorCanvas && display.cursorCanvas.classList.add("pixelated"); } var eventQueue = null; display.reset = function() { eventQueue = null; display.signalInputEvent = null; display.lastTick = 0; display.getNextEvent = function(firstEvtBuf, firstOffset) { // might be called from VM to get queued event eventQueue = []; // create queue on first call eventQueue.push = function(evt) { eventQueue.offset = Date.now() - evt[1]; // get epoch from first event delete eventQueue.push; // use original push from now on eventQueue.push(evt); }; display.getNextEvent = function(evtBuf, timeOffset) { var evt = eventQueue.shift(); if (evt) makeSqueakEvent(evt, evtBuf, timeOffset - eventQueue.offset); else evtBuf[0] = window.Squeak.EventTypeNone; }; display.getNextEvent(firstEvtBuf, firstOffset); }; }; display.reset(); var checkFullscreen = setupFullscreen(display, canvas, options); display.fullscreenRequest = function(fullscreen, thenDo) { // called from primitive to change fullscreen mode if (display.fullscreen != fullscreen) { display.fullscreen = fullscreen; display.resizeTodo = thenDo; // called after resizing display.resizeTodoTimeout = setTimeout(display.resizeDone, 1000); checkFullscreen(); } else thenDo(); }; display.resizeDone = function() { clearTimeout(display.resizeTodoTimeout); var todo = display.resizeTodo; if (todo) { display.resizeTodo = null; todo(); } }; display.clear = function() { canvas.width = canvas.width; }; display.showBanner = function(msg, style) { style = style || {}; var ctx = display.context; ctx.fillStyle = 'black'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = style.color || "#F90"; ctx.font = style.font || "bold 48px sans-serif"; if (!style.font && ctx.measureText(msg).width > canvas.width) ctx.font = "bold 24px sans-serif"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillText(msg, canvas.width / 2, canvas.height / 2); }; display.showProgress = function(value, style) { var realValue = Math.max(value, 0.05); style = style || {}; var ctx = display.context, w = (canvas.width / 3) | 0, h = 24, x = canvas.width * 0.5 - w / 2, y = canvas.height * 0.5 + 2 * h; ctx.fillStyle = style.background || "#000"; ctx.fillRect(x, y, w, h); ctx.lineWidth = 2; ctx.strokeStyle = style.color || "#F90"; ctx.strokeRect(x, y, w, h); ctx.fillStyle = style.color || "#F90"; ctx.fillRect(x, y, w * realValue, h); }; display.executeClipboardPaste = function(text, timestamp) { if (!display.vm) return true; try { display.clipboardString = text; // simulate paste event for Squeak fakeCmdOrCtrlKey('v'.charCodeAt(0), timestamp, display, eventQueue); } catch(err) { console.error("paste error " + err); } }; display.executeClipboardCopy = function(key, timestamp) { if (!display.vm) return true; // simulate copy event for Squeak so it places its text in clipboard display.clipboardStringChanged = false; fakeCmdOrCtrlKey((key || 'c').charCodeAt(0), timestamp, display, eventQueue); var start = Date.now(); // now interpret until Squeak has copied to the clipboard while (!display.clipboardStringChanged && Date.now() - start < 500) display.vm.interpret(20); if (!display.clipboardStringChanged) return; // got it, now copy to the system clipboard try { return display.clipboardString; } catch(err) { console.error("copy error " + err); } }; display.nextElementID = display.activeElementID = 1; canvas.elementID = display.nextElementID; display.nextElementID++; canvas.onmousedown = function(evt) { checkFullscreen(); recordMouseEvent('mousedown', evt, evt.target, display, eventQueue, options); evt.preventDefault(); return false; }; canvas.onmouseup = function(evt) { recordMouseEvent('mouseup', evt, evt.target, display, eventQueue, options); checkFullscreen(); evt.preventDefault(); }; canvas.onmousemove = function(evt) { if (!(evt.target.elementID)) debugger; evt.target.focus(); display.activeElementID = evt.target.elementID; document.body.style.cursor = ''; recordMouseEvent('mousemove', evt, evt.target, display, eventQueue, options); evt.preventDefault(); }; canvas.oncontextmenu = function() { return false; }; // touch event handling var touch = { state: 'idle', button: 0, x: 0, y: 0, dist: 0, down: {}, }; // window.top.touch = touch; function touchToMouse(evt) { if (evt.touches.length) { // average all touch positions touch.x = touch.y = 0; for (var i = 0; i < evt.touches.length; i++) { touch.x += evt.touches[i].pageX / evt.touches.length; touch.y += evt.touches[i].pageY / evt.touches.length; } } return { timeStamp: evt.timeStamp, button: touch.button, offsetX: touch.x - evt.target.offsetLeft, offsetY: touch.y - evt.target.offsetTop, }; } function dd(ax, ay, bx, by) {var x = ax - bx, y = ay - by; return Math.sqrt(x*x + y*y);} function dist(a, b) {return dd(a.pageX, a.pageY, b.pageX, b.pageY);} function dent(n, l, t, u) { return n < l ? n + t - l : n > u ? n + t - u : t; } function adjustDisplay(l, t, w, h) { var cursorCanvas = display.cursorCanvas, scale = w / canvas.width; canvas.style.left = (l|0) + "px"; canvas.style.top = (t|0) + "px"; canvas.style.width = (w|0) + "px"; canvas.style.height = (h|0) + "px"; if (cursorCanvas) { cursorCanvas.style.left = (l + display.cursorOffsetX + display.mouseX * scale|0) + "px"; cursorCanvas.style.top = (t + display.cursorOffsetY + display.mouseY * scale|0) + "px"; cursorCanvas.style.width = (cursorCanvas.width * scale|0) + "px"; cursorCanvas.style.height = (cursorCanvas.height * scale|0) + "px"; } if (!options.pixelated) { if (scale >= 3) { canvas.classList.add("pixelated"); cursorCanvas && cursorCanvas.classList.add("pixelated"); } else { canvas.classList.remove("pixelated"); cursorCanvas && display.cursorCanvas.classList.remove("pixelated"); } } return scale; } // zooming/panning with two fingers var maxZoom = 5; function zoomStart(evt) { touch.dist = dist(evt.touches[0], evt.touches[1]); touch.down.x = touch.x; touch.down.y = touch.y; touch.down.dist = touch.dist; touch.down.left = evt.target.offsetLeft; touch.down.top = evt.target.offsetTop; touch.down.width = evt.target.offsetWidth; touch.down.height = evt.target.offsetHeight; // store original canvas bounds if (!touch.orig) touch.orig = { left: touch.down.left, top: touch.down.top, right: touch.down.left + touch.down.width, bottom: touch.down.top + touch.down.height, width: touch.down.width, height: touch.down.height, }; } function zoomMove(evt) { if (evt.touches.length < 2) return; touch.dist = dist(evt.touches[0], evt.touches[1]); var minScale = touch.orig.width / touch.down.width, //nowScale = dent(touch.dist / touch.down.dist, 0.8, 1, 1.5), nowScale = touch.dist / touch.down.dist, scale = Math.min(Math.max(nowScale, minScale * 0.95), minScale * maxZoom), w = touch.down.width * scale, h = touch.orig.height * w / touch.orig.width, l = touch.down.left - (touch.down.x - touch.down.left) * (scale - 1) + (touch.x - touch.down.x), t = touch.down.top - (touch.down.y - touch.down.top) * (scale - 1) + (touch.y - touch.down.y); // allow to rubber-band by 20px for feedback l = Math.max(Math.min(l, touch.orig.left + 20), touch.orig.right - w - 20); t = Math.max(Math.min(t, touch.orig.top + 20), touch.orig.bottom - h - 20); adjustDisplay(l, t, w, h); } function zoomEnd(evt) { var l = evt.target.offsetLeft, t = evt.target.offsetTop, w = evt.target.offsetWidth, h = evt.target.offsetHeight; w = Math.min(Math.max(w, touch.orig.width), touch.orig.width * maxZoom); h = touch.orig.height * w / touch.orig.width; l = Math.max(Math.min(l, touch.orig.left), touch.orig.right - w); t = Math.max(Math.min(t, touch.orig.top), touch.orig.bottom - h); var scale = adjustDisplay(l, t, w, h); if ((scale - display.initialScale) < 0.0001) { touch.orig = null; window.onresize(); } } // State machine to distinguish between 1st/2nd mouse button and zoom/pan: // * if moved, or no 2nd finger within 100ms of 1st down, start mousing // * if fingers moved significantly within 200ms of 2nd down, start zooming // * if touch ended within this time, generate click (down+up) // * otherwise, start mousing with 2nd button // When mousing, always generate a move event before down event so that // mouseover eventhandlers in image work better canvas.ontouchstart = function(evt) { evt.preventDefault(); var e = touchToMouse(evt); for (var i = 0; i < evt.changedTouches.length; i++) { switch (touch.state) { case 'idle': touch.state = 'got1stFinger'; touch.first = e; setTimeout(function(){ if (touch.state !== 'got1stFinger') return; touch.state = 'mousing'; touch.button = e.button = 0; recordMouseEvent('mousemove', e, evt.target, display, eventQueue, options); recordMouseEvent('mousedown', e, evt.target, display, eventQueue, options); }, 100); break; case 'got1stFinger': touch.state = 'got2ndFinger'; zoomStart(evt); setTimeout(function(){ if (touch.state !== 'got2ndFinger') return; var didMove = Math.abs(touch.down.dist - touch.dist) > 10 || dd(touch.down.x, touch.down.y, touch.x, touch.y) > 10; if (didMove) { touch.state = 'zooming'; } else { touch.state = 'mousing'; touch.button = e.button = 2; recordMouseEvent('mousemove', e, evt.target, display, eventQueue, options); recordMouseEvent('mousedown', e, evt.target, display, eventQueue, options); } }, 200); break; } } }; canvas.ontouchmove = function(evt) { evt.preventDefault(); var e = touchToMouse(evt); switch (touch.state) { case 'got1stFinger': touch.state = 'mousing'; touch.button = e.button = 0; recordMouseEvent('mousemove', e, evt.target, display, eventQueue, options); recordMouseEvent('mousedown', e, evt.target, display, eventQueue, options); break; case 'mousing': recordMouseEvent('mousemove', e, evt.target, display, eventQueue, options); return; case 'got2ndFinger': if (evt.touches.length > 1) touch.dist = dist(evt.touches[0], evt.touches[1]); return; case 'zooming': zoomMove(evt); return; } }; canvas.ontouchend = function(evt) { evt.preventDefault(); checkFullscreen(); var e = touchToMouse(evt); for (var i = 0; i < evt.changedTouches.length; i++) { switch (touch.state) { case 'mousing': if (evt.touches.length > 0) break; touch.state = 'idle'; recordMouseEvent('mouseup', e, evt.target, display, eventQueue, options); return; case 'got1stFinger': touch.state = 'idle'; touch.button = e.button = 0; recordMouseEvent('mousemove', e, evt.target, display, eventQueue, options); recordMouseEvent('mousedown', e, evt.target, display, eventQueue, options); recordMouseEvent('mouseup', e, evt.target, display, eventQueue, options); return; case 'got2ndFinger': touch.state = 'mousing'; touch.button = e.button = 2; recordMouseEvent('mousemove', e, evt.target, display, eventQueue, options); recordMouseEvent('mousedown', e, evt.target, display, eventQueue, options); break; case 'zooming': if (evt.touches.length > 0) break; touch.state = 'idle'; zoomEnd(evt); return; } } }; canvas.ontouchcancel = function(evt) { canvas.ontouchend(evt); }; // cursorCanvas shows Squeak cursor if (display.cursorCanvas) { var absolute = window.getComputedStyle(canvas).position === "absolute"; display.cursorCanvas.id = "cursorCanvas"; display.cursorCanvas.style.display = "block"; display.cursorCanvas.style.position = absolute ? "absolute": "fixed"; display.cursorCanvas.style.cursor = "none"; display.cursorCanvas.style.background = "transparent"; display.cursorCanvas.style.pointerEvents = "none"; canvas.parentElement.appendChild(display.cursorCanvas); } // wheel stuff document.addEventListener( "mousewheel", function(event) { if (!display.vm) return true; event.preventDefault(); event.stopPropagation(); recordModifiers({ctrlKey: true, metaKey: true}, display); if (event.wheelDeltaY) { if (event.wheelDeltaY < 0) recordKeyboardEvent(31, event.timeStamp, display, eventQueue); else recordKeyboardEvent(30, event.timeStamp, display, eventQueue);}}, {passive: false}); // keyboard stuff document.onkeypress = function(evt) { /* if (canvas.otherCanvasActive) { evt.preventDefault(); evt.stopPropagation(); return true;} if (!display.vm) return true; // check for ctrl-x/c/v/r if (/[CXVR]/.test(String.fromCharCode(evt.charCode + 64))) return true; // let browser handle cut/copy/paste/reload recordModifiers(evt, display); recordKeyboardEvent(evt.charCode, evt.timeStamp, display, eventQueue); evt.preventDefault(); evt.stopPropagation(); */ }; document.onkeydown = function(evt) { document.body.style.cursor = 'none'; checkFullscreen(); if (evt.target.otherCanvasActive) { evt.preventDefault(); evt.stopPropagation(); return true;} if (!display.vm) { return true;} if (evt.shiftKey) evt.target.shiftKey = true; recordModifiers(evt, display); var squeakCode = ({ 8: 8, // Backspace 9: 9, // Tab 13: 13, // Return 27: 27, // Escape 32: 32, // Space 33: 11, // PageUp 34: 12, // PageDown 35: 4, // End 36: 1, // Home 37: 28, // Left 38: 30, // Up 39: 29, // Right 40: 31, // Down 45: 5, // Insert 46: 127, // Delete })[evt.keyCode]; if (squeakCode) { // special key pressed recordKeyboardEvent(squeakCode, evt.timeStamp, display, eventQueue); evt.stopPropagation(); return evt.preventDefault(); } var key = evt.key; // only supported in FireFox, others have keyIdentifier if (!key && evt.keyIdentifier && evt.keyIdentifier.slice(0,2) == 'U+') key = String.fromCharCode(parseInt(evt.keyIdentifier.slice(2), 16)); var code = key.charCodeAt(0); if (key && key.length == 1) { if (evt.metaKey || evt.altKey || evt.ctrlKey) { if (/[RCXV]/i.test(key)) return true; // let browser handle paste and reload exclusively // if (/[CX]/i.test(key)) { // recordKeyboardEvent(code, evt.timeStamp, display, eventQueue); // return true; // let browser handle cut and copy // } if (/[A-Z]/.test(key) && !evt.shiftKey) code += 32; // make lower-case } } if ((key != 'Control') && (key != 'Shift') && (key != 'Meta') && (key != 'Alt') && (key != 'CapsLock')) { recordKeyboardEvent(code, evt.timeStamp, display, eventQueue); evt.stopPropagation(); return evt.preventDefault();} }; document.onkeyup = function(evt) { if (evt.target.otherCanvasActive) { evt.preventDefault(); evt.stopPropagation(); return true;} if (!display.vm) return true; evt.target.shiftKey = false; recordModifiers(evt, display); }; document.oncopy = function(evt, key) { var text = display.executeClipboardCopy(key, evt.timeStamp); if (typeof text === 'string') { evt.clipboardData.setData("Text", text); } evt.preventDefault(); }; document.oncut = function(evt) { if (!display.vm) return true; document.oncopy(evt, 'x'); }; document.onpaste = function(evt) { var text = evt.clipboardData.getData('Text'); display.executeClipboardPaste(text, evt.timeStamp); evt.preventDefault(); }; // touch keyboard button if ('ontouchstart' in document) { var keyboardButton = document.createElement('div'); keyboardButton.id = 'keyboardButton'; keyboardButton.innerHTML = ''; keyboardButton.setAttribute('style', 'position:fixed;right:0;bottom:0;background-color:rgba(128,128,128,0.5);border-radius:5px'); canvas.parentElement.appendChild(keyboardButton); keyboardButton.onmousedown = function(evt) { evt.target.contentEditable = true; evt.target.setAttribute('autocomplete', 'off'); evt.target.setAttribute('autocorrect', 'off'); evt.target.setAttribute('autocapitalize', 'off'); evt.target.setAttribute('spellcheck', 'off'); evt.target.focus(); evt.preventDefault(); } keyboardButton.ontouchstart = keyboardButton.onmousedown } // do not use addEventListener, we want to replace any previous drop handler function dragEventHasFiles(evt) { for (var i = 0; i < evt.dataTransfer.types.length; i++) if (evt.dataTransfer.types[i] == 'Files') return true; return false; } document.ondragover = function(evt) { evt.preventDefault(); if (!dragEventHasFiles(evt)) { evt.dataTransfer.dropEffect = 'none'; } else { evt.dataTransfer.dropEffect = 'copy'; recordDragDropEvent(window.Squeak.EventDragMove, evt, evt.target, display, eventQueue); } }; document.ondragenter = function(evt) { if (!dragEventHasFiles(evt)) return; recordDragDropEvent(window.Squeak.EventDragEnter, evt, evt.target, display, eventQueue); }; document.ondragleave = function(evt) { if (!dragEventHasFiles(evt)) return; recordDragDropEvent(window.Squeak.EventDragLeave, evt, evt.target, display, eventQueue); }; document.ondrop = function(evt) { evt.preventDefault(); if (!dragEventHasFiles(evt)) return false; var files = [].slice.call(evt.dataTransfer.files), loaded = [], image, imageName = null; display.droppedFiles = []; files.forEach(function(f) { display.droppedFiles.push(f.name); var reader = new FileReader(); reader.onload = function () { var buffer = this.result; window.Squeak.filePut(f.name, buffer); loaded.push(f.name); if (!image && /.*image$/.test(f.name) && (!display.vm || confirm("Run " + f.name + " now?\n(cancel to use as file)"))) { image = buffer; imageName = f.name; } if (loaded.length == files.length) { if (image) { window.SqueakJS.appName = imageName.slice(0, -6); window.SqueakJS.runImage(image, imageName, display, options); } else { recordDragDropEvent(window.Squeak.EventDragDrop, evt, evt.target, display, eventQueue); } } }; reader.readAsArrayBuffer(f); }); return false; }; window.onresize = function() { if (touch.orig) return; // manually resized // call resizeDone only if window size didn't change for 300ms var debounceWidth = window.innerWidth, debounceHeight = window.innerHeight; setTimeout(function() { if (debounceWidth == window.innerWidth && debounceHeight == window.innerHeight) display.resizeDone(); }, 300); // if no fancy layout, don't bother if ((!options.header || !options.footer) && !options.fullscreen) { display.width = canvas.width; display.height = canvas.height; return; } // CSS won't let us do what we want so we will layout the canvas ourselves. var fullscreen = options.fullscreen || display.fullscreen, x = 0, y = fullscreen ? 0 : options.header.offsetTop + options.header.offsetHeight, w = window.innerWidth, h = fullscreen ? window.innerHeight : Math.max(100, options.footer.offsetTop - y), paddingX = 0, // padding outside canvas paddingY = 0; // above are the default values for laying out the canvas if (!options.fixedWidth) { // set canvas resolution if (!options.minWidth) options.minWidth = 700; if (!options.minHeight) options.minHeight = 700; var scaleW = w < options.minWidth ? options.minWidth / w : 1, scaleH = h < options.minHeight ? options.minHeight / h : 1, scale = Math.max(scaleW, scaleH); display.width = Math.floor(w * scale); display.height = Math.floor(h * scale); display.initialScale = w / display.width; } else { // fixed resolution and aspect ratio display.width = options.fixedWidth; display.height = options.fixedHeight; var wantRatio = display.width / display.height, haveRatio = w / h; if (haveRatio > wantRatio) { paddingX = w - Math.floor(h * wantRatio); } else { paddingY = h - Math.floor(w / wantRatio); } display.initialScale = (w - paddingX) / display.width; } // set size and position canvas.style.left = (x + Math.floor(paddingX / 2)) + "px"; canvas.style.top = (y + Math.floor(paddingY / 2)) + "px"; canvas.style.width = (w - paddingX) + "px"; canvas.style.height = (h - paddingY) + "px"; // set resolution if (canvas.width != display.width || canvas.height != display.height) { var preserveScreen = options.fixedWidth || !display.resizeTodo, // preserve unless changing fullscreen imgData = preserveScreen && display.context.getImageData(0, 0, canvas.width, canvas.height); canvas.width = display.width; canvas.height = display.height; if (imgData) display.context.putImageData(imgData, 0, 0); } // set cursor scale if (display.cursorCanvas && options.fixedWidth) { var cursorCanvas = display.cursorCanvas, scale = canvas.offsetWidth / canvas.width; cursorCanvas.style.width = (cursorCanvas.width * scale) + "px"; cursorCanvas.style.height = (cursorCanvas.height * scale) + "px"; } }; window.onresize(); return display; } function setupSpinner(vm, options) { var spinner = options.spinner; if (!spinner) { //debugger; return null;} spinner.onmousedown = function(evt) { if (confirm(window.SqueakJS.appName + " is busy. Interrupt?")) vm.interruptPending = true; }; return spinner.style; } var spinnerAngle = 0, becameBusy = 0; function updateSpinner(spinner, idleMS, vm, display) { var busy = idleMS === 0, animating = vm.lastTick - display.lastTick < 500; if (!busy || animating) { spinner.display = "none"; becameBusy = 0; } else { if (becameBusy === 0) { becameBusy = vm.lastTick; } else if (vm.lastTick - becameBusy > 1000) { spinner.display = "block"; spinnerAngle = (spinnerAngle + 30) % 360; spinner.webkitTransform = spinner.transform = "rotate(" + spinnerAngle + "deg)"; } } } ////////////////////////////////////////////////////////////////////////////// // main loop ////////////////////////////////////////////////////////////////////////////// var loop; // holds timeout for main loop window.SqueakJS.runImage = function(buffer, name, display, options) { window.onbeforeunload = function(evt) { var msg = window.SqueakJS.appName + " is still running"; evt.returnValue = msg; return msg; }; window.clearTimeout(loop); display.reset(); display.clear(); display.showBanner("loading app '" + window.SqueakJS.appName + "'..."); display.showProgress(0); var self = this; window.setTimeout(function readImageAsync() { var image = new window.Squeak.Image(name); image.window = window; image.readFromBuffer(buffer, function startRunning() { display.quitFlag = false; var vm = new window.Squeak.Interpreter(image, display); window.SqueakJS.vm = vm; vm.currentInterpretOne = vm.interpretOne; localStorage["squeakImageName"] = name; setupSwapButtons(options); display.clear(); display.showBanner("starting app '" + window.SqueakJS.appName + "'..."); var spinner = setupSpinner(vm, options); function run() { try { if (display.quitFlag) self.onQuit(vm, display, options); else if (!(display.suspend)) { vm.interpret(50, function runAgain(ms) { if (ms == "sleep") ms = 200; if (spinner) updateSpinner(spinner, ms, vm, display); loop = window.setTimeout(run, ms); })}; } catch(error) { console.error(error); // alert(error); //debugger; loop = window.setTimeout(run, 200); } } display.runNow = function() { window.clearTimeout(loop); run(); }; display.runFor = function(milliseconds) { var stoptime = Date.now() + milliseconds; do { if (display.quitFlag) return; display.runNow(); } while (Date.now() < stoptime); }; run(); }, function readProgress(value) {display.showProgress(value);}); }, 0); }; function processOptions(options) { var search = (location.hash || location.search).slice(1), args = search && search.split("&"); if (args) for (var i = 0; i < args.length; i++) { var keyAndVal = args[i].split("="), key = keyAndVal[0], val = true; if (keyAndVal.length > 1) { val = decodeURIComponent(keyAndVal.slice(1).join("=")); if (val.match(/^(true|false|null|[0-9"[{].*)$/)) try { val = JSON.parse(val); } catch(e) { if (val[0] === "[") val = val.slice(1,-1).split(","); // handle string arrays // if not JSON use string itself } } options[key] = val; } var root = window.Squeak.splitFilePath(options.root || "/").fullname; window.Squeak.dirCreate(root, true); if (!/\/$/.test(root)) root += "/"; options.root = root; window.SqueakJS.options = options; } function fetchTemplates(options) { if (options.templates) { if (options.templates.constructor === Array) { var templates = {}; options.templates.forEach(function(path){ templates[path] = path; }); options.templates = templates; } for (var path in options.templates) { var dir = path[0] == "/" ? path : options.root + path, url = window.Squeak.splitUrl(options.templates[path], options.url).full; window.Squeak.fetchTemplateDir(dir, url); } } } function processFile(file, display, options, thenDo) { window.Squeak.filePut(options.root + file.name, file.data, function() { console.log("Stored " + options.root + file.name); if (file.zip) { processZip(file, display, options, thenDo); } else { thenDo(); } }); } function processZip(file, display, options, thenDo) { window.JSZip().loadAsync(file.data).then(function(zip) { var todo = []; zip.forEach(function(filename){ if (!options.image.name && filename.match(/\.image$/)) options.image.name = filename; if (options.forceDownload || !window.Squeak.fileExists(options.root + filename)) { todo.push(filename); } else if (options.image.name === filename) { // image exists, need to fetch it from storage var _thenDo = thenDo; thenDo = function() { window.Squeak.fileGet(options.root + filename, function(data) { options.image.data = data; return _thenDo(); }, function onError() { window.Squeak.fileDelete(options.root + file.name); return processZip(file, display, options, _thenDo); }); } } }); if (todo.length === 0) return thenDo(); var done = 0; display.showBanner("unzipping " + file.name); display.showProgress(0); todo.forEach(function(filename){ console.log("Inflating " + file.name + ": " + filename); function progress(x) { display.showProgress((x.percent / 100 + done) / todo.length); } zip.file(filename).async("arraybuffer", progress).then(function(buffer){ console.log("Expanded size of " + filename + ": " + buffer.byteLength); var unzipped = {}; if (options.image.name === filename) unzipped = options.image; unzipped.name = filename; unzipped.data = buffer; processFile(unzipped, display, options, function() { if (++done === todo.length) thenDo(); }); }); }); }); } function checkExisting(file, display, options, ifExists, ifNotExists) { if (!window.Squeak.fileExists(options.root + file.name)) return ifNotExists(); if (file.image || file.zip) { // if it's the image or a zip, load from file storage window.Squeak.fileGet(options.root + file.name, function(data) { file.data = data; if (file.zip) processZip(file, display, options, ifExists); else ifExists(); }, function onError() { // if error, download it window.Squeak.fileDelete(options.root + file.name); return ifNotExists(); }); } else { // for all other files assume they're okay ifExists(); } } function downloadFile(file, display, options, thenDo) { display.showBanner("downloading " + file.name + "..."); var rq = new XMLHttpRequest(), proxy = options.proxy || ""; rq.open('GET', proxy + file.url); if (options.ajax) rq.setRequestHeader("X-Requested-With", "XMLHttpRequest"); rq.responseType = 'arraybuffer'; rq.onprogress = function(e) { if (e.lengthComputable) display.showProgress(e.loaded / e.total); }; rq.onload = function(e) { if (this.status == 200) { file.data = this.response; processFile(file, display, options, thenDo); } else this.onerror(this.statusText); }; rq.onerror = function(e) { if (options.proxy) return alert("Failed to download:\n" + file.url); console.warn('Retrying with CORS proxy: ' + file.url); var proxy = 'https://crossorigin.me/', retry = new XMLHttpRequest(); retry.open('GET', proxy + file.url); if (options.ajax) retry.setRequestHeader("X-Requested-With", "XMLHttpRequest"); retry.responseType = rq.responseType; retry.onprogress = rq.onprogress; retry.onload = rq.onload; retry.onerror = function() {alert("Failed to download:\n" + file.url)}; retry.send(); }; rq.send(); } function fetchFiles(files, display, options, thenDo) { // check if files exist locally and download if nessecary function getNextFile() { if (files.length === 0) return thenDo(); var file = files.shift(), forceDownload = options.forceDownload || file.forceDownload; if (forceDownload) downloadFile(file, display, options, getNextFile); else checkExisting(file, display, options, function ifExists() { getNextFile(); }, function ifNotExists() { downloadFile(file, display, options, getNextFile); }); } getNextFile(); } window.SqueakJS.runSqueak = function(imageUrl, canvas, options) { // we need to fetch all files first, then run the image processOptions(options); if (!imageUrl && options.image) imageUrl = options.image; var baseUrl = options.url || (imageUrl && imageUrl.replace(/[^\/]*$/, "")) || ""; options.url = baseUrl; fetchTemplates(options); var display = createSqueakDisplay(canvas, options), image = {url: null, name: null, image: true, data: null}, files = []; display.argv = options.argv; if (imageUrl) { var url = window.Squeak.splitUrl(imageUrl, baseUrl); image.url = url.full; image.name = url.filename; } if (options.files) { options.files.forEach(function(f) { var url = window.Squeak.splitUrl(f, baseUrl); if (image.name === url.filename) {/* pushed after other files */} else if (!image.url && f.match(/\.image$/)) { image.name = url.filename; image.url = url.full; } else { files.push({url: url.full, name: url.filename}); } }); } if (!window.Squeak.fileExists(options.root + image.name)) { // If the image file exists, assume there's no need to check the zips. if (options.zip) { var zips = typeof options.zip === "string" ? [options.zip] : options.zip; zips.forEach(function(zip) { var url = window.Squeak.splitUrl(zip, baseUrl); files.push({url: url.full, name: url.filename, zip: true}); }); }} if (image.url) files.push(image); if (options.document) { var url = window.Squeak.splitUrl(options.document, baseUrl); files.push({url: url.full, name: url.filename, forceDownload: options.forceDownload !== false}); display.documentName = options.root + url.filename; } options.image = image; fetchFiles(files, display, options, function thenDo() { window.Squeak.fsck(); var image = options.image; if (!image.name) return console.log("could not find an image"); if (!image.data) { console.log("could not find image " + image.name); document.location.reload(); return} window.SqueakJS.appName = options.appName || image.name.replace(/\.image$/, ""); window.SqueakJS.runImage(image.data, options.root + image.name, display, options); }); return display; }; window.SqueakJS.quitSqueak = function() { window.SqueakJS.vm.quitFlag = true; }; window.SqueakJS.onQuit = function(vm, display, options) { window.onbeforeunload = null; display.vm = null; if (options.spinner) options.spinner.style.display = "none"; if (options.onQuit) options.onQuit(vm, display, options); else display.showBanner(window.SqueakJS.appName + " stopped."); }; }); // end module ////////////////////////////////////////////////////////////////////////////// // browser stuff ////////////////////////////////////////////////////////////////////////////// if (window.applicationCache) { window.applicationCache.addEventListener('updateready', function() { // use original appName from options var appName = window.SqueakJS && window.SqueakJS.options && window.SqueakJS.options.appName || "SqueakJS"; if (confirm(appName + ' has been updated. Restart now?')) { window.onbeforeunload = null; window.location.reload(); } }); } window.startCaffeine = function(canvas, imageName, sourcesName, parameters) { var squeakDisplay, spinner; window.canvas = canvas; spinner = window.document.getElementById("sqSpinner"); squeakDisplay = window.SqueakJS.runSqueak( imageName + ".image", canvas, { zip: [ "https://caffeine.js.org/memories/" + imageName + ".zip", "https://caffeine.js.org/sources/" + sourcesName + ".sources.zip"], swapButtons: true, spinner: spinner, cursor: false, appName: parameters.appName, parameters: parameters}); window.squeakDisplay = squeakDisplay; setTimeout( function() { window.Squeak.fsck(function(stats) {});}, 0); return false;} return 'webpage interface to the virtual machine'} 32:[] 2f:{"id":"b7551a4e40128a50","slug":"epigram","title":"Epigram","thumbnail":"2b80555b2b91973ffe19f85c94cb531a851d68ef159a4398113fb1e41bff4c20","access_level":"public","create_time":"$D2022-06-23T22:13:39.466Z","update_time":"$D2025-09-04T03:31:26.843Z","view_time":null,"first_public_time":"$D2022-06-24T03:48:18.303Z","fork":{"id":"3e2e85b2be3a5982","slug":"caffeine","title":"Caffeine","owner":{"id":"f89a11b6c731864d","login":"ccrraaiigg","name":"Craig Latta"}},"stars":2,"starred":false,"owner":{"type":"team","id":"f89a11b6c731864d","login":"ccrraaiigg","name":"Craig Latta","avatar_url":"https://avatars-next.observableusercontent.com/7a77092454fc152df24638b5221495108ddcbc91b61a843ce7ec80945bfaeea0","tier":"starter_2024"},"version":816,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"33a82ed708c70bb4","login":"ccrraaiigg","name":"Craig Latta","avatar_url":"https://avatars-next.observableusercontent.com/7a77092454fc152df24638b5221495108ddcbc91b61a843ce7ec80945bfaeea0","tier":null}],"members":[{"type":"individual","id":"33a82ed708c70bb4","login":"ccrraaiigg","name":"Craig Latta","avatar_url":"https://avatars-next.observableusercontent.com/7a77092454fc152df24638b5221495108ddcbc91b61a843ce7ec80945bfaeea0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Epigram","cells":[{"id":553,"value":"

Epigram

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":630,"value":"Epigram is a parsing framework for EBNF grammars, written in Smalltalk. It reifies grammar production rules as objects, and uses them to parse source text, represent the abstract syntax tree, and compile derived structures. Epigram has been used to build multiple compilers and decompilers, including for the Protocol Buffers, SVG, and Smalltalk grammars. Let's take a look at Epigram in action, with a tour through the parsing and compilation (and rendering) of an SVG file.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":547,"value":"

grammar as code

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":627,"value":"Typically, we use a grammar's production rules, expressed as EBNF, to guide the construction of a grammar-specific parser. With Epigram, we express the EBNF directly as objects created by Smalltalk code. For example, a rule which accepts a source character of either 'a' or 'b' is written in EBNF as:","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":571,"value":"

aOrB = 'a' | 'b'

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":573,"value":"In Smalltalk code, this is written as:","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":575,"value":"

aOrB := 'a' | 'b'

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":579,"value":"This creates an EBNF alternation production rule object. Rules are also known as symbols. In addition to alternations, EBNF provides:\n

compound rules, which accept sequences of symbols\n
differences, which accept symbols that match one rule and not another\n
repetitions, which accept a symbol zero or more times\n
options, which accept a symbol no or one time\n
terminals, which accept a literal string\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":582,"value":"In our first alternation, 'a' and 'b' are both terminal symbols. We'll use parentheses here to delimit EBNF and Smalltalk code from the rest of the prose. In EBNF, a compound rule is written with the symbols separated by spaces, as in (aOrBThenCorD = aOrB cOrD). In Smalltalk, a compound rule uses \" || \" instead of the space character, as in (aOrBThenCorD := aOrB || cOrD).","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":673,"value":"In this article, we'll use an embedded instance of Caffeine, a Squeak Smalltalk object memory running on the SqueakJS virtual machine. The window below is a Squeak inspector. With a few exceptions, when you inspect a Squeak object, the inspector will appear here. The other Observable cells are similar; each holds only one Squeak window at a time. If you do anything else that opens a new window, the new window will replace the old one. If things get out of control, you can always reload this page, to see it the way it started. You can use the full Caffeine user interface in the under the hood section below.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":652,"value":"{const context = DOM.context2d(400, 400);\n context.canvas.id = \"window\";\n window.newWindowCanvas = context.canvas;\nreturn context.canvas;}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":656,"value":"The most recent Squeak inspector window appears here.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":590,"value":"SVG uses the XML grammar, which builds a rule describing an entire document, using constituent rules for tags, attributes, and even individual allowable characters. You can see the Smalltalk code that initializes the XML grammar by browsing (XML class)>>initialize:","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":502,"value":"window.xmlBrowserCanvas = html`

Epigram

grammar as code

putting rules to work

searching within production rules

compiling objects from accepted rules

questions?