@teachinglab/omd/src/omdEquation.js

omd

import { omdColor } from "./omdColor.js";
import { jsvgLayoutGroup, jsvgGroup } from "@teachinglab/jsvg";
import { omdOperator } from "./omdOperator.js";
import { omdMetaExpression } from "./omdMetaExpression.js"
import { omdTerm } from "./omdTerm.js";
import { omdExpression } from "./omdExpression.js";
import { omdVariable } from "./omdVariable.js";
import { omdString } from "./omdString.js";


export class omdEquation extends omdMetaExpression
{
    constructor()
    {
        // initialization
        super();

        this.type = "omdPowerExpression";
        
        this.leftExpression = null;
        this.rightExpression = null;
        
        this.centerEquation = true;
        this.inset = 5;

        this.equationStack = new jsvgLayoutGroup();
        this.equationStack.setSpacer(-7);
        this.addChild( this.equationStack );

        this.leftHolder = new jsvgGroup();
        this.equationStack.addChild( this.leftHolder );

        this.equalSign = new omdOperator('=');
        this.equationStack.addChild( this.equalSign );

        this.rightHolder = new jsvgGroup();
        this.equationStack.addChild( this.rightHolder );
    }

    // make an equation (x + 2) = (2x - 3)

    loadFromJSON( data )
    {
        if ( typeof data.leftExpression != "undefined" )
        {
            // console.log("A");
            // console.log( data.leftExpression );
            if ( data.leftExpression.omdType == "expression" )
                this.leftExpression = new omdExpression();
            if ( data.leftExpression.omdType == "number" )
                this.leftExpression = new omdNumber();
            if ( data.leftExpression.omdType == "variable" )
                this.leftExpression = new omdVariable();
            if ( data.leftExpression.omdType == "term" )
                this.leftExpression = new omdTerm();
            this.leftExpression.loadFromJSON( data.leftExpression  );
            this.leftHolder.removeAllChildren();
            this.leftHolder.addChild( this.leftExpression );
        }
        if ( typeof data.rightExpression != "undefined" )
        {
            // console.log("B");
            // console.log( data.exponentExpression );
            if ( data.rightExpression.omdType == "expression" )
                this.rightExpression = new omdExpression();
            if ( data.rightExpression.omdType == "number" )
                this.rightExpression = new omdNumber();
            if ( data.rightExpression.omdType == "variable" )
                this.rightExpression = new omdVariable();
            if ( data.rightExpression.omdType == "term" )
                this.rightExpression = new omdTerm();
            this.rightExpression.loadFromJSON( data.rightExpression  );
            this.rightHolder.removeAllChildren();
            this.rightHolder.addChild( this.rightExpression );
        }
        
        this.equalSign.hideBackgroundByDefault();
        this.leftExpression.hideBackgroundByDefault();
        this.rightExpression.hideBackgroundByDefault();

        this.centerEquation = false;
        this.updateLayout();
    }


    setLeftAndRightExpressions( leftExp, rightExp )
    {
        this.leftExpression = leftExp;
        this.leftHolder.removeAllChildren();
        this.leftHolder.addChild( leftExp );

        this.rightExpression = rightExp;
        this.rightHolder.removeAllChildren();
        this.rightHolder.addChild( rightExp );

        this.equalSign.hideBackgroundByDefault();
        this.leftExpression.hideBackgroundByDefault();
        this.rightExpression.hideBackgroundByDefault();

        this.updateLayout();
    }

    updateLayout()
    {
        this.leftHolder.setWidthAndHeight( this.leftExpression.width, this.leftExpression.height );
        this.rightHolder.setWidthAndHeight( this.rightExpression.width, this.rightExpression.height );

        this.equationStack.doHorizontalLayout();
        this.equationStack.setPosition( this.inset, 0 );

        var W = this.equationStack.width;
        this.backRect.setWidthAndHeight( W + this.inset*2, 30 );

        this.setWidthAndHeight( this.backRect.width, this.backRect.height );

        if ( this.centerEquation )
        {
            var leftShift = this.leftExpression.width + this.equalSign.width*0.50;
            this.backRect.setPosition( -1.0 * leftShift + this.inset/2, 0  );
            this.equationStack.setPosition( -1.0 * leftShift + this.inset + this.inset/2, 0 );
        }
    }

}