@teachinglab/omd/src/omd.js

omd

import { omdColor } from "./omdColor.js";
import { omdNumber } from "./omdNumber.js";
import { omdVariable } from "./omdVariable.js";
import { omdTerm } from "./omdTerm.js";
import { omdOperator } from "./omdOperator.js";
import { omdExpression } from "./omdExpression.js";
import { omdPowerExpression } from "./omdPowerExpression.js";
import { omdRationalExpression } from "./omdRationalExpression.js";
import { omdEquation } from "./omdEquation.js";
import { omdFunction } from "./omdFunction.js";
import { omdNumberLine } from "./omdNumberLine.js";
import { omdTapeDiagram } from "./omdTapeDiagram.js";
import { omdBalanceHanger } from "./omdBalanceHanger.js";
import { omdNumberTile } from "./omdNumberTile.js";
import { omdRatioChart } from "./omdRatioChart.js";
import { omdCoordinatePlane } from "./omdCoordinatePlane.js";
import { omdSpinner } from "./omdSpinner.js";
import { jsvgContainer } from "@teachinglab/jsvg";

export class omd extends jsvgContainer
{
    constructor()
    {
        super();


        this.setViewbox( 400,400 );
        this.setBackgroundColor( "#F8F8F4" );
    }

    setCanvasSize( W, H )
    {
        this.setViewbox( W,H );
    }

    setBackgroundColor( C )
    {
        this.svgObject.style.backgroundColor =  C;
    }
    
    generateGraphic( jsonData )
    {
        this.removeAllChildren();

        var N = null;

        if ( jsonData.omdType == "number" ) { var N = new omdNumber(); }

        if ( jsonData.omdType == "variable" ) { var N = new omdVariable(); }

        if ( jsonData.omdType == "operator" ) { var N = new omdOperator(); }
        
        if ( jsonData.omdType == "term" ) { var N = new omdTerm(); }

        if ( jsonData.omdType == "expression" ) { var N = new omdExpression(); }

        if ( jsonData.omdType == "powerExpression" ) { var N = new omdPowerExpression(); }

        if ( jsonData.omdType == "rationalExpression" ) { var N = new omdRationalExpression(); }

        if ( jsonData.omdType == "function" ) { var N = new omdFunction(); }

        if ( jsonData.omdType == "equation" ) { var N = new omdEquation(); }

        if ( jsonData.omdType == "numberLine" ) { var N = new omdNumberLine(); } 

        if ( jsonData.omdType == "balanceHanger" )
        {
            var N = new omdBalanceHanger();
            N.setPosition( 150, 0 );
        }

        if ( jsonData.omdType == "tapeDiagram" ) { var N = new omdTapeDiagram(); }

        if ( jsonData.omdType == "numberTile" ) { var N = new omdNumberTile(); }

        if ( jsonData.omdType == "ratioChart" ) { var N = new omdRatioChart(); } 

        if ( jsonData.omdType == "coordinatePlane" ) { var N = new omdCoordinatePlane(); } 

        if ( jsonData.omdType == "spinner" ) { var N = new omdSpinner(); } 

        N.setPosition( 0,30 );

        // load from json
        N.loadFromJSON( jsonData );

        // add to the AI holder
        this.addChild( N );
    }

    getSVG()
    {
        return this.svgObject;
    }

    getDiv()
    {
        const newDiv = document.createElement("div");
        newDiv.style.width = this.width + 'px';
        newDiv.style.height = this.height + 'px';
        newDiv.style.overflow = 'visible'
        newDiv.appendChild( this.svgObject );
        return newDiv;
    }
}