@myrmidon/gve-snapshot-rendition 2.0.2 → 2.0.4

package/dist/index.js

@@ -25917,7 +25917,7 @@ class GveSnapshotRendition extends HTMLElement {
      * of the web component is loaded.
      */
     static get version() {
-        return "2.0.2";
+        return "2.0.4";
     }
     constructor() {
         super();
@@ -25929,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;
@@ -26001,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).
@@ -26110,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");
@@ -26334,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.
@@ -40804,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.2',
+	      + '__thread __traits __DATE__ __EOF__ __TIME__ __TIMESTAMP__ __VENDOR__ 2.0.4',
 	    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 '
@@ -90587,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;
     }
@@ -91037,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());
@@ -91066,6 +91112,21 @@ class GveHintDesigner extends HTMLElement {
         // Word wrap toggles
         this.addClickListener("toggle-svg-wrap", () => this.toggleSvgWordWrap());
         this.addClickListener("toggle-js-wrap", () => this.toggleJsWordWrap());
+        // Form field highlighting (non-default values)
+        [
+            this._positionSelect,
+            this._offsetXInput,
+            this._offsetYInput,
+            this._scaleXInput,
+            this._scaleYInput,
+            this._rotationInput,
+            this._displacedRefSpanInput,
+        ].forEach((el) => {
+            if (el) {
+                el.addEventListener("input", () => this.updateFormFieldHighlights());
+                el.addEventListener("change", () => this.updateFormFieldHighlights());
+            }
+        });
         // Syntax highlighting on textareas
         if (this._svgTextarea) {
             this._svgTextarea.addEventListener("input", () => this.highlightSvg());
@@ -91300,6 +91361,7 @@ class GveHintDesigner extends HTMLElement {
         }
         // Auto-refresh SVG display when hint is loaded
         this.refreshSvgDisplay();
+        this.updateFormFieldHighlights();
         this._logger.debug("Component", "Loaded hint for editing", hintId);
     }
     /**
@@ -91326,6 +91388,7 @@ class GveHintDesigner extends HTMLElement {
             this._jsTextarea.value = "";
         if (this._embeddedJsCheckbox)
             this._embeddedJsCheckbox.checked = false;
+        this.updateFormFieldHighlights();
     }
     /**
      * Validate SVG code for well-formedness and structure.
@@ -92311,6 +92374,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.
      */
@@ -92488,6 +92621,30 @@ class GveHintDesigner extends HTMLElement {
             this.validateSvgVariables(svgCode);
         }
     }
+    /**
+     * Update the highlighted state of all Hint Properties form rows.
+     * Rows whose value differs from the default get the form-row--modified class.
+     */
+    updateFormFieldHighlights() {
+        this.setFormRowModified(this._positionSelect, this._positionSelect?.value !== "o");
+        this.setFormRowModified(this._offsetXInput, this.isOffsetModified(this._offsetXInput?.value));
+        this.setFormRowModified(this._offsetYInput, this.isOffsetModified(this._offsetYInput?.value));
+        this.setFormRowModified(this._scaleXInput, parseFloat(this._scaleXInput?.value ?? "1") !== 1);
+        this.setFormRowModified(this._scaleYInput, parseFloat(this._scaleYInput?.value ?? "1") !== 1);
+        this.setFormRowModified(this._rotationInput, parseFloat(this._rotationInput?.value ?? "0") !== 0);
+        this.setFormRowModified(this._displacedRefSpanInput, (this._displacedRefSpanInput?.value ?? "").trim() !== "");
+    }
+    isOffsetModified(value) {
+        if (!value)
+            return false;
+        const parsed = this.parseOffset(value);
+        return typeof parsed === "string" || parsed !== 0;
+    }
+    setFormRowModified(input, modified) {
+        if (!input?.parentElement)
+            return;
+        input.parentElement.classList.toggle("form-row--modified", modified);
+    }
     /**
      * Show a message in the message panel.
      */
@@ -92928,6 +93085,17 @@ class GveHintDesigner extends HTMLElement {
         min-width: auto;
       }
 
+      .form-row--modified label {
+        color: var(--hint-designer-primary, #1565c0);
+        font-weight: 700;
+      }
+
+      .form-row--modified input,
+      .form-row--modified select {
+        border-color: var(--hint-designer-primary-border, #2196f3);
+        background-color: #e3f2fd;
+      }
+
       .textarea-header {
         display: flex;
         justify-content: space-between;