@teachinglab/omd 0.1.0

package/canvas/features/focusFrameManager.js

@@ -0,0 +1,287 @@
+export class FocusFrameManager {
+    /**
+     * @param {OMDCanvas} canvas - Canvas instance
+     */
+    constructor(canvas) {
+        this.canvas = canvas;
+        this.frames = new Map();
+        this.activeFrameId = null;
+        this.frameCounter = 0;
+    }
+    
+    /**
+     * Create a new focus frame
+     * @param {Object} options - Frame options
+     * @param {number} options.x - X position
+     * @param {number} options.y - Y position
+     * @param {number} options.width - Frame width
+     * @param {number} options.height - Frame height
+     * @param {boolean} [options.showOutline=true] - Show frame outline
+     * @param {string} [options.outlineColor='#007bff'] - Outline color
+     * @param {number} [options.outlineWidth=2] - Outline width
+     * @param {boolean} [options.outlineDashed=false] - Dashed outline
+     * @returns {Object} {id, frame} Created frame
+     */
+    createFrame(options = {}) {
+        const id = `frame_${++this.frameCounter}`;
+        const frame = new FocusFrame(this.canvas, id, options);
+        
+        this.frames.set(id, frame);
+        
+        // Add to focus frame layer if available
+        if (this.canvas.focusFrameLayer) {
+            this.canvas.focusFrameLayer.appendChild(frame.element);
+            console.log('Focus frame added to layer:', this.canvas.focusFrameLayer);
+            console.log('Focus frame element:', frame.element);
+        } else {
+            console.warn('Focus frame layer not found!');
+        }
+        
+        this.canvas.emit('focusFrameCreated', { id, frame });
+        
+        return { id, frame };
+    }
+    
+    /**
+     * Remove a focus frame
+     * @param {string} frameId - Frame ID
+     * @returns {boolean} True if frame was removed
+     */
+    removeFrame(frameId) {
+        const frame = this.frames.get(frameId);
+        if (!frame) return false;
+        
+        if (this.activeFrameId === frameId) {
+            this.activeFrameId = null;
+        }
+        
+        frame.destroy();
+        this.frames.delete(frameId);
+        
+        this.canvas.emit('focusFrameRemoved', { frameId });
+        
+        return true;
+    }
+    
+    /**
+     * Get frame by ID
+     * @param {string} frameId - Frame ID
+     * @returns {FocusFrame|undefined} Frame instance
+     */
+    getFrame(frameId) {
+        return this.frames.get(frameId);
+    }
+    
+    /**
+     * Set active frame
+     * @param {string} frameId - Frame ID
+     * @returns {boolean} True if frame was set as active
+     */
+    setActiveFrame(frameId) {
+        const frame = this.frames.get(frameId);
+        if (!frame) return false;
+        
+        // Deactivate previous frame
+        if (this.activeFrameId) {
+            const prevFrame = this.frames.get(this.activeFrameId);
+            if (prevFrame) {
+                prevFrame.setActive(false);
+            }
+        }
+        
+        // Activate new frame
+        this.activeFrameId = frameId;
+        frame.setActive(true);
+        
+        this.canvas.emit('focusFrameActivated', { frameId, frame });
+        
+        return true;
+    }
+    
+    /**
+     * Get active frame
+     * @returns {FocusFrame|null} Active frame or null
+     */
+    getActiveFrame() {
+        return this.activeFrameId ? this.frames.get(this.activeFrameId) : null;
+    }
+    
+    /**
+     * Capture content from active frame
+     * @returns {string|null} SVG content or null
+     */
+    captureActiveFrame() {
+        const activeFrame = this.getActiveFrame();
+        return activeFrame ? activeFrame.capture() : null;
+    }
+    
+    /**
+     * Capture all frames
+     * @returns {Map<string, string>} Map of frame IDs to SVG content
+     */
+    captureAllFrames() {
+        const captures = new Map();
+        
+        for (const [id, frame] of this.frames) {
+            captures.set(id, frame.capture());
+        }
+        
+        return captures;
+    }
+    
+    /**
+     * Clear all frames
+     */
+    clearAllFrames() {
+        for (const [id, frame] of this.frames) {
+            frame.destroy();
+        }
+        
+        this.frames.clear();
+        this.activeFrameId = null;
+        
+        this.canvas.emit('focusFramesCleared');
+    }
+    
+    /**
+     * Get all frame IDs
+     * @returns {Array<string>} Array of frame IDs
+     */
+    getFrameIds() {
+        return Array.from(this.frames.keys());
+    }
+    
+    /**
+     * Destroy focus frame manager
+     */
+    destroy() {
+        this.clearAllFrames();
+    }
+}
+
+/**
+ * Individual focus frame for capturing canvas regions
+ */
+class FocusFrame {
+    /**
+     * @param {OMDCanvas} canvas - Canvas instance
+     * @param {string} id - Frame ID
+     * @param {Object} options - Frame options
+     */
+    constructor(canvas, id, options = {}) {
+        this.canvas = canvas;
+        this.id = id;
+        this.x = options.x || 0;
+        this.y = options.y || 0;
+        this.width = options.width || 200;
+        this.height = options.height || 150;
+        this.showOutline = options.showOutline !== false;
+        this.outlineColor = options.outlineColor || '#007bff';
+        this.outlineWidth = options.outlineWidth || 2;
+        this.outlineDashed = options.outlineDashed || false;
+        this.isActive = false;
+        this._createElement();
+    }
+    /**
+     * Create the visual frame element
+     * @private
+     */
+    _createElement() {
+        this.element = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+        this.element.setAttribute('class', 'focus-frame');
+        this.element.setAttribute('data-frame-id', this.id);
+        this.element.style.pointerEvents = 'none'; // No pointer events
+        this.element.style.zIndex = '1000';
+        if (this.showOutline) {
+            this.outline = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+            this.outline.setAttribute('x', this.x);
+            this.outline.setAttribute('y', this.y);
+            this.outline.setAttribute('width', this.width);
+            this.outline.setAttribute('height', this.height);
+            this.outline.setAttribute('fill', 'none');
+            this.outline.setAttribute('stroke', this.outlineColor);
+            this.outline.setAttribute('stroke-width', this.outlineWidth);
+            if (this.outlineDashed) {
+                this.outline.setAttribute('stroke-dasharray', '5,5');
+            }
+            this.outline.style.pointerEvents = 'none';
+            this.element.appendChild(this.outline);
+        }
+    }
+    setActive(active) {
+        this.isActive = active;
+        if (this.outline) {
+            this.outline.setAttribute('stroke-width', this.outlineWidth);
+        }
+    }
+    capture() {
+        const tempSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        tempSvg.setAttribute('width', this.width);
+        tempSvg.setAttribute('height', this.height);
+        tempSvg.setAttribute('viewBox', `${this.x} ${this.y} ${this.width} ${this.height}`);
+        const drawingLayer = this.canvas.drawingLayer.cloneNode(true);
+        tempSvg.appendChild(drawingLayer);
+        return new XMLSerializer().serializeToString(tempSvg);
+    }
+    async toBitmap(format = 'png', quality = 1) {
+        const svgData = this.capture();
+        const canvas = document.createElement('canvas');
+        canvas.width = this.width;
+        canvas.height = this.height;
+        const ctx = canvas.getContext('2d');
+        const img = new Image();
+        const svgBlob = new Blob([svgData], { type: 'image/svg+xml' });
+        const url = URL.createObjectURL(svgBlob);
+        try {
+            await new Promise((resolve, reject) => {
+                img.onload = resolve;
+                img.onerror = reject;
+                img.src = url;
+            });
+            ctx.drawImage(img, 0, 0);
+            return new Promise(resolve => {
+                canvas.toBlob(resolve, `image/${format}`, quality);
+            });
+        } finally {
+            URL.revokeObjectURL(url);
+        }
+    }
+    async downloadAsBitmap(filename = `focus-frame-${this.id}.png`, format = 'png') {
+        try {
+            const blob = await this.toBitmap(format);
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = filename;
+            a.click();
+            URL.revokeObjectURL(url);
+        } catch (error) {
+            console.error('Failed to download frame:', error);
+        }
+    }
+    updateBounds(bounds) {
+        if (bounds.x !== undefined) this.x = bounds.x;
+        if (bounds.y !== undefined) this.y = bounds.y;
+        if (bounds.width !== undefined) this.width = bounds.width;
+        if (bounds.height !== undefined) this.height = bounds.height;
+        if (this.outline) {
+            this.outline.setAttribute('x', this.x);
+            this.outline.setAttribute('y', this.y);
+            this.outline.setAttribute('width', this.width);
+            this.outline.setAttribute('height', this.height);
+        }
+    }
+    getBounds() {
+        return {
+            x: this.x,
+            y: this.y,
+            width: this.width,
+            height: this.height
+        };
+    }
+    destroy() {
+        if (this.element.parentNode) {
+            this.element.parentNode.removeChild(this.element);
+        }
+    }
+} 

package/canvas/index.js

@@ -0,0 +1,49 @@
+// Core canvas system
+export { omdCanvas } from './core/omdCanvas.js';
+export { CanvasConfig as canvasConfig } from './core/canvasConfig.js';
+
+// Event handling
+export { EventManager } from './events/eventManager.js';
+export { pointerEventHandler } from './events/pointerEventHandler.js';
+
+// Tool system
+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';
+export { Cursor } from './ui/cursor.js';
+
+// Drawing objects
+export { Stroke } from './drawing/stroke.js';
+export { segment } from './drawing/Segment.js';
+
+// Utilities
+export { BoundingBox } from './utils/boundingBox.js';
+export { mathUtils } from './utils/mathUtils.js';
+
+// Focus frame system
+export { FocusFrameManager } from './features/focusFrameManager.js';
+import { omdCanvas } from './core/omdCanvas.js';
+/**
+ * Quick setup function for common use cases
+ * @param {HTMLElement|string} container - Container element or selector
+ * @param {Object} options - Configuration options
+ * @returns {omdCanvas} Configured canvas instance
+ */
+export function createCanvas(container, options = {}) {
+    const canvas = new omdCanvas(container, options);
+    return canvas;
+}
+
+/**
+ * Create multiple canvas instances for comparison or multi-canvas apps
+ * @param {Array} configs - Array of {container, options} objects
+ * @returns {Array<omdCanvas>} Array of canvas instances
+ */
+export function createMultipleCanvases(configs) {
+    return configs.map(config => createCanvas(config.container, config.options));
+} 

package/canvas/tools/eraserTool.js

@@ -0,0 +1,322 @@
+import { Tool } from './tool.js';
+import { Stroke } from '../drawing/stroke.js';
+
+/**
+ * Eraser tool for removing strokes
+ */
+export class EraserTool extends Tool {
+    constructor(canvas, options = {}) {
+        super(canvas, {
+            size: 12,
+            hardness: 0.8,
+            mode: 'radius', // 'stroke' or 'radius'
+            ...options
+        });
+        
+        this.displayName = 'Eraser';
+        this.description = 'Erase strokes (M to toggle mode)';
+        this.icon = 'eraser';
+        this.shortcut = 'E';
+        this.category = 'editing';
+        
+        // Eraser state
+        this.isErasing = false;
+        this.erasedPoints = new Set(); // Track erased points for radius mode
+    }
+    
+    /**
+     * Start erasing
+     */
+    onPointerDown(event) {
+        if (!this.canUse()) return;
+        
+        this.isErasing = true;
+        this._eraseAtPoint(event.x, event.y);
+        
+        this.canvas.emit('eraseStarted', {
+            tool: this.name,
+            point: { x: event.x, y: event.y }
+        });
+    }
+    
+    /**
+     * Continue erasing
+     */
+    onPointerMove(event) {
+        if (!this.isErasing) return;
+        
+        this._eraseAtPoint(event.x, event.y);
+    }
+    
+    /**
+     * Stop erasing
+     */
+    onPointerUp(event) {
+        if (!this.isErasing) return;
+        
+        this.isErasing = false;
+        
+        this.canvas.emit('eraseCompleted', {
+            tool: this.name
+        });
+    }
+    
+    /**
+     * Cancel erasing
+     */
+    onCancel() {
+        this.isErasing = false;
+        super.onCancel();
+    }
+    
+    /**
+     * Erase strokes at point
+     * @private
+     */
+    _eraseAtPoint(x, y) {
+        if (this.config.mode === 'stroke') {
+            this._eraseWholeStrokes(x, y);
+        } else {
+            this._eraseInRadius(x, y);
+        }
+    }
+    
+    /**
+     * Erase whole strokes (original behavior)
+     * @private
+     */
+    _eraseWholeStrokes(x, y) {
+        const tolerance = this.config.size || 20;
+        const strokesToRemove = [];
+        
+        // Check each stroke to see if it's near the eraser point
+        for (const [id, stroke] of this.canvas.strokes) {
+            if (stroke.isNearPoint(x, y, tolerance)) {
+                strokesToRemove.push(id);
+            }
+        }
+        
+        // Remove the strokes
+        strokesToRemove.forEach(id => {
+            this.canvas.removeStroke(id);
+        });
+    }
+    
+    /**
+     * Erase within radius (traditional eraser behavior)
+     * @private
+     */
+    _eraseInRadius(x, y) {
+        const radius = this.config.size || 20;
+        const radiusSquared = radius * radius;
+        const strokesToModify = [];
+        
+        // Find strokes that intersect with the eraser circle
+        for (const [id, stroke] of this.canvas.strokes) {
+            const boundingBox = stroke.getBoundingBox();
+            
+            // Quick bounding box check first
+            if (this._circleIntersectsRect(x, y, radius, boundingBox)) {
+                // Check individual points
+                const pointsToRemove = [];
+                
+                for (let i = 0; i < stroke.points.length; i++) {
+                    const point = stroke.points[i];
+                    const dx = point.x - x;
+                    const dy = point.y - y;
+                    const distanceSquared = dx * dx + dy * dy;
+                    
+                    if (distanceSquared <= radiusSquared) {
+                        pointsToRemove.push(i);
+                    }
+                }
+                
+                if (pointsToRemove.length > 0) {
+                    strokesToModify.push({ id, stroke, pointsToRemove });
+                }
+            }
+        }
+        
+        // Modify or remove strokes
+        strokesToModify.forEach(({ id, stroke, pointsToRemove }) => {
+            if (pointsToRemove.length >= stroke.points.length * 0.8) {
+                // If most points are erased, remove the whole stroke
+                this.canvas.removeStroke(id);
+            } else {
+                // Remove points and split stroke if necessary
+                this._splitStrokeAtErasedPoints(stroke, pointsToRemove);
+            }
+        });
+    }
+    
+    /**
+     * Check if circle intersects with rectangle
+     * @private
+     */
+    _circleIntersectsRect(cx, cy, radius, rect) {
+        const closestX = Math.max(rect.left, Math.min(cx, rect.right));
+        const closestY = Math.max(rect.top, Math.min(cy, rect.bottom));
+        
+        const dx = cx - closestX;
+        const dy = cy - closestY;
+        
+        return (dx * dx + dy * dy) <= (radius * radius);
+    }
+    
+    /**
+     * Split stroke at erased points or remove segments
+     * @private
+     */
+    _splitStrokeAtErasedPoints(stroke, pointsToRemove) {
+        if (pointsToRemove.length === 0) return;
+        
+        // Sort indices in ascending order for processing
+        pointsToRemove.sort((a, b) => a - b);
+        
+        // Find continuous segments to keep
+        const segments = [];
+        let startIndex = 0;
+        
+        for (let i = 0; i < pointsToRemove.length; i++) {
+            const removeIndex = pointsToRemove[i];
+            
+            // If there's a gap before this point, create a segment
+            if (removeIndex > startIndex) {
+                const segmentPoints = stroke.points.slice(startIndex, removeIndex);
+                if (segmentPoints.length >= 2) {
+                    segments.push(segmentPoints);
+                }
+            }
+            
+            startIndex = removeIndex + 1;
+        }
+        
+        // Add final segment if there are remaining points
+        if (startIndex < stroke.points.length) {
+            const finalSegment = stroke.points.slice(startIndex);
+            if (finalSegment.length >= 2) {
+                segments.push(finalSegment);
+            }
+        }
+        
+        // Remove original stroke
+        this.canvas.removeStroke(stroke.id);
+        
+        // Create new strokes for each segment
+        segments.forEach((segmentPoints, index) => {
+            const newStroke = new Stroke({
+                strokeWidth: stroke.strokeWidth,
+                strokeColor: stroke.strokeColor,
+                strokeOpacity: stroke.strokeOpacity,
+                tool: stroke.tool
+            });
+            
+            // Add all points to the new stroke
+            segmentPoints.forEach(point => {
+                newStroke.addPoint(point);
+            });
+            
+            newStroke.finish();
+            this.canvas.addStroke(newStroke);
+        });
+    }
+    
+    /**
+     * Get eraser cursor
+     */
+    getCursor() {
+        return 'eraser';
+    }
+    
+    /**
+     * Handle keyboard shortcuts
+     */
+    onKeyboardShortcut(key, event) {
+        switch (key) {
+            case '[':
+                // Decrease eraser size
+                this.updateConfig({ 
+                    size: Math.max(5, this.config.size - 5) 
+                });
+                return true;
+            case ']':
+                // Increase eraser size
+                this.updateConfig({ 
+                    size: Math.min(100, this.config.size + 5) 
+                });
+                return true;
+            case 'm':
+                // Toggle eraser mode
+                this.toggleMode();
+                return true;
+            default:
+                return super.onKeyboardShortcut(key, event);
+        }
+    }
+    
+    /**
+     * Toggle between stroke and radius erasing modes
+     */
+    toggleMode() {
+        const newMode = this.config.mode === 'stroke' ? 'radius' : 'stroke';
+        this.updateConfig({ mode: newMode });
+        
+        // Update cursor appearance
+        if (this.canvas.cursor) {
+            this.canvas.cursor.updateFromToolConfig(this.config);
+        }
+        
+        // Emit mode change event
+        this.canvas.emit('eraserModeChanged', { 
+            mode: newMode,
+            description: this._getModeDescription(newMode)
+        });
+        
+        console.log(`Eraser mode changed to: ${this._getModeDescription(newMode)}`);
+    }
+    
+    /**
+     * Get mode description
+     * @private
+     */
+    _getModeDescription(mode) {
+        return mode === 'stroke' ? 'Whole Stroke Erasing' : 'Radius Erasing';
+    }
+    
+    /**
+     * Update configuration
+     */
+    onConfigUpdate() {
+        // Update cursor size if available
+        if (this.canvas.cursor) {
+            this.canvas.cursor.setSize(this.config.size);
+        }
+    }
+    
+    /**
+     * Get help text
+     */
+    getHelpText() {
+        return `${super.getHelpText()}\nShortcuts: [ ] to adjust size, M to toggle mode\nCurrent mode: ${this._getModeDescription(this.config.mode)}`;
+    }
+    
+    /**
+     * Get current eraser mode
+     */
+    getMode() {
+        return this.config.mode;
+    }
+    
+    /**
+     * Set eraser mode
+     * @param {string} mode - 'stroke' or 'radius'
+     */
+    setMode(mode) {
+        if (mode === 'stroke' || mode === 'radius') {
+            this.updateConfig({ mode });
+            if (this.canvas.cursor) {
+                this.canvas.cursor.updateFromToolConfig(this.config);
+            }
+        }
+    }
+}