@teachinglab/omd 0.1.0

package/src/omdFunction.js

@@ -0,0 +1,113 @@
+
+import { omdColor } from "./omdColor.js";
+import { jsvgLayoutGroup, jsvgGroup } from "@teachinglab/jsvg";
+import { omdOperator } from "./omdOperator.js";
+import { omdExpression } from "./omdExpression.js";
+import { omdVariable } from "./omdVariable.js";
+import { omdString } from "./omdString.js";
+import { omdMetaExpression } from "./omdMetaExpression.js"
+
+export class omdFunction extends omdMetaExpression
+{
+    constructor()
+    {
+        // initialization
+        super();
+
+        this.type = "omdPowerExpression";
+        
+        this.leftExpression = null;
+        this.rightExpresion = null;
+        this.functionName = 'f';
+        this.inputVariableArray = [];
+        
+        this.centerEquation = false;
+        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 );
+    }
+
+    loadFromJSON( data )
+    {
+        if ( typeof data.name != "undefined" )
+        {
+            this.functionName = data.name;
+        }
+
+        if ( typeof data.inputVariables != "undefined" )
+        {
+            this.inputVariableArray = data.inputVariables;
+        }
+            
+        if ( typeof data.expression != "undefined" )
+        {
+            // console.log("A");
+            // console.log( data.expression );
+            if ( data.expression.omdType == "expression" )
+                this.rightExpresion = new omdExpression();
+            
+            this.rightExpresion.loadFromJSON(  data.expression  );
+            this.rightHolder.removeAllChildren();
+            this.rightHolder.addChild( this.rightExpresion );
+        }
+        
+        // format the f(x) part on the left
+        this.leftHolder.removeAllChildren();
+        var funcText = this.functionName + "(" + this.inputVariableArray[0] + ")";   // this should be refactored as a function call
+        this.leftExpression = new omdString(funcText);
+        this.leftHolder.addChild( this.leftExpression );
+    
+        this.updateLayout();
+    }
+    
+    setNameVariableAndExpression( funcName, funcVariable, rightExp )
+    {
+        this.leftHolder.removeAllChildren();
+        var funcText = funcName + "(" + funcVariable + ")";   // this should be refactored as a function call
+        this.leftExpression = new omdString(funcText);
+        this.leftHolder.addChild( this.leftExpression );
+
+        this.rightExpresion = rightExp;
+        this.rightHolder.removeAllChildren();
+        this.rightHolder.addChild( rightExp );
+
+        this.equalSign.hideBackgroundByDefault();
+        this.leftExpression.hideBackgroundByDefault();
+        this.rightExpresion.hideBackgroundByDefault();
+
+        this.updateLayout();
+    }
+
+    updateLayout()
+    {
+        this.leftHolder.setWidthAndHeight( this.leftExpression.width, this.leftExpression.height );
+        this.rightHolder.setWidthAndHeight( this.rightExpresion.width, this.rightExpresion.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/omdMetaExpression.js

@@ -0,0 +1,287 @@
+import { omdColor } from "./omdColor.js";
+import { jsvgGroup, jsvgRect } from "@teachinglab/jsvg";
+
+export class omdMetaExpression extends jsvgGroup
+{
+    constructor( V = 1 )
+    {
+        // initialization
+        super();
+
+        this.type = "";
+        this.value = V;
+        
+        this.defaultOpaqueBack = true;
+
+        this.backRect = new jsvgRect();
+        this.backRect.setWidthAndHeight( 30,30 );
+        this.backRect.setCornerRadius( 5 );
+        this.backRect.setFillColor( omdColor.lightGray );
+        this.addChild( this.backRect );
+
+        // Old events for selection - we will replace these with provenance highlighting
+        // this.svgObject.onmouseenter = this.select.bind(this);
+        // this.svgObject.onmouseleave = this.deselect.bind(this);
+        
+        // New events for provenance highlighting
+        this.svgObject.onmouseenter = this.highlightProvenance.bind(this);
+        this.svgObject.onmouseleave = this.clearProvenance.bind(this);
+        this.svgObject.style.cursor = "pointer";
+    }
+
+    /* Gerard - ADDED */
+    setWidthAndHeight(w, h) {
+        super.setWidthAndHeight(w, h);
+        this.backRect.setWidthAndHeight(w, h);
+    }
+    setFontSize(fontSize) {
+        this.fontSize = fontSize;
+        
+        // Propagate font size to all children that support it
+        if (this.childList) {
+            this.childList.forEach(child => {
+                if (child && typeof child.setFontSize === 'function') {
+                    child.setFontSize(fontSize);
+                }
+            });
+        }
+    }
+    getFontSize() {
+        if (this.fontSize) return this.fontSize;
+
+        if (this.parent && typeof this.parent.getFontSize === 'function') {
+            return this.parent.getFontSize();
+        }
+
+        return 16; // Default fallback
+    }
+    getRootFontSize() {
+        if (this.parent && (this.parent instanceof omdMetaExpression)) {
+            return this.parent.getRootFontSize();
+        }
+        // No parent, so this is the root. Return its font size or default.
+        return this.fontSize || 16;
+    }
+
+    // ===== PROVENANCE HIGHLIGHTING =====
+
+    highlightProvenance(event, color = omdColor.hiliteColor, minStepNumber = -Infinity) {
+        // Prevent event from bubbling up to parent containers and causing flickering
+        event.stopPropagation();
+
+        const rootNode = this.getRootNode();
+        if (!rootNode || !rootNode.nodeMap) return;
+
+        // Clear any previous highlights from the entire sequence
+        rootNode.clearProvenanceHighlights();
+
+        // Highlight the node being hovered over
+        this.highlight(color);
+        
+        // Use an iterative approach to traverse the provenance chain
+        let nodesToProcess = [...this.provenance];
+        const visited = new Set(nodesToProcess);
+
+        while (nodesToProcess.length > 0) {
+            const currentId = nodesToProcess.shift(); // Get the next node to process
+            const node = rootNode.nodeMap.get(currentId);
+
+            if (node) {
+                node.highlight(color);
+                if (node.provenance) {
+                    node.provenance.forEach(pId => {
+                        if (!visited.has(pId)) {
+                            visited.add(pId);
+                            nodesToProcess.push(pId);
+                        }
+                    });
+                }
+            }
+        }
+    }
+    
+    clearProvenance(event) {
+        event.stopPropagation();
+        const rootNode = this.getRootNode();
+        if (rootNode) {
+            rootNode.clearProvenanceHighlights();
+        }
+    }
+    
+    highlight(color) {
+        this.backRect.setFillColor(color);
+        this.backRect.setOpacity(1.0);
+
+        // also highlight children
+        this.childList.forEach((child) => {
+            if (child instanceof omdMetaExpression)
+                child.highlight(color);
+        });
+    }
+
+    clearProvenanceHighlights() {
+        // Preserve step visualizer highlights (explain highlights) if present
+        if (this.isExplainHighlighted) {
+            // Restore the explain highlight color and ensure full opacity
+            this.backRect.setFillColor(omdColor.explainColor);
+            this.backRect.setOpacity(1.0);
+        } else if (this.isProvenanceHighlighted) {
+            // Preserve step visualizer provenance highlights
+            this.backRect.setFillColor(omdColor.explainColor);
+            this.backRect.setOpacity(1.0);
+        } else {
+            // Reset to the default background state
+            this.backRect.setFillColor(omdColor.lightGray);
+            if (!this.defaultOpaqueBack) {
+                this.backRect.setOpacity(0.01);
+            }
+        }
+
+        // Recursively clear highlights for all children in the tree
+        this.childList.forEach((child) => {
+            if (child instanceof omdMetaExpression && typeof child.clearProvenanceHighlights === 'function') {
+                child.clearProvenanceHighlights();
+            }
+        });
+    }
+
+    /**
+     * Recursively applies or clears a persistent "explain" highlight.
+     * This is used by the step visualizer to mark nodes that have changed between steps.
+     * The highlight is preserved during hover events.
+     * @param {boolean} isOn - True to apply the highlight, false to clear it.
+     * @param {string} color - The color to use for the highlight.
+     */
+    setExplainHighlight(isOn = true, color = omdColor.explainColor) {
+        this.isExplainHighlighted = isOn;
+
+        if (isOn) {
+            this.backRect.setFillColor(color);
+            this.backRect.setOpacity(1.0);
+        } else {
+            // Reset to default state
+            this.backRect.setFillColor(omdColor.lightGray);
+            if (!this.defaultOpaqueBack) {
+                this.backRect.setOpacity(0.01);
+            }
+        }
+
+        // Use the same traversal logic as hover highlighting to recurse
+        if (this.argumentNodeList) {
+            Object.values(this.argumentNodeList).forEach(child => {
+                if (child && typeof child.setExplainHighlight === 'function') {
+                    child.setExplainHighlight(isOn, color);
+                }
+            });
+        }
+    }
+
+    getRootNode() {
+        let current = this;
+        // Traverse upwards as long as the parent is also part of the omd expression system
+        while (current.parent && (current.parent instanceof omdMetaExpression)) {
+            current = current.parent;
+        }
+        return current;
+    }
+
+    findAllNodes(nodes = []) {
+        nodes.push(this);
+        if (this.childList) {
+            this.childList.forEach(child => {
+                if (child.findAllNodes) { // Ensure child has the method
+                    child.findAllNodes(nodes);
+                }
+            });
+        }
+        return nodes;
+    }
+
+    // ===== OLD SELECTION LOGIC (can be removed or kept for other purposes) =====
+
+    select(root) {
+        if (root === this) return;
+
+        if (!(root instanceof omdMetaExpression)) root = this;
+
+        this.backRect.setFillColor( omdColor.hiliteColor );
+        this.backRect.setOpacity( 1.0 );
+
+        this.childList.forEach((child) => {
+            if (child instanceof omdMetaExpression)
+                child.select(root);
+        });
+
+        if (this === root && this.parent instanceof omdMetaExpression)
+            root.parent.deselect(root);
+    }
+
+    deselect(root) {
+        if (!(root instanceof omdMetaExpression)) root = this;
+
+        if (this === root && this.parent instanceof omdMetaExpression)
+            root.parent.select(root);
+
+        if (root === this && this.parent instanceof omdMetaExpression) return;
+        
+        this.backRect.setFillColor( omdColor.lightGray );
+        if ( this.defaultOpaqueBack == false )
+           this.backRect.setOpacity(0.01);
+        
+        this.childList.forEach((child) => {
+            if (child !== root && child instanceof omdMetaExpression) 
+                child.deselect(root);
+        });
+
+    }
+
+    // select(root)
+    // {
+    //     this.backRect.setFillColor( omdColor.hiliteColor );
+    //     this.backRect.setOpacity( 1.0 );
+        
+    //     if (!(root instanceof omdMetaExpression))
+    //         root = this;
+
+    //     this.childList.forEach((child) => {
+    //         if (child instanceof omdMetaExpression)
+    //             child.select(root);
+    //     });
+    //     if (this === root)
+    //         this.unselectParents(root);
+    // }
+
+    // deselect(root)
+    // {
+    //     this.backRect.setFillColor( omdColor.lightGray );
+    //     if ( this.defaultOpaqueBack == false )
+    //         this.backRect.setOpacity(0.01);
+
+    //     this.childList.forEach((child) => {
+    //         if (child !== root && child instanceof omdMetaExpression) {
+    //             child.deselect(root);
+    //         }
+    //     });
+
+    //     if (this.parent instanceof omdMetaExpression)
+    //         this.parent.select(this.parent);
+    // }
+
+    // unselectParents(root)
+    // {
+    //     if (this.parent instanceof omdMetaExpression) { 
+    //         this.parent.unselectParents(root);
+    //         this.parent.deselect(root);
+    //     }
+    // }
+
+    hideBackgroundByDefault()
+    {
+        this.defaultOpaqueBack = false;
+        this.backRect.setOpacity(0.01);
+    }
+    
+    makeBackgroundLight() { this.backRect.setFillColor( omdColor.lightGray ) }
+    makeBackgroundDark() { this.backRect.setFillColor( omdColor.mediumGray ) }
+
+}