@teachinglab/omd 0.1.0

package/src/omdNode.js

@@ -0,0 +1,384 @@
+import { omdMetaExpression } from "../src/omdMetaExpression.js";
+import { jsvgTextLine, jsvgLine } from "@teachinglab/jsvg";
+
+/**
+ * omdNode - A minimal class representing a node in the expression tree
+ * Focuses purely on tree structure and layout, delegates visuals to superclasses
+ * Uses math.js AST format
+ */
+export class omdNode extends omdMetaExpression {
+    /**
+     * Constructor - Creates a tree node from math.js AST data
+     * @param {Object} nodeData - The AST node from math.js parser
+     */
+    constructor(nodeData) {
+        super();
+        
+        this.type = "omdNode";
+        this.nodeData = nodeData; // The AST node from math.js
+        this.childNodes = []; // Array of child omdNodes
+        this.edgeLines = []; // Array of edge lines
+        this.zoomLevel = 1.0; // Current zoom level
+        
+        // Initialize the tree structure
+        this.initializeNode();
+    }
+
+    /**
+     * Sets zoom level for this node and all children recursively
+     * @param {number} zoom - The zoom level (1.0 = 100%, 2.0 = 200%, etc.)
+     */
+    setZoomLevel(zoom) {
+        this.zoomLevel = zoom;
+        // Apply to all child nodes
+        this.childNodes.forEach(child => child.setZoomLevel(zoom));
+        // Invalidate cached dimensions
+        this.invalidateCache();
+    }
+
+    /**
+     * Gets the width of this node, scaled by zoom level
+     * @returns {number} The node width in pixels
+     */
+    get nodeWidth() {
+        if (!this._cachedWidth) {
+            // Use superclass text measurement if available, otherwise estimate
+            const label = this.getNodeLabel();
+            const baseWidth = Math.max(label.length * 12 + 20, 60);
+            this._cachedWidth = baseWidth * this.zoomLevel;
+        }
+        return this._cachedWidth;
+    }
+
+    /**
+     * Gets the height of this node, scaled by zoom level
+     * @returns {number} The node height in pixels
+     */
+    get nodeHeight() {
+        return 50 * this.zoomLevel;
+    }
+
+    /**
+     * Gets the total width needed for this entire subtree
+     * @returns {number} The subtree width in pixels
+     */
+    get subtreeWidth() {
+        if (this.childNodes.length === 0) {
+            return this.nodeWidth;
+        }
+        
+        const childSubtreeWidths = this.childNodes.map(child => child.subtreeWidth);
+        const totalChildWidth = childSubtreeWidths.reduce((sum, width) => sum + width, 0);
+        const spacing = (this.childNodes.length - 1) * this.nodeSpacing;
+        
+        return Math.max(this.nodeWidth, totalChildWidth + spacing);
+    }
+
+    /**
+     * Gets the horizontal spacing between child nodes, scaled by zoom level
+     * @returns {number} The spacing in pixels
+     */
+    get nodeSpacing() {
+        return 100 * this.zoomLevel;
+    }
+
+    /**
+     * Gets the vertical spacing between tree levels, scaled by zoom level
+     * @returns {number} The level height in pixels
+     */
+    get levelHeight() {
+        return 120 * this.zoomLevel;
+    }
+
+    /**
+     * Invalidates cached dimension calculations when content changes
+     */
+    invalidateCache() {
+        this._cachedWidth = null;
+        if (this.parent && this.parent.invalidateCache) {
+            this.parent.invalidateCache();
+        }
+    }
+
+    /**
+     * Main initialization method - sets up visuals, creates children, and layouts tree
+     */
+    initializeNode() {
+        this.setupVisuals();
+        this.createChildNodes();
+        this.layoutTree();
+    }
+
+    /**
+     * Creates the visual elements for this node (text label and background)
+     */
+    setupVisuals() {
+        // Create text label using jsvg
+        this.nodeLabel = new jsvgTextLine();
+        this.nodeLabel.setText(this.getNodeLabel());
+        this.nodeLabel.setFontSize(24 * this.zoomLevel);
+        this.nodeLabel.setAlignment('center');
+
+        // Update superclass background size
+        this.updateSize();
+        
+        // Position text at center
+        this.nodeLabel.setPosition(this.nodeWidth/2, this.nodeHeight/2);
+        this.addChild(this.nodeLabel);
+    }
+
+    /**
+     * Updates the size of visual elements to match calculated dimensions
+     */
+    updateSize() {
+        // Update the superclass background rectangle
+        this.backRect.setWidthAndHeight(this.nodeWidth, this.nodeHeight);
+        this.setWidthAndHeight(this.nodeWidth, this.nodeHeight);
+    }
+
+    /**
+     * Creates child nodes from AST data and connecting edge lines
+     */
+    createChildNodes() {
+        const childrenData = this.getNodeChildren();
+
+        childrenData.forEach((childData, index) => {
+            // Create child node
+            const childNode = new omdNode(childData); 
+            childNode.parent = this;
+            this.childNodes.push(childNode); 
+            this.addChild(childNode); 
+
+            // Create edge line
+            const edge = new jsvgLine();
+            edge.setStrokeWidth(3);
+            this.edgeLines.push(edge);
+            this.addChild(edge); 
+        });
+    }
+
+    /**
+     * Recursively layouts the entire tree structure
+     */
+    layoutTree() {
+        if (this.childNodes.length === 0) return;
+        
+        // Layout children first to get their final sizes
+        this.childNodes.forEach(child => child.layoutTree());
+        
+        // Calculate positions
+        this.positionChildren();
+        this.updateEdges();
+    }
+
+    /**
+     * Positions child nodes horizontally to center them under this node
+     */
+    positionChildren() {
+        if (this.childNodes.length === 0) return;
+
+        // Calculate starting position to center children
+        const totalWidth = this.childNodes.reduce((sum, child) => sum + child.subtreeWidth, 0);
+        const totalSpacing = (this.childNodes.length - 1) * this.nodeSpacing;
+        const totalRequiredWidth = totalWidth + totalSpacing;
+        
+        const startX = -totalRequiredWidth / 2 + this.nodeWidth / 2;
+        const childY = this.nodeHeight + this.levelHeight;
+        
+        let currentX = startX;
+        
+        this.childNodes.forEach((child, index) => {
+            // Center child in its allocated subtree space
+            const childX = currentX + child.subtreeWidth / 2 - child.nodeWidth / 2;
+            
+            // Position using jsvg method
+            child.setPosition(childX, childY);
+            
+            // Move to next position
+            currentX += child.subtreeWidth + this.nodeSpacing;
+        });
+    }
+
+    /**
+     * Updates the connecting edge lines between this node and its children
+     */
+    updateEdges() {
+        this.childNodes.forEach((child, index) => {
+            if (this.edgeLines[index]) {
+                // Connect center-bottom of parent to center-top of child
+                const parentCenterX = this.nodeWidth / 2;
+                const parentBottomY = this.nodeHeight;
+                
+                const childCenterX = child.xpos + child.nodeWidth / 2;
+                const childTopY = child.ypos;
+                
+                this.edgeLines[index].setEndpointA(parentCenterX, parentBottomY);
+                this.edgeLines[index].setEndpointB(childCenterX, childTopY);
+            }
+        });
+    }
+
+    /**
+     * Extracts child node data from the math.js AST based on node type
+     * @returns {Array} Array of child AST nodes
+     */
+    getNodeChildren() {
+        if (!this.nodeData) return [];
+        
+        const nodeType = this.detectNodeType();
+        
+        // Handle math.js node types
+        switch (nodeType) {
+            case 'FunctionNode':
+                return this.nodeData.args || [];
+            case 'MatrixNode':
+                return this.nodeData.args || [];
+            case 'OperatorNode':
+                return this.nodeData.args || [];
+            case 'ParenthesisNode':
+                return [this.nodeData.content];
+            case 'ArrayNode':
+                return this.nodeData.items || [];
+            case 'IndexNode':
+                return [this.nodeData.object, this.nodeData.index];
+            case 'AccessorNode':
+                return [this.nodeData.object, this.nodeData.index];
+            case 'AssignmentNode':
+                return [this.nodeData.object, this.nodeData.value];
+            case 'ConditionalNode':
+                return [this.nodeData.condition, this.nodeData.trueExpr, this.nodeData.falseExpr];
+            default:
+                return [];
+        }
+    }
+
+    /**
+     * Determines the type of math.js AST node by examining its properties
+     * @returns {string} The node type (e.g., 'OperatorNode', 'ConstantNode', etc.)
+     */
+    detectNodeType() {
+        if (!this.nodeData) return 'Unknown';
+        
+        // Check for properties that uniquely identify each node type
+        if (this.nodeData.hasOwnProperty('op') && this.nodeData.hasOwnProperty('args')) {
+            return 'OperatorNode';
+        } else if (this.nodeData.hasOwnProperty('fn') && this.nodeData.hasOwnProperty('args')) {
+            if (this.nodeData.fn === 'matrix') {
+                return 'MatrixNode';
+            }
+            return 'FunctionNode';
+        } else if (this.nodeData.hasOwnProperty('value')) {
+            return 'ConstantNode';
+        } else if (this.nodeData.hasOwnProperty('name') && !this.nodeData.hasOwnProperty('args')) {
+            return 'SymbolNode';
+        } else if (this.nodeData.hasOwnProperty('content')) {
+            return 'ParenthesisNode';
+        } else if (this.nodeData.hasOwnProperty('items')) {
+            return 'ArrayNode';
+        } else if (this.nodeData.hasOwnProperty('object') && this.nodeData.hasOwnProperty('index')) {
+            return 'IndexNode';
+        } else if (this.nodeData.hasOwnProperty('condition')) {
+            return 'ConditionalNode';
+        }
+        
+        return 'Unknown';
+    }
+
+    /**
+     * Generates the display label for this node based on its AST data
+     * @returns {string} The text label to display in the node
+     */
+    getNodeLabel() {
+        const nodeType = this.detectNodeType();
+        
+        switch (nodeType) {
+            case 'ConstantNode':
+                return this.nodeData.value.toString();
+            case 'SymbolNode':
+                return this.nodeData.name;
+            case 'FunctionNode':
+                return this.nodeData.fn.name || this.nodeData.fn;
+            case 'MatrixNode':
+                if (this.nodeData.args && this.nodeData.args.length > 0) {
+                    const firstArg = this.nodeData.args[0];
+                    if (firstArg && firstArg.items) {
+                        const rows = firstArg.items.length;
+                        const cols = firstArg.items[0] && firstArg.items[0].items ? firstArg.items[0].items.length : 1;
+                        return `Matrix ${rows}×${cols}`;
+                    }
+                }
+                return 'Matrix';
+            case 'OperatorNode':
+                const operatorMap = {
+                    'add': '+',
+                    'subtract': '-',
+                    'multiply': '*',
+                    'divide': '/',
+                    'pow': '^',
+                    'unaryMinus': '-',
+                    'unaryPlus': '+'
+                };
+                return operatorMap[this.nodeData.fn] || this.nodeData.fn;
+            case 'ParenthesisNode':
+                return '( )';
+            case 'ArrayNode':
+                return '[ ]';
+            case 'IndexNode':
+                return '[]';
+            case 'AccessorNode':
+                return '.';
+            case 'AssignmentNode':
+                return '=';
+            case 'ConditionalNode':
+                return '?:';
+            default:
+                return nodeType || '?';
+        }
+    }
+
+    /**
+     * Calculates the bounding box of this entire subtree
+     * @returns {Object} Object with left, right, top, bottom coordinates
+     */
+    getTreeBounds() {
+        const myX = this.xpos || 0;
+        const myY = this.ypos || 0;
+        
+        if (this.childNodes.length === 0) {
+            return {
+                left: myX,
+                right: myX + this.nodeWidth,
+                top: myY,
+                bottom: myY + this.nodeHeight
+            };
+        }
+
+        let left = myX;
+        let right = myX + this.nodeWidth;
+        let top = myY;
+        let bottom = myY + this.nodeHeight;
+        
+        this.childNodes.forEach(child => {
+            const childBounds = child.getTreeBounds();
+            left = Math.min(left, childBounds.left);
+            right = Math.max(right, childBounds.right);
+            top = Math.min(top, childBounds.top);
+            bottom = Math.max(bottom, childBounds.bottom);
+        });
+
+        return { left, right, top, bottom };
+    }
+
+    /**
+     * Gets the total dimensions of this tree for layout purposes
+     * @returns {Object} Object with width, height, and bounds
+     */
+    getTreeDimensions() {
+        const bounds = this.getTreeBounds();
+        return {
+            width: bounds.right - bounds.left,
+            height: bounds.bottom - bounds.top,
+            bounds: bounds
+        };
+    }
+} 

package/src/omdNumber.js

@@ -0,0 +1,53 @@
+
+import { omdColor } from "./omdColor.js";
+import { omdMetaExpression } from "./omdMetaExpression.js"
+
+export class omdNumber extends omdMetaExpression
+{
+    constructor( V = 1 )
+    {
+        // initialization
+        super();
+
+        this.type = "omdNumber";
+        this.value = V;
+
+        this.numText = new jsvgTextBox();
+        this.numText.setWidthAndHeight( 30,30 );
+        this.numText.setText ( this.value.toString() );
+        this.numText.setFontFamily( "Albert Sans" );
+        this.numText.setFontColor( "black" );
+        this.numText.setFontSize( 18 );
+        this.numText.setVerticalCentering();
+        this.numText.setAlignment("center");
+        // this.numText.div.style.border = "1px solid black";
+        this.addChild( this.numText );
+
+        this.setValue( V );
+    }
+
+    loadFromJSON( data )
+    {
+        if ( typeof data.value != "undefined" )
+            this.value = data.value;
+
+        this.updateLayout();
+    }
+
+    setValue( V )
+    {
+        this.value = V;
+        this.updateLayout();   
+    }
+
+    updateLayout()
+    {
+        var T = this.value.toString();
+        var W = 10 + T.length*10;
+        this.backRect.setWidthAndHeight( W, 30 );
+        this.numText.setWidthAndHeight( W, 30 );
+        this.numText.setText ( this.value.toString() );
+
+        this.setWidthAndHeight( this.backRect.width, this.backRect.height );
+    }
+}

package/src/omdNumberLine.js

@@ -0,0 +1,107 @@
+
+import { omdColor } from "./omdColor.js";
+import { jsvgGroup, jsvgRect, jsvgLine, jsvgTextBox, jsvgEllipse } from "@teachinglab/jsvg";
+
+export class omdNumberLine extends jsvgGroup
+{
+    constructor()
+    {
+        // initialization
+        super();
+
+        this.type = "omdNumberLine";
+
+        this.min = 0;
+        this.max = 10;
+        this.dotValues = []; 
+        this.label = "";  
+        this.updateLayout();
+    }
+
+    loadFromJSON( data )
+    {
+        if ( typeof data.min != "undefined" )
+            this.min = data.min;
+
+        if ( typeof data.max != "undefined" )
+            this.max = data.max;
+
+        if ( typeof data.dotValues != "undefined" )
+            this.dotValues = data.dotValues;
+
+        if ( typeof data.label != "undefined" )
+            this.label = data.label;
+
+        this.updateLayout();
+    }
+
+    setMinAndMax( min, max )
+    {
+        this.min = min;
+        this.max = max;
+    }
+
+    addNumberDot( V )
+    {
+        this.dotValues.push( V );
+    }
+
+    updateLayout()
+    {
+        this.removeAllChildren();
+
+        // make line
+        this.line = new jsvgRect();
+        // this.line.setStrokeColor( "black" );
+        // this.line.setStrokeWidth( 1 );
+        // this.line.setEndpoints( 0,0, 300, 0 );
+        this.line.setWidthAndHeight(320,5);
+        this.line.setPosition( -10, -2.5 );
+        this.line.setFillColor( omdColor.mediumGray );
+        this.line.setCornerRadius( 2.5 );
+        this.addChild( this.line );
+
+        // make ticks with text
+        for( var i=this.min; i<=this.max; i++ )
+        {
+            var N = i - this.min;
+            var dX = 300 / (this.max - this.min);
+
+            var pX = N*dX;
+
+            var tick = new jsvgLine();
+            tick.setStrokeColor( "black" );
+            tick.setStrokeWidth( 1 );
+            tick.setEndpoints( pX, -5, pX, 5 );
+            this.addChild( tick );
+
+            var tickText = new jsvgTextBox();
+            tickText.setWidthAndHeight( 30,30 );
+            tickText.setText ( this.name );
+            tickText.setFontFamily( "Albert Sans" );
+            tickText.setFontColor( "black" );
+            tickText.setFontSize( 10 );
+            tickText.setAlignment("center");
+            tickText.setText( i.toString() );
+            tickText.setPosition( pX-15, 10 );
+            this.addChild( tickText );
+        }
+
+        // make dots
+        for( var i=0; i<this.dotValues.length; i++ )
+        {
+            var V = this.dotValues[i];
+
+            var N = V - this.min;
+            var dX = 300 / (this.max - this.min);
+            var pX = N*dX;
+
+            var dot = new jsvgEllipse();
+            dot.setFillColor( "black" );
+            dot.setWidthAndHeight( 10,10 );
+            dot.setPosition( pX, 0 );
+            this.addChild( dot );
+        }
+    }
+
+}

package/src/omdNumberTile.js

@@ -0,0 +1,119 @@
+import {
+    omdColor
+} from "./omdColor.js";
+import { jsvgGroup, jsvgRect, jsvgEllipse } from "@teachinglab/jsvg";
+
+export class omdNumberTile extends jsvgGroup {
+    constructor() {
+        // initialization
+        super();
+
+        this.type = "omdNumberLine";
+
+        this.value = 1;
+        this.size = 'large';
+        this.dotsPerColumn = 10; // arrange dots in columns of 10 by default
+        this.backgroundColor = omdColor.lightGray;
+        this.dotColor = "black";
+        this.updateLayout();
+    }
+
+    loadFromJSON(data) {
+        if (typeof data.value != "undefined")
+            this.value = data.value;
+
+        if (typeof data.size != "undefined")
+            this.size = data.size;
+
+        if (typeof data.dotsPerColumn != "undefined")
+            this.dotsPerColumn = Math.max(1, Number(data.dotsPerColumn));
+
+        if (typeof data.backgroundColor != "undefined")
+            this.backgroundColor = data.backgroundColor;
+
+        if (typeof data.dotColor != "undefined")
+            this.dotColor = data.dotColor;
+
+        this.updateLayout();
+    }
+
+    setValue(V) {
+        this.value = V;
+        this.updateLayout();
+    }
+
+    setSize(size) {
+        this.size = size;
+        this.updateLayout();
+    }
+
+    updateLayout() {
+        this.removeAllChildren();
+
+        // Normalize inputs
+        const totalValue = Math.max(0, Number(this.value) || 0);
+        const perColumn = Math.max(1, Number(this.dotsPerColumn) || 1);
+
+        // 2) Sizing based on selected tile size
+        let dotSize;
+        if (this.size === 'large') {
+            dotSize = 15;
+        } else if (this.size === 'medium') {
+            dotSize = 12;
+        } else {
+            dotSize = 5;
+        }
+
+        const gap = Math.max(2, Math.round(dotSize * 0.6));
+        const pad = Math.max(3, Math.round(dotSize * 0.8));
+
+        // Grid geometry
+        const columns = Math.ceil(totalValue / perColumn);
+        const rowsTallest = Math.min(perColumn, totalValue);
+
+        // Expose for external alignment consumers
+        this._dotSize = dotSize;
+        this._pad = pad;
+
+        // Compute background rect 
+        const innerW = columns > 0 ? (columns * dotSize + (columns - 1) * gap) : 0;
+        const innerH = rowsTallest > 0 ? (rowsTallest * dotSize + (rowsTallest - 1) * gap) : 0;
+        const W = innerW + 2 * pad;
+        const H = innerH + 2 * pad;
+
+        const backRect = new jsvgRect();
+        backRect.setWidthAndHeight(W, H);
+        
+        // Pill for single column; rounded rectangle for multiple
+        const cornerR = (columns > 1) ? Math.round(dotSize) : Math.min(W, H) / 2;
+        backRect.setCornerRadius(cornerR);
+        backRect.setFillColor(this.backgroundColor || omdColor.lightGray);
+        this.addChild(backRect);
+
+        this.width = backRect.width;
+        this.height = backRect.height;
+        // Ensure group viewBox matches content so hosts size correctly
+        this.svgObject.setAttribute("viewBox", `0 0 ${this.width} ${this.height}`);
+
+        // Render dots top-down, perColumn dots per column
+        for (let i = 0; i < totalValue; i++) {
+            const col = Math.floor(i / perColumn);
+            const row = i % perColumn;
+            const cx = pad + col * (dotSize + gap) + dotSize / 2;
+            const cy = pad + row * (dotSize + gap) + dotSize / 2;
+            const dot = new jsvgEllipse();
+            dot.setFillColor(this.dotColor || "black");
+            dot.setWidthAndHeight(dotSize, dotSize);
+            dot.setPosition(cx, cy);
+            this.addChild(dot);
+        }
+    }
+
+    // Returns y of the top-most dot center in local coordinates
+    getTopDotCenterY() {
+        const pad = this._pad ?? 0;
+        const dotSize = this._dotSize ?? 0;
+        return pad + dotSize / 2;
+    }
+
+}