8bitworkshop/src/common/script/ui/notebook.ts

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);
    }
}