@teachinglab/omd 0.6.1 → 0.6.3

package/README.old.md

@@ -1,138 +1,138 @@
-# OMD (Open Math Display)
-
-OMD is a JavaScript library for creating interactive mathematical interfaces in web applications. Build everything from simple equation displays to complex step-by-step solution systems with rich visual feedback and user interaction.
-
-![OMD Demo](https://i.imgur.com/CdtEi33.png)
-
-## Features
-
-### **Interactive Math Rendering**
-- High-quality SVG-based mathematical notation
-- Real-time expression manipulation and visualization
-- Automatic layout and alignment for complex equations
-
-### **Step-by-Step Solutions**
-- Visual step tracking with detailed explanations
-- Simplification engine with rule-based transformations
-- Provenance tracking for highlighting related elements
-
-### **Rich UI Components**
-- Built-in toolbar for common mathematical operations
-- Drag & drop interface for intuitive manipulation
-- Customizable canvas for multi-expression layouts
-
-### **Educational Features**
-- Interactive learning experiences
-- Progressive step revelation
-- Visual operation feedback and highlighting
-
-## Installation
-
-### npm
-```bash
-npm install @teachinglab/omd
-```
-
-## Basic Usage
-```javascript
-import { omdDisplay } from '@teachinglab/omd';
-
-// Create a math display
-const container = document.getElementById('math-container');
-const display = new omdDisplay(container);
-
-// Render an equation
-display.render('2x + 3 = 11');
-```
-
-### Step-by-Step Solutions
-```javascript
-import { omdEquationStack, omdEquationNode } from '@teachinglab/omd';
-
-// Create solution steps
-const steps = [
-    omdEquationNode.fromString('2x + 3 = 11'),
-    omdEquationNode.fromString('2x = 8'),
-    omdEquationNode.fromString('x = 4')
-];
-
-// Create interactive equation stack
-const stack = new omdEquationStack(steps, {
-    toolbar: true,
-    stepVisualizer: true
-});
-
-display.render(stack);
-```
-
-## Core Concepts
-
-### **Nodes** - Building Blocks
-Every mathematical element is a node in an expression tree:
-- `omdEquationNode` - Complete equations (e.g., `2x + 3 = 11`)
-- `omdConstantNode` - Numbers (e.g., `5`, `3.14`)
-- `omdVariableNode` - Variables (e.g., `x`, `y`)
-- `omdBinaryExpressionNode` - Operations (e.g., `+`, `-`, `*`, `/`)
-
-### **Sequences** - Solution Steps
-Group related equations for step-by-step solving:
-```javascript
-const sequence = new omdEquationSequenceNode([
-    equation1, equation2, equation3
-]);
-```
-
-### **Display** - Rendering Engine
-Handles layout, centering, and visualization:
-```javascript
-const display = new omdDisplay(container, {
-    fontSize: 36,
-    centerContent: true
-});
-```
-
-## Interactive Examples
-
-Explore OMD's capabilities with our comprehensive examples:
-
-| Category | Example | Description |
-|----------|---------|-------------|
-| **Getting Started** | [Minimal](examples/minimal.html) | Basic equation rendering |
-| | [Simple Usage](examples/simple-usage.html) | Interactive features |
-| **Advanced** | [Expression Playground](examples/expression-playground.html) | Full manipulation interface |
-| | [Drag & Drop](examples/drag-and-drop-playground.html) | Intuitive interaction |
-| **Educational** | [Worked Solutions](examples/worked-solution.html) | Step-by-step solving |
-| | [Kids Interactive](examples/kids-interactive.html) | Child-friendly interface |
-| **Components** | [Equation Stack](examples/equation-stack-test.html) | Stacked equations |
-| | [Canvas Demo](examples/canvas-multiple-nodes.html) | Multi-expression layouts |
-
-**[Browse All Examples](examples/index.html)**
-
-## Documentation
-
-| Resource | Description |
-|----------|-------------|
-| **[API Reference](docs/api-reference.md)** | Complete component documentation |
-| **[User Guide](docs/user-guide.md)** | Getting started and tutorials |
-
-
-## Architecture
-
-```
-OMD Library Structure
-├── Display Layer (omdDisplay)
-├── Node System (Expression tree components)
-├── UI Components (Toolbar, Step visualizer)
-├── Core Systems (Simplification, Layout)
-└── Utilities (Configuration, Helpers)
-```
-
-## Dependencies
-
-- **JSVG** - High-performance SVG rendering
-- **math.js** - Mathematical expression parsing
-- **Modern Browser** - ES6 modules, SVG support
-
----
-
+# OMD (On-screen Math Display)
+
+OMD is a JavaScript library for creating interactive mathematical interfaces in web applications. Build everything from simple equation displays to complex step-by-step solution systems with rich visual feedback and user interaction.
+
+![OMD Demo](https://i.imgur.com/CdtEi33.png)
+
+## Features
+
+### **Interactive Math Rendering**
+- High-quality SVG-based mathematical notation
+- Real-time expression manipulation and visualization
+- Automatic layout and alignment for complex equations
+
+### **Step-by-Step Solutions**
+- Visual step tracking with detailed explanations
+- Simplification engine with rule-based transformations
+- Provenance tracking for highlighting related elements
+
+### **Rich UI Components**
+- Built-in toolbar for common mathematical operations
+- Drag & drop interface for intuitive manipulation
+- Customizable canvas for multi-expression layouts
+
+### **Educational Features**
+- Interactive learning experiences
+- Progressive step revelation
+- Visual operation feedback and highlighting
+
+## Installation
+
+### npm
+```bash
+npm install @teachinglab/omd
+```
+
+## Basic Usage
+```javascript
+import { omdDisplay } from '@teachinglab/omd';
+
+// Create a math display
+const container = document.getElementById('math-container');
+const display = new omdDisplay(container);
+
+// Render an equation
+display.render('2x + 3 = 11');
+```
+
+### Step-by-Step Solutions
+```javascript
+import { omdEquationStack, omdEquationNode } from '@teachinglab/omd';
+
+// Create solution steps
+const steps = [
+    omdEquationNode.fromString('2x + 3 = 11'),
+    omdEquationNode.fromString('2x = 8'),
+    omdEquationNode.fromString('x = 4')
+];
+
+// Create interactive equation stack
+const stack = new omdEquationStack(steps, {
+    toolbar: true,
+    stepVisualizer: true
+});
+
+display.render(stack);
+```
+
+## Core Concepts
+
+### **Nodes** - Building Blocks
+Every mathematical element is a node in an expression tree:
+- `omdEquationNode` - Complete equations (e.g., `2x + 3 = 11`)
+- `omdConstantNode` - Numbers (e.g., `5`, `3.14`)
+- `omdVariableNode` - Variables (e.g., `x`, `y`)
+- `omdBinaryExpressionNode` - Operations (e.g., `+`, `-`, `*`, `/`)
+
+### **Sequences** - Solution Steps
+Group related equations for step-by-step solving:
+```javascript
+const sequence = new omdEquationSequenceNode([
+    equation1, equation2, equation3
+]);
+```
+
+### **Display** - Rendering Engine
+Handles layout, centering, and visualization:
+```javascript
+const display = new omdDisplay(container, {
+    fontSize: 36,
+    centerContent: true
+});
+```
+
+## Interactive Examples
+
+Explore OMD's capabilities with our comprehensive examples:
+
+| Category | Example | Description |
+|----------|---------|-------------|
+| **Getting Started** | [Minimal](examples/minimal.html) | Basic equation rendering |
+| | [Simple Usage](examples/simple-usage.html) | Interactive features |
+| **Advanced** | [Expression Playground](examples/expression-playground.html) | Full manipulation interface |
+| | [Drag & Drop](examples/drag-and-drop-playground.html) | Intuitive interaction |
+| **Educational** | [Worked Solutions](examples/worked-solution.html) | Step-by-step solving |
+| | [Kids Interactive](examples/kids-interactive.html) | Child-friendly interface |
+| **Components** | [Equation Stack](examples/equation-stack-test.html) | Stacked equations |
+| | [Canvas Demo](examples/canvas-multiple-nodes.html) | Multi-expression layouts |
+
+**[Browse All Examples](examples/index.html)**
+
+## Documentation
+
+| Resource | Description |
+|----------|-------------|
+| **[API Reference](docs/api-reference.md)** | Complete component documentation |
+| **[User Guide](docs/user-guide.md)** | Getting started and tutorials |
+
+
+## Architecture
+
+```
+OMD Library Structure
+├── Display Layer (omdDisplay)
+├── Node System (Expression tree components)
+├── UI Components (Toolbar, Step visualizer)
+├── Core Systems (Simplification, Layout)
+└── Utilities (Configuration, Helpers)
+```
+
+## Dependencies
+
+- **JSVG** - High-performance SVG rendering
+- **math.js** - Mathematical expression parsing
+- **Modern Browser** - ES6 modules, SVG support
+
+---
+
 **Ready to get started?** Check out our [examples](examples/index.html) or dive into the [documentation](docs/api-reference.md)!

package/canvas/core/canvasConfig.js

@@ -1,203 +1,203 @@
-export class CanvasConfig {
-    /**
-     * @param {Object} options - Configuration options
-     */
-    constructor(options = {}) {
-        // Default configuration
-        this.width = options.width || 800;
-        this.height = options.height || 500;
-        this.backgroundColor = options.backgroundColor || 'white';
-        
-        // UI options
-        this.showToolbar = options.showToolbar !== false;
-        this.showGrid = options.showGrid || false;
-        this.gridSpacing = options.gridSpacing || 20;
-        
-        // Tool configuration
-        this.enabledTools = options.enabledTools || ['pointer', 'pencil', 'eraser', 'select'];
-        this.defaultTool = options.defaultTool || 'pointer';
-        
-        // Feature flags
-        this.enableFocusFrames = options.enableFocusFrames !== false;
-        this.enableKeyboardShortcuts = options.enableKeyboardShortcuts !== false;
-        this.enableMultiTouch = options.enableMultiTouch !== false;
-        
-        // Tool defaults
-        this.tools = {
-            pencil: {
-                strokeWidth: 5,
-                strokeColor: '#000000',
-                strokeOpacity: 1,
-                smoothing: 0.5,
-                pressureSensitivity: true,
-                ...options.tools?.pencil
-            },
-            eraser: {
-                size: 20,
-                hardness: 0.8,
-                ...options.tools?.eraser
-            },
-            select: {
-                selectionColor: '#007bff',
-                selectionOpacity: 0.3,
-                ...options.tools?.select
-            }
-        };
-        
-        // Theme
-        this.theme = {
-            primary: '#007bff',
-            secondary: '#6c757d',
-            success: '#28a745',
-            warning: '#ffc107',
-            danger: '#dc3545',
-            ...options.theme
-        };
-        
-        // Validate configuration
-        this._validate();
-    }
-    
-    /**
-     * Validate configuration
-     * @private
-     */
-    _validate() {
-        // Validate dimensions
-        if (this.width <= 0 || this.height <= 0) {
-            throw new Error('Canvas dimensions must be positive numbers');
-        }
-        
-        // Validate enabled tools
-        const availableTools = ['pointer', 'pencil', 'eraser', 'select'];
-        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'];
-        }
-        
-        // Validate default tool
-        if (!this.enabledTools.includes(this.defaultTool)) {
-            this.defaultTool = this.enabledTools[0];
-        }
-        
-        // Validate tool configurations
-        this._validateToolConfigs();
-    }
-    
-    /**
-     * Validate tool configurations
-     * @private
-     */
-    _validateToolConfigs() {
-        // Validate pencil config
-        if (this.tools.pencil.strokeWidth <= 0) {
-            this.tools.pencil.strokeWidth = 5;
-        }
-        if (this.tools.pencil.strokeOpacity < 0 || this.tools.pencil.strokeOpacity > 1) {
-            this.tools.pencil.strokeOpacity = 1;
-        }
-        
-        // Validate eraser config
-        if (this.tools.eraser.size <= 0) {
-            this.tools.eraser.size = 20;
-        }
-        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
-     */
-    update(updates) {
-        Object.assign(this, updates);
-        this._validate();
-    }
-    
-    /**
-     * Get tool configuration
-     * @param {string} toolName - Tool name
-     * @returns {Object} Tool configuration
-     */
-    getToolConfig(toolName) {
-        return this.tools[toolName] || {};
-    }
-    
-    /**
-     * Update tool configuration
-     * @param {string} toolName - Tool name
-     * @param {Object} config - Tool configuration updates
-     */
-    updateToolConfig(toolName, config) {
-        if (!this.tools[toolName]) {
-            this.tools[toolName] = {};
-        }
-        Object.assign(this.tools[toolName], config);
-        this._validateToolConfigs();
-    }
-    
-    /**
-     * Clone configuration
-     * @returns {CanvasConfig} New configuration instance
-     */
-    clone() {
-        return new CanvasConfig({
-            width: this.width,
-            height: this.height,
-            backgroundColor: this.backgroundColor,
-            showToolbar: this.showToolbar,
-            showGrid: this.showGrid,
-            gridSpacing: this.gridSpacing,
-            enabledTools: [...this.enabledTools],
-            defaultTool: this.defaultTool,
-            enableFocusFrames: this.enableFocusFrames,
-            enableKeyboardShortcuts: this.enableKeyboardShortcuts,
-            enableMultiTouch: this.enableMultiTouch,
-            tools: JSON.parse(JSON.stringify(this.tools)),
-            theme: { ...this.theme }
-        });
-    }
-    
-    /**
-     * Convert to JSON
-     * @returns {Object} JSON representation
-     */
-    toJSON() {
-        return {
-            width: this.width,
-            height: this.height,
-            backgroundColor: this.backgroundColor,
-            showToolbar: this.showToolbar,
-            showGrid: this.showGrid,
-            gridSpacing: this.gridSpacing,
-            enabledTools: this.enabledTools,
-            defaultTool: this.defaultTool,
-            enableFocusFrames: this.enableFocusFrames,
-            enableKeyboardShortcuts: this.enableKeyboardShortcuts,
-            enableMultiTouch: this.enableMultiTouch,
-            tools: this.tools,
-            theme: this.theme
-        };
-    }
-    
-    /**
-     * Create from JSON
-     * @param {Object} data - JSON data
-     * @returns {CanvasConfig} New configuration instance
-     */
-    static fromJSON(data) {
-        return new CanvasConfig(data);
-    }
+export class CanvasConfig {
+    /**
+     * @param {Object} options - Configuration options
+     */
+    constructor(options = {}) {
+        // Default configuration
+        this.width = options.width || 800;
+        this.height = options.height || 500;
+        this.backgroundColor = options.backgroundColor || 'white';
+        
+        // UI options
+        this.showToolbar = options.showToolbar !== false;
+        this.showGrid = options.showGrid || false;
+        this.gridSpacing = options.gridSpacing || 20;
+        
+        // Tool configuration
+        this.enabledTools = options.enabledTools || ['pointer', 'pencil', 'eraser', 'select'];
+        this.defaultTool = options.defaultTool || 'pointer';
+        
+        // Feature flags
+        this.enableFocusFrames = options.enableFocusFrames !== false;
+        this.enableKeyboardShortcuts = options.enableKeyboardShortcuts !== false;
+        this.enableMultiTouch = options.enableMultiTouch !== false;
+        
+        // Tool defaults
+        this.tools = {
+            pencil: {
+                strokeWidth: 5,
+                strokeColor: '#000000',
+                strokeOpacity: 1,
+                smoothing: 0.5,
+                pressureSensitivity: true,
+                ...options.tools?.pencil
+            },
+            eraser: {
+                size: 20,
+                hardness: 0.8,
+                ...options.tools?.eraser
+            },
+            select: {
+                selectionColor: '#007bff',
+                selectionOpacity: 0.3,
+                ...options.tools?.select
+            }
+        };
+        
+        // Theme
+        this.theme = {
+            primary: '#007bff',
+            secondary: '#6c757d',
+            success: '#28a745',
+            warning: '#ffc107',
+            danger: '#dc3545',
+            ...options.theme
+        };
+        
+        // Validate configuration
+        this._validate();
+    }
+    
+    /**
+     * Validate configuration
+     * @private
+     */
+    _validate() {
+        // Validate dimensions
+        if (this.width <= 0 || this.height <= 0) {
+            throw new Error('Canvas dimensions must be positive numbers');
+        }
+        
+        // Validate enabled tools
+        const availableTools = ['pointer', 'pencil', 'eraser', 'select'];
+        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'];
+        }
+        
+        // Validate default tool
+        if (!this.enabledTools.includes(this.defaultTool)) {
+            this.defaultTool = this.enabledTools[0];
+        }
+        
+        // Validate tool configurations
+        this._validateToolConfigs();
+    }
+    
+    /**
+     * Validate tool configurations
+     * @private
+     */
+    _validateToolConfigs() {
+        // Validate pencil config
+        if (this.tools.pencil.strokeWidth <= 0) {
+            this.tools.pencil.strokeWidth = 5;
+        }
+        if (this.tools.pencil.strokeOpacity < 0 || this.tools.pencil.strokeOpacity > 1) {
+            this.tools.pencil.strokeOpacity = 1;
+        }
+        
+        // Validate eraser config
+        if (this.tools.eraser.size <= 0) {
+            this.tools.eraser.size = 20;
+        }
+        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
+     */
+    update(updates) {
+        Object.assign(this, updates);
+        this._validate();
+    }
+    
+    /**
+     * Get tool configuration
+     * @param {string} toolName - Tool name
+     * @returns {Object} Tool configuration
+     */
+    getToolConfig(toolName) {
+        return this.tools[toolName] || {};
+    }
+    
+    /**
+     * Update tool configuration
+     * @param {string} toolName - Tool name
+     * @param {Object} config - Tool configuration updates
+     */
+    updateToolConfig(toolName, config) {
+        if (!this.tools[toolName]) {
+            this.tools[toolName] = {};
+        }
+        Object.assign(this.tools[toolName], config);
+        this._validateToolConfigs();
+    }
+    
+    /**
+     * Clone configuration
+     * @returns {CanvasConfig} New configuration instance
+     */
+    clone() {
+        return new CanvasConfig({
+            width: this.width,
+            height: this.height,
+            backgroundColor: this.backgroundColor,
+            showToolbar: this.showToolbar,
+            showGrid: this.showGrid,
+            gridSpacing: this.gridSpacing,
+            enabledTools: [...this.enabledTools],
+            defaultTool: this.defaultTool,
+            enableFocusFrames: this.enableFocusFrames,
+            enableKeyboardShortcuts: this.enableKeyboardShortcuts,
+            enableMultiTouch: this.enableMultiTouch,
+            tools: JSON.parse(JSON.stringify(this.tools)),
+            theme: { ...this.theme }
+        });
+    }
+    
+    /**
+     * Convert to JSON
+     * @returns {Object} JSON representation
+     */
+    toJSON() {
+        return {
+            width: this.width,
+            height: this.height,
+            backgroundColor: this.backgroundColor,
+            showToolbar: this.showToolbar,
+            showGrid: this.showGrid,
+            gridSpacing: this.gridSpacing,
+            enabledTools: this.enabledTools,
+            defaultTool: this.defaultTool,
+            enableFocusFrames: this.enableFocusFrames,
+            enableKeyboardShortcuts: this.enableKeyboardShortcuts,
+            enableMultiTouch: this.enableMultiTouch,
+            tools: this.tools,
+            theme: this.theme
+        };
+    }
+    
+    /**
+     * Create from JSON
+     * @param {Object} data - JSON data
+     * @returns {CanvasConfig} New configuration instance
+     */
+    static fromJSON(data) {
+        return new CanvasConfig(data);
+    }
 }