@myrmidon/gve-snapshot-rendition 2.0.1 → 2.0.3

package/dist/index.js

@@ -1385,7 +1385,7 @@ class TextRenderer {
         }
         // Apply r_t-value override if specified
         // This overrides the operation's value (the text being added) for display only
-        if (config.textValue) {
+        if (config.textValue !== null && config.textValue !== undefined) {
             this._logger.debug("TextRenderer", `Applying r_t-value override: "${config.textValue}" (original text had ${nodes.length} characters)`);
             // Replace node data with characters from r_t-value
             // If r_t-value has fewer characters than nodes, we only override the first N nodes
@@ -1417,124 +1417,186 @@ class TextRenderer {
         // Use first RBR for positioning (additional text doesn't repeat per RBR)
         const rbr = rbrs[0];
         this._logger.debug("TextRenderer", `Using RBR for positioning`, rbr);
-        // 2. Calculate text position based on r_t-position + offsets
-        const position = config.textPosition || "o"; // Default to origin if not specified
-        const targetPos = this.calculateTargetPosition(position, rbr);
-        // Parse offsets using RBR bounds (offsets can be like "0.5th" = half of RBR height)
+        // 2. Calculate position and offsets
+        const position = config.textPosition || "o";
         const offsetX = parseOffset(config.textOffsetX || 0, rbr.height, rbr.width);
         const offsetY = parseOffset(config.textOffsetY || 0, rbr.height, rbr.width);
-        // Pre-calculate text width to correctly align the EBR with the RBR target point.
-        // calculateTargetPosition returns the RBR alignment point, but the text renderer
-        // lays characters left-to-right from baseX, so we must shift left so the intended
-        // edge or center of the EBR lands on that point.
-        //   n/s/c/o: horizontal centers of EBR and RBR must coincide → shift left by half width
-        //   w/nw/sw: EBR right edge at RBR target X → shift left by full width
-        const textWidth = this.calculateTotalTextWidth(nodes);
-        let alignedX = targetPos.x;
-        switch (position) {
-            case "n":
-            case "s":
-            case "c":
-            case "o":
-                alignedX -= textWidth / 2;
-                break;
-            case "w":
-            case "nw":
-            case "sw":
-                alignedX -= textWidth;
-                break;
-        }
-        const baseX = alignedX + offsetX;
-        const baseY = targetPos.y + offsetY;
+        // 3. Render characters at preliminary positions (baseline y=0) into a hidden
+        //    temporary group so we can measure the actual visual EBR via getBBox().
+        //    This mirrors the hint renderer's approach: render → measure → reposition.
+        //    Using config font metrics here ensures correct character widths.
+        const initialPositions = this.calculateAdditionalTextPositions(nodes, 0, 0, config);
+        const tempGroup = createSVGElement("g");
+        tempGroup.setAttribute("visibility", "hidden");
+        rootSvg.appendChild(tempGroup);
+        const measuredElements = [];
+        for (let i = 0; i < nodes.length; i++) {
+            const node = nodes[i];
+            const pos = initialPositions[i];
+            if (isLineBreak(node) || isSpace(node))
+                continue;
+            const textEl = createTextElement(node.data, {
+                id: `n_${node.id}`,
+                class: `node version-${versionTag}`,
+                x: pos.x,
+                y: pos.y,
+            });
+            applyTextStyle(textEl, {
+                fontFamily: config.fontFamily,
+                fontSize: config.fontSize,
+                foreColor: config.foreColor,
+                backColor: config.backColor,
+                italic: config.italic,
+                bold: config.bold,
+            });
+            tempGroup.appendChild(textEl);
+            measuredElements.push({ el: textEl, node, initX: pos.x, initY: pos.y });
+        }
+        // 4. Measure actual visual EBR from the temp group
+        const ebrBbox = getSafeBBox(tempGroup);
+        const ebr = {
+            x: ebrBbox.x,
+            y: ebrBbox.y,
+            width: ebrBbox.width,
+            height: ebrBbox.height,
+            right: ebrBbox.x + ebrBbox.width,
+            bottom: ebrBbox.y + ebrBbox.height,
+        };
+        // 5. Compute translation: align EBR with RBR using the same logic as hints
+        const rbrAlignPoint = this.calculateRBRAlignmentPoint(position, rbr);
+        const ebrAlignPoint = this.calculateEBRAlignmentPoint(position, ebr);
+        const dx = rbrAlignPoint.x - ebrAlignPoint.x + offsetX;
+        const dy = rbrAlignPoint.y - ebrAlignPoint.y + offsetY;
+        tempGroup.remove();
         this._logger.debug("TextRenderer", `Text position calculated`, {
             position,
-            targetPos,
-            textWidth,
-            alignedX,
+            rbr,
+            ebr,
+            rbrAlignPoint,
+            ebrAlignPoint,
             offsets: { x: offsetX, y: offsetY },
-            base: { x: baseX, y: baseY },
+            translation: { dx, dy },
         });
-        // 3. Calculate positions for each character
-        const positions = this.calculateAdditionalTextPositions(nodes, baseX, baseY);
-        // 4. Calculate bounding rectangle for the text (needed for prolog)
-        const textBounds = this.calculateTextBounds(nodes, positions);
-        // 5. Check if prolog panning is needed (element visibility check)
-        // This must happen AFTER positioning, but BEFORE rendering characters
+        // 6. Compute final textBounds for prolog check
+        const textBounds = {
+            x: ebr.x + dx,
+            y: ebr.y + dy,
+            width: ebr.width,
+            height: ebr.height,
+            right: ebr.right + dx,
+            bottom: ebr.bottom + dy,
+        };
+        // 7. Check if prolog panning is needed
         if (panZoomInstance &&
             viewportWidth &&
             viewportHeight &&
-            this._settings.prologDuration > 0 &&
-            textBounds) {
+            this._settings.prologDuration > 0) {
             const isVisible = this._animationEngine.isElementVisible(textBounds, panZoomInstance, viewportWidth, viewportHeight);
             if (!isVisible) {
                 this._logger.debug("TextRenderer", `Additional text for ${versionTag} would be outside viewport, executing prolog`);
                 await this._animationEngine.animateProlog(panZoomInstance, textBounds, viewportWidth, viewportHeight, this._settings.prologDuration);
             }
         }
-        // 6. Get animation function if specified
+        // 8. Get animation function if specified
         const animationFn = this._settings.charAnimationId
             ? this._animationEngine
                 .getFactory()
                 .resolveAnimation(`#${this._settings.charAnimationId}`, this._settings.animations, "char")
             : undefined;
-        // 7. Render each character with features
-        for (let i = 0; i < nodes.length; i++) {
-            const node = nodes[i];
-            const pos = positions[i];
-            // Skip rendering for line breaks and spaces
-            if (isLineBreak(node) || isSpace(node)) {
-                continue;
+        // 9. Move each element to its final position and add to the SVG
+        for (const { el, node, initX, initY } of measuredElements) {
+            el.setAttribute("x", String(initX + dx));
+            el.setAttribute("y", String(initY + dy));
+            rootSvg.appendChild(el);
+            const bbox = getSafeBBox(el);
+            this._boundsCache.set(`n_${node.id}`, bbox);
+            if (animationFn) {
+                el.style.opacity = "0";
+                await this._animationEngine.animate(el, animationFn, rootSvg);
             }
-            await this.renderCharacter(node, pos, rootSvg, versionTag, animationFn, config);
         }
         this._logger.timeEnd(`renderAdditionalText-${versionTag}`);
     }
     /**
      * Calculate positions for additional text characters.
      * Additional text flows left to right from the base position.
+     * When config is provided its font metrics are used for character width
+     * measurement, matching what applyTextStyle will actually render.
      */
-    calculateAdditionalTextPositions(nodes, baseX, baseY) {
+    calculateAdditionalTextPositions(nodes, baseX, baseY, config) {
         const positions = [];
         let currentX = baseX;
         const currentY = baseY;
+        const fontSize = config?.fontSize ?? this._settings.fontSize;
+        const fontFamily = config?.fontFamily ?? this._settings.fontFamily;
+        const bold = config?.bold ?? this._settings.bold;
+        const italic = config?.italic ?? this._settings.italic;
         for (let i = 0; i < nodes.length; i++) {
             const node = nodes[i];
             if (isLineBreak(node)) {
-                // Line breaks in additional text just get stored but don't render
-                positions.push({
-                    x: currentX,
-                    y: currentY,
-                    nodeId: node.id,
-                    lineNumber: 0,
-                });
+                positions.push({ x: currentX, y: currentY, nodeId: node.id, lineNumber: 0 });
             }
             else if (isSpace(node)) {
-                // Space: advance by space width
-                const spaceWidth = this._settings.fontSize * 0.33;
-                positions.push({
-                    x: currentX,
-                    y: currentY,
-                    nodeId: node.id,
-                    lineNumber: 0,
-                });
+                const spaceWidth = fontSize * 0.33;
+                positions.push({ x: currentX, y: currentY, nodeId: node.id, lineNumber: 0 });
                 currentX += spaceWidth + this._settings.charSpacing;
             }
             else {
-                // Regular character
-                positions.push({
-                    x: currentX,
-                    y: currentY,
-                    nodeId: node.id,
-                    lineNumber: 0,
-                });
-                // Calculate character width for next position
-                // Use measurement root for consistent font metrics with actual rendering
-                const charWidth = getTextWidth(node.data, this._settings.fontFamily, this._settings.fontSize, this._settings.bold, this._settings.italic, this._measurementRoot);
+                positions.push({ x: currentX, y: currentY, nodeId: node.id, lineNumber: 0 });
+                const charWidth = getTextWidth(node.data, fontFamily, fontSize, bold, italic, this._measurementRoot);
                 currentX += charWidth + this._settings.charSpacing;
             }
         }
         return positions;
     }
+    /**
+     * Calculate the RBR anchor point for a given position type.
+     * This is the point on the RBR where the corresponding EBR point will land.
+     */
+    calculateRBRAlignmentPoint(position, rbr) {
+        const centerX = rbr.x + rbr.width / 2;
+        const centerY = rbr.y + rbr.height / 2;
+        switch (position) {
+            case "n": return { x: centerX, y: rbr.y };
+            case "ne": return { x: rbr.right, y: rbr.y };
+            case "e": return { x: rbr.right, y: centerY };
+            case "se": return { x: rbr.right, y: rbr.bottom };
+            case "s": return { x: centerX, y: rbr.bottom };
+            case "sw": return { x: rbr.x, y: rbr.bottom };
+            case "w": return { x: rbr.x, y: centerY };
+            case "nw": return { x: rbr.x, y: rbr.y };
+            case "inw": return { x: rbr.x, y: rbr.y };
+            case "ine": return { x: rbr.right, y: rbr.y };
+            case "isw": return { x: rbr.x, y: rbr.bottom };
+            case "ise": return { x: rbr.right, y: rbr.bottom };
+            case "o":
+            default: return { x: centerX, y: centerY };
+        }
+    }
+    /**
+     * Calculate the EBR anchor point for a given position type.
+     * This is the point on the EBR that should coincide with the RBR anchor point.
+     */
+    calculateEBRAlignmentPoint(position, ebr) {
+        const centerX = ebr.x + ebr.width / 2;
+        const centerY = ebr.y + ebr.height / 2;
+        switch (position) {
+            case "n": return { x: centerX, y: ebr.bottom };
+            case "ne": return { x: ebr.x, y: ebr.bottom };
+            case "e": return { x: ebr.x, y: centerY };
+            case "se": return { x: ebr.x, y: ebr.y };
+            case "s": return { x: centerX, y: ebr.y };
+            case "sw": return { x: ebr.right, y: ebr.y };
+            case "w": return { x: ebr.right, y: centerY };
+            case "nw": return { x: ebr.right, y: ebr.bottom };
+            case "inw": return { x: ebr.x, y: ebr.y };
+            case "ine": return { x: ebr.right, y: ebr.y };
+            case "isw": return { x: ebr.x, y: ebr.bottom };
+            case "ise": return { x: ebr.right, y: ebr.bottom };
+            case "o":
+            default: return { x: centerX, y: centerY };
+        }
+    }
     /**
      * Calculate RBRs from reference nodes.
      * Nodes on different lines create separate RBRs.
@@ -1577,96 +1639,6 @@ class TextRenderer {
         }
         return rbrs;
     }
-    /**
-     * Calculate target position on the RBR based on position type.
-     */
-    calculateTargetPosition(position, rbr) {
-        const centerX = rbr.x + rbr.width / 2;
-        const centerY = rbr.y + rbr.height / 2;
-        switch (position) {
-            case "n": // North (top center)
-                return { x: centerX, y: rbr.y };
-            case "ne": // Northeast (top right)
-                return { x: rbr.right, y: rbr.y };
-            case "e": // East (middle right)
-                return { x: rbr.right, y: centerY };
-            case "se": // Southeast (bottom right)
-                return { x: rbr.right, y: rbr.bottom };
-            case "s": // South (bottom center)
-                return { x: centerX, y: rbr.bottom };
-            case "sw": // Southwest (bottom left)
-                return { x: rbr.x, y: rbr.bottom };
-            case "w": // West (middle left)
-                return { x: rbr.x, y: centerY };
-            case "nw": // Northwest (top left)
-                return { x: rbr.x, y: rbr.y };
-            case "o": // Origin (center)
-            default:
-                return { x: centerX, y: centerY };
-        }
-    }
-    /**
-     * Calculate total rendered width of additional text nodes.
-     * Mirrors the spacing logic in calculateAdditionalTextPositions so the result
-     * is the exact horizontal span from the first character's left edge to the last
-     * character's right edge.
-     */
-    calculateTotalTextWidth(nodes) {
-        let totalWidth = 0;
-        let count = 0;
-        for (const node of nodes) {
-            if (isLineBreak(node))
-                continue;
-            if (isSpace(node)) {
-                totalWidth += this._settings.fontSize * 0.33 + this._settings.charSpacing;
-                count++;
-                continue;
-            }
-            const charWidth = getTextWidth(node.data, this._settings.fontFamily, this._settings.fontSize, this._settings.bold, this._settings.italic, this._measurementRoot);
-            totalWidth += charWidth + this._settings.charSpacing;
-            count++;
-        }
-        // charSpacing is added after every character; remove the trailing one
-        if (count > 0) {
-            totalWidth -= this._settings.charSpacing;
-        }
-        return Math.max(0, totalWidth);
-    }
-    /**
-     * Calculate bounding rectangle for a set of positioned characters.
-     */
-    calculateTextBounds(nodes, positions) {
-        if (nodes.length === 0)
-            return null;
-        // We need to estimate bounds before rendering
-        // Use approximate character dimensions based on settings
-        const charWidth = this._settings.fontSize * 0.6; // Approximate
-        const charHeight = this._settings.fontSize;
-        let minX = Infinity;
-        let minY = Infinity;
-        let maxX = -Infinity;
-        let maxY = -Infinity;
-        for (let i = 0; i < nodes.length; i++) {
-            const pos = positions[i];
-            const node = nodes[i];
-            if (isLineBreak(node) || isSpace(node))
-                continue;
-            minX = Math.min(minX, pos.x);
-            minY = Math.min(minY, pos.y - charHeight);
-            maxX = Math.max(maxX, pos.x + charWidth);
-            maxY = Math.max(maxY, pos.y);
-        }
-        if (!isFinite(minX))
-            return null;
-        return {
-            x: minX,
-            y: minY,
-            width: maxX - minX,
-            height: maxY - minY,
-            right: maxX,
-            bottom: maxY,
-        };
-    }
     /**
      * Update settings.
      */
@@ -25945,7 +25917,7 @@ class GveSnapshotRendition extends HTMLElement {
      * of the web component is loaded.
      */
     static get version() {
-        return "2.0.1";
+        return "2.0.3";
     }
     constructor() {
         super();
@@ -25957,6 +25929,7 @@ class GveSnapshotRendition extends HTMLElement {
         this._currentVersionIndex = 0;
         this._autoForwardEnabled = false;
         this._autoForwardTimerId = null;
+        this._renderScheduled = false;
         // Initialize with default settings
         this._settings = { ...DEFAULT_SETTINGS };
         this._autoForwardEnabled = this._settings.autoForwardOnGroup;
@@ -26029,14 +26002,20 @@ class GveSnapshotRendition extends HTMLElement {
         this._settings = { ...DEFAULT_SETTINGS, ...value };
         this._logger.setEnabled(this._settings.debug || false);
         this._logger.info("Settings updated", this._settings);
-        // When settings change, update renderers
         if (this._textRenderer) {
             this._textRenderer.updateSettings(this._settings);
         }
         if (this._hintRenderer) {
             this._hintRenderer.updateSettings(this._settings);
         }
-        this.render();
+        // Build the UI shell on first call; after that just schedule a content
+        // re-render so rapid settings+data assignments coalesce into one render.
+        if (!this._container) {
+            this.render();
+        }
+        else {
+            this.scheduleRenderContent();
+        }
     }
     /**
      * Data property (bindable).
@@ -26138,20 +26117,40 @@ class GveSnapshotRendition extends HTMLElement {
                 });
             }
         }
-        // Trigger content rendering if renderers are ready
+        // Schedule content rendering. Using scheduleRenderContent() rather than
+        // a direct call ensures that when settings and data are both set in the
+        // same synchronous turn (the common Angular pattern), only one render
+        // fires after both assignments have completed.
         if (this._textRenderer && this._rootSvg && this._baseNodes.length > 0) {
-            this.renderContent();
+            this.scheduleRenderContent();
         }
     }
     /**
      * Render the component UI.
      */
     render() {
+        // Cancel any pending coalesced render — initializeGoldenLayout() will
+        // trigger renderContent() once the new DOM is actually ready.
+        this._renderScheduled = false;
         // Destroy existing GL instance before clearing the DOM
         if (this._goldenLayout) {
             this._goldenLayout.destroy();
             this._goldenLayout = undefined;
         }
+        // Destroy pan/zoom — its internal state is tied to the old SVG element.
+        // initializePanZoom() guards against double-init with a null-check,
+        // so it must be reset here or it will silently skip re-initialization.
+        if (this._panZoomInstance) {
+            this._panZoomInstance.destroy();
+            this._panZoomInstance = undefined;
+        }
+        // Kill in-flight GSAP animations on the old SVG tree.
+        if (this._animationEngine) {
+            this._animationEngine.killAll();
+        }
+        // Reset toolbar — processData() only creates it when this is null,
+        // so leaving a stale reference would prevent toolbar rebuild.
+        this._toolbar = undefined;
         this._shadow.innerHTML = "";
         // Add styles (includes inlined GL CSS for Shadow DOM compatibility)
         const style = document.createElement("style");
@@ -26362,6 +26361,22 @@ class GveSnapshotRendition extends HTMLElement {
             this._logger.error("GL", "Failed to reset layout", error);
         }
     }
+    /**
+     * Coalesce concurrent render requests into a single call.
+     * Multiple same-turn invocations (e.g. settings setter + data setter both
+     * firing in the same Angular expression) collapse into one microtask render,
+     * always running after all synchronous assignments have completed so the
+     * latest data is used.
+     */
+    scheduleRenderContent() {
+        if (this._renderScheduled)
+            return;
+        this._renderScheduled = true;
+        Promise.resolve().then(() => {
+            this._renderScheduled = false;
+            this.renderContent();
+        });
+    }
     /**
      * Render content (base text only - starts at v0).
      * Use goToVersionIndex() to navigate to specific versions.
@@ -40832,7 +40847,7 @@ function requireD () {
 	      + 'pragma private protected public pure ref return scope shared static struct '
 	      + 'super switch synchronized template this throw try typedef typeid typeof union '
 	      + 'unittest version void volatile while with __FILE__ __LINE__ __gshared|10 '
-	      + '__thread __traits __DATE__ __EOF__ __TIME__ __TIMESTAMP__ __VENDOR__ 2.0.1',
+	      + '__thread __traits __DATE__ __EOF__ __TIME__ __TIMESTAMP__ __VENDOR__ 2.0.3',
 	    built_in:
 	      'bool cdouble cent cfloat char creal dchar delegate double dstring float function '
 	      + 'idouble ifloat ireal long real short string ubyte ucent uint ulong ushort wchar '
@@ -90615,9 +90630,11 @@ class GveHintDesigner extends HTMLElement {
         const loadDataBtn = this.createButton("load-data", "upload", "Load data from file");
         const clearDataBtn = this.createButton("clear-data", "x-circle", "Clear all data");
         clearDataBtn.classList.add("btn-danger");
+        const exportInkscapeBtn = this.createButton("export-inkscape", "external-link", "Export hint to InkScape SVG");
         dataGroup.appendChild(saveDataBtn);
         dataGroup.appendChild(loadDataBtn);
         dataGroup.appendChild(clearDataBtn);
+        dataGroup.appendChild(exportInkscapeBtn);
         toolbar.appendChild(dataGroup);
         return toolbar;
     }
@@ -91065,6 +91082,7 @@ class GveHintDesigner extends HTMLElement {
         this.addClickListener("save-data", () => this.saveData());
         this.addClickListener("load-data", () => this.loadData());
         this.addClickListener("clear-data", () => this.clearData());
+        this.addClickListener("export-inkscape", () => this.exportToInkscape());
         // Timeline player
         this.addClickListener("play", () => this.playAnimation());
         this.addClickListener("pause", () => this.pauseAnimation());
@@ -92339,6 +92357,76 @@ class GveHintDesigner extends HTMLElement {
         this.showMessage("All data cleared", "success");
         this._logger.info("Data cleared");
     }
+    /**
+     * Export the current hint as an InkScape-compatible SVG file.
+     */
+    exportToInkscape() {
+        if (!this._hintId) {
+            this.showMessage("No hint selected!", "error");
+            return;
+        }
+        const hint = this._data.hints[this._hintId];
+        if (!hint?.svg) {
+            this.showMessage("No SVG to export!", "error");
+            return;
+        }
+        const w = this._settings.hintDesignWidth;
+        const h = this._settings.hintDesignHeight;
+        const hw = w / 2;
+        const hh = h / 2;
+        const resolvedSvg = this.resolveVariables(hint.svg);
+        const unresolvedMatches = resolvedSvg.match(/\{\{[^}]+\}\}/g);
+        const svgContent = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>\n` +
+            `<svg\n` +
+            `   width="${w}"\n` +
+            `   height="${h}"\n` +
+            `   viewBox="0 0 ${w} ${h}"\n` +
+            `   version="1.1"\n` +
+            `   id="svg1"\n` +
+            `   sodipodi:docname="${this._hintId}.svg"\n` +
+            `   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"\n` +
+            `   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"\n` +
+            `   xmlns="http://www.w3.org/2000/svg"\n` +
+            `   xmlns:svg="http://www.w3.org/2000/svg">\n` +
+            `  <sodipodi:namedview\n` +
+            `     id="namedview1"\n` +
+            `     pagecolor="#ffffff"\n` +
+            `     bordercolor="#000000"\n` +
+            `     borderopacity="0.25"\n` +
+            `     inkscape:showpageshadow="2"\n` +
+            `     inkscape:pageopacity="0.0"\n` +
+            `     inkscape:pagecheckerboard="false"\n` +
+            `     inkscape:deskcolor="#d1d1d1"\n` +
+            `     inkscape:document-units="px"\n` +
+            `     inkscape:zoom="3"\n` +
+            `     inkscape:cx="${hw}"\n` +
+            `     inkscape:cy="${hh}"\n` +
+            `     inkscape:window-maximized="0"\n` +
+            `     inkscape:current-layer="g1"\n` +
+            `     showgrid="false" />\n` +
+            `  <defs id="defs1" />\n` +
+            `  <g\n` +
+            `     inkscape:label="Layer 1"\n` +
+            `     inkscape:groupmode="layer"\n` +
+            `     id="layer1" />\n` +
+            `     ${resolvedSvg}\n` +
+            `</svg>`;
+        const blob = new Blob([svgContent], { type: "image/svg+xml" });
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement("a");
+        link.href = url;
+        link.download = `${this._hintId}.svg`;
+        link.click();
+        URL.revokeObjectURL(url);
+        if (unresolvedMatches) {
+            const names = [...new Set(unresolvedMatches)].join(", ");
+            this.showMessage(`Exported "${this._hintId}.svg" — warning: unresolved variables: ${names}`, "info");
+        }
+        else {
+            this.showMessage(`Exported "${this._hintId}.svg" for InkScape`, "success");
+        }
+        this._logger.info("Exported hint to InkScape", this._hintId);
+    }
     /**
      * Load animation code from catalog.
      */