@teachinglab/omd 0.7.16 → 0.7.17

package/canvas/core/canvasConfig.js

@@ -14,7 +14,7 @@ export class CanvasConfig {
         this.gridSpacing = options.gridSpacing || 20;
         
         // Tool configuration
-        this.enabledTools = options.enabledTools || ['pointer', 'pencil', 'eraser', 'select'];
+        this.enabledTools = options.enabledTools || ['pointer', 'pencil', 'eraser'];
         this.defaultTool = options.defaultTool || 'pointer';
         
         // Feature flags
@@ -36,11 +36,6 @@ export class CanvasConfig {
                 size: 20,
                 hardness: 0.8,
                 ...options.tools?.eraser
-            },
-            select: {
-                selectionColor: '#007bff',
-                selectionOpacity: 0.3,
-                ...options.tools?.select
             }
         };
         
@@ -69,13 +64,13 @@ export class CanvasConfig {
         }
         
         // Validate enabled tools
-        const availableTools = ['pointer', 'pencil', 'eraser', 'select'];
+        const availableTools = ['pointer', 'pencil', 'eraser'];
         const invalidTools = this.enabledTools.filter(tool => !availableTools.includes(tool));
         if (invalidTools.length > 0) {
             console.warn(`Invalid tools specified: ${invalidTools.join(', ')}`);
             this.enabledTools = this.enabledTools.filter(tool => availableTools.includes(tool));
         }
-        
+
         // Ensure at least one tool is enabled
         if (this.enabledTools.length === 0) {
             this.enabledTools = ['pencil'];
@@ -110,13 +105,8 @@ export class CanvasConfig {
         if (this.tools.eraser.hardness < 0 || this.tools.eraser.hardness > 1) {
             this.tools.eraser.hardness = 0.8;
         }
-        
-        // Validate select config
-        if (this.tools.select.selectionOpacity < 0 || this.tools.select.selectionOpacity > 1) {
-            this.tools.select.selectionOpacity = 0.3;
-        }
     }
-    
+
     /**
      * Update configuration
      * @param {Object} updates - Configuration updates

package/canvas/core/omdCanvas.js

@@ -3,7 +3,6 @@ import { EventManager } from '../events/eventManager.js';
 import { ToolManager } from '../tools/toolManager.js';
 import { PencilTool } from '../tools/PencilTool.js';
 import { EraserTool } from '../tools/EraserTool.js';
-import { SelectTool } from '../tools/SelectTool.js';
 import { PointerTool } from '../tools/PointerTool.js';
 import { Cursor } from '../ui/cursor.js';
 import { Toolbar } from '../ui/toolbar.js';
@@ -176,10 +175,6 @@ export class omdCanvas {
         if (this.config.enabledTools.includes('eraser')) {
             this.toolManager.registerTool('eraser', new EraserTool(this));
         }
-        if (this.config.enabledTools.includes('select')) {
-            this.toolManager.registerTool('select', new SelectTool(this));
-        }
-        
         // Set default tool
         if (this.config.defaultTool && this.config.enabledTools.includes(this.config.defaultTool)) {
             this.toolManager.setActiveTool(this.config.defaultTool);

package/canvas/index.js

@@ -12,7 +12,6 @@ export { ToolManager } from './tools/toolManager.js';
 export { Tool } from './tools/tool.js';
 export { PencilTool } from './tools/PencilTool.js';
 export { EraserTool } from './tools/EraserTool.js';
-export { SelectTool } from './tools/SelectTool.js';
 
 // UI components
 export { Toolbar } from './ui/toolbar.js';

package/canvas/tools/PointerTool.js

@@ -3,14 +3,15 @@ import { BoundingBox } from '../utils/boundingBox.js';
 import { Stroke } from '../drawing/stroke.js';
 import { ResizeHandleManager } from '../features/resizeHandleManager.js';
 import {omdColor} from '../../src/omdColor.js'; 
+
 const SELECTION_TOLERANCE = 10;
 const SELECTION_COLOR = '#007bff';
 const SELECTION_OPACITY = 0.3;
 
 /**
- * Pointer/Select tool
- * Combined tool for browsing, selecting, moving, and interacting with elements.
- * @extends Tool
+ * Pointer tool
+ * Combined functionality of Pointer and Select tools.
+ * Allows selecting, moving, deleting items, and interacting with components.
  */
 export class PointerTool extends Tool {
     /**
@@ -25,10 +26,10 @@ export class PointerTool extends Tool {
         });
 
         this.displayName = 'Pointer';
-        this.description = 'Select, move, and interact';
+        this.description = 'Select and interact with components';
         this.icon = 'pointer';
         this.shortcut = 'V';
-        this.category = 'selection';
+        this.category = 'navigation';
 
         /** @private */
         this.isSelecting = false;
@@ -96,12 +97,6 @@ export class PointerTool extends Tool {
                 this.dragStartPoint = { x: event.x, y: event.y };
                 this.potentialDeselect = segmentSelection;
                 
-                // Also enable OMD dragging if we have selected OMD elements
-                if (this.selectedOMDElements.size > 0) {
-                    this.isDraggingOMD = true;
-                    this.startPoint = { x: event.x, y: event.y };
-                }
-                
                 // Set isDrawing so we get pointermove events
                 if (this.canvas.eventManager) {
                     this.canvas.eventManager.isDrawing = true;
@@ -134,13 +129,6 @@ export class PointerTool extends Tool {
                 this.draggedOMDElement = omdElement; // Primary drag target
                 this.startPoint = { x: event.x, y: event.y };
                 
-                // Also enable stroke dragging if we have selected strokes
-                if (this.selectedSegments.size > 0) {
-                    this.isDraggingStrokes = true;
-                    this.dragStartPoint = { x: event.x, y: event.y };
-                    this.hasSeparatedForDrag = false;
-                }
-                
                 // Show resize handles if this is the only selected element
                 if (this.selectedOMDElements.size === 1) {
                     this.resizeHandleManager.selectElement(omdElement);
@@ -391,7 +379,7 @@ export class PointerTool extends Tool {
         // Ensure cursor is visible and properly set
         if (this.canvas.cursor) {
             this.canvas.cursor.show();
-            this.canvas.cursor.setShape('pointer'); // Use pointer arrow cursor
+            this.canvas.cursor.setShape('pointer');
         }
         
         // Clear any existing selection to start fresh
@@ -434,7 +422,7 @@ export class PointerTool extends Tool {
             );
         }
         
-        return 'default'; // Use default cursor instead of 'select'
+        return 'pointer'; 
     }
 
     /**
@@ -677,11 +665,11 @@ export class PointerTool 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;
             
@@ -697,68 +685,6 @@ export class PointerTool 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),
@@ -814,20 +740,42 @@ export class PointerTool extends Tool {
                 continue;
             }
             try {
-                // Use the shared bounds calculation method (handles clip paths correctly)
-                const itemBounds = this._getOMDElementBounds(item);
+                // Get the bounding box of the item
+                const bbox = item.getBBox();
                 
-                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;
-                    }
+                // 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;
+                
+                // 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;
                 }
             } catch (error) {
                 // Skip items that can't be measured (continue with next)
@@ -1320,3 +1268,4 @@ export class PointerTool extends Tool {
 
 }
 
+

package/canvas/ui/cursor.js

@@ -195,12 +195,10 @@ export class Cursor {
     _createPointerCursor() {
         const group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
         group.setAttribute('data-shape', 'pointer');
-        // Center the hotspot (approx 14, 5) to 0,0
-        group.setAttribute('transform', 'translate(-14, -5)');
         
-        // Custom arrow pointer cursor
+        // Standard arrow pointer cursor
         const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-        path.setAttribute('d', 'M 29.699219 47 C 29.578125 47 29.457031 46.976563 29.339844 46.933594 C 29.089844 46.835938 28.890625 46.644531 28.78125 46.398438 L 22.945313 32.90625 L 15.683594 39.730469 C 15.394531 40.003906 14.96875 40.074219 14.601563 39.917969 C 14.238281 39.761719 14 39.398438 14 39 L 14 6 C 14 5.601563 14.234375 5.242188 14.601563 5.082031 C 14.964844 4.925781 15.390625 4.996094 15.683594 5.269531 L 39.683594 27.667969 C 39.972656 27.9375 40.074219 28.355469 39.945313 28.726563 C 39.816406 29.101563 39.480469 29.363281 39.085938 29.398438 L 28.902344 30.273438 L 35.007813 43.585938 C 35.117188 43.824219 35.128906 44.101563 35.035156 44.351563 C 34.941406 44.601563 34.757813 44.800781 34.515625 44.910156 L 30.113281 46.910156 C 29.980469 46.96875 29.84375 47 29.699219 47 Z');
+        path.setAttribute('d', 'M 2,2 L 2,16 L 7,11 L 10,18 L 12,17 L 9,10 L 16,10 Z');
         path.setAttribute('fill', 'white');
         path.setAttribute('stroke', '#000000');
         path.setAttribute('stroke-width', '1.2');

package/package.json

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