@teachinglab/omd 0.7.19 → 0.7.21

package/canvas/tools/PointerTool.js

@@ -669,22 +669,61 @@ export class PointerTool extends Tool {
      */
     _getOMDElementBounds(item) {
         try {
-            const bbox = item.getBBox();
             const transform = item.getAttribute('transform') || '';
             let offsetX = 0, offsetY = 0, scaleX = 1, scaleY = 1;
-            
+
             const translateMatch = transform.match(/translate\(\s*([^,]+)\s*,\s*([^)]+)\s*\)/);
             if (translateMatch) {
                 offsetX = parseFloat(translateMatch[1]) || 0;
                 offsetY = parseFloat(translateMatch[2]) || 0;
             }
-            
+
             const scaleMatch = transform.match(/scale\(\s*([^,)]+)(?:\s*,\s*([^)]+))?\s*\)/);
             if (scaleMatch) {
                 scaleX = parseFloat(scaleMatch[1]) || 1;
                 scaleY = scaleMatch[2] ? parseFloat(scaleMatch[2]) : scaleX;
             }
-            
+
+            // Use clip-rect logic (same as ResizeHandleManager) to avoid
+            // getBBox() returning the full unclipped geometry for coordinate planes.
+            const content = item.firstElementChild;
+            let bbox = null;
+
+            if (content) {
+                const clipPaths = content.querySelectorAll('clipPath');
+                if (clipPaths.length > 0) {
+                    let maxArea = 0;
+                    for (const clipPath of clipPaths) {
+                        const rect = clipPath.querySelector('rect');
+                        if (rect) {
+                            const w = parseFloat(rect.getAttribute('width')) || 0;
+                            const h = parseFloat(rect.getAttribute('height')) || 0;
+                            const x = parseFloat(rect.getAttribute('x')) || 0;
+                            const y = parseFloat(rect.getAttribute('y')) || 0;
+                            if (w * h > maxArea) {
+                                maxArea = w * h;
+                                // Account for the content group's own translate
+                                const contentGroup = content.firstElementChild;
+                                let tx = 0, ty = 0;
+                                if (contentGroup) {
+                                    const t = contentGroup.getAttribute('transform');
+                                    if (t) {
+                                        const m = t.match(/translate\(\s*([^,]+)(?:,\s*([^)]+))?\s*\)/);
+                                        if (m) { tx = parseFloat(m[1]) || 0; ty = parseFloat(m[2]) || 0; }
+                                    }
+                                }
+                                bbox = { x: x + tx, y: y + ty, width: w, height: h };
+                            }
+                        }
+                    }
+                }
+                if (!bbox) {
+                    bbox = content.getBBox();
+                }
+            } else {
+                bbox = item.getBBox();
+            }
+
             return {
                 x: offsetX + (bbox.x * scaleX),
                 y: offsetY + (bbox.y * scaleY),
@@ -740,41 +779,18 @@ export class PointerTool extends Tool {
                 continue;
             }
             try {
-                // Get the bounding box of the item
-                const bbox = item.getBBox();
-                
-                // Parse transform to get the actual position
-                const transform = item.getAttribute('transform') || '';
-                let offsetX = 0, offsetY = 0, scaleX = 1, scaleY = 1;
-                
-                // Parse translate
-                const translateMatch = transform.match(/translate\(\s*([^,]+)\s*,\s*([^)]+)\s*\)/);
-                if (translateMatch) {
-                    offsetX = parseFloat(translateMatch[1]) || 0;
-                    offsetY = parseFloat(translateMatch[2]) || 0;
-                }
-                
-                // Parse scale
-                const scaleMatch = transform.match(/scale\(\s*([^,)]+)(?:\s*,\s*([^)]+))?\s*\)/);
-                if (scaleMatch) {
-                    scaleX = parseFloat(scaleMatch[1]) || 1;
-                    scaleY = scaleMatch[2] ? parseFloat(scaleMatch[2]) : scaleX;
-                }
-                
-                // Calculate the actual bounds including transform
-                const actualX = offsetX + (bbox.x * scaleX);
-                const actualY = offsetY + (bbox.y * scaleY);
-                const actualWidth = bbox.width * scaleX;
-                const actualHeight = bbox.height * scaleY;
-                
+                // Reuse _getOMDElementBounds which applies clip-rect logic
+                // to avoid oversized hit areas on coordinate planes.
+                const bounds = this._getOMDElementBounds(item);
+                if (!bounds) continue;
+
                 // Add some padding for easier clicking
                 const padding = 10;
                 
-                // Check if point is within the bounds (with padding)
-                if (x >= actualX - padding && 
-                    x <= actualX + actualWidth + padding &&
-                    y >= actualY - padding && 
-                    y <= actualY + actualHeight + padding) {
+                if (x >= bounds.x - padding && 
+                    x <= bounds.x + bounds.width + padding &&
+                    y >= bounds.y - padding && 
+                    y <= bounds.y + bounds.height + padding) {
                     return item;
                 }
             } catch (error) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teachinglab/omd",
-  "version": "0.7.19",
+  "version": "0.7.21",
   "description": "omd",
   "main": "./index.js",
   "module": "./index.js",

package/src/omdExpression.js

@@ -8,6 +8,7 @@ import { omdNumber } from "./omdNumber.js";
 import { omdVariable } from "./omdVariable.js";
 import { omdMetaExpression } from "./omdMetaExpression.js"
 import { parseExpressionString } from "./omdUtils.js";
+import { getNodeForAST } from "../omd/core/omdUtilities.js";
 
 export class omdExpression extends omdMetaExpression
 {
@@ -21,6 +22,7 @@ export class omdExpression extends omdMetaExpression
         this.operatorSet = [];
         
         this.inset = 5;
+        this.expressionNode = null;
 
         this.expressionStack = new jsvgLayoutGroup();
         this.expressionStack.setPosition( this.inset, 0 );
@@ -28,15 +30,56 @@ export class omdExpression extends omdMetaExpression
         this.addChild( this.expressionStack );
     }
 
+    _renderWithExpressionNode(expressionString, fontSize) {
+        if (typeof math === 'undefined' || typeof math.parse !== 'function') {
+            throw new Error('math.js is required to parse expression strings');
+        }
+
+        const ast = math.parse(expressionString);
+        const NodeType = getNodeForAST(ast);
+        const exprNode = new NodeType(ast);
+
+        if (typeof fontSize === 'number' && exprNode.setFontSize) {
+            exprNode.setFontSize(fontSize);
+        }
+
+        if (exprNode.hideBackgroundByDefault) exprNode.hideBackgroundByDefault();
+        if (exprNode.computeDimensions) exprNode.computeDimensions();
+        if (exprNode.updateLayout) exprNode.updateLayout();
+
+        if (typeof this.expressionStack.removeAllChildren === 'function') {
+            this.expressionStack.removeAllChildren();
+        } else {
+            this.expressionStack.childList = [];
+        }
+        this.expressionStack.addChild(exprNode);
+        this.expressionStack.setSpacer(0);
+
+        this.expressionNode = exprNode;
+        this.updateLayout();
+    }
+
     loadFromJSON( data )
     {
         // Accept either structured object or a plain expression string
         if ( typeof data === 'string' ) {
+            try {
+                this._renderWithExpressionNode(data, data.fontSize);
+                return;
+            } catch (e) {
+                console.warn('⚠️ omdExpression math.js render failed, falling back to legacy parsing:', e?.message || e);
+            }
             const parsed = parseExpressionString(data);
             if ( parsed ) data = parsed;
         }
         // Handle object with 'expression' string property
         else if ( typeof data === 'object' && data.expression && typeof data.expression === 'string' ) {
+            try {
+                this._renderWithExpressionNode(data.expression, data.fontSize);
+                return;
+            } catch (e) {
+                console.warn('⚠️ omdExpression math.js render failed, falling back to legacy parsing:', e?.message || e);
+            }
              const parsed = parseExpressionString(data.expression);
              if ( parsed ) {
                  // Merge parsed data into data object
@@ -117,6 +160,24 @@ export class omdExpression extends omdMetaExpression
 
     updateLayout()
     {
+        if (this.expressionNode) {
+            const node = this.expressionNode;
+            if (node.computeDimensions) node.computeDimensions();
+            if (node.updateLayout) node.updateLayout();
+
+            this.expressionStack.doHorizontalLayout();
+            this.expressionStack.setPosition(this.inset, this.inset);
+
+            const W = node.width || this.expressionStack.width;
+            const H = node.height || this.expressionStack.height;
+
+            this.backRect.setWidthAndHeight( W + this.inset*2, H + this.inset*2 );
+            this.setWidthAndHeight( this.backRect.width, this.backRect.height );
+            this.width = this.backRect.width;
+            this.height = this.backRect.height;
+            return;
+        }
+
         this.expressionStack.doHorizontalLayout();
 
         var W = this.expressionStack.width;