@zoneflow/renderer-dom 0.0.9 → 0.0.11

package/dist/engines/debugDrawEngine.js

@@ -1,4 +1,6 @@
 import { isZoneInputEnabled, isZoneOutputEnabled, } from "@zoneflow/core";
+import { appendEdgeFlowStyle, resolveCollapsedEdgeStroke, resolveDrawableEdgeSegments, resolveEdgeFlowMotion, } from "./edgeFlow";
+import { defaultTheme } from "../themes/defaultTheme";
 const ANCHOR_SIZE = 8;
 const DEFAULT_DEBUG_LAYERS = [
     "graph-layout",
@@ -6,20 +8,6 @@ const DEFAULT_DEBUG_LAYERS = [
     "anchors",
 ];
 const EDGE_FLOW_CLASS = "zoneflow-debug-edge-flow";
-const EDGE_FLOW_STYLE = `
-@keyframes zoneflow-debug-edge-flow {
-  from { stroke-dashoffset: 18; }
-  to { stroke-dashoffset: 0; }
-}
-.${EDGE_FLOW_CLASS} {
-  animation: zoneflow-debug-edge-flow 900ms linear infinite;
-}
-@media (prefers-reduced-motion: reduce) {
-  .${EDGE_FLOW_CLASS} {
-    animation: none;
-  }
-}
-`;
 const drawLayerMap = {
     "graph-layout": drawGraphLayout,
     density: drawDensity,
@@ -32,11 +20,6 @@ const drawLayerMap = {
 function createSvgElement(tag) {
     return document.createElementNS("http://www.w3.org/2000/svg", tag);
 }
-function appendEdgeFlowStyle(svg) {
-    const style = createSvgElement("style");
-    style.textContent = EDGE_FLOW_STYLE;
-    svg.appendChild(style);
-}
 function sortZoneVisualsForRender(pipeline) {
     function getDepth(zoneId) {
         let depth = 0;
@@ -56,8 +39,10 @@ function sortZoneVisualsForRender(pipeline) {
         .sort((a, b) => a.depth - b.depth || a.index - b.index)
         .map((entry) => entry.zone);
 }
-function getEdgeColor(kind) {
-    return kind === "zone-to-path" ? "#2563eb" : "#0f766e";
+function getEdgeColor(params) {
+    return params.kind === "zone-to-path"
+        ? params.theme.pathEdge
+        : params.theme.pathInboundEdge;
 }
 function getBezierCurvePathD(params) {
     const { source, target } = params;
@@ -150,7 +135,7 @@ export const debugDrawEngine = {
         host.appendChild(worldRoot);
         host.appendChild(screenRoot);
         layers.forEach((layer) => {
-            drawLayerMap[layer]?.(worldRoot, pipeline, camera, pipeline.viewportInfo.world);
+            drawLayerMap[layer]?.(worldRoot, pipeline, camera, pipeline.viewportInfo.world, input.theme);
         });
         if (layers.includes("viewport")) {
             drawHostViewport(screenRoot, pipeline.viewportInfo);
@@ -293,7 +278,7 @@ function drawComponentLayout(root, pipeline, camera) {
         });
     });
 }
-function drawEdges(root, pipeline) {
+function drawEdges(root, pipeline, _camera, _viewport, theme) {
     const { edgesByPathId } = pipeline.graphLayout;
     const svg = createSvgElement("svg");
     svg.style.position = "absolute";
@@ -303,35 +288,66 @@ function drawEdges(root, pipeline) {
     svg.style.height = "100%";
     svg.style.overflow = "visible";
     svg.style.pointerEvents = "none";
-    appendEdgeFlowStyle(svg);
-    Object.values(edgesByPathId)
-        .flatMap((edges) => edges)
-        .forEach((edge) => {
-        const path = createSvgElement("path");
-        const stroke = getEdgeColor(edge.kind);
-        const pathD = getBezierCurvePathD({
-            source: edge.source,
-            target: edge.target,
+    const edgeFlowMotion = resolveEdgeFlowMotion(theme ?? defaultTheme);
+    appendEdgeFlowStyle({
+        svg,
+        animationName: "zoneflow-debug-edge-flow",
+        className: EDGE_FLOW_CLASS,
+        motion: edgeFlowMotion,
+    });
+    const effectiveTheme = theme ?? defaultTheme;
+    Object.entries(edgesByPathId).forEach(([pathId, edges]) => {
+        const visibility = pipeline.visibility?.pathVisibilityById?.[pathId];
+        const drawableEdges = resolveDrawableEdgeSegments({
+            pathId,
+            edges,
+            visibility,
+        });
+        drawableEdges.forEach(({ edge, collapsed }) => {
+            const path = createSvgElement("path");
+            const stroke = collapsed
+                ? resolveCollapsedEdgeStroke(effectiveTheme)
+                : getEdgeColor({
+                    kind: edge.kind,
+                    theme: effectiveTheme,
+                });
+            const pathD = getBezierCurvePathD({
+                source: edge.source,
+                target: edge.target,
+            });
+            path.setAttribute("d", pathD);
+            path.setAttribute("fill", "none");
+            path.setAttribute("stroke", stroke);
+            path.setAttribute("stroke-width", edge.kind === "zone-to-path" ? "2" : "2.4");
+            path.setAttribute("stroke-linecap", "round");
+            path.setAttribute("stroke-linejoin", "round");
+            path.setAttribute("opacity", "0.42");
+            svg.appendChild(path);
+            const flowGlow = createSvgElement("path");
+            flowGlow.setAttribute("d", pathD);
+            flowGlow.setAttribute("fill", "none");
+            flowGlow.setAttribute("stroke", stroke);
+            flowGlow.setAttribute("stroke-width", edge.kind === "zone-to-path" ? "3.8" : "4.4");
+            flowGlow.setAttribute("stroke-linecap", "round");
+            flowGlow.setAttribute("stroke-linejoin", "round");
+            flowGlow.setAttribute("stroke-dasharray", edgeFlowMotion.dashArray);
+            flowGlow.setAttribute("stroke-dashoffset", edgeFlowMotion.dashOffset);
+            flowGlow.setAttribute("opacity", "0.18");
+            flowGlow.setAttribute("class", EDGE_FLOW_CLASS);
+            svg.appendChild(flowGlow);
+            const flow = createSvgElement("path");
+            flow.setAttribute("d", pathD);
+            flow.setAttribute("fill", "none");
+            flow.setAttribute("stroke", stroke);
+            flow.setAttribute("stroke-width", edge.kind === "zone-to-path" ? "2.15" : "2.55");
+            flow.setAttribute("stroke-linecap", "round");
+            flow.setAttribute("stroke-linejoin", "round");
+            flow.setAttribute("stroke-dasharray", edgeFlowMotion.dashArray);
+            flow.setAttribute("stroke-dashoffset", edgeFlowMotion.dashOffset);
+            flow.setAttribute("class", EDGE_FLOW_CLASS);
+            flow.setAttribute("opacity", "0.94");
+            svg.appendChild(flow);
         });
-        path.setAttribute("d", pathD);
-        path.setAttribute("fill", "none");
-        path.setAttribute("stroke", stroke);
-        path.setAttribute("stroke-width", edge.kind === "zone-to-path" ? "2" : "2.4");
-        path.setAttribute("stroke-linecap", "round");
-        path.setAttribute("stroke-linejoin", "round");
-        path.setAttribute("opacity", "0.42");
-        svg.appendChild(path);
-        const flow = createSvgElement("path");
-        flow.setAttribute("d", pathD);
-        flow.setAttribute("fill", "none");
-        flow.setAttribute("stroke", stroke);
-        flow.setAttribute("stroke-width", edge.kind === "zone-to-path" ? "2.45" : "2.85");
-        flow.setAttribute("stroke-linecap", "round");
-        flow.setAttribute("stroke-linejoin", "round");
-        flow.setAttribute("stroke-dasharray", "1 11");
-        flow.setAttribute("stroke-dashoffset", "0");
-        flow.setAttribute("class", EDGE_FLOW_CLASS);
-        svg.appendChild(flow);
     });
     root.appendChild(svg);
 }

package/dist/engines/drawEngine.js

@@ -1,5 +1,6 @@
 import { resolveZoneAnchorRect } from "../anchors";
 import { getZoneDepth, isZoneInputEnabled, isZoneOutputEnabled, } from "@zoneflow/core";
+import { appendEdgeFlowStyle, resolveCollapsedEdgeStroke, resolveDrawableEdgeSegments, resolveEdgeFlowMotion, } from "./edgeFlow";
 const SCENE_PADDING = 64;
 const RENDER_Z_INDEX = {
     zoneBase: 1,
@@ -10,20 +11,6 @@ const RENDER_Z_INDEX = {
     pathLayer: 30,
 };
 const EDGE_FLOW_CLASS = "zoneflow-edge-flow";
-const EDGE_FLOW_STYLE = `
-@keyframes zoneflow-edge-flow {
-  from { stroke-dashoffset: 18; }
-  to { stroke-dashoffset: 0; }
-}
-.${EDGE_FLOW_CLASS} {
-  animation: zoneflow-edge-flow 900ms linear infinite;
-}
-@media (prefers-reduced-motion: reduce) {
-  .${EDGE_FLOW_CLASS} {
-    animation: none;
-  }
-}
-`;
 function applyStyles(el, styles) {
     for (const [key, value] of Object.entries(styles)) {
         // @ts-expect-error CSSStyleDeclaration index access
@@ -136,11 +123,6 @@ function getOpacity(emphasis) {
 function createSvgElement(tag) {
     return document.createElementNS("http://www.w3.org/2000/svg", tag);
 }
-function appendEdgeFlowStyle(svg) {
-    const style = createSvgElement("style");
-    style.textContent = EDGE_FLOW_STYLE;
-    svg.appendChild(style);
-}
 function getEdgeColor(params) {
     return params.kind === "zone-to-path"
         ? params.theme.pathEdge
@@ -460,16 +442,29 @@ function createPathSlotHost(params) {
 }
 function drawEdges(params) {
     const { svg, input } = params;
-    appendEdgeFlowStyle(svg);
+    const edgeFlowMotion = resolveEdgeFlowMotion(input.theme);
+    appendEdgeFlowStyle({
+        svg,
+        animationName: "zoneflow-edge-flow",
+        className: EDGE_FLOW_CLASS,
+        motion: edgeFlowMotion,
+    });
     for (const [pathId, edges] of Object.entries(input.pipeline.graphLayout.edgesByPathId)) {
         const visibility = input.pipeline.visibility.pathVisibilityById[pathId];
         if (!visibility?.shouldRenderEdge)
             continue;
-        for (const edge of edges) {
-            const stroke = getEdgeColor({
-                kind: edge.kind,
-                theme: input.theme,
-            });
+        const drawableEdges = resolveDrawableEdgeSegments({
+            pathId,
+            edges,
+            visibility,
+        });
+        for (const { edge, collapsed } of drawableEdges) {
+            const stroke = collapsed
+                ? resolveCollapsedEdgeStroke(input.theme)
+                : getEdgeColor({
+                    kind: edge.kind,
+                    theme: input.theme,
+                });
             const pathD = getBezierCurvePathD({
                 source: edge.source,
                 target: edge.target,
@@ -484,16 +479,28 @@ function drawEdges(params) {
             path.setAttribute("stroke-linejoin", "round");
             path.setAttribute("opacity", String(opacity * 0.42));
             svg.appendChild(path);
+            const flowGlow = createSvgElement("path");
+            flowGlow.setAttribute("d", pathD);
+            flowGlow.setAttribute("fill", "none");
+            flowGlow.setAttribute("stroke", stroke);
+            flowGlow.setAttribute("stroke-width", edge.kind === "path-to-zone" ? "4.4" : "3.8");
+            flowGlow.setAttribute("stroke-linecap", "round");
+            flowGlow.setAttribute("stroke-linejoin", "round");
+            flowGlow.setAttribute("stroke-dasharray", edgeFlowMotion.dashArray);
+            flowGlow.setAttribute("stroke-dashoffset", edgeFlowMotion.dashOffset);
+            flowGlow.setAttribute("opacity", String(opacity * 0.18));
+            flowGlow.setAttribute("class", EDGE_FLOW_CLASS);
+            svg.appendChild(flowGlow);
             const flow = createSvgElement("path");
             flow.setAttribute("d", pathD);
             flow.setAttribute("fill", "none");
             flow.setAttribute("stroke", stroke);
-            flow.setAttribute("stroke-width", edge.kind === "path-to-zone" ? "2.8" : "2.35");
+            flow.setAttribute("stroke-width", edge.kind === "path-to-zone" ? "2.55" : "2.15");
             flow.setAttribute("stroke-linecap", "round");
             flow.setAttribute("stroke-linejoin", "round");
-            flow.setAttribute("stroke-dasharray", "1 11");
-            flow.setAttribute("stroke-dashoffset", "0");
-            flow.setAttribute("opacity", String(opacity));
+            flow.setAttribute("stroke-dasharray", edgeFlowMotion.dashArray);
+            flow.setAttribute("stroke-dashoffset", edgeFlowMotion.dashOffset);
+            flow.setAttribute("opacity", String(opacity * 0.94));
             flow.setAttribute("class", EDGE_FLOW_CLASS);
             svg.appendChild(flow);
         }

package/dist/engines/edgeFlow.d.ts

@@ -0,0 +1,26 @@
+import type { EdgeVisual, PathVisibility } from "../types";
+import type { ZoneflowTheme } from "../theme";
+export type EdgeFlowMotion = {
+    durationMs: number;
+    segmentLength: number;
+    gapLength: number;
+    dashArray: string;
+    dashOffset: string;
+};
+export declare function resolveEdgeFlowMotion(theme: ZoneflowTheme): EdgeFlowMotion;
+export declare function appendEdgeFlowStyle(params: {
+    svg: SVGSVGElement;
+    animationName: string;
+    className: string;
+    motion: EdgeFlowMotion;
+}): void;
+export type DrawableEdgeSegment = {
+    edge: EdgeVisual;
+    collapsed: boolean;
+};
+export declare function resolveDrawableEdgeSegments(params: {
+    pathId: string;
+    edges: EdgeVisual[];
+    visibility?: PathVisibility;
+}): DrawableEdgeSegment[];
+export declare function resolveCollapsedEdgeStroke(theme: ZoneflowTheme): string;

package/dist/engines/edgeFlow.js

@@ -0,0 +1,64 @@
+function sanitizeNumber(value, fallback, min) {
+    if (!Number.isFinite(value))
+        return fallback;
+    return Math.max(min, value);
+}
+export function resolveEdgeFlowMotion(theme) {
+    const durationMs = sanitizeNumber(theme.edgeFlow.durationMs, 1320, 60);
+    const segmentLength = sanitizeNumber(theme.edgeFlow.segmentLength, 18, 1);
+    const gapLength = sanitizeNumber(theme.edgeFlow.gapLength, 28, 1);
+    const cycleLength = segmentLength + gapLength;
+    return {
+        durationMs,
+        segmentLength,
+        gapLength,
+        dashArray: `${segmentLength} ${gapLength}`,
+        dashOffset: String(cycleLength),
+    };
+}
+export function appendEdgeFlowStyle(params) {
+    const { svg, animationName, className, motion } = params;
+    const style = document.createElementNS("http://www.w3.org/2000/svg", "style");
+    style.textContent = `
+@keyframes ${animationName} {
+  from { stroke-dashoffset: ${motion.dashOffset}; }
+  to { stroke-dashoffset: 0; }
+}
+.${className} {
+  animation: ${animationName} ${motion.durationMs}ms linear infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  .${className} {
+    animation: none;
+  }
+}
+  `;
+    svg.appendChild(style);
+}
+export function resolveDrawableEdgeSegments(params) {
+    const { pathId, edges, visibility } = params;
+    if (edges.length === 0)
+        return [];
+    if (visibility?.shouldRenderNode !== false) {
+        return edges.map((edge) => ({
+            edge,
+            collapsed: false,
+        }));
+    }
+    const first = edges[0];
+    const last = edges[edges.length - 1];
+    return [
+        {
+            edge: {
+                ...first,
+                id: `${pathId}:collapsed`,
+                source: first.source,
+                target: last.target,
+            },
+            collapsed: true,
+        },
+    ];
+}
+export function resolveCollapsedEdgeStroke(theme) {
+    return `color-mix(in srgb, ${theme.pathEdge} 52%, ${theme.pathInboundEdge} 48%)`;
+}

package/dist/theme.d.ts

@@ -4,6 +4,11 @@ export type ZoneflowStatusTone = {
     color: string;
     shadow: string;
 };
+export type ZoneflowEdgeFlowTheme = {
+    durationMs: number;
+    segmentLength: number;
+    gapLength: number;
+};
 export type ZoneflowTheme = {
     background: string;
     zoneTitle: string;
@@ -43,6 +48,7 @@ export type ZoneflowTheme = {
         info: ZoneflowStatusTone;
         warning: ZoneflowStatusTone;
     };
+    edgeFlow: ZoneflowEdgeFlowTheme;
     density: {
         zone: {
             detail: number;

package/dist/themes/defaultTheme.js

@@ -50,6 +50,11 @@ export const defaultTheme = {
             shadow: "0 6px 14px rgba(180, 83, 9, 0.16)",
         },
     },
+    edgeFlow: {
+        durationMs: 1320,
+        segmentLength: 18,
+        gapLength: 28,
+    },
     density: {
         zone: {
             detail: 200,
@@ -99,6 +104,10 @@ export function resolveTheme(theme) {
                 ...theme.status?.warning,
             },
         },
+        edgeFlow: {
+            ...defaultTheme.edgeFlow,
+            ...theme.edgeFlow,
+        },
         density: {
             zone: {
                 ...defaultTheme.density.zone,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zoneflow/renderer-dom",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "license": "MIT",
   "description": "Low-level DOM renderer engines for Zoneflow.",
   "type": "module",
@@ -19,7 +19,7 @@
     "dist"
   ],
   "dependencies": {
-    "@zoneflow/core": "0.0.9"
+    "@zoneflow/core": "0.0.11"
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",