From 7f86ed0cb6dde785ea38be72d14fe2297c90528a Mon Sep 17 00:00:00 2001
From: Steven Hugg <hugg@fasterlight.com>
Date: Sat, 14 Aug 2021 11:06:49 -0500
Subject: [PATCH] use preact for scripting notebook, moved files

---
 .gitignore                            |   3 +
 css/ui.css                            |   8 +
 meta/icons/8bitworkshop-icon-1024.jpg | Bin 0 -> 82331 bytes
 package-lock.json                     |  15 ++
 package.json                          |   1 +
 src/common/script/env.ts              |  22 +--
 src/common/script/{ => lib}/bitmap.ts |  24 ++-
 src/common/script/{ => lib}/io.ts     |  38 ++---
 src/common/script/{ => lib}/output.ts |   0
 src/common/script/node.ts             | 165 --------------------
 src/common/script/test.ts             |  13 --
 src/common/script/ui/notebook.ts      | 210 ++++++++++++++++++++++++++
 src/platform/script.ts                | 108 +------------
 src/worker/workermain.ts              |   3 +-
 14 files changed, 282 insertions(+), 328 deletions(-)
 create mode 100644 meta/icons/8bitworkshop-icon-1024.jpg
 rename src/common/script/{ => lib}/bitmap.ts (87%)
 rename src/common/script/{ => lib}/io.ts (82%)
 rename src/common/script/{ => lib}/output.ts (100%)
 delete mode 100644 src/common/script/node.ts
 delete mode 100644 src/common/script/test.ts
 create mode 100644 src/common/script/ui/notebook.ts

diff --git a/.gitignore b/.gitignore
index c17671e0..891b895c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,3 +8,6 @@ tmp/
 web/
 release/
 gen/
+config.js
+chromedriver.log
+nightwatch.conf.js
diff --git a/css/ui.css b/css/ui.css
index c4cc6d68..9268e548 100644
--- a/css/ui.css
+++ b/css/ui.css
@@ -793,3 +793,11 @@ div.asset_toolbar {
 .scripting-cell div {
   display: inline;
 }
+div.scripting-color {
+  padding:0.1em;
+  margin:0.1em;
+}
+div.scripting-grid {
+  display: grid;
+  grid-template-columns: repeat( auto-fit, minmax(2em, 1fr) );
+}
\ No newline at end of file
diff --git a/meta/icons/8bitworkshop-icon-1024.jpg b/meta/icons/8bitworkshop-icon-1024.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..1b8656c2a4e48850f128ef86cd660c910bb0b921
GIT binary patch
literal 82331
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
RLPih+5Cgx10XVw){{WdjG<5&~

literal 0
HcmV?d00001

diff --git a/package-lock.json b/package-lock.json
index 2934eb50..5938777a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,6 +21,7 @@
         "localforage": "^1.9.0",
         "mousetrap": "^1.6.5",
         "octokat": "^0.10.0",
+        "preact": "^10.5.14",
         "split.js": "^1.6.2",
         "yufka": "^2.0.1"
       },
@@ -7742,6 +7743,15 @@
       "integrity": "sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==",
       "dev": true
     },
+    "node_modules/preact": {
+      "version": "10.5.14",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.5.14.tgz",
+      "integrity": "sha512-KojoltCrshZ099ksUZ2OQKfbH66uquFoxHSbnwKbTJHeQNvx42EmC7wQVWNuDt6vC5s3nudRHFtKbpY4ijKlaQ==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/preact"
+      }
+    },
     "node_modules/prelude-ls": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
@@ -16281,6 +16291,11 @@
       "integrity": "sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==",
       "dev": true
     },
+    "preact": {
+      "version": "10.5.14",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.5.14.tgz",
+      "integrity": "sha512-KojoltCrshZ099ksUZ2OQKfbH66uquFoxHSbnwKbTJHeQNvx42EmC7wQVWNuDt6vC5s3nudRHFtKbpY4ijKlaQ=="
+    },
     "prelude-ls": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
diff --git a/package.json b/package.json
index f66a641a..87b42a1b 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "localforage": "^1.9.0",
     "mousetrap": "^1.6.5",
     "octokat": "^0.10.0",
+    "preact": "^10.5.14",
     "split.js": "^1.6.2",
     "yufka": "^2.0.1"
   },
diff --git a/src/common/script/env.ts b/src/common/script/env.ts
index dcad95f8..464f9ce6 100644
--- a/src/common/script/env.ts
+++ b/src/common/script/env.ts
@@ -1,9 +1,9 @@
 import { WorkerError } from "../workertypes";
 import ErrorStackParser = require("error-stack-parser");
 import yufka from 'yufka';
-import * as bitmap from "./bitmap";
-import * as io from "./io";
-import * as output from "./output";
+import * as bitmap from "./lib/bitmap";
+import * as io from "./lib/io";
+import * as output from "./lib/output";
 import { escapeHTML } from "../util";
 
 export interface Cell {
@@ -54,6 +54,7 @@ export class Environment {
     preprocess(code: string): string {
         var declvars = {};
         const result = yufka(code, (node, { update, source, parent }) => {
+            let left = node['left'];
             switch (node.type) {
                 case 'Identifier':
                     if (GLOBAL_BADLIST.indexOf(source()) >= 0) {
@@ -61,16 +62,17 @@ export class Environment {
                     }
                     break;
                 case 'AssignmentExpression':
-                    /*
-                    // x = expr --> var x = expr
+                    // x = expr --> var x = expr (first use)
                     if (parent().type === 'ExpressionStatement' && parent(2) && parent(2).type === 'Program') { // TODO
-                        let left = node['left'];
-                        if (left && left.type === 'Identifier' && declvars[left.name] == null) {
-                            update(`var ${source()}`)
-                            declvars[left.name] = true;
+                        if (left && left.type === 'Identifier') {
+                            if (!declvars[left.name]) {
+                                update(`var ${left.name}=this.${source()}`)
+                                declvars[left.name] = true;
+                            } else {
+                                update(`${left.name}=this.${source()}`)
+                            }
                         }
                     }
-                    */
                     break;
             }
         })
diff --git a/src/common/script/bitmap.ts b/src/common/script/lib/bitmap.ts
similarity index 87%
rename from src/common/script/bitmap.ts
rename to src/common/script/lib/bitmap.ts
index e8a1a0ef..850e2b73 100644
--- a/src/common/script/bitmap.ts
+++ b/src/common/script/lib/bitmap.ts
@@ -1,7 +1,7 @@
 
 import * as fastpng from 'fast-png';
-import { convertWordsToImages, PixelEditorImageFormat } from '../../ide/pixeleditor';
-import { arrayCompare } from '../util';
+import { convertWordsToImages, PixelEditorImageFormat } from '../../../ide/pixeleditor';
+import { arrayCompare } from '../../util';
 import * as io from './io'
 
 export abstract class AbstractBitmap {
@@ -107,8 +107,8 @@ export function indexed(width: number, height: number, bpp: number) {
 export type BitmapType = RGBABitmap | IndexedBitmap;
 
 export namespace png {
-    export function load(url: string): BitmapType {
-        return decode(io.loadbin(url));
+    export function read(url: string): BitmapType {
+        return decode(io.readbin(url));
     }
     export function decode(data: Uint8Array): BitmapType {
         let png = fastpng.decode(data);
@@ -147,13 +147,11 @@ export namespace png {
     }
 }
 
-export namespace from {
-    // TODO: check arguments
-    export function bytes(arr: Uint8Array, fmt: PixelEditorImageFormat) {
-        var pixels = convertWordsToImages(arr, fmt);
-        // TODO: guess if missing w/h/count?
-        // TODO: reverse mapping
-        // TODO: maybe better composable functions
-        return pixels.map(data => new IndexedBitmap(fmt.w, fmt.h, fmt.bpp|1, data));
-    }
+// TODO: check arguments
+export function decode(arr: Uint8Array, fmt: PixelEditorImageFormat) {
+    var pixels = convertWordsToImages(arr, fmt);
+    // TODO: guess if missing w/h/count?
+    // TODO: reverse mapping
+    // TODO: maybe better composable functions
+    return pixels.map(data => new IndexedBitmap(fmt.w, fmt.h, fmt.bpp|1, data));
 }
diff --git a/src/common/script/io.ts b/src/common/script/lib/io.ts
similarity index 82%
rename from src/common/script/io.ts
rename to src/common/script/lib/io.ts
index 0f0df744..ba661a9c 100644
--- a/src/common/script/io.ts
+++ b/src/common/script/lib/io.ts
@@ -1,8 +1,8 @@
-import { ProjectFilesystem } from "../../ide/project";
-import { FileData } from "../workertypes";
+import { ProjectFilesystem } from "../../../ide/project";
+import { FileData } from "../../workertypes";
+import * as output from "./output";
 
 // TODO
-
 var $$fs: ProjectFilesystem;
 var $$cache: { [path: string]: FileData } = {};
 
@@ -18,6 +18,19 @@ function getFS(): ProjectFilesystem {
     return $$fs;
 }
 
+export function ___load(path: string): FileData {
+    var data = $$cache[path];
+    if (data == null) {
+        getFS().getFileData(path).then((value) => {
+            $$cache[path] = value;
+        })
+        throw new IOWaitError(path);
+    } else {
+        return data;
+    }
+}
+
+
 export function canonicalurl(url: string) : string {
     // get raw resource URL for github
     if (url.startsWith('https://github.com/')) {
@@ -29,7 +42,7 @@ export function canonicalurl(url: string) : string {
     return url;
 }
 
-export function load(url: string, type?: 'binary' | 'text'): FileData {
+export function read(url: string, type?: 'binary' | 'text'): FileData {
     url = canonicalurl(url);
     // TODO: only works in web worker
     var xhr = new XMLHttpRequest();
@@ -47,23 +60,10 @@ export function load(url: string, type?: 'binary' | 'text'): FileData {
     }
 }
 
-export function loadbin(url: string): Uint8Array {
-    var data = load(url, 'binary');
+export function readbin(url: string): Uint8Array {
+    var data = read(url, 'binary');
     if (data instanceof Uint8Array)
         return data;
     else
         throw new Error(`The resource at "${url}" is not a binary file.`);
 }
-
-export function xload(path: string): FileData {
-    var data = $$cache[path];
-    if (data == null) {
-        getFS().getFileData(path).then((value) => {
-            $$cache[path] = value;
-        })
-        throw new IOWaitError(path);
-    } else {
-        return data;
-    }
-}
-
diff --git a/src/common/script/output.ts b/src/common/script/lib/output.ts
similarity index 100%
rename from src/common/script/output.ts
rename to src/common/script/lib/output.ts
diff --git a/src/common/script/node.ts b/src/common/script/node.ts
deleted file mode 100644
index ccf8502c..00000000
--- a/src/common/script/node.ts
+++ /dev/null
@@ -1,165 +0,0 @@
-
-var lastTimestamp = 0;
-
-function newTimestamp() {
-    return ++lastTimestamp;
-}
-
-export type DependencySet = {[id:string] : ComputeNode | any}
-
-export abstract class ComputeNode {
-    private src_ts: number = newTimestamp();
-    private result_ts: number = 0;
-    private depends: DependencySet = {};
-    private busy: Promise<void> = null;
-
-    modified() {
-        this.src_ts = newTimestamp();
-    }
-
-    isStale(ts: number) {
-        return this.result_ts < ts;
-    }
-
-    setDependencies(depends: DependencySet) {
-        this.depends = depends;
-        // compute latest timestamp of all dependencies
-        var ts = 0;
-        for (let [key, dep] of Object.entries(this.depends)) {
-            if (dep instanceof ComputeNode && dep.result_ts) {
-                ts = Math.max(ts, dep.result_ts);
-            } else {
-                ts = newTimestamp();
-            }
-        }
-        this.src_ts = ts;
-    }
-
-    getDependencies() {
-        return this.depends;
-    }
-
-    async update() : Promise<void> {
-        let maxts = 0;
-        let dependsComputes = []
-        for (let [key, dep] of Object.entries(this.depends)) {
-            if (dep instanceof ComputeNode && dep.isStale(this.src_ts)) {
-                dependsComputes.push(dep.compute());
-            }
-        }
-        if (dependsComputes.length) {
-            await Promise.all(dependsComputes);
-            this.recompute(maxts);
-        }
-    }
-
-    async recompute(ts: number) : Promise<void> {
-        // are we currently waiting for a computation to finish?
-        if (this.busy == null || ts > this.result_ts) {
-            // wait for previous operation to finish (no-op if null)
-            await this.busy;
-            this.result_ts = ts;
-            this.busy = this.compute();
-        }
-        await this.busy;
-        this.busy = null;
-    }
-
-    abstract compute(): Promise<void>;
-}
-
-class ValueNode<T> extends ComputeNode {
-    private value : T;
-
-    constructor(value : T) {
-        super();
-        this.set(value);
-    }
-
-    get() : T {
-        return this.value;
-    }
-
-    set(newValue : T) {
-        this.value = newValue;
-        this.modified();
-    }
-
-    async compute() { }
-}
-
-class ArrayNode<T> extends ValueNode<T> {
-}
-
-class IntegerNode extends ValueNode<number> {
-}
-
-abstract class BitmapNode extends ComputeNode {
-    width: number;
-    height: number;
-}
-
-class RGBABitmapNode extends BitmapNode {
-    rgba: ArrayNode<Uint32Array>;
-
-    compute(): Promise<void> {
-        throw new Error("Method not implemented.");
-    }
-}
-
-class IndexedBitmapNode extends BitmapNode {
-    indices: ArrayNode<Uint8Array>;
-
-    compute(): Promise<void> {
-        throw new Error("Method not implemented.");
-    }
-}
-
-class PaletteNode {
-    colors: ArrayNode<Uint32Array>;
-
-    compute(): Promise<void> {
-        throw new Error("Method not implemented.");
-    }
-}
-
-class PaletteMapNode extends ComputeNode {
-    palette: PaletteNode;
-    indices: ArrayNode<Uint8Array>;
-
-    compute(): Promise<void> {
-        throw new Error("Method not implemented.");
-    }
-}
-
-function valueOf<T>(node : ValueNode<T>) : T {
-    return node.get();
-}
-
-class TestNode extends ComputeNode {
-    value : string;
-
-    async compute() {
-        await new Promise(r => setTimeout(r, 100));
-        this.value = Object.values(this.getDependencies()).map(valueOf).join('');
-    }
-
-}
-
-///
-
-async function test() {
-    var val1 = new ValueNode<number>(1234);
-    var arr1 = new ValueNode<number[]>([1,2,3]);
-    var join = new TestNode();
-    join.setDependencies({a:val1, b:arr1});
-    await join.update();
-    console.log(join);
-    val1.set(9999);
-    join.update();
-    val1.set(9989)
-    await join.update();
-    console.log(join);
-}
-
-test();
diff --git a/src/common/script/test.ts b/src/common/script/test.ts
deleted file mode 100644
index 7d518ec0..00000000
--- a/src/common/script/test.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-
-import 'fs';
-import * as bitmap from './bitmap'
-
-const fs = require('fs')
-
-var data = fs.readFileSync('images/book_a2600.png');
-//var data = fs.readFileSync('images/print-head.png');
-console.log(data);
-
-var png = bitmap.png.decode(data);
-console.log(png)
-
diff --git a/src/common/script/ui/notebook.ts b/src/common/script/ui/notebook.ts
new file mode 100644
index 00000000..4db3906b
--- /dev/null
+++ b/src/common/script/ui/notebook.ts
@@ -0,0 +1,210 @@
+
+import { BitmapType, IndexedBitmap, RGBABitmap } from "../lib/bitmap";
+import { Component, render, h, ComponentType } from 'preact';
+import { Cell } from "../env";
+import { rgb2bgr } from "../../util";
+import { dumpRAM } from "../../emu";
+
+interface ColorComponentProps {
+    rgbavalue: number;
+}
+
+class ColorComponent extends Component<ColorComponentProps> {
+    render(virtualDom, containerNode, replaceNode) {
+        let rgb = this.props.rgbavalue & 0xffffff;
+        var htmlcolor = `#${rgb2bgr(rgb).toString(16)}`;
+        var textcol = (rgb & 0x008000) ? 'black' : 'white';
+        return h('div', {
+            class: 'scripting-color',
+            style: `background-color: ${htmlcolor}; color: ${textcol}`,
+            alt: htmlcolor, // TODO
+        }, '\u00a0');
+    }
+}
+
+interface BitmapComponentProps {
+    bitmap: BitmapType;
+    width: number;
+    height: number;
+}
+
+class BitmapComponent extends Component<BitmapComponentProps> {
+    canvas: HTMLCanvasElement;
+    ctx: CanvasRenderingContext2D;
+    imageData: ImageData;
+    datau32: Uint32Array;
+
+    constructor(props: BitmapComponentProps) {
+        super(props);
+    }
+    render(virtualDom, containerNode, replaceNode) {
+        return h('canvas', {
+            class: 'pixelated',
+            width: this.props.width,
+            height: this.props.height
+        });
+    }
+    componentDidMount() {
+        this.canvas = this.base as HTMLCanvasElement;
+        this.prepare();
+        this.refresh();
+    }
+    componentWillUnmount() {
+        this.canvas = null;
+        this.imageData = null;
+        this.datau32 = null;
+    }
+    componentDidUpdate(prevProps, prevState, snapshot) {
+        this.refresh();
+    }
+    prepare() {
+        this.ctx = this.canvas.getContext('2d');
+        this.imageData = this.ctx.createImageData(this.canvas.width, this.canvas.height);
+        this.datau32 = new Uint32Array(this.imageData.data.buffer);
+    }
+    refresh() {
+        // preact can reuse this component but it can change shape :^P
+        if (this.imageData.width != this.props.width || this.imageData.height != this.props.height) {
+            this.prepare();
+        }
+        this.updateCanvas(this.datau32, this.props.bitmap);
+        this.ctx.putImageData(this.imageData, 0, 0);
+    }
+    updateCanvas(vdata: Uint32Array, bmp: BitmapType) {
+        if (bmp['palette']) {
+            this.updateCanvasIndexed(vdata, bmp as IndexedBitmap);
+        }
+        if (bmp['rgba']) {
+            this.updateCanvasRGBA(vdata, bmp as RGBABitmap);
+        }
+    }
+    updateCanvasRGBA(vdata: Uint32Array, bmp: RGBABitmap) {
+        vdata.set(bmp.rgba);
+    }
+    updateCanvasIndexed(vdata: Uint32Array, bmp: IndexedBitmap) {
+        let pal = bmp.palette.colors;
+        for (var i = 0; i < bmp.pixels.length; i++) {
+            vdata[i] = pal[bmp.pixels[i]];
+        }
+    }
+}
+
+interface ObjectTreeComponentProps {
+    object: {} | [];
+}
+
+interface ObjectTreeComponentState {
+    expanded : boolean;
+}
+
+class ObjectTreeComponent extends Component<ObjectTreeComponentProps, ObjectTreeComponentState> {
+    render(virtualDom, containerNode, replaceNode) {
+        if (this.state.expanded) {
+            var minus = h('span', { onClick: () => this.toggleExpand() }, [ '-' ]);
+            return h('minus', { }, [
+                minus,
+                getShortName(this.props.object),
+                objectToContentsDiv(this.props.object)
+            ]);
+        } else {
+            var plus = h('span', { onClick: () => this.toggleExpand() }, [ '+' ]);
+            return h('div', { }, [
+                plus,
+                getShortName(this.props.object)
+            ]);
+        }
+    }
+    toggleExpand() {
+        this.setState({ expanded: !this.state.expanded });
+    }
+}
+
+function getShortName(object: any) {
+    if (typeof object === 'object') {
+        try {
+            var s = Object.getPrototypeOf(object).constructor.name;
+            if (object.length > 0) {
+                s += `[${object.length}]`
+            }
+            return s;
+        } catch (e) {
+            return 'object';
+        }
+    } else {
+        return object+"";
+    }
+}
+
+// TODO: need id?
+function objectToDiv(object: any) {
+    var props = { class: '' };
+    var children = [];
+    // TODO: tile editor
+    // TODO: limit # of items
+    // TODO: detect table
+    if (Array.isArray(object)) {
+        return objectToContentsDiv(object);
+    } else if (object['bitsPerPixel'] && object['pixels'] && object['palette']) {
+        addBitmapComponent(children, object as IndexedBitmap);
+    } else if (object['rgba'] instanceof Uint32Array) {
+        addBitmapComponent(children, object as RGBABitmap);
+    } else if (object['colors'] instanceof Uint32Array) {
+        // TODO: make sets of 2/4/8/16/etc
+        props.class += ' scripting-grid ';
+        object['colors'].forEach((val) => {
+            children.push(h(ColorComponent, { rgbavalue: val }));
+        })
+    } else if (typeof object === 'object') {
+        children.push(h(ObjectTreeComponent, { object }));
+    } else {
+        children.push(JSON.stringify(object));
+    }
+    let div = h('div', props, children);
+    return div;
+}
+
+function objectToContentsDiv(object: {} | []) {
+    // is typed array?
+    let bpel = object['BYTES_PER_ELEMENT'];
+    if (typeof bpel === 'number') {
+        const maxBytes = 0x100;
+        let tyarr = object as Uint8Array;
+        if (tyarr.length <= maxBytes) {
+            // TODO
+            let dumptext = dumpRAM(tyarr, 0, tyarr.length);
+            return h('pre', { }, dumptext);
+        } else {
+            let children = [];
+            for (var ofs=0; ofs<tyarr.length; ofs+=maxBytes) {
+                children.push(objectToDiv(tyarr.slice(ofs, ofs+maxBytes)));
+            }
+            return h('div', { }, children);
+        }
+    }
+    let objectEntries = Object.entries(object);
+    // TODO: id?
+    let objectDivs = objectEntries.map(entry => objectToDiv(entry[1]));
+    return h('div', { }, objectDivs);
+}
+
+function addBitmapComponent(children, bitmap: BitmapType) {
+    children.push(h(BitmapComponent, { bitmap: bitmap, width: bitmap.width, height: bitmap.height}));
+}
+
+export class Notebook {
+    constructor(
+        public readonly maindoc: HTMLDocument,
+        public readonly maindiv: HTMLElement
+    ) {
+        maindiv.classList.add('vertical-scroll');
+        //maindiv.classList.add('container')
+    }
+    updateCells(cells: Cell[]) {
+        let hTree = cells.map(cell => {
+            let cellDiv = objectToDiv(cell.object);
+            cellDiv.props['class'] += ' scripting-cell ';
+            return cellDiv;
+        });
+        render(hTree, this.maindiv);
+    }
+}
diff --git a/src/platform/script.ts b/src/platform/script.ts
index 9461be34..aed7ff11 100644
--- a/src/platform/script.ts
+++ b/src/platform/script.ts
@@ -2,111 +2,7 @@
 import { PLATFORMS, RasterVideo } from "../common/emu";
 import { Platform } from "../common/baseplatform";
 import { Cell } from "../common/script/env";
-import { escapeHTML } from "../common/util";
-import { BitmapType, IndexedBitmap, RGBABitmap } from "../common/script/bitmap";
-
-abstract class TileEditor<T> {
-    video: RasterVideo;
-
-    constructor(
-        public readonly tileWidth: number,
-        public readonly tileHeight: number,
-        public readonly numColumns: number,
-        public readonly numRows: number,
-    ) {
-    }
-    getPixelWidth() { return this.tileWidth * this.numColumns }
-    getPixelHeight() { return this.tileHeight * this.numRows }
-    attach(div: HTMLElement) {
-        this.video = new RasterVideo(div, this.getPixelWidth(), this.getPixelHeight());
-        this.video.create();
-    }
-    detach() {
-        this.video = null;
-    }
-    update() {
-        if (this.video) this.video.updateFrame();
-    }
-    abstract getTile(x: number, y: number): T;
-    abstract renderTile(x: number, y: number): void;
-}
-
-class RGBABitmapEditor extends TileEditor<number> {
-    constructor(
-        public readonly bitmap: RGBABitmap
-    ) {
-        super(1, 1, bitmap.width, bitmap.height);
-    }
-    getTile(x: number, y: number) {
-        return this.bitmap.getPixel(x, y);
-    }
-    renderTile(x: number, y: number): void {
-        //TODO 
-    }
-}
-
-function bitmap2image(doc: HTMLDocument, div: HTMLElement, bitmap: BitmapType): HTMLCanvasElement {
-    var video = new RasterVideo(div, bitmap.width, bitmap.height);
-    video.create(doc);
-    video.canvas.className = 'pixelated';
-    let vdata = video.getFrameData();
-    if (bitmap['palette'] != null) {
-        let bmp = bitmap as IndexedBitmap;
-        let pal = bmp.palette.colors;
-        for (var i = 0; i < bmp.pixels.length; i++) {
-            vdata[i] = pal[bmp.pixels[i]];
-        }
-    } else {
-        let bmp = bitmap as RGBABitmap;
-        vdata.set(bmp.rgba);
-    }
-    video.updateFrame();
-    return video.canvas;
-}
-
-class Notebook {
-    constructor(
-        public readonly maindoc: HTMLDocument,
-        public readonly maindiv: HTMLElement
-    ) {
-        maindiv.classList.add('vertical-scroll');
-        //maindiv.classList.add('container')
-    }
-    updateCells(cells: Cell[]) {
-        let body = this.maindiv;
-        body.innerHTML = '';
-        //var body = $(this.iframe).contents().find('body');
-        //body.empty();
-        for (let cell of cells) {
-            if (cell.object != null) {
-                let div = this.objectToDiv(cell.object);
-                div.id = cell.id;
-                div.classList.add('scripting-cell')
-                //div.classList.add('row')
-                body.append(div);
-            }
-        }
-    }
-    objectToDiv(object: any) {
-        let div = document.createElement('div');
-        //div.classList.add('col-auto')
-        //grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
-        // TODO: tile editor
-        if (Array.isArray(object) || object.BYTES_PER_ELEMENT) {
-            object.forEach((obj) => {
-                div.appendChild(this.objectToDiv(obj));
-            });
-        // TODO
-        } else if (object['bitsPerPixel'] && object['pixels'] && object['palette']) {
-            bitmap2image(this.maindoc, div, object as IndexedBitmap);
-        } else if (object['rgba']) {
-            bitmap2image(this.maindoc, div, object as RGBABitmap);
-        } else if (object != null) {
-            div.innerHTML = escapeHTML(JSON.stringify(object));
-        }
-        return div;
-    }
-}
+import { Notebook } from "../common/script/ui/notebook";
 
 class ScriptingPlatform implements Platform {
     mainElement: HTMLElement;
@@ -125,7 +21,7 @@ class ScriptingPlatform implements Platform {
             head.appendChild($(`<link rel="stylesheet" href="css/script.css">`)[0]);
         };
         */
-       this.notebook = new Notebook(document, mainElement);
+        this.notebook = new Notebook(document, mainElement);
     }
     start() {
     }
diff --git a/src/worker/workermain.ts b/src/worker/workermain.ts
index e04f9db2..b8ff78a6 100644
--- a/src/worker/workermain.ts
+++ b/src/worker/workermain.ts
@@ -1094,7 +1094,7 @@ var TOOL_PRELOADFS = {
   'wiz': 'wiz',
 }
 
-const waitFor = delay => new Promise(resolve => setTimeout(resolve, delay));
+//const waitFor = delay => new Promise(resolve => setTimeout(resolve, delay)); // for testing
 
 async function handleMessage(data : WorkerMessage) : Promise<WorkerResult> {
   // preload file system
@@ -1128,4 +1128,3 @@ if (ENVIRONMENT_IS_WORKER) {
     }
   }
 }
-