@teachinglab/omd 0.1.0

package/README.md

@@ -0,0 +1,138 @@
+# 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

@@ -0,0 +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 || ['pencil', 'eraser', 'select'];
+        this.defaultTool = options.defaultTool || 'pencil';
+        
+        // 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 = ['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);
+    }
+}