@teachinglab/omd 0.1.0

package/src/omdCoordinatePlane.js

@@ -0,0 +1,467 @@
+import { omdColor } from "./omdColor.js";
+import { jsvgGroup, jsvgRect, jsvgClipMask, jsvgLine, jsvgEllipse, jsvgTextBox, jsvgPath } from "@teachinglab/jsvg";
+import {
+    omdRightTriangle,
+    omdIsoscelesTriangle,
+    omdRectangle,
+    omdEllipse,
+    omdCircle,
+    omdRegularPolygon
+} from "./omdShapes.js";
+
+export class omdCoordinatePlane extends jsvgGroup {
+    constructor() {
+        super();
+        this.graphEquations = [];
+        this.lineSegments = [];
+        this.dotValues = [];
+        this.shapeSet = [];
+
+        this.xMin = -5;
+        this.xMax = 5;
+        this.yMin = -5;
+        this.yMax = 5;
+
+        this.xLabel = "";
+        this.yLabel = "";
+        this.axisLabelOffsetPx = 20; //offset from axes
+
+        this.size = "medium";
+
+        this.tickInterval = 1; //interval between ticks
+        this.forceAllTickLabels = true; // show all tick labels despite potential overlap  
+        this.tickLabelOffsetPx = 5; //offset from axes
+        this.showTickLabels = true; // show numeric tick labels
+
+        this.calculatePadding();
+        this.updateLayout();
+    }
+
+    
+
+    loadFromJSON(data) {
+        // Assume valid JSON shape
+        this.graphEquations = data.graphEquations || [];
+        this.lineSegments = data.lineSegments || [];
+        this.dotValues = data.dotValues || [];
+        this.shapeSet = data.shapeSet || [];
+
+        this.xMin = (data.xMin !== undefined) ? data.xMin : this.xMin;
+        this.xMax = (data.xMax !== undefined) ? data.xMax : this.xMax;
+        this.yMin = (data.yMin !== undefined) ? data.yMin : this.yMin;
+        this.yMax = (data.yMax !== undefined) ? data.yMax : this.yMax;
+
+        this.xLabel = (data.xLabel !== undefined) ? data.xLabel : this.xLabel;
+        this.yLabel = (data.yLabel !== undefined) ? data.yLabel : this.yLabel;
+        this.axisLabelOffsetPx = (data.axisLabelOffsetPx !== undefined) ? data.axisLabelOffsetPx : this.axisLabelOffsetPx;
+
+        this.size = (data.size !== undefined) ? data.size : this.size;
+
+        this.tickInterval = (data.tickInterval !== undefined) ? data.tickInterval : this.tickInterval;
+        this.tickLabelOffsetPx = (data.tickLabelOffsetPx !== undefined) ? data.tickLabelOffsetPx : this.tickLabelOffsetPx;
+        this.forceAllTickLabels = (data.forceAllTickLabels !== undefined) ? data.forceAllTickLabels : this.forceAllTickLabels;
+        this.showTickLabels = (data.showTickLabels !== undefined) ? data.showTickLabels : this.showTickLabels;
+
+        this.calculatePadding();
+        this.updateLayout();
+    }
+
+    
+
+    updateLayout() {
+        this.removeAllChildren();
+        this.calculateGraphDimensions();
+
+        const outerWidth = this.width;
+        const outerHeight = this.height;
+
+        const clipMask = new jsvgClipMask(outerWidth, outerHeight, 15);
+        this.addChild(clipMask);
+
+        const whiteRect = new jsvgRect();
+        whiteRect.setWidthAndHeight(outerWidth, outerHeight);
+        whiteRect.setFillColor(omdColor.lightGray);
+        whiteRect.setStrokeWidth(0);
+
+        if (whiteRect.setCornerRadius) {
+            whiteRect.setCornerRadius(15);
+        }
+
+        clipMask.addChild(whiteRect);
+
+        const contentGroup = new jsvgGroup();
+        contentGroup.setPosition(0, 0);
+        clipMask.addChild(contentGroup);
+
+        this.setWidthAndHeight(outerWidth, outerHeight);
+        this.svgObject.setAttribute("viewBox", `0 0 ${outerWidth} ${outerHeight}`);
+
+        const gridHolder = new jsvgGroup();
+        contentGroup.addChild(gridHolder);
+        this.makeGrid(gridHolder);
+
+        const graphClipMask = new jsvgClipMask(this.graphWidth, this.graphHeight, 0);
+        graphClipMask.setPosition(this.paddingLeft, this.paddingTop);
+        contentGroup.addChild(graphClipMask);
+
+        // Traditional explicit calls instead of dynamic invocation
+        const functionsHolder = new jsvgGroup();
+        graphClipMask.addChild(functionsHolder);
+        this.graphMultipleFunctions(functionsHolder);
+
+        const segmentsHolder = new jsvgGroup();
+        graphClipMask.addChild(segmentsHolder);
+        this.drawLineSegments(segmentsHolder);
+
+        const dotsHolder = new jsvgGroup();
+        graphClipMask.addChild(dotsHolder);
+        this.plotDots(dotsHolder);
+
+        const shapesHolder = new jsvgGroup();
+        graphClipMask.addChild(shapesHolder);
+        this.addShapes(shapesHolder);
+    }
+
+    createAxisGrid(gridHolder, isXAxis) {
+        const interval = this.tickInterval || 1;
+        const min = isXAxis ? this.xMin : this.yMin;
+        const max = isXAxis ? this.xMax : this.yMax;
+
+        const firstTick = Math.ceil(min);
+        const lastTick = Math.floor(max);
+        const minLabelSpacing = 10;
+
+        let lastLabelPos = -Infinity;
+        let zeroLineDrawn = false;
+
+        for (let value = firstTick; value <= lastTick; value += interval) {
+            const pos = this.computeAxisPos(isXAxis, value);
+
+            const line = new jsvgLine();
+            this.setAxisLineEndpoints(isXAxis, line, pos);
+            line.setStrokeColor("black");
+            line.setOpacity(value === 0 ? 1.0 : 0.15);
+            gridHolder.addChild(line);
+
+            if (value === 0) {
+                zeroLineDrawn = true;
+            }
+
+            const isEdgeTick = value === firstTick || value === lastTick;
+            const shouldShowLabel = this.showTickLabels && (
+                this.forceAllTickLabels ||
+                isEdgeTick ||
+                Math.abs(pos - lastLabelPos) >= minLabelSpacing
+            );
+
+            if (shouldShowLabel) {
+                this.addTickLabel(gridHolder, isXAxis, pos, value);
+                lastLabelPos = pos;
+            }
+        }
+
+        if (0 >= min && 0 <= max && !zeroLineDrawn) {
+            const zeroPos = this.computeAxisPos(isXAxis, 0);
+            const zeroLine = new jsvgLine();
+            this.setAxisLineEndpoints(isXAxis, zeroLine, zeroPos);
+            zeroLine.setStrokeColor("black");
+            zeroLine.setOpacity(1.0);
+            gridHolder.addChild(zeroLine);
+        }
+    }
+
+    createAxisLabels(gridHolder) {
+        if (this.xLabel) {
+            const w = Math.max(60, this.xLabel.length * 10);
+            const h = 20;
+            const xAxisLabel = new jsvgTextBox();
+
+            xAxisLabel.setWidthAndHeight(w, h);
+            xAxisLabel.setText(this.xLabel);
+            xAxisLabel.setFontSize(14);
+            xAxisLabel.setFontColor("black");
+            xAxisLabel.setAlignment("center");
+            xAxisLabel.setVerticalCentering();
+            xAxisLabel.setFontWeight(600);
+
+            const idealX = this.paddingLeft + this.graphWidth / 2 - w / 2;
+            const lx = Math.max(5, Math.min(idealX, this.width - w - 5));
+
+            xAxisLabel.setPosition(lx, this.height - this.paddingBottom + this.axisLabelOffsetPx);
+            gridHolder.addChild(xAxisLabel);
+        }
+        if (this.yLabel) {
+            const fontSize = 14;
+            const finalX = Math.max(15, this.paddingLeft - (this.axisLabelOffsetPx + 10));
+            const finalY = this.paddingTop + this.graphHeight / 2;
+            const labelGroup = new jsvgGroup();
+            const yAxisLabel = new jsvgTextLine();
+
+            yAxisLabel.setText(this.yLabel);
+            yAxisLabel.setFontSize(fontSize);
+            yAxisLabel.setFontColor("black");
+            yAxisLabel.setPosition(0, 0);
+            yAxisLabel.svgObject.setAttribute("text-anchor", "middle");
+            yAxisLabel.svgObject.setAttribute("dominant-baseline", "middle");
+            yAxisLabel.setFontWeight(600);
+
+            labelGroup.addChild(yAxisLabel);
+            labelGroup.svgObject.setAttribute("transform", `translate(${finalX}, ${finalY}) rotate(-90)`);
+
+            gridHolder.addChild(labelGroup);
+        }
+    }
+
+    makeGrid(gridHolder) {
+        this.createAxisGrid(gridHolder, true);
+        this.createAxisGrid(gridHolder, false);
+        this.createAxisLabels(gridHolder);
+    }
+
+    // ===== Helper functions =====
+
+    calculatePadding() {
+        this.paddingLeft = this.yLabel ? 50 : 30;
+        this.paddingBottom = this.xLabel ? 50 : 30;
+        this.paddingTop = 25;
+        this.paddingRight = 25;
+    }
+
+    computeAxisPos(isXAxis, value) {
+        return isXAxis
+            ? this.paddingLeft + (value - this.xMin) * this.xSpacer
+            : this.height - this.paddingBottom - (value - this.yMin) * this.ySpacer;
+    }
+
+    setAxisLineEndpoints(isXAxis, line, pos) {
+        if (isXAxis) {
+            line.setEndpoints(pos, this.paddingTop, pos, this.height - this.paddingBottom);
+        } else {
+            line.setEndpoints(this.paddingLeft, pos, this.width - this.paddingRight, pos);
+        }
+    }
+
+    addTickLabel(gridHolder, isXAxis, pos, value) {
+        const label = this.createNumericLabel(value);
+        if (isXAxis) {
+            const lx = Math.max(10, Math.min(pos - 10, this.width - 30));
+            label.setPosition(lx, this.height - this.paddingBottom + this.tickLabelOffsetPx);
+        } else {
+            const lx = Math.max(5, this.paddingLeft - (this.tickLabelOffsetPx + 20));
+            const ly = Math.max(7.5, Math.min(pos - 7.5, this.height - 15));
+            label.setPosition(lx, ly);
+        }
+        gridHolder.addChild(label);
+    }
+
+    toGraphPixelX(x) {
+        return (x - this.xMin) * this.xSpacer;
+    }
+    toGraphPixelY(y) {
+        return this.graphHeight - (y - this.yMin) * this.ySpacer;
+    }
+
+    createNumericLabel(text) {
+        const label = new jsvgTextBox();
+        label.setWidthAndHeight(20, 15);
+        label.setText(String(text));
+        label.setFontSize(9);
+        label.setFontColor(this.getAllowedColor("black"));
+        label.setAlignment("center");
+        label.setVerticalCentering();
+        return label;
+    }
+
+    getAllowedColor(inputColor) {
+        if (!inputColor) return "black";
+        const k = String(inputColor).trim();
+        return omdColor[k.toLowerCase()] || k || "black"; //first try omdColor, then try string, then black
+    }
+
+    assignFromData(data, mappings) {
+        for (const [key, type] of Object.entries(mappings)) {
+            if (typeof data[key] === type) this[key] = data[key];
+        }
+    }
+
+    calculateGraphDimensions() {
+        let baseSize = 200;
+        let dotSize = 8;
+
+        if (this.size === "large") {
+            baseSize = 300;
+            dotSize = 12;
+        } else if (this.size === "small") {
+            baseSize = 100;
+            dotSize = 6;
+        }
+
+        this.dotSize = dotSize;
+        this.xSpan = this.xMax - this.xMin;
+        this.ySpan = this.yMax - this.yMin;
+
+        const unit = Math.min(baseSize / this.xSpan, baseSize / this.ySpan);
+
+        this.graphWidth = unit * this.xSpan;
+        this.graphHeight = unit * this.ySpan;
+
+        this.width = this.graphWidth + this.paddingLeft + this.paddingRight;
+        this.height = this.graphHeight + this.paddingTop + this.paddingBottom;
+
+        this.xSpacer = unit;
+        this.ySpacer = unit;
+        
+        this.originX = this.paddingLeft - this.xMin * this.xSpacer;
+        this.originY = this.height - this.paddingBottom + this.yMin * this.ySpacer;
+    }
+
+    graphMultipleFunctions(holder) {
+        for (const functionConfig of this.graphEquations) {
+            const path = new jsvgPath();
+            path.setStrokeColor(this.getAllowedColor(functionConfig.color));
+            path.setStrokeWidth(functionConfig.strokeWidth);
+            this.graphFunctionWithDomain(path, functionConfig.equation, functionConfig.domain);
+            holder.addChild(path);
+
+            if (functionConfig.label) {
+                this.addFunctionLabel(holder, functionConfig);
+            }
+        }
+    }
+
+    graphFunctionWithDomain(pathObject, functionString, domain) {
+        pathObject.clearPoints();
+
+        let expression = functionString;
+        if (expression.toLowerCase().startsWith("y=")) {
+            expression = expression.substring(2).trim();
+        }
+
+        const compiledExpression = math.compile(expression);
+
+        const leftLimit = domain.min;
+        const rightLimit = domain.max;
+
+        const step = Math.abs(rightLimit - leftLimit) / 1000;
+        for (let x = leftLimit; x <= rightLimit; x += step) {
+            const y = compiledExpression.evaluate({ x });
+            pathObject.addPoint(this.toGraphPixelX(x), this.toGraphPixelY(y));
+        }
+        pathObject.updatePath();
+    }
+
+    addFunctionLabel(holder, functionConfig) {
+        const labelText = String(functionConfig.label);
+        const fontSize = 12;
+        const padding = 6;
+        const estimatedWidth = Math.max(40, labelText.length * (fontSize * 0.6));
+        const estimatedHeight = fontSize + padding;
+
+        const label = new jsvgTextBox();
+        label.setWidthAndHeight(estimatedWidth, estimatedHeight);
+        label.setText(labelText);
+        label.setFontSize(fontSize);
+        label.setFontColor(this.getAllowedColor(functionConfig.color || "black"));
+        label.setAlignment("center");
+        label.setVerticalCentering();
+        label.setFontWeight(500);
+
+        const anchorX = (typeof functionConfig.labelAtX === 'number')
+            ? functionConfig.labelAtX
+            : this.xMin + (this.xMax - this.xMin) * 0.1;
+
+        let anchorY = this.yMin + (this.yMax - this.yMin) * 0.1;
+        let equationBody = functionConfig.equation;
+        if (equationBody.toLowerCase().startsWith("y=")) {
+            equationBody = equationBody.substring(2).trim();
+        }
+        const compiled = math.compile(equationBody);
+        const yVal = compiled.evaluate({ x: anchorX });
+        anchorY = yVal;
+
+        const xPx = this.toGraphPixelX(anchorX);
+        const yPx = this.toGraphPixelY(anchorY);
+
+        const positionPref = (functionConfig.labelPosition || 'below').toLowerCase();
+        const offset = 10;
+        let finalX = xPx;
+        let finalY = yPx;
+        switch (positionPref) {
+            case 'above':
+                finalY = yPx - offset;
+                break;
+            case 'below':
+                finalY = yPx + offset;
+                break;
+            case 'left':
+                finalX = xPx - offset;
+                break;
+            case 'right':
+                finalX = xPx + offset;
+                break;
+            default:
+                finalY = yPx + offset;
+        }
+
+        label.setPosition(finalX, finalY);
+        holder.addChild(label);
+    }
+
+    drawLineSegments(holder) {
+        for (const segment of this.lineSegments) {
+            const x1 = this.toGraphPixelX(segment.point1[0]);
+            const y1 = this.toGraphPixelY(segment.point1[1]);
+            const x2 = this.toGraphPixelX(segment.point2[0]);
+            const y2 = this.toGraphPixelY(segment.point2[1]);
+
+            const line = new jsvgLine();
+            line.setEndpoints(x1, y1, x2, y2);
+            line.setStrokeColor(this.getAllowedColor(segment.color || "blue"));
+            line.setStrokeWidth(segment.strokeWidth || 2);
+            holder.addChild(line);
+        }
+    }
+
+    plotDots(holder) {
+        for (const dot of this.dotValues) {
+            const pX = this.toGraphPixelX(dot[0]);
+            const pY = this.toGraphPixelY(dot[1]);
+
+            const ellipse = new jsvgEllipse();
+            ellipse.setWidthAndHeight(this.dotSize, this.dotSize);
+            ellipse.setPosition(pX, pY);
+            ellipse.setFillColor(this.getAllowedColor(dot.length >= 3 ? dot[2] : "black"));
+            holder.addChild(ellipse);
+        }
+    }
+
+    addShapes(holder) {
+        holder.setPosition(
+            -this.xMin * this.xSpacer,
+            this.graphHeight + this.yMin * this.ySpacer
+        );
+
+        const typeToCtor = {
+            rightTriangle: omdRightTriangle,
+            isoscelesTriangle: omdIsoscelesTriangle,
+            rectangle: omdRectangle,
+            ellipse: omdEllipse,
+            circle: omdCircle,
+            regularPolygon: omdRegularPolygon
+        };
+
+        for (const shapeData of this.shapeSet) {
+            const Ctor = typeToCtor[shapeData.omdType];
+            if (!Ctor) {
+                continue;
+            }
+            shapeData.unitScale = this.xSpacer;
+            const shape = new Ctor();
+            shape.loadFromJSON(shapeData);
+            if (shape.shapePath) {
+                shape.shapePath.setFillColor("none");
+            }
+            holder.addChild(shape);
+        }
+    }
+}

package/src/omdEquation.js

@@ -0,0 +1,125 @@
+
+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 );
+        }
+    }
+
+}

package/src/omdExpression.js

@@ -0,0 +1,104 @@
+
+
+import { omdColor } from "./omdColor.js";
+import { jsvgLayoutGroup } from "@teachinglab/jsvg";
+import { omdTerm } from "./omdTerm.js";
+import { omdOperator } from "./omdOperator.js";
+import { omdNumber } from "./omdNumber.js";
+import { omdVariable } from "./omdVariable.js";
+import { omdMetaExpression } from "./omdMetaExpression.js"
+
+export class omdExpression extends omdMetaExpression
+{
+    constructor()
+    {
+        // initialization
+        super();
+
+        this.type = "omdExpression";
+        this.termSet = [];
+        this.operatorSet = [];
+        
+        this.inset = 5;
+
+        this.expressionStack = new jsvgLayoutGroup();
+        this.expressionStack.setPosition( this.inset, 0 );
+        this.expressionStack.setSpacer(-6);
+        this.addChild( this.expressionStack );
+    }
+
+    loadFromJSON( data )
+    {
+        if ( typeof data.termsAndOpers != "undefined" )
+        {
+            for( var i=0; i<data.termsAndOpers.length; i++ )
+            {
+                var elem = data.termsAndOpers[i];
+                if ( elem.omdType == "term" )
+                {
+                    var T = new omdTerm();
+                    T.loadFromJSON( elem );
+                    T.hideBackgroundByDefault();
+                    this.termSet.push( T );
+                    this.expressionStack.addChild( T );
+                }
+                else if ( elem.omdType == "variable" )
+                {
+                    var T = new omdVariable();
+                    T.loadFromJSON( elem );
+                    T.hideBackgroundByDefault();
+                    this.termSet.push( T );
+                    this.expressionStack.addChild( T );
+                }
+                else if ( elem.omdType == "number" )
+                {
+                    var T = new omdNumber();
+                    T.loadFromJSON( elem );
+                    T.hideBackgroundByDefault();
+                    this.termSet.push( T );
+                    this.expressionStack.addChild( T );
+                }
+                else if ( elem.omdType == "operator" )
+                {
+                    var P = new omdOperator();
+                    P.loadFromJSON( elem );
+                    P.hideBackgroundByDefault();
+                    this.operatorSet.push( P );
+                    this.expressionStack.addChild( P );
+                }
+            }
+        }
+
+        this.updateLayout();
+    }
+
+    addTerm( coefficient, variable='', exponent='1' )
+    {
+        var T = new omdTerm( coefficient, variable, exponent );
+        this.termSet.push( T );
+        this.expressionStack.addChild( T );
+        this.updateLayout();
+
+        T.hideBackgroundByDefault();
+    }
+
+    addOperator( oper )
+    {
+        var P = new omdOperator(oper);
+        this.operatorSet.push( P );
+        this.expressionStack.addChild( P );
+        this.updateLayout();
+
+        P.hideBackgroundByDefault();
+    }
+
+    updateLayout()
+    {
+        this.expressionStack.doHorizontalLayout();
+
+        var W = this.expressionStack.width;
+        this.backRect.setWidthAndHeight( W + this.inset*2, 30 );
+
+        this.setWidthAndHeight( this.backRect.width, this.backRect.height );
+    }
+}