@sebastianwessel/isostate 0.3.0 → 0.5.0

package/dist/chunks/{rendering-engine-BgHel7yX.js → rendering-engine-nkqYx0qc.js}

@@ -35,13 +35,13 @@ const BUILTIN_THEMES = {
  * Returns undefined if the theme is not found.
  */
 function resolveTheme(name) {
-    return BUILTIN_THEMES[name];
+    return Object.hasOwn(BUILTIN_THEMES, name) ? BUILTIN_THEMES[name] : undefined;
 }
 /**
  * Compose a new theme by extending an existing one with overrides.
  */
 function composeTheme(baseName, overrides) {
-    const base = BUILTIN_THEMES[baseName];
+    const base = resolveTheme(baseName);
     if (!base) {
         return { name: baseName, vars: { ...overrides } };
     }
@@ -73,6 +73,7 @@ class AssetRegistryImpl {
         this._assets.delete(id);
     }
 }
+/** Create a registry populated with the given asset definitions. */
 function createAssetRegistry(assets = []) {
     const registry = new AssetRegistryImpl();
     for (const asset of assets) {
@@ -161,12 +162,19 @@ function buildKeyframeCSS() {
         "@keyframes iso-anim-glow{0%,100%{filter:drop-shadow(0 0 2px rgba(255,255,255,.5))}50%{filter:drop-shadow(0 0 8px rgba(255,255,255,.9))}}",
         "@keyframes iso-anim-spin{from{rotate:0deg}to{rotate:360deg}}",
         "@keyframes iso-anim-blink{0%,49%{opacity:1}50%,100%{opacity:0}}",
+        ".iso-ambient-pulse{animation:iso-anim-pulse 2s ease-in-out infinite}",
+        ".iso-ambient-float{animation:iso-anim-float 3s ease-in-out infinite}",
+        ".iso-ambient-shake{animation:iso-anim-shake 0.5s ease-in-out infinite}",
+        ".iso-ambient-glow{animation:iso-anim-glow 2s ease-in-out infinite}",
+        ".iso-ambient-spin{animation:iso-anim-spin 4s linear infinite}",
+        ".iso-ambient-blink{animation:iso-anim-blink 1.5s step-end infinite}",
         "@keyframes iso-connector-flow-route{from{stroke-dashoffset:0}to{stroke-dashoffset:calc(-1px * var(--iso-flow-distance,20))}}",
         "@keyframes iso-connector-flow-reverse{from{stroke-dashoffset:0}to{stroke-dashoffset:calc(1px * var(--iso-flow-distance,20))}}",
         ".iso-connector-pattern-dashed .iso-connector-shaft,.iso-connector-pattern-dotted .iso-connector-shaft{--iso-flow-distance:20}",
         ".iso-connector-direction-route .iso-connector-shaft.iso-ambient-flow{animation:iso-connector-flow-route 900ms linear infinite}",
         ".iso-connector-direction-reverse .iso-connector-shaft.iso-ambient-flow{animation:iso-connector-flow-reverse 900ms linear infinite}",
         "@media (prefers-reduced-motion: reduce){.iso-element,.iso-connector{animation-duration:1ms!important}.iso-ambient-pulse,.iso-ambient-float,.iso-ambient-shake,.iso-ambient-glow,.iso-ambient-spin,.iso-ambient-blink,.iso-ambient-flow{animation:none!important}}",
+        ".iso-interactive g[data-id]{cursor:pointer}",
     ].join("\n");
 }
 
@@ -198,13 +206,15 @@ function createTextAssetNode(textContent, assetName, cellSize) {
     const group = document.createElementNS(NS$1, "g");
     const text = document.createElementNS(NS$1, "text");
     const align = textContent.align ?? "middle";
+    const placement = textContent.placement ?? "cell";
     const fontSize = textContent.fontSize ?? 12;
     const lineHeight = textContent.lineHeight ?? 1.2;
     const anchorX = textAnchorX(align, cellSize);
+    const vertical = textVerticalAnchor(placement, cellSize);
     text.setAttribute("x", String(anchorX));
-    text.setAttribute("y", String(-cellSize));
+    text.setAttribute("y", String(vertical.y));
     text.setAttribute("text-anchor", align);
-    text.setAttribute("dominant-baseline", "text-before-edge");
+    text.setAttribute("dominant-baseline", vertical.baseline);
     text.setAttribute("font-family", "Arial, Helvetica, sans-serif");
     text.setAttribute("font-size", String(fontSize));
     text.setAttribute("font-weight", String(textContent.fontWeight ?? 700));
@@ -248,6 +258,11 @@ function textAnchorX(align, cellSize) {
         return cellSize / 2;
     return 0;
 }
+function textVerticalAnchor(placement, cellSize) {
+    if (placement === "caption")
+        return { y: -cellSize, baseline: "text-before-edge" };
+    return { y: -cellSize / 2, baseline: "middle" };
+}
 function normalizeTextLines(value) {
     const normalized = value.replace(/\r\n?/g, "\n").replace(/\n$/, "");
     return normalized.split("\n");
@@ -367,6 +382,10 @@ function isSafeAssetUrl(url) {
 }
 
 const CSS_CUSTOM_PROPERTY_PATTERN = /^--[a-zA-Z0-9-_]+$/;
+/**
+ * Apply theme CSS custom properties to an element's inline style.
+ * Throws `RenderError` (`INVALID_THEME_VAR`) if a key is not a valid `--name` custom property.
+ */
 function applyThemeToElement(element, themeVars) {
     for (const [name, value] of Object.entries(themeVars)) {
         if (!CSS_CUSTOM_PROPERTY_PATTERN.test(name)) {
@@ -459,6 +478,7 @@ function buildSceneDOM(container, bundle, config) {
     svg._layerMap = layerMap;
     svg._elementMap = elementMap;
     svg._connectorMap = connectorMap;
+    svg._depthGroup = depthGroup;
     container.appendChild(svg);
     return svg;
 }
@@ -473,11 +493,17 @@ function updateElementTransforms(svg, elements, connectors = []) {
             const state = map.get(def.id);
             if (!state)
                 continue;
+            const previous = state.current;
             state.current = def;
-            updateGeneratedElementContent(state.node, def, layout);
+            if (!hasEqualGeneratedContent(previous, def)) {
+                updateGeneratedElementContent(state.node, def, layout);
+            }
             applyElementTransform(state.node, def, layout);
             applyAmbientClasses(state, def.ambient ?? []);
         }
+        if (svg._depthGroup) {
+            reconcileDepthOrder(svg._depthGroup, map);
+        }
     }
     const connectorMap = svg._connectorMap;
     if (!connectorMap)
@@ -791,11 +817,45 @@ function sortElementsForPerspective(elements) {
     });
 }
 function renderBucket(element) {
-    if (isPrimitiveAsset(element.asset))
-        return 0;
     if (isTextAsset(element.asset))
-        return 2;
-    return 1;
+        return 1;
+    return 0;
+}
+/**
+ * Re-sort the depth group's live child nodes to match the current
+ * `(x + y)` + id perspective order. Only elements whose relative order
+ * changed are moved so in-flight CSS animation state on unaffected
+ * elements is preserved. Text elements live in the label group and are
+ * never part of this reconciliation.
+ */
+function reconcileDepthOrder(depthGroup, elementMap) {
+    const current = [];
+    for (const state of elementMap.values()) {
+        if (state.node.parentElement !== depthGroup)
+            continue;
+        current.push(state.current);
+    }
+    if (current.length < 2)
+        return;
+    const desiredOrder = sortElementsForPerspective(current);
+    const existingOrder = [...depthGroup.childNodes];
+    let orderMatches = existingOrder.length === desiredOrder.length;
+    if (orderMatches) {
+        for (let index = 0; index < desiredOrder.length; index++) {
+            const expectedId = desiredOrder[index]?.id;
+            if (existingOrder[index]?.getAttribute("data-id") !== expectedId) {
+                orderMatches = false;
+                break;
+            }
+        }
+    }
+    if (orderMatches)
+        return;
+    for (const def of desiredOrder) {
+        const state = elementMap.get(def.id);
+        if (state)
+            depthGroup.appendChild(state.node);
+    }
 }
 function collectElementDefinitions(bundle) {
     const byId = new Map();
@@ -872,6 +932,41 @@ function updateGeneratedElementContent(node, def, layout) {
         node.appendChild(child);
     }
 }
+/**
+ * Compare the generated-content payload (`text` or `primitive`) of two
+ * element states for structural equality. Used to skip destructive
+ * regeneration of text/primitive DOM content on frame updates where the
+ * asset, id, and content payload are unchanged from the previous frame.
+ */
+function hasEqualGeneratedContent(previous, next) {
+    if (!previous)
+        return false;
+    if (previous.asset !== next.asset)
+        return false;
+    if (!isTextAsset(next.asset) && !isPrimitiveAsset(next.asset))
+        return true;
+    if (isTextAsset(next.asset))
+        return deepEqual(previous.text, next.text);
+    return deepEqual(previous.primitive, next.primitive);
+}
+function deepEqual(a, b) {
+    if (a === b)
+        return true;
+    if (typeof a !== typeof b)
+        return false;
+    if (a === null || b === null || typeof a !== "object" || typeof b !== "object")
+        return false;
+    if (Array.isArray(a) || Array.isArray(b)) {
+        if (!Array.isArray(a) || !Array.isArray(b) || a.length !== b.length)
+            return false;
+        return a.every((item, index) => deepEqual(item, b[index]));
+    }
+    const aKeys = Object.keys(a);
+    const bKeys = Object.keys(b);
+    if (aKeys.length !== bKeys.length)
+        return false;
+    return aKeys.every((key) => deepEqual(a[key], b[key]));
+}
 function createConnectorInstance(def, layout) {
     const node = document.createElementNS(NS, "g");
     const shaft = document.createElementNS(NS, "path");
@@ -887,55 +982,145 @@ function createConnectorInstance(def, layout) {
     return state;
 }
 function applyConnectorState(state, def, layout) {
-    applyConnectorGroupAttrs(state.node, def);
-    clearChildren(state.node);
-    const d = routePath(def.route, layout);
-    if (shouldRenderOutline(def)) {
-        const outline = document.createElementNS(NS, "path");
-        outline.classList.add("iso-connector-outline");
-        applyConnectorPathAttrs(outline, def, d, {
+    const previous = state.previous;
+    const routeChanged = !previous || !routesEqual(previous.route, def.route);
+    const styleChanged = !previous || !connectorStylesEqual(previous.style, def.style);
+    const shapeChanged = !previous ||
+        shouldRenderOutline(previous) !== shouldRenderOutline(def) ||
+        previous.style.variant !== def.style.variant ||
+        previous.style.lane !== def.style.lane ||
+        previous.start !== def.start ||
+        previous.end !== def.end ||
+        previous.route.length !== def.route.length;
+    applyConnectorGroupAttrs(state.node, def, previous);
+    const geometryChanged = routeChanged || shapeChanged || styleChanged;
+    const d = geometryChanged ? routePath(def.route, layout) : (state.shaft.getAttribute("d") ?? "");
+    if (shapeChanged) {
+        if (state.outline)
+            state.node.removeChild(state.outline);
+        state.outline = undefined;
+        if (shouldRenderOutline(def)) {
+            const outline = document.createElementNS(NS, "path");
+            outline.classList.add("iso-connector-outline");
+            applyConnectorPathAttrs(outline, def, d, {
+                stroke: def.style.outline ?? def.style.stroke,
+                strokeWidth: def.style.strokeWidth + def.style.outlineWidth * 2,
+                includeDash: false,
+            });
+            state.node.insertBefore(outline, state.shaft);
+            state.outline = outline;
+        }
+    }
+    else if (state.outline && geometryChanged) {
+        applyConnectorPathAttrs(state.outline, def, d, {
             stroke: def.style.outline ?? def.style.stroke,
             strokeWidth: def.style.strokeWidth + def.style.outlineWidth * 2,
             includeDash: false,
         });
-        state.node.appendChild(outline);
     }
-    state.shaft = document.createElementNS(NS, "path");
+    if (!state.shaft.parentNode)
+        state.node.appendChild(state.shaft);
     state.shaft.classList.add("iso-connector-shaft");
-    applyConnectorPathAttrs(state.shaft, def, d, {
-        stroke: def.style.stroke,
-        strokeWidth: def.style.strokeWidth,
-        includeDash: true,
-    });
-    state.node.appendChild(state.shaft);
-    if (def.style.variant === "road" && def.style.lane === "center-dashed") {
-        const lane = document.createElementNS(NS, "path");
-        lane.classList.add("iso-connector-lane");
-        applyConnectorPathAttrs(lane, def, d, {
+    if (geometryChanged) {
+        applyConnectorPathAttrs(state.shaft, def, d, {
+            stroke: def.style.stroke,
+            strokeWidth: def.style.strokeWidth,
+            includeDash: true,
+        });
+    }
+    if (shapeChanged) {
+        if (state.lane)
+            state.node.removeChild(state.lane);
+        state.lane = undefined;
+        if (def.style.variant === "road" && def.style.lane === "center-dashed") {
+            const lane = document.createElementNS(NS, "path");
+            lane.classList.add("iso-connector-lane");
+            applyConnectorPathAttrs(lane, def, d, {
+                stroke: "#ffffff",
+                strokeWidth: Math.max(1, def.style.strokeWidth * 0.12),
+                includeDash: false,
+            });
+            lane.setAttribute("stroke-dasharray", "8 8");
+            state.node.appendChild(lane);
+            state.lane = lane;
+        }
+    }
+    else if (state.lane && geometryChanged) {
+        applyConnectorPathAttrs(state.lane, def, d, {
             stroke: "#ffffff",
             strokeWidth: Math.max(1, def.style.strokeWidth * 0.12),
             includeDash: false,
         });
-        lane.setAttribute("stroke-dasharray", "8 8");
-        state.node.appendChild(lane);
+        state.lane.setAttribute("stroke-dasharray", "8 8");
+    }
+    if (geometryChanged) {
+        if (state.startEndpoint)
+            state.node.removeChild(state.startEndpoint);
+        if (state.endEndpoint)
+            state.node.removeChild(state.endEndpoint);
+        state.startEndpoint = appendEndpoint(state.node, def, "start", layout);
+        state.endEndpoint = appendEndpoint(state.node, def, "end", layout);
     }
-    appendEndpoint(state.node, def, "start", layout);
-    appendEndpoint(state.node, def, "end", layout);
     applyConnectorAmbientClasses(state, def.ambient ?? []);
+    state.previous = def;
 }
 function clearChildren(node) {
     while (node.firstChild)
         node.removeChild(node.firstChild);
 }
-function applyConnectorGroupAttrs(node, def) {
-    node.setAttribute("class", [
+function routesEqual(a, b) {
+    if (a === b)
+        return true;
+    if (a.length !== b.length)
+        return false;
+    return a.every((point, index) => {
+        const other = b[index];
+        return other !== undefined && point[0] === other[0] && point[1] === other[1];
+    });
+}
+function connectorStylesEqual(a, b) {
+    if (a === b)
+        return true;
+    return (a.variant === b.variant &&
+        a.pattern === b.pattern &&
+        a.stroke === b.stroke &&
+        a.strokeWidth === b.strokeWidth &&
+        a.opacity === b.opacity &&
+        a.outline === b.outline &&
+        a.outlineWidth === b.outlineWidth &&
+        a.lane === b.lane &&
+        (a.dash ?? []).join(",") === (b.dash ?? []).join(","));
+}
+function applyConnectorGroupAttrs(node, def, previous) {
+    const nextClasses = [
         "iso-connector",
         `iso-connector-${def.id}`,
         `iso-connector-variant-${def.style.variant}`,
         `iso-connector-pattern-${def.style.pattern}`,
         `iso-connector-direction-${def.direction}`,
         `iso-layer-${def.layer}`,
-    ].join(" "));
+    ];
+    if (!previous) {
+        node.classList.add(...nextClasses);
+    }
+    else {
+        const previousClasses = [
+            "iso-connector",
+            `iso-connector-${previous.id}`,
+            `iso-connector-variant-${previous.style.variant}`,
+            `iso-connector-pattern-${previous.style.pattern}`,
+            `iso-connector-direction-${previous.direction}`,
+            `iso-layer-${previous.layer}`,
+        ];
+        for (const name of previousClasses) {
+            if (!nextClasses.includes(name))
+                node.classList.remove(name);
+        }
+        for (const name of nextClasses) {
+            if (!previousClasses.includes(name))
+                node.classList.add(name);
+        }
+    }
     node.setAttribute("data-id", def.id);
     node.setAttribute("data-layer", def.layer);
     node.style.overflow = "visible";
@@ -968,10 +1153,11 @@ function routePath(route, layout) {
 function appendEndpoint(group, def, kind, layout) {
     const endpoint = def[kind];
     if (endpoint === "none" || def.route.length < 2)
-        return;
+        return undefined;
     const node = createEndpointNode(endpoint, def, kind, layout);
     node.classList.add(`iso-connector-${kind}`);
     group.appendChild(node);
+    return node;
 }
 function createEndpointNode(endpoint, def, kind, layout) {
     switch (endpoint) {
@@ -1113,5 +1299,5 @@ function animateElement(node, keyframeName, type = "enter") {
     node.style.animation = `${keyframeName} ${duration} ${easing} forwards`;
 }
 
-export { AssetRegistryImpl as A, DEFAULT_CELL_SIZE as D, animateElement as a, applySceneViewBox as b, applyThemeToElement as c, buildSceneDOM as d, calculateTransform as e, calculateVisualSize as f, composeTheme as g, createAssetRegistry as h, createDefaultRegistry as i, getConnectorState as j, getCurrentElementBounds as k, getElementState as l, getGridAreaBounds as m, getResolvedProjectionLayout as n, getResolvedViewBox as o, hideElementAfterExit as p, projectToRaw as q, projectToScreen as r, resolveTheme as s, updateElementTransforms as t, unhideElementOnReadd as u };
-//# sourceMappingURL=rendering-engine-BgHel7yX.js.map
+export { AssetRegistryImpl as A, DEFAULT_CELL_SIZE as D, getResolvedViewBox as a, getCurrentElementBounds as b, getElementState as c, getConnectorState as d, updateElementTransforms as e, projectToScreen as f, getResolvedProjectionLayout as g, hideElementAfterExit as h, applyThemeToElement as i, buildSceneDOM as j, calculateTransform as k, calculateVisualSize as l, composeTheme as m, createAssetRegistry as n, createDefaultRegistry as o, projectToRaw as p, getGridAreaBounds as q, resolveTheme as r, applySceneViewBox as s, animateElement as t, unhideElementOnReadd as u };
+//# sourceMappingURL=rendering-engine-nkqYx0qc.js.map