@teachinglab/omd 0.7.0 → 0.7.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/README.md +1 -1
  2. package/canvas/core/omdCanvas.js +4 -0
  3. package/canvas/ui/toolbar.js +6 -1
  4. package/docs/api/index.md +1 -1
  5. package/docs/api-reference.md +1 -1
  6. package/docs/index.html +2 -2
  7. package/docs/index.md +1 -1
  8. package/index.js +1 -1
  9. package/npm-docs/README.md +1 -1
  10. package/npm-docs/api/api-reference.md +1 -1
  11. package/npm-docs/api/index.md +1 -1
  12. package/npm-docs/guides/getting-started.md +1 -1
  13. package/omd/core/omdEquationStack.js +4 -4
  14. package/omd/display/omdToolbar.js +1 -1
  15. package/package.json +1 -1
  16. package/readme.html +2 -2
  17. package/README.old.md +0 -138
package/README.md CHANGED
@@ -1,4 +1,4 @@
1
- # OMD (On-screen Math Display)
1
+ # OMD (Open Math Display)
2
2
 
3
3
  > A JavaScript library for creating interactive mathematical interfaces in web applications
4
4
 
package/canvas/core/omdCanvas.js CHANGED
@@ -204,6 +204,10 @@ export class omdCanvas {
204
204
  addStroke(stroke) {
205
205
  const id = `stroke_${++this.strokeCounter}`;
206
206
  stroke.id = id;
207
+ if (stroke.element) {
208
+ stroke.element.setAttribute('data-stroke-id', id);
209
+ stroke.element.id = id;
210
+ }
207
211
  this.strokes.set(id, stroke);
208
212
  this.drawingLayer.appendChild(stroke.element);
209
213
 
package/canvas/ui/toolbar.js CHANGED
@@ -41,6 +41,11 @@ export class Toolbar {
41
41
  // Create a jsvgGroup for the toolbar
42
42
  this.toolbarGroup = new jsvgGroup();
43
43
 
44
+ // Stop pointer events from bubbling to canvas to prevent drawing while interacting with toolbar
45
+ const stopPropagation = (e) => e.stopPropagation();
46
+ this.toolbarGroup.svgObject.addEventListener('pointerdown', stopPropagation);
47
+ this.toolbarGroup.svgObject.addEventListener('pointermove', stopPropagation);
48
+ this.toolbarGroup.svgObject.addEventListener('pointerup', stopPropagation);
44
49
 
45
50
  // Create background rectangle
46
51
  this.background = new jsvgRect();
@@ -135,7 +140,7 @@ export class Toolbar {
135
140
  const button = new jsvgButton();
136
141
  button.setWidthAndHeight(size, size);
137
142
  button.setCornerRadius(size / 2); // Make it circular
138
- button.setFillColor('white');
143
+ button.setFillColor(this.omdColor.lightGray);
139
144
 
140
145
  // Remove any default text from the button group (if present)
141
146
  // jsvgButton may add a <text> element by default; remove it
package/docs/api/index.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # OMD Library Entry Point
2
2
 
3
- This module (`omd/core/index.js`) serves as the main entry point for the OMD (On-screen Math Display) library. It re-exports all core classes, visualization components, and utility functions, making them easily accessible from a single import.
3
+ This module (`omd/core/index.js`) serves as the main entry point for the OMD (Open Math Display) library. It re-exports all core classes, visualization components, and utility functions, making them easily accessible from a single import.
4
4
 
5
5
  ## Overview
6
6
 
package/docs/api-reference.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # OMD Library API Reference
2
2
 
3
- > This is the complete API reference for the OMD (On-screen Math Display) library. Use the table of contents below to navigate to the detailed documentation for each module and class.
3
+ > This is the complete API reference for the OMD (Open Math Display) library. Use the table of contents below to navigate to the detailed documentation for each module and class.
4
4
 
5
5
  ---
6
6
 
package/docs/index.html CHANGED
@@ -244,7 +244,7 @@
244
244
  <body>
245
245
  <div class="header">
246
246
  <h1>OMD Library Documentation</h1>
247
- <p>On-screen Math Display - Interactive Mathematical Expression Rendering</p>
247
+ <p>Open Math Display - Interactive Mathematical Expression Rendering</p>
248
248
  <span class="version-badge">v1.0.0</span>
249
249
  </div>
250
250
 
@@ -304,7 +304,7 @@
304
304
  <main class="content">
305
305
  <section id="overview">
306
306
  <h2>Overview</h2>
307
- <p>OMD (On-screen Math Display) is a powerful JavaScript library for rendering and manipulating mathematical expressions. It provides a flexible and intuitive API for creating interactive math visualizations.</p>
307
+ <p>OMD (Open Math Display) is a powerful JavaScript library for rendering and manipulating mathematical expressions. It provides a flexible and intuitive API for creating interactive math visualizations.</p>
308
308
 
309
309
  <div class="quick-links">
310
310
  <a href="../examples/index.html" class="quick-link">
package/docs/index.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # OMD Documentation
2
2
 
3
- Welcome to the On-screen Math Display (OMD) documentation.
3
+ Welcome to the Open Math Display (OMD) documentation.
4
4
 
5
5
  ## Getting Started
6
6
 
package/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * OMD Library - Main Entry Point
3
3
  *
4
- * This is the main entry point for the OMD (On-screen Math Display) library.
4
+ * This is the main entry point for the OMD (Open Math Display) library.
5
5
  * It exports all core OMD components and visualization tools from a single endpoint.
6
6
  *
7
7
  * Usage:
package/npm-docs/README.md CHANGED
@@ -1,4 +1,4 @@
1
- # OMD (On-screen Math Display)
1
+ # OMD (Open Math Display)
2
2
 
3
3
  > A JavaScript library for creating interactive mathematical interfaces in web applications
4
4
 
package/npm-docs/api/api-reference.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # OMD Library API Reference
2
2
 
3
- > This is the complete API reference for the OMD (On-screen Math Display) library. Use the table of contents below to navigate to the detailed documentation for each module and class.
3
+ > This is the complete API reference for the OMD (Open Math Display) library. Use the table of contents below to navigate to the detailed documentation for each module and class.
4
4
 
5
5
  ---
6
6
 
package/npm-docs/api/index.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # OMD Library Entry Point
2
2
 
3
- This module (`omd/core/index.js`) serves as the main entry point for the OMD (On-screen Math Display) library. It re-exports all core classes, visualization components, and utility functions, making them easily accessible from a single import.
3
+ This module (`omd/core/index.js`) serves as the main entry point for the OMD (Open Math Display) library. It re-exports all core classes, visualization components, and utility functions, making them easily accessible from a single import.
4
4
 
5
5
  ## Overview
6
6
 
package/npm-docs/guides/getting-started.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # Getting Started with OMD
2
2
 
3
- This guide will help you install and start using OMD (On-screen Math Display) in your project.
3
+ This guide will help you install and start using OMD (Open Math Display) in your project.
4
4
 
5
5
  ## Installation
6
6
 
package/omd/core/omdEquationStack.js CHANGED
@@ -240,7 +240,7 @@ export class omdEquationStack extends jsvgGroup {
240
240
  const effectivePadding = (typeof padding === 'number') ? padding : this.overlayPadding;
241
241
 
242
242
  // Compute top-left of toolbar in container coordinates using UN-SCALED toolbar size
243
- // because we counter-scale the toolbar by 1/s to keep constant on-screen size.
243
+ // because we counter-scale the toolbar by 1/s to keep constant Open size.
244
244
  let containerX = (containerWidth - toolbarWidth) / 2;
245
245
  let containerY = containerHeight - toolbarHeight - effectivePadding;
246
246
  // Snap to integer pixels to avoid subpixel jitter when scaling
@@ -259,7 +259,7 @@ export class omdEquationStack extends jsvgGroup {
259
259
  const svgViewBox = rootSVG?.getAttribute?.('viewBox') || 'unknown';
260
260
 
261
261
 
262
- // Counter-scale the toolbar so it remains a constant on-screen size
262
+ // Counter-scale the toolbar so it remains a constant Open size
263
263
  if (typeof toolbarGroup.setScale === 'function') {
264
264
  toolbarGroup.setScale(1 / s);
265
265
  }
@@ -287,7 +287,7 @@ export class omdEquationStack extends jsvgGroup {
287
287
  * @param {number} [opts.offsetX=0] - Horizontal offset in screen pixels (positive -> right)
288
288
  * @param {number} [opts.offsetY=0] - Vertical offset in screen pixels (positive -> down)
289
289
  * @param {number} [opts.padding=16] - Padding from edges when computing anchor
290
- * @param {boolean} [opts.counterScale=true] - Whether to counter-scale the child to keep constant on-screen size
290
+ * @param {boolean} [opts.counterScale=true] - Whether to counter-scale the child to keep constant Open size
291
291
  * @param {boolean} [opts.addToStack=true] - Whether to add the child to this stack's children (default true)
292
292
  * @param {{x:number,y:number}|null} [opts.customCoords=null] - If anchor==='custom', use these screen coords
293
293
  * @returns {object|null} The child or null if not applicable
@@ -352,7 +352,7 @@ export class omdEquationStack extends jsvgGroup {
352
352
  const x = (containerX - stackX) / s;
353
353
  const y = (containerY - stackY) / s;
354
354
 
355
- // Optionally counter-scale child to keep constant on-screen size
355
+ // Optionally counter-scale child to keep constant Open size
356
356
  if (counterScale && child && typeof child.setScale === 'function') {
357
357
  try { child.setScale(1 / s); } catch (_) {}
358
358
  }
package/omd/display/omdToolbar.js CHANGED
@@ -165,7 +165,7 @@ export class omdToolbar {
165
165
  }
166
166
 
167
167
  if (popupGroup) {
168
- // Attach to toolbar group so it inherits toolbar counter-scaling (keeps constant on-screen size)
168
+ // Attach to toolbar group so it inherits toolbar counter-scaling (keeps constant Open size)
169
169
  this.elements.toolbarGroup.addChild(popupGroup);
170
170
  this.state.activePopup = { type: popupType, group: popupGroup };
171
171
  // Ensure the toolbar and popup are on top of all siblings inside the SVG
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@teachinglab/omd",
3
- "version": "0.7.0",
3
+ "version": "0.7.2",
4
4
  "description": "omd",
5
5
  "main": "./index.js",
6
6
  "module": "./index.js",
package/readme.html CHANGED
@@ -3,7 +3,7 @@
3
3
  <head>
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>OMD (On-screen Math Display) - OMD Documentation</title>
6
+ <title>OMD (Open Math Display) - OMD Documentation</title>
7
7
  <style>
8
8
  body {
9
9
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
@@ -145,7 +145,7 @@
145
145
  </div>
146
146
 
147
147
  <div class="content">
148
- <h1 id="omd-on-screen-math-display">OMD (On-screen Math Display)</h1>
148
+ <h1 id="omd-on-screen-math-display">OMD (Open Math Display)</h1>
149
149
  <blockquote>
150
150
  <p>A JavaScript library for creating interactive mathematical interfaces in web applications</p>
151
151
  </blockquote>
package/README.old.md DELETED
@@ -1,138 +0,0 @@
1
- # OMD (On-screen Math Display)
2
-
3
- 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.
4
-
5
- ![OMD Demo](https://i.imgur.com/CdtEi33.png)
6
-
7
- ## Features
8
-
9
- ### **Interactive Math Rendering**
10
- - High-quality SVG-based mathematical notation
11
- - Real-time expression manipulation and visualization
12
- - Automatic layout and alignment for complex equations
13
-
14
- ### **Step-by-Step Solutions**
15
- - Visual step tracking with detailed explanations
16
- - Simplification engine with rule-based transformations
17
- - Provenance tracking for highlighting related elements
18
-
19
- ### **Rich UI Components**
20
- - Built-in toolbar for common mathematical operations
21
- - Drag & drop interface for intuitive manipulation
22
- - Customizable canvas for multi-expression layouts
23
-
24
- ### **Educational Features**
25
- - Interactive learning experiences
26
- - Progressive step revelation
27
- - Visual operation feedback and highlighting
28
-
29
- ## Installation
30
-
31
- ### npm
32
- ```bash
33
- npm install @teachinglab/omd
34
- ```
35
-
36
- ## Basic Usage
37
- ```javascript
38
- import { omdDisplay } from '@teachinglab/omd';
39
-
40
- // Create a math display
41
- const container = document.getElementById('math-container');
42
- const display = new omdDisplay(container);
43
-
44
- // Render an equation
45
- display.render('2x + 3 = 11');
46
- ```
47
-
48
- ### Step-by-Step Solutions
49
- ```javascript
50
- import { omdEquationStack, omdEquationNode } from '@teachinglab/omd';
51
-
52
- // Create solution steps
53
- const steps = [
54
- omdEquationNode.fromString('2x + 3 = 11'),
55
- omdEquationNode.fromString('2x = 8'),
56
- omdEquationNode.fromString('x = 4')
57
- ];
58
-
59
- // Create interactive equation stack
60
- const stack = new omdEquationStack(steps, {
61
- toolbar: true,
62
- stepVisualizer: true
63
- });
64
-
65
- display.render(stack);
66
- ```
67
-
68
- ## Core Concepts
69
-
70
- ### **Nodes** - Building Blocks
71
- Every mathematical element is a node in an expression tree:
72
- - `omdEquationNode` - Complete equations (e.g., `2x + 3 = 11`)
73
- - `omdConstantNode` - Numbers (e.g., `5`, `3.14`)
74
- - `omdVariableNode` - Variables (e.g., `x`, `y`)
75
- - `omdBinaryExpressionNode` - Operations (e.g., `+`, `-`, `*`, `/`)
76
-
77
- ### **Sequences** - Solution Steps
78
- Group related equations for step-by-step solving:
79
- ```javascript
80
- const sequence = new omdEquationSequenceNode([
81
- equation1, equation2, equation3
82
- ]);
83
- ```
84
-
85
- ### **Display** - Rendering Engine
86
- Handles layout, centering, and visualization:
87
- ```javascript
88
- const display = new omdDisplay(container, {
89
- fontSize: 36,
90
- centerContent: true
91
- });
92
- ```
93
-
94
- ## Interactive Examples
95
-
96
- Explore OMD's capabilities with our comprehensive examples:
97
-
98
- | Category | Example | Description |
99
- |----------|---------|-------------|
100
- | **Getting Started** | [Minimal](examples/minimal.html) | Basic equation rendering |
101
- | | [Simple Usage](examples/simple-usage.html) | Interactive features |
102
- | **Advanced** | [Expression Playground](examples/expression-playground.html) | Full manipulation interface |
103
- | | [Drag & Drop](examples/drag-and-drop-playground.html) | Intuitive interaction |
104
- | **Educational** | [Worked Solutions](examples/worked-solution.html) | Step-by-step solving |
105
- | | [Kids Interactive](examples/kids-interactive.html) | Child-friendly interface |
106
- | **Components** | [Equation Stack](examples/equation-stack-test.html) | Stacked equations |
107
- | | [Canvas Demo](examples/canvas-multiple-nodes.html) | Multi-expression layouts |
108
-
109
- **[Browse All Examples](examples/index.html)**
110
-
111
- ## Documentation
112
-
113
- | Resource | Description |
114
- |----------|-------------|
115
- | **[API Reference](docs/api-reference.md)** | Complete component documentation |
116
- | **[User Guide](docs/user-guide.md)** | Getting started and tutorials |
117
-
118
-
119
- ## Architecture
120
-
121
- ```
122
- OMD Library Structure
123
- ├── Display Layer (omdDisplay)
124
- ├── Node System (Expression tree components)
125
- ├── UI Components (Toolbar, Step visualizer)
126
- ├── Core Systems (Simplification, Layout)
127
- └── Utilities (Configuration, Helpers)
128
- ```
129
-
130
- ## Dependencies
131
-
132
- - **JSVG** - High-performance SVG rendering
133
- - **math.js** - Mathematical expression parsing
134
- - **Modern Browser** - ES6 modules, SVG support
135
-
136
- ---
137
-
138
- **Ready to get started?** Check out our [examples](examples/index.html) or dive into the [documentation](docs/api-reference.md)!