@zoneflow/renderer-dom 0.0.6 → 0.0.8

package/dist/engines/debugDrawEngine.js

@@ -5,6 +5,21 @@ const DEFAULT_DEBUG_LAYERS = [
     "edges",
     "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,
@@ -17,6 +32,11 @@ 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;
@@ -41,22 +61,39 @@ function getEdgeColor(kind) {
 }
 function getBezierCurvePathD(params) {
     const { source, target } = params;
+    const distanceX = Math.abs(target.x - source.x);
+    const distanceY = Math.abs(target.y - source.y);
+    if (distanceX <= 72 && distanceY <= 48) {
+        return `M ${source.x} ${source.y} L ${target.x} ${target.y}`;
+    }
     const sourceLead = Math.min(Math.max(Math.abs(target.x - source.x) * 0.18, 18), 42);
     const leadSourceX = source.x + sourceLead;
-    const dx = target.x - leadSourceX;
-    const direction = dx >= 0 ? 1 : -1;
+    const targetLead = Math.min(Math.max(Math.abs(target.x - source.x) * 0.16, 18), 42);
+    const targetApproachX = target.x - targetLead;
+    const shouldRouteAround = targetApproachX - leadSourceX < 36;
+    if (shouldRouteAround) {
+        const bridgeDistance = Math.abs(leadSourceX - targetApproachX);
+        const midX = (leadSourceX + targetApproachX) / 2;
+        const sourceBendX = leadSourceX + Math.min(Math.max(bridgeDistance * 0.22, 28), 72);
+        const targetBendX = targetApproachX - Math.min(Math.max(bridgeDistance * 0.22, 28), 72);
+        const verticalGap = Math.abs(target.y - source.y);
+        const verticalDirection = target.y >= source.y ? 1 : -1;
+        const laneOffset = Math.min(Math.max(Math.abs(target.x - source.x) * 0.22 + 48, 56), 144);
+        const laneY = (source.y + target.y) / 2 +
+            (verticalGap < 36 ? verticalDirection * laneOffset : 0);
+        return [
+            `M ${source.x} ${source.y}`,
+            `L ${leadSourceX} ${source.y}`,
+            `C ${sourceBendX} ${source.y}, ${sourceBendX} ${laneY}, ${midX} ${laneY}`,
+            `C ${targetBendX} ${laneY}, ${targetBendX} ${target.y}, ${targetApproachX} ${target.y}`,
+            `L ${target.x} ${target.y}`,
+        ].join(" ");
+    }
+    const dx = targetApproachX - leadSourceX;
     const handle = Math.min(Math.max(Math.abs(dx) * 0.45, 28), 104);
-    const control1X = leadSourceX + handle * direction;
-    const control2X = target.x - handle * direction;
-    return `M ${source.x} ${source.y} L ${leadSourceX} ${source.y} C ${control1X} ${source.y}, ${control2X} ${target.y}, ${target.x} ${target.y}`;
-}
-function getChevronPathD(params) {
-    const { target, direction } = params;
-    const tipX = target.x - direction * 6;
-    const baseX = tipX - direction * 7;
-    const topY = target.y - 4;
-    const bottomY = target.y + 4;
-    return `M ${baseX} ${topY} L ${tipX} ${target.y} L ${baseX} ${bottomY}`;
+    const control1X = leadSourceX + handle;
+    const control2X = targetApproachX - handle;
+    return `M ${source.x} ${source.y} L ${leadSourceX} ${source.y} C ${control1X} ${source.y}, ${control2X} ${target.y}, ${targetApproachX} ${target.y} L ${target.x} ${target.y}`;
 }
 function filterPipelineForExclusion(input) {
     const excludedZoneIds = new Set(input.exclusionState?.excludedZoneIds ?? []);
@@ -266,32 +303,35 @@ 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);
-        path.setAttribute("d", getBezierCurvePathD({
+        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 chevron = createSvgElement("path");
-        chevron.setAttribute("d", getChevronPathD({
-            target: edge.target,
-            direction: edge.kind === "path-to-zone" ? 1 : edge.target.x >= edge.source.x ? 1 : -1,
-        }));
-        chevron.setAttribute("fill", "none");
-        chevron.setAttribute("stroke", stroke);
-        chevron.setAttribute("stroke-width", edge.kind === "zone-to-path" ? "1.7" : "1.95");
-        chevron.setAttribute("stroke-linecap", "round");
-        chevron.setAttribute("stroke-linejoin", "round");
-        svg.appendChild(chevron);
+        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

@@ -9,6 +9,21 @@ const RENDER_Z_INDEX = {
     edgeLayer: 20,
     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
@@ -34,10 +49,21 @@ function sortZonesForRender(params) {
         zone,
         index,
         depth: getZoneDepth(params.input.model, zone.zoneId),
+        zOrder: params.input.layoutModel.zoneLayoutsById[zone.zoneId]?.zOrder ?? index,
     }))
-        .sort((a, b) => a.depth - b.depth || a.index - b.index)
+        .sort((a, b) => a.depth - b.depth || a.zOrder - b.zOrder || a.index - b.index)
         .map((entry) => entry.zone);
 }
+function sortPathsForRender(params) {
+    return Object.values(params.pathsById)
+        .map((path, index) => ({
+        path,
+        index,
+        zOrder: params.input.layoutModel.pathLayoutsById[path.pathId]?.zOrder ?? index,
+    }))
+        .sort((a, b) => a.zOrder - b.zOrder || a.index - b.index)
+        .map((entry) => entry.path);
+}
 function resolvePathDisplayName(params) {
     const trimmed = params.name.trim();
     if (trimmed)
@@ -110,6 +136,11 @@ 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
@@ -117,22 +148,39 @@ function getEdgeColor(params) {
 }
 function getBezierCurvePathD(params) {
     const { source, target } = params;
+    const distanceX = Math.abs(target.x - source.x);
+    const distanceY = Math.abs(target.y - source.y);
+    if (distanceX <= 72 && distanceY <= 48) {
+        return `M ${source.x} ${source.y} L ${target.x} ${target.y}`;
+    }
     const sourceLead = Math.min(Math.max(Math.abs(target.x - source.x) * 0.18, 18), 42);
     const leadSourceX = source.x + sourceLead;
-    const dx = target.x - leadSourceX;
-    const direction = dx >= 0 ? 1 : -1;
+    const targetLead = Math.min(Math.max(Math.abs(target.x - source.x) * 0.16, 18), 42);
+    const targetApproachX = target.x - targetLead;
+    const shouldRouteAround = targetApproachX - leadSourceX < 36;
+    if (shouldRouteAround) {
+        const bridgeDistance = Math.abs(leadSourceX - targetApproachX);
+        const midX = (leadSourceX + targetApproachX) / 2;
+        const sourceBendX = leadSourceX + Math.min(Math.max(bridgeDistance * 0.22, 28), 72);
+        const targetBendX = targetApproachX - Math.min(Math.max(bridgeDistance * 0.22, 28), 72);
+        const verticalGap = Math.abs(target.y - source.y);
+        const verticalDirection = target.y >= source.y ? 1 : -1;
+        const laneOffset = Math.min(Math.max(Math.abs(target.x - source.x) * 0.22 + 48, 56), 144);
+        const laneY = (source.y + target.y) / 2 +
+            (verticalGap < 36 ? verticalDirection * laneOffset : 0);
+        return [
+            `M ${source.x} ${source.y}`,
+            `L ${leadSourceX} ${source.y}`,
+            `C ${sourceBendX} ${source.y}, ${sourceBendX} ${laneY}, ${midX} ${laneY}`,
+            `C ${targetBendX} ${laneY}, ${targetBendX} ${target.y}, ${targetApproachX} ${target.y}`,
+            `L ${target.x} ${target.y}`,
+        ].join(" ");
+    }
+    const dx = targetApproachX - leadSourceX;
     const handle = Math.min(Math.max(Math.abs(dx) * 0.45, 28), 104);
-    const control1X = leadSourceX + handle * direction;
-    const control2X = target.x - handle * direction;
-    return `M ${source.x} ${source.y} L ${leadSourceX} ${source.y} C ${control1X} ${source.y}, ${control2X} ${target.y}, ${target.x} ${target.y}`;
-}
-function getChevronPathD(params) {
-    const { target, direction } = params;
-    const tipX = target.x - direction * 6;
-    const baseX = tipX - direction * 7;
-    const topY = target.y - 4;
-    const bottomY = target.y + 4;
-    return `M ${baseX} ${topY} L ${tipX} ${target.y} L ${baseX} ${bottomY}`;
+    const control1X = leadSourceX + handle;
+    const control2X = targetApproachX - handle;
+    return `M ${source.x} ${source.y} L ${leadSourceX} ${source.y} C ${control1X} ${source.y}, ${control2X} ${target.y}, ${targetApproachX} ${target.y} L ${target.x} ${target.y}`;
 }
 function computeSceneBounds(input) {
     const { pipeline, viewportInfo, } = input;
@@ -412,6 +460,7 @@ function createPathSlotHost(params) {
 }
 function drawEdges(params) {
     const { svg, input } = params;
+    appendEdgeFlowStyle(svg);
     for (const [pathId, edges] of Object.entries(input.pipeline.graphLayout.edgesByPathId)) {
         const visibility = input.pipeline.visibility.pathVisibilityById[pathId];
         if (!visibility?.shouldRenderEdge)
@@ -421,30 +470,32 @@ function drawEdges(params) {
                 kind: edge.kind,
                 theme: input.theme,
             });
-            const path = createSvgElement("path");
-            path.setAttribute("d", getBezierCurvePathD({
+            const pathD = getBezierCurvePathD({
                 source: edge.source,
                 target: edge.target,
-            }));
+            });
+            const opacity = getOpacity(visibility.emphasis);
+            const path = createSvgElement("path");
+            path.setAttribute("d", pathD);
             path.setAttribute("fill", "none");
             path.setAttribute("stroke", stroke);
             path.setAttribute("stroke-width", edge.kind === "path-to-zone" ? "2.25" : "1.85");
             path.setAttribute("stroke-linecap", "round");
             path.setAttribute("stroke-linejoin", "round");
-            path.setAttribute("opacity", String(getOpacity(visibility.emphasis)));
+            path.setAttribute("opacity", String(opacity * 0.42));
             svg.appendChild(path);
-            const chevron = createSvgElement("path");
-            chevron.setAttribute("d", getChevronPathD({
-                target: edge.target,
-                direction: edge.kind === "path-to-zone" ? 1 : edge.target.x >= edge.source.x ? 1 : -1,
-            }));
-            chevron.setAttribute("fill", "none");
-            chevron.setAttribute("stroke", stroke);
-            chevron.setAttribute("stroke-width", edge.kind === "path-to-zone" ? "1.95" : "1.7");
-            chevron.setAttribute("stroke-linecap", "round");
-            chevron.setAttribute("stroke-linejoin", "round");
-            chevron.setAttribute("opacity", String(getOpacity(visibility.emphasis)));
-            svg.appendChild(chevron);
+            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-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("class", EDGE_FLOW_CLASS);
+            svg.appendChild(flow);
         }
     }
 }
@@ -701,7 +752,10 @@ export const domDrawEngine = {
             });
             zoneLayer.appendChild(zoneEl);
         }
-        for (const pathVisual of Object.values(pipeline.graphLayout.pathsById)) {
+        for (const pathVisual of sortPathsForRender({
+            input,
+            pathsById: pipeline.graphLayout.pathsById,
+        })) {
             const visibility = pipeline.visibility.pathVisibilityById[pathVisual.pathId];
             if (!visibility?.shouldRenderNode ||
                 !pathVisual.rect ||

package/package.json

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