pxt-calliope/sim/visuals/boardhost.ts

namespace pxsim.visuals {
    export interface BoardHostOpts {
        state: DalBoard,
        boardDef: BoardDefinition,
        cmpsList?: string[],
        cmpDefs: Map<PartDefinition>,
        fnArgs: any,
        forceBreadboard?: boolean,
        maxWidth?: string,
        maxHeight?: string
        wireframe?: boolean
    }
    export class BoardHost {
        private components: IBoardComponent<any>[] = [];
        private wireFactory: WireFactory;
        private breadboard: Breadboard;
        private fromBBCoord: (xy: Coord) => Coord;
        private fromMBCoord: (xy: Coord) => Coord;
        private boardView: BoardView;
        private view: SVGSVGElement;
        private style: SVGStyleElement;
        private defs: SVGDefsElement;
        private state: DalBoard;

        constructor(opts: BoardHostOpts) {
            this.state = opts.state;
            let onboardCmps = opts.boardDef.onboardComponents || [];
            let activeComponents = (opts.cmpsList || []).filter(c => onboardCmps.indexOf(c) < 0);
            activeComponents.sort();

            this.boardView = new visuals.MicrobitBoardSvg({
                runtime: runtime,
                theme: visuals.randomTheme(),
                disableTilt: false,
                wireframe: opts.wireframe,
            });

            let useBreadboard = 0 < activeComponents.length || opts.forceBreadboard;
            if (useBreadboard) {
                this.breadboard = new Breadboard({
                    wireframe: opts.wireframe,
                });
                let composition = composeSVG({
                    el1: this.boardView.getView(),
                    scaleUnit1: this.boardView.getPinDist(),
                    el2: this.breadboard.getSVGAndSize(),
                    scaleUnit2: this.breadboard.getPinDist(),
                    margin: [0, 0, 20, 0],
                    middleMargin: 80,
                    maxWidth: opts.maxWidth,
                    maxHeight: opts.maxHeight,
                });
                let under = composition.under;
                let over = composition.over;
                this.view = composition.host;
                let edges = composition.edges;
                this.fromMBCoord = composition.toHostCoord1;
                this.fromBBCoord = composition.toHostCoord2;
                let pinDist = composition.scaleUnit;

                this.style = <SVGStyleElement>svg.child(this.view, "style", {});
                this.defs = <SVGDefsElement>svg.child(this.view, "defs", {});

                this.wireFactory = new WireFactory(under, over, edges, this.style, this.getLocCoord.bind(this));

                let allocRes = allocateDefinitions({
                    boardDef: opts.boardDef,
                    cmpDefs: opts.cmpDefs,
                    fnArgs: opts.fnArgs,
                    getBBCoord: this.breadboard.getCoord.bind(this.breadboard),
                    cmpList: activeComponents,
                });

                this.addAll(allocRes);
            } else {
                let el = this.boardView.getView().el;
                this.view = el;
                if (opts.maxWidth)
                    svg.hydrate(this.view, { width: opts.maxWidth });
                if (opts.maxHeight)
                    svg.hydrate(this.view, { height: opts.maxHeight });
            }

            this.state.updateSubscribers.push(() => this.updateState());
        }

        public highlightBoardPin(pinNm: string) {
            this.boardView.highlightPin(pinNm);
        }

        public highlightBreadboardPin(rowCol: BBRowCol) {
            this.breadboard.highlightLoc(rowCol);
        }

        public highlightWire(wire: Wire) {
            //TODO: move to wiring.ts
            //underboard wires
            wire.wires.forEach(e => {
                svg.addClass(e, "highlight");
                (<any>e).style["visibility"] = "visible";
            });

            //un greyed out
            svg.addClass(wire.endG, "highlight");
        }

        public getView(): SVGElement {
            return this.view;
        }

        private updateState() {
            this.components.forEach(c => c.updateState());
        }

        private getBBCoord(rowCol: BBRowCol) {
            let bbCoord = this.breadboard.getCoord(rowCol);
            return this.fromBBCoord(bbCoord);
        }
        private getPinCoord(pin: string) {
            let boardCoord = this.boardView.getCoord(pin);
            return this.fromMBCoord(boardCoord);
        }
        public getLocCoord(loc: Loc): Coord {
            let coord: Coord;
            if (loc.type === "breadboard") {
                let rowCol = (<BBLoc>loc).rowCol;
                coord = this.getBBCoord(rowCol);
            } else {
                let pinNm = (<BoardLoc>loc).pin;
                coord = this.getPinCoord(pinNm);
            }
            if (!coord) {
                console.error("Unknown location: " + name)
                return [0, 0];
            }
            return coord;
        }

        public addComponent(cmpDesc: CmpInst): IBoardComponent<any> {
            let cmp: IBoardComponent<any> = null;
            if (typeof cmpDesc.visual === "string") {
                let builtinVisual = cmpDesc.visual as string;
                let cnstr = builtinComponentSimVisual[builtinVisual];
                let stateFn = builtinComponentSimState[builtinVisual];
                cmp = cnstr();
                cmp.init(this.state.bus, stateFn(this.state), this.view, cmpDesc.microbitPins, cmpDesc.otherArgs);
                this.components.push(cmp);
                this.view.appendChild(cmp.element);
                if (cmp.defs)
                    cmp.defs.forEach(d => this.defs.appendChild(d));
                this.style.textContent += cmp.style || "";
                let rowCol = <BBRowCol>[`${cmpDesc.breadboardStartRow}`, `${cmpDesc.breadboardStartColumn}`];
                let coord = this.getBBCoord(rowCol);
                cmp.moveToCoord(coord);
                let getCmpClass = (type: string) => `sim-${type}-cmp`;
                let cls = getCmpClass(name);
                svg.addClass(cmp.element, cls);
                svg.addClass(cmp.element, "sim-cmp");
                cmp.updateTheme();
                cmp.updateState();
            } else {
                let vis = cmpDesc.visual as PartVisualDefinition;
                console.log("TODO PART: " + vis.image);
                //TODO: support generic parts
            }
            return cmp;
        }
        public addWire(inst: WireInst): Wire {
            return this.wireFactory.addWire(inst.start, inst.end, inst.color, true);
        }
        public addAll(basicWiresAndCmpsAndWires: AllocatorResult) {
            let {powerWires, components} = basicWiresAndCmpsAndWires;
            powerWires.forEach(w => this.addWire(w));
            components.forEach((cAndWs, idx) => {
                let {component, wires} = cAndWs;
                wires.forEach(w => this.addWire(w));
                this.addComponent(component);
            });
        }
    }
}