@teachinglab/omd 0.7.10 → 0.7.11

package/canvas/tools/SelectTool.js

@@ -663,11 +663,11 @@ export class SelectTool extends Tool {
     
     /**
      * Gets the bounds of an OMD element including transform
+     * Uses clip paths for accurate bounds when present (e.g., coordinate planes)
      * @private
      */
     _getOMDElementBounds(item) {
         try {
-            const bbox = item.getBBox();
             const transform = item.getAttribute('transform') || '';
             let offsetX = 0, offsetY = 0, scaleX = 1, scaleY = 1;
             
@@ -683,6 +683,68 @@ export class SelectTool extends Tool {
                 scaleY = scaleMatch[2] ? parseFloat(scaleMatch[2]) : scaleX;
             }
             
+            // Get the content element (usually an SVG inside the wrapper)
+            const content = item.firstElementChild;
+            let bbox;
+            
+            if (content) {
+                // Check for clip paths to get accurate visible bounds
+                // This is important for coordinate planes where graph lines extend beyond visible area
+                const clipPaths = content.querySelectorAll('clipPath');
+                
+                if (clipPaths.length > 0) {
+                    let maxArea = 0;
+                    let clipBounds = null;
+                    
+                    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;
+                            
+                            const area = w * h;
+                            if (area > maxArea) {
+                                maxArea = area;
+                                
+                                // Find the transform on the content group
+                                const contentGroup = content.firstElementChild;
+                                let tx = 0, ty = 0;
+                                if (contentGroup) {
+                                    const contentTransform = contentGroup.getAttribute('transform');
+                                    if (contentTransform) {
+                                        const contentTranslateMatch = contentTransform.match(/translate\(\s*([^,]+)(?:,\s*([^)]+))?\s*\)/);
+                                        if (contentTranslateMatch) {
+                                            tx = parseFloat(contentTranslateMatch[1]) || 0;
+                                            ty = parseFloat(contentTranslateMatch[2]) || 0;
+                                        }
+                                    }
+                                }
+                                
+                                clipBounds = {
+                                    x: x + tx,
+                                    y: y + ty,
+                                    width: w,
+                                    height: h
+                                };
+                            }
+                        }
+                    }
+                    
+                    if (clipBounds) {
+                        bbox = clipBounds;
+                    }
+                }
+                
+                // Fallback to getBBox if no clip path found
+                if (!bbox) {
+                    bbox = content.getBBox();
+                }
+            } else {
+                bbox = item.getBBox();
+            }
+            
             return {
                 x: offsetX + (bbox.x * scaleX),
                 y: offsetY + (bbox.y * scaleY),
@@ -738,42 +800,20 @@ export class SelectTool 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;
-                
-                // Add some padding for easier clicking
-                const padding = 10;
+                // Use the shared bounds calculation method (handles clip paths correctly)
+                const itemBounds = this._getOMDElementBounds(item);
                 
-                // Check if point is within the bounds (with padding)
-                if (x >= actualX - padding && 
-                    x <= actualX + actualWidth + padding &&
-                    y >= actualY - padding && 
-                    y <= actualY + actualHeight + padding) {
-                    return item;
+                if (itemBounds) {
+                    // Add some padding for easier clicking
+                    const padding = 10;
+                    
+                    // Check if point is within the bounds (with padding)
+                    if (x >= itemBounds.x - padding && 
+                        x <= itemBounds.x + itemBounds.width + padding &&
+                        y >= itemBounds.y - padding && 
+                        y <= itemBounds.y + itemBounds.height + padding) {
+                        return item;
+                    }
                 }
             } catch (error) {
                 // Skip items that can't be measured (continue with next)

package/package.json

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