@teachinglab/omd 0.1.9 → 0.2.0

package/omd/display/omdDisplay.js

@@ -22,25 +22,25 @@ export class omdDisplay {
             edgePadding: 16,      // Horizontal padding from edges when scaling
             ...options
         };
-        
+
         // Create SVG container
         this.svg = new jsvgContainer();
         this.node = null;
-        
+
         // Set up the SVG
         this._setupSVG();
     }
-    
+
     _setupSVG() {
         const width = this.container.offsetWidth || 800;
         const height = this.container.offsetHeight || 600;
-        
+
         this.svg.setViewbox(width, height);
         this.svg.svgObject.style.verticalAlign = "middle";
         // Enable internal scrolling via native SVG scrolling if content overflows
         this.svg.svgObject.style.overflow = 'hidden';
         this.container.appendChild(this.svg.svgObject);
-        
+
         // Handle resize
         if (window.ResizeObserver) {
             this.resizeObserver = new ResizeObserver(() => {
@@ -49,12 +49,12 @@ export class omdDisplay {
             this.resizeObserver.observe(this.container);
         }
     }
-    
+
     _handleResize() {
         const width = this.container.offsetWidth;
         const height = this.container.offsetHeight;
         this.svg.setViewbox(width, height);
-        
+
         if (this.options.centerContent && this.node) {
             this.centerNode();
         }
@@ -62,7 +62,7 @@ export class omdDisplay {
         // Reposition overlay toolbar (if any) on resize
         this._repositionOverlayToolbar();
     }
-    
+
     centerNode() {
         if (!this.node) return;
         const containerWidth = this.container.offsetWidth || 0;
@@ -140,26 +140,26 @@ export class omdDisplay {
             this.container.style.overflow = 'hidden';
         }
     }
-    
+
     fitToContent() {
         if (!this.node) {
             return;
         }
-        
+
         // Try to get actual rendered dimensions
         let actualWidth = 0;
         let actualHeight = 0;
-        
+
         // Get both sequence and current step dimensions
         let sequenceWidth = 0, sequenceHeight = 0;
         let stepWidth = 0, stepHeight = 0;
-        
+
         if (this.node.getSequence) {
             const sequence = this.node.getSequence();
             if (sequence && sequence.width && sequence.height) {
                 sequenceWidth = sequence.width;
                 sequenceHeight = sequence.height;
-                
+
                 // Check current step dimensions too
                 if (sequence.getCurrentStep) {
                     const currentStep = sequence.getCurrentStep();
@@ -168,39 +168,39 @@ export class omdDisplay {
                         stepHeight = currentStep.height;
                     }
                 }
-                
+
                 // Use the larger of sequence or step dimensions
                 actualWidth = Math.max(sequenceWidth, stepWidth);
                 actualHeight = Math.max(sequenceHeight, stepHeight);
             }
         }
-        
+
         // Fallback to node dimensions only if sequence/step dimensions aren't available
         if ((actualWidth === 0 || actualHeight === 0) && this.node.width && this.node.height) {
             actualWidth = this.node.width;
             actualHeight = this.node.height;
         }
-        
+
         // Fallback dimensions
         if (actualWidth === 0 || actualHeight === 0) {
             actualWidth = 200;
             actualHeight = 60;
         }
-        
+
         const padding = 10; // More comfortable padding to match user expectation
         const newWidth = actualWidth + (padding * 2);
         const newHeight = actualHeight + (padding * 2);
-        
-        
+
+
         // Position the content at the minimal padding offset FIRST
         if (this.node && this.node.setPosition) {
             this.node.setPosition(padding, padding);
         }
-        
+
         // Update SVG dimensions with viewBox starting from 0,0 since we repositioned content
         this.svg.setViewbox(newWidth, newHeight);
         this.svg.setWidthAndHeight(newWidth, newHeight);
-        
+
         // Update container
         this.container.style.width = `${newWidth}px`;
         this.container.style.height = `${newHeight}px`;
@@ -216,7 +216,7 @@ export class omdDisplay {
         if (this.node) {
             this.svg.removeChild(this.node);
         }
-        
+
         // Create node from expression
         if (typeof expression === 'string') {
             if (expression.includes(';')) {
@@ -241,7 +241,7 @@ export class omdDisplay {
             // Assume it's already a node
             this.node = expression;
         }
-        
+
         // Initialize and render
         const sequence = this.node.getSequence ? this.node.getSequence() : null;
         if (sequence) {
@@ -250,7 +250,7 @@ export class omdDisplay {
             sequence.updateStepsVisibility(step => (step.stepMark ?? 0) === sequence.getFilterLevel());
         }
         this.svg.addChild(this.node);
-        
+
         // Apply any stored font settings
         if (this.options.fontFamily) {
             // Small delay to ensure SVG elements are fully rendered
@@ -258,7 +258,7 @@ export class omdDisplay {
                 this.setFont(this.options.fontFamily, this.options.fontWeight || '400');
             }, 10);
         }
-        
+
         // Only use fitToContent for tight sizing when explicitly requested
         if (this.options.fitToContent) {
             this.fitToContent();
@@ -267,7 +267,7 @@ export class omdDisplay {
         }
         // Ensure overlay toolbar is positioned initially
         this._repositionOverlayToolbar();
-        
+
         // Provide a default global refresh function if not present
         if (typeof window !== 'undefined' && !window.refreshDisplayAndFilters) {
             window.refreshDisplayAndFilters = () => {
@@ -293,10 +293,42 @@ export class omdDisplay {
                 }
             };
         }
-        
+
         return this.node;
     }
-    
+
+    /**
+     * Add a jsvg child to the internal SVG container and optionally
+     * trigger layout/centering.
+     * @param {object} child - A jsvg node to add
+     */
+    addChild(child) {
+        this.svg.addChild(child);
+
+        if (this.options.centerContent) this.centerNode();
+
+        return child;
+    }
+
+    /**
+     * Remove a child previously added to the internal SVG container.
+     * @param {object} child
+     */
+    removeChild(child) {
+        if (!this.svg) return;
+        try {
+            if (typeof this.svg.removeChild === 'function') {
+                this.svg.removeChild(child);
+            } else if (child && child.svgObject && this.svg.svgObject && this.svg.svgObject.contains(child.svgObject)) {
+                this.svg.svgObject.removeChild(child.svgObject);
+            }
+        } catch (e) {
+            // no-op
+        }
+        // If the removed child was the main node, clear reference
+        if (this.node === child) this.node = null;
+    }
+
     /**
      * Updates the display with a new node
      * @param {omdNode} newNode - The new node to display
@@ -305,19 +337,19 @@ export class omdDisplay {
         if (this.node) {
             this.svg.removeChild(this.node);
         }
-        
+
         this.node = newNode;
         this.node.setFontSize(this.options.fontSize);
         this.node.initialize();
         this.svg.addChild(this.node);
-        
+
         if (this.options.centerContent) {
             this.centerNode();
         }
         // Ensure overlay toolbar is positioned on updates
         this._repositionOverlayToolbar();
     }
-    
+
     /**
      * Gets the current node
      * @returns {omdNode|null} The current node
@@ -345,7 +377,7 @@ export class omdDisplay {
             node.positionToolbarOverlay(containerWidth, containerHeight, 16);
         }
     }
-    
+
     /**
      * Sets the font size
      * @param {number} size - The font size
@@ -367,7 +399,7 @@ export class omdDisplay {
             }
         }
     }
-    
+
     /**
      * Sets the font family for all elements in the display
      * @param {string} fontFamily - CSS font-family string (e.g., '"Shantell Sans", cursive')
@@ -383,16 +415,16 @@ export class omdDisplay {
                 // Recursively apply to all children
                 Array.from(element.children || []).forEach(applyFont);
             };
-            
+
             // Apply font to the entire SVG
             applyFont(this.svg.svgObject);
-            
+
             // Store font settings for future use
             this.options.fontFamily = fontFamily;
             this.options.fontWeight = fontWeight;
         }
     }
-    
+
     /**
      * Clears the display
      */
@@ -402,7 +434,7 @@ export class omdDisplay {
             this.node = null;
         }
     }
-    
+
     /**
      * Destroys the renderer and cleans up resources
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teachinglab/omd",
-  "version": "0.1.9",
+  "version": "0.2.0",
   "description": "omd",
   "main": "./index.js",
   "module": "./index.js",