@teachinglab/omd 0.1.0

package/canvas/ui/toolbar.js

@@ -0,0 +1,304 @@
+import {omdColor} from '../../src/omdColor.js';
+
+export class Toolbar {
+    /**
+     * @param {OMDCanvas} canvas - Canvas instance
+     */
+    constructor(canvas) {
+        this.canvas = canvas;
+        this.buttons = new Map();
+        this.activeButton = null;
+        this.omdColor = omdColor; // Use omdColor for consistent styling
+        
+        
+        
+        // Create toolbar element
+        this._createElement();
+        
+        // Create tool buttons
+        this._createToolButtons();
+        
+        // Listen for tool changes
+        this.canvas.on('toolChanged', (event) => {
+            this._updateActiveButton(event.detail.name);
+        });
+        
+        
+    }
+    
+    /**
+     * Create the toolbar SVG element
+     * @private
+     */
+    _createElement() {
+        
+        
+        // Create a jsvgGroup for the toolbar
+        this.toolbarGroup = new jsvgGroup();
+        
+        
+        // Create background rectangle
+        this.background = new jsvgRect();
+        
+        
+    // Initial size, will be updated after buttons are created
+    this.background.setWidthAndHeight(100, 54);
+    this.background.setCornerRadius(27); // Pill shape
+    this.background.setFillColor(this.omdColor.mediumGray); // Modern dark, semi-transparent
+        
+        
+        
+        
+        // Debug the background SVG object
+        
+        
+        this.toolbarGroup.addChild(this.background);
+        
+        
+        // Position the toolbar at bottom center
+        this._updatePosition();``
+        
+    // Add to main SVG so it is rendered
+    this.canvas.svg.appendChild(this.toolbarGroup.svgObject);
+        
+        
+        // Check if the SVG is actually in the DOM
+        setTimeout(() => {
+            
+            
+            // Check the actual SVG content
+            console.log('Toolbar SVG innerHTML:', this.toolbarGroup.svgObject.innerHTML);
+            console.log('Background SVG object:', this.background.svgObject);
+            console.log('Background SVG innerHTML:', this.background.svgObject.outerHTML);
+            
+            // Check if the background is visible
+            console.log('Background fill color:', this.background.svgObject.getAttribute('fill'));
+            console.log('Background width/height:', this.background.svgObject.getAttribute('width'), this.background.svgObject.getAttribute('height'));
+        }, 100);
+    }
+    
+    /**
+     * Update toolbar position to bottom center
+     * @private
+     */
+    _updatePosition() {
+    const canvasRect = this.canvas.container.getBoundingClientRect();
+    const toolbarWidth = this.background.width;
+    const toolbarHeight = this.background.height;
+            // Bottom center, 24px from bottom
+        const x = (canvasRect.width - toolbarWidth) / 2;
+        const y = canvasRect.height - toolbarHeight - 24;
+        
+        // Ensure toolbar stays within canvas bounds
+        const clampedX = Math.max(0, Math.min(x, canvasRect.width - toolbarWidth));
+        const clampedY = Math.max(0, Math.min(y, canvasRect.height - toolbarHeight));
+    this.toolbarGroup.setPosition(x, y);
+        
+        // Debug the SVG object
+        console.log('Toolbar group SVG object:', this.toolbarGroup.svgObject);
+        console.log('Toolbar group SVG object style:', this.toolbarGroup.svgObject.style);
+        console.log('Toolbar group SVG object parent:', this.toolbarGroup.svgObject.parentNode);
+        
+        // Set z-index to ensure it's on top
+        this.toolbarGroup.svgObject.style.zIndex = '1000';
+        this.toolbarGroup.svgObject.style.pointerEvents = 'auto';
+        
+        // Fix the viewBox to include the toolbar position
+        const bgWidth = this.background.width;
+        const bgHeight = this.background.height;
+        const viewBoxX = x;
+        const viewBoxY = y;
+        const viewBoxWidth = Math.max(500, x + bgWidth);
+        const viewBoxHeight = Math.max(500, y + bgHeight);
+        
+        this.toolbarGroup.svgObject.setAttribute('viewBox', `${viewBoxX} ${viewBoxY} ${viewBoxWidth} ${viewBoxHeight}`);
+        console.log('Updated viewBox to:', `${viewBoxX} ${viewBoxY} ${viewBoxWidth} ${viewBoxHeight}`);
+        
+        // Don't set x/y attributes - let setPosition handle it via transform
+        // this.toolbarGroup.svgObject.setAttribute('x', x);
+        // this.toolbarGroup.svgObject.setAttribute('y', y);
+    }
+    
+    /**
+     * Create tool buttons
+     * @private
+     */
+    _createToolButtons() {
+        const tools = this.canvas.toolManager.getAllToolMetadata();
+        console.log('Creating tool buttons for tools:', tools);
+        
+        const buttonSize = 48;
+        const spacing = 8;
+        const padding = 6;
+        let xPos = padding;
+        const yPos = padding;
+        tools.forEach(toolMeta => {
+            const button = this._createJsvgButton(toolMeta, buttonSize);
+            button.setPosition(xPos, yPos);
+            this.toolbarGroup.addChild(button);
+            this.buttons.set(toolMeta.name, button);
+            xPos += buttonSize + spacing;
+        });
+        // Remove last spacing
+        const totalWidth = xPos - spacing + padding;
+        const totalHeight = buttonSize + 2 * padding;
+        this.background.setWidthAndHeight(totalWidth, totalHeight);
+        this.background.setCornerRadius(totalHeight / 2);
+        // Reposition after sizing
+        this._updatePosition();
+        console.log('Toolbar background width set to:', totalWidth);
+        
+        // Set initial active button
+        const activeTool = this.canvas.toolManager.getActiveTool();
+        if (activeTool) {
+            this._updateActiveButton(activeTool.name);
+        }
+    }
+    
+    /**
+     * Create individual tool button using jsvgButton
+     * @private
+     */
+    _createJsvgButton(toolMeta, size = 48) {
+        console.log('Creating jsvgButton for tool:', toolMeta.name);
+        
+        const button = new jsvgButton();
+        button.setWidthAndHeight(size, size);
+        button.setCornerRadius(size / 2); // Make it circular
+        button.setFillColor('white');
+        
+        // Remove any default text from the button group (if present)
+        // jsvgButton may add a <text> element by default; remove it
+        button.setText(''); // Clear any default text
+
+        // Set the icon SVG
+        const iconSvg = this._getToolIconSvg(toolMeta.name);
+        if (iconSvg) {
+            const dataURI = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(iconSvg);
+            button.addImage(dataURI, size * 0.5, size * 0.5); // Icon at 50% of button size
+        }
+
+        // Set click callback
+        button.setClickCallback(() => {
+            this.canvas.toolManager.setActiveTool(toolMeta.name);
+        });
+        
+        // Store tool metadata
+        button.toolMeta = toolMeta;
+        return button;
+    }
+    
+    /**
+     * Get SVG icon for tool
+     * @param {string} toolName - Tool name
+     * @returns {string} SVG string
+     * @private
+     */
+    _getToolIconSvg(toolName) {
+        const icons = {
+            'pencil': `<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M13.3658 4.68008C13.7041 4.34179 13.8943 3.88294 13.8943 3.40447C13.8944 2.926 13.7044 2.4671 13.3661 2.12872C13.0278 1.79035 12.5689 1.60022 12.0905 1.60016C11.612 1.6001 11.1531 1.79011 10.8147 2.1284L2.27329 10.6718C2.12469 10.8199 2.0148 11.0023 1.95329 11.203L1.10785 13.9882C1.09131 14.0436 1.09006 14.1024 1.10423 14.1584C1.11841 14.2144 1.14748 14.2655 1.18836 14.3063C1.22924 14.3471 1.28041 14.3761 1.33643 14.3902C1.39246 14.4043 1.45125 14.403 1.50657 14.3863L4.29249 13.5415C4.49292 13.4806 4.67532 13.3713 4.82369 13.2234L13.3658 4.68008Z" stroke="black" stroke-width="1.28" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M9.41443 3.52039L11.9744 6.08039" stroke="black" stroke-width="1.28" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>`,
+            'eraser': `<svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M13.2591 12.76H4.93909C4.77032 12.7604 4.60314 12.7274 4.44717 12.663C4.29121 12.5985 4.14953 12.5038 4.03029 12.3844L1.47413 9.825C1.23417 9.58496 1.09937 9.25945 1.09937 8.92004C1.09937 8.58063 1.23417 8.25511 1.47413 8.01508L7.87413 1.61508C7.993 1.49616 8.13413 1.40183 8.28946 1.33747C8.44479 1.27312 8.61128 1.23999 8.77941 1.23999C8.94755 1.23999 9.11404 1.27312 9.26937 1.33747C9.4247 1.40183 9.56583 1.49616 9.68469 1.61508L13.5241 5.45508C13.764 5.69511 13.8988 6.02063 13.8988 6.36004C13.8988 6.69945 13.764 7.02496 13.5241 7.265L8.03285 12.76" stroke="black" stroke-width="1.28" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M3.07159 6.41772L8.72151 12.0676" stroke="black" stroke-width="1.28" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>`,
+            'select': `<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M1.63448 2.04462C1.60922 1.98633 1.60208 1.92179 1.61397 1.85938C1.62585 1.79697 1.65623 1.73958 1.70116 1.69466C1.74608 1.64973 1.80347 1.61935 1.86588 1.60747C1.92829 1.59558 1.99283 1.60272 2.05112 1.62798L12.2911 5.78798C12.3534 5.81335 12.4061 5.85768 12.4417 5.91469C12.4774 5.9717 12.4941 6.03849 12.4897 6.10557C12.4852 6.17266 12.4597 6.23663 12.4169 6.28842C12.374 6.3402 12.3159 6.37717 12.2508 6.39406L8.33144 7.40526C8.11 7.46219 7.90784 7.5774 7.74599 7.73891C7.58415 7.90042 7.46852 8.10234 7.41112 8.32366L6.40056 12.2443C6.38367 12.3094 6.3467 12.3675 6.29492 12.4104C6.24313 12.4532 6.17916 12.4787 6.11207 12.4832C6.04499 12.4876 5.9782 12.4709 5.92119 12.4352C5.86419 12.3996 5.81985 12.3469 5.79448 12.2846L1.63448 2.04462Z" stroke="black" stroke-width="1.28" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>`
+        };
+        
+        return icons[toolName] || icons['pencil'];
+    }
+    
+    /**
+     * Update active button styling
+     * @param {string} toolName - Active tool name
+     * @private
+     */
+    _updateActiveButton(toolName) {
+        // Reset all buttons
+        this.buttons.forEach(button => {
+            button.setFillColor('white');
+        });
+        
+        // Highlight active button
+        const activeButton = this.buttons.get(toolName);
+        if (activeButton) {
+            activeButton.setFillColor(this.omdColor.lightGray);
+            this.activeButton = activeButton;
+        } else {
+            this.activeButton = null;
+        }
+    }
+    
+    /**
+     * Add custom button to toolbar
+     * @param {Object} config - Button configuration
+     * @param {string} config.id - Button ID
+     * @param {string} config.icon - SVG icon string
+     * @param {Function} config.callback - Click callback
+     * @param {string} [config.tooltip] - Tooltip text
+     */
+    addButton(config) {
+        const button = this._createJsvgButton({ name: config.id }, 48);
+        
+        // Set icon
+        if (config.icon) {
+            const dataURI = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(config.icon);
+            button.addImage(dataURI, 24, 24);
+        }
+        
+        // Set click callback
+        if (config.callback) {
+            button.setClickCallback(config.callback);
+        }
+        
+        // Add to toolbar group
+        this.toolbarGroup.addChild(button);
+        
+        // Store button
+        this.buttons.set(config.id, button);
+        
+        return button;
+    }
+    
+    /**
+     * Remove button from toolbar
+     * @param {string} buttonId - Button ID to remove
+     */
+    removeButton(buttonId) {
+        const button = this.buttons.get(buttonId);
+        if (button) {
+            this.toolbarGroup.removeChild(button);
+            this.buttons.delete(buttonId);
+        }
+    }
+    
+    /**
+     * Show toolbar
+     */
+    show() {
+        this.toolbarGroup.svgObject.style.display = 'block';
+    }
+    
+    /**
+     * Hide toolbar
+     */
+    hide() {
+        this.toolbarGroup.svgObject.style.display = 'none';
+    }
+    
+
+    
+    /**
+     * Destroy toolbar
+     */
+    destroy() {
+        if (this.toolbarGroup.svgObject.parentNode) {
+            this.toolbarGroup.svgObject.parentNode.removeChild(this.toolbarGroup.svgObject);
+        }
+        this.buttons.clear();
+    }
+} 

package/canvas/utils/boundingBox.js

@@ -0,0 +1,378 @@
+export class BoundingBox {
+    /**
+     * @param {number} [x=0] - X coordinate
+     * @param {number} [y=0] - Y coordinate  
+     * @param {number} [width=0] - Width
+     * @param {number} [height=0] - Height
+     */
+    constructor(x = 0, y = 0, width = 0, height = 0) {
+        this.x = x;
+        this.y = y;
+        this.width = width;
+        this.height = height;
+    }
+    
+    /**
+     * Set bounding box values
+     * @param {number} x - X coordinate
+     * @param {number} y - Y coordinate
+     * @param {number} width - Width
+     * @param {number} height - Height
+     */
+    set(x, y, width, height) {
+        this.x = x;
+        this.y = y;
+        this.width = width;
+        this.height = height;
+    }
+    
+    /**
+     * Get left edge
+     * @returns {number} Left X coordinate
+     */
+    get left() {
+        return this.x;
+    }
+    
+    /**
+     * Get right edge
+     * @returns {number} Right X coordinate
+     */
+    get right() {
+        return this.x + this.width;
+    }
+    
+    /**
+     * Get top edge
+     * @returns {number} Top Y coordinate
+     */
+    get top() {
+        return this.y;
+    }
+    
+    /**
+     * Get bottom edge
+     * @returns {number} Bottom Y coordinate
+     */
+    get bottom() {
+        return this.y + this.height;
+    }
+    
+    /**
+     * Get center X coordinate
+     * @returns {number} Center X
+     */
+    get centerX() {
+        return this.x + this.width / 2;
+    }
+    
+    /**
+     * Get center Y coordinate
+     * @returns {number} Center Y
+     */
+    get centerY() {
+        return this.y + this.height / 2;
+    }
+    
+    /**
+     * Get center point
+     * @returns {Object} {x, y} center coordinates
+     */
+    get center() {
+        return {
+            x: this.centerX,
+            y: this.centerY
+        };
+    }
+    
+    /**
+     * Check if point is inside bounding box
+     * @param {number} x - X coordinate
+     * @param {number} y - Y coordinate
+     * @param {number} [tolerance=0] - Tolerance for edge cases
+     * @returns {boolean} True if point is inside
+     */
+    containsPoint(x, y, tolerance = 0) {
+        return x >= this.left - tolerance &&
+               x <= this.right + tolerance &&
+               y >= this.top - tolerance &&
+               y <= this.bottom + tolerance;
+    }
+    
+    /**
+     * Check if this bounding box intersects with another
+     * @param {BoundingBox} other - Other bounding box
+     * @returns {boolean} True if boxes intersect
+     */
+    intersects(other) {
+        return !(this.right < other.left ||
+                 other.right < this.left ||
+                 this.bottom < other.top ||
+                 other.bottom < this.top);
+    }
+    
+    /**
+     * Check if this bounding box completely contains another
+     * @param {BoundingBox} other - Other bounding box
+     * @returns {boolean} True if this box contains the other
+     */
+    contains(other) {
+        return this.left <= other.left &&
+               this.right >= other.right &&
+               this.top <= other.top &&
+               this.bottom >= other.bottom;
+    }
+    
+    /**
+     * Expand bounding box to include a point
+     * @param {number} x - X coordinate
+     * @param {number} y - Y coordinate
+     */
+    expandToIncludePoint(x, y) {
+        if (this.width === 0 && this.height === 0) {
+            // First point
+            this.x = x;
+            this.y = y;
+            this.width = 0;
+            this.height = 0;
+        } else {
+            const newLeft = Math.min(this.left, x);
+            const newTop = Math.min(this.top, y);
+            const newRight = Math.max(this.right, x);
+            const newBottom = Math.max(this.bottom, y);
+            
+            this.x = newLeft;
+            this.y = newTop;
+            this.width = newRight - newLeft;
+            this.height = newBottom - newTop;
+        }
+    }
+    
+    /**
+     * Expand bounding box to include another bounding box
+     * @param {BoundingBox} other - Other bounding box
+     */
+    expandToIncludeBox(other) {
+        if (other.width === 0 && other.height === 0) return;
+        
+        if (this.width === 0 && this.height === 0) {
+            this.set(other.x, other.y, other.width, other.height);
+        } else {
+            const newLeft = Math.min(this.left, other.left);
+            const newTop = Math.min(this.top, other.top);
+            const newRight = Math.max(this.right, other.right);
+            const newBottom = Math.max(this.bottom, other.bottom);
+            
+            this.x = newLeft;
+            this.y = newTop;
+            this.width = newRight - newLeft;
+            this.height = newBottom - newTop;
+        }
+    }
+    
+    /**
+     * Get intersection with another bounding box
+     * @param {BoundingBox} other - Other bounding box
+     * @returns {BoundingBox|null} Intersection box or null if no intersection
+     */
+    getIntersection(other) {
+        if (!this.intersects(other)) {
+            return null;
+        }
+        
+        const left = Math.max(this.left, other.left);
+        const top = Math.max(this.top, other.top);
+        const right = Math.min(this.right, other.right);
+        const bottom = Math.min(this.bottom, other.bottom);
+        
+        return new BoundingBox(left, top, right - left, bottom - top);
+    }
+    
+    /**
+     * Get union with another bounding box
+     * @param {BoundingBox} other - Other bounding box
+     * @returns {BoundingBox} Union bounding box
+     */
+    getUnion(other) {
+        if (this.width === 0 && this.height === 0) {
+            return other.clone();
+        }
+        
+        if (other.width === 0 && other.height === 0) {
+            return this.clone();
+        }
+        
+        const left = Math.min(this.left, other.left);
+        const top = Math.min(this.top, other.top);
+        const right = Math.max(this.right, other.right);
+        const bottom = Math.max(this.bottom, other.bottom);
+        
+        return new BoundingBox(left, top, right - left, bottom - top);
+    }
+    
+    /**
+     * Inflate (expand) bounding box by amount
+     * @param {number} amount - Amount to inflate (positive to expand, negative to shrink)
+     */
+    inflate(amount) {
+        this.x -= amount;
+        this.y -= amount;
+        this.width += amount * 2;
+        this.height += amount * 2;
+        
+        // Ensure width/height don't go negative
+        this.width = Math.max(0, this.width);
+        this.height = Math.max(0, this.height);
+    }
+    
+    /**
+     * Move bounding box by offset
+     * @param {number} dx - X offset
+     * @param {number} dy - Y offset
+     */
+    move(dx, dy) {
+        this.x += dx;
+        this.y += dy;
+    }
+    
+    /**
+     * Scale bounding box by factor
+     * @param {number} scale - Scale factor
+     * @param {number} [originX] - Scale origin X (defaults to center)
+     * @param {number} [originY] - Scale origin Y (defaults to center)
+     */
+    scale(scale, originX = this.centerX, originY = this.centerY) {
+        const newWidth = this.width * scale;
+        const newHeight = this.height * scale;
+        
+        this.x = originX - (originX - this.x) * scale;
+        this.y = originY - (originY - this.y) * scale;
+        this.width = newWidth;
+        this.height = newHeight;
+    }
+    
+    /**
+     * Get area of bounding box
+     * @returns {number} Area
+     */
+    getArea() {
+        return this.width * this.height;
+    }
+    
+    /**
+     * Get perimeter of bounding box
+     * @returns {number} Perimeter
+     */
+    getPerimeter() {
+        return 2 * (this.width + this.height);
+    }
+    
+    /**
+     * Check if bounding box is empty (zero area)
+     * @returns {boolean} True if empty
+     */
+    isEmpty() {
+        return this.width <= 0 || this.height <= 0;
+    }
+    
+    /**
+     * Check if bounding box is valid
+     * @returns {boolean} True if valid
+     */
+    isValid() {
+        return !isNaN(this.x) && !isNaN(this.y) && 
+               !isNaN(this.width) && !isNaN(this.height) &&
+               this.width >= 0 && this.height >= 0;
+    }
+    
+    /**
+     * Calculate distance from point to bounding box
+     * @param {number} x - X coordinate
+     * @param {number} y - Y coordinate
+     * @returns {number} Distance (0 if point is inside)
+     */
+    distanceToPoint(x, y) {
+        if (this.containsPoint(x, y)) {
+            return 0;
+        }
+        
+        const dx = Math.max(0, Math.max(this.left - x, x - this.right));
+        const dy = Math.max(0, Math.max(this.top - y, y - this.bottom));
+        
+        return Math.sqrt(dx * dx + dy * dy);
+    }
+    
+    /**
+     * Get corners of bounding box
+     * @returns {Array<Object>} Array of {x, y} corner points
+     */
+    getCorners() {
+        return [
+            { x: this.left, y: this.top },      // Top-left
+            { x: this.right, y: this.top },     // Top-right
+            { x: this.right, y: this.bottom },  // Bottom-right
+            { x: this.left, y: this.bottom }    // Bottom-left
+        ];
+    }
+    
+    /**
+     * Create a copy of this bounding box
+     * @returns {BoundingBox} New bounding box instance
+     */
+    clone() {
+        return new BoundingBox(this.x, this.y, this.width, this.height);
+    }
+    
+    /**
+     * Get string representation
+     * @returns {string} String representation
+     */
+    toString() {
+        return `BoundingBox(${this.x}, ${this.y}, ${this.width}, ${this.height})`;
+    }
+    
+    /**
+     * Convert to JSON object
+     * @returns {Object} JSON representation
+     */
+    toJSON() {
+        return {
+            x: this.x,
+            y: this.y,
+            width: this.width,
+            height: this.height
+        };
+    }
+    
+    /**
+     * Create bounding box from JSON object
+     * @param {Object} json - JSON representation
+     * @returns {BoundingBox} New bounding box instance
+     */
+    static fromJSON(json) {
+        return new BoundingBox(json.x, json.y, json.width, json.height);
+    }
+    
+    /**
+     * Create bounding box from array of points
+     * @param {Array<Object>} points - Array of {x, y} points
+     * @returns {BoundingBox} Bounding box containing all points
+     */
+    static fromPoints(points) {
+        if (points.length === 0) {
+            return new BoundingBox();
+        }
+        
+        let minX = Infinity, minY = Infinity;
+        let maxX = -Infinity, maxY = -Infinity;
+        
+        points.forEach(point => {
+            minX = Math.min(minX, point.x);
+            minY = Math.min(minY, point.y);
+            maxX = Math.max(maxX, point.x);
+            maxY = Math.max(maxY, point.y);
+        });
+        
+        return new BoundingBox(minX, minY, maxX - minX, maxY - minY);
+    }
+}