@teachinglab/omd 0.7.18 → 0.7.20

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) {
@@ -972,9 +988,12 @@ export class PointerTool extends Tool {
             selectionLayer.removeChild(selectionLayer.firstChild);
         }
 
-        // If the selection is pure-OMD (no strokes), ResizeHandleManager already draws
-        // the selection border + handles — don't draw a second box on top of it.
-        if (this.selectedSegments.size === 0 && this.selectedOMDElements.size > 0) {
+        // If a single OMD element was directly clicked, ResizeHandleManager already draws
+        // its own selection border + handles — don't draw a second box on top of it.
+        // For drag-box selections (no active resizeHandleManager element), always draw the box.
+        if (this.selectedSegments.size === 0 &&
+            this.selectedOMDElements.size > 0 &&
+            this.resizeHandleManager?.selectedElement !== null) {
             return;
         }
 

package/package.json

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