vizcraft 0.2.2 → 1.0.0

package/dist/overlays.js

@@ -64,6 +64,7 @@ export const coreGridLabelsOverlay = {
         return output;
     },
 };
+// ... (OverlayRegistry and other exports remain unchanged) ...
 // Built-in Overlay: Data Points
 export const coreDataPointOverlay = {
     render: ({ spec, nodesById }) => {
@@ -133,7 +134,324 @@ export const coreDataPointOverlay = {
         });
     },
 };
+// Generic Overlay: Rect
+export const coreRectOverlay = {
+    render: ({ spec }) => {
+        const { x, y, w, h, rx, ry, opacity, fill, stroke, strokeWidth } = spec.params;
+        const cls = spec.className ?? 'viz-overlay-rect';
+        const rxAttr = rx !== undefined ? ` rx="${rx}"` : '';
+        const ryAttr = ry !== undefined ? ` ry="${ry}"` : '';
+        const opAttr = opacity !== undefined ? ` opacity="${opacity}"` : '';
+        const usingDefaultFill = fill === undefined;
+        const usingDefaultStroke = stroke === undefined;
+        const resolvedFill = fill ?? '#3b82f6';
+        const resolvedStroke = stroke ?? '#3b82f6';
+        const resolvedStrokeWidth = strokeWidth ?? 3;
+        const fillOpacityAttr = usingDefaultFill ? ' fill-opacity="0.12"' : '';
+        const strokeOpacityAttr = usingDefaultStroke ? ' stroke-opacity="0.9"' : '';
+        return `<rect x="${x}" y="${y}" width="${w}" height="${h}" fill="${resolvedFill}"${fillOpacityAttr} stroke="${resolvedStroke}"${strokeOpacityAttr} stroke-width="${resolvedStrokeWidth}"${rxAttr}${ryAttr}${opAttr} class="${cls}" />`;
+    },
+    update: ({ spec }, container) => {
+        const svgNS = 'http://www.w3.org/2000/svg';
+        const { x, y, w, h, rx, ry, opacity, fill, stroke, strokeWidth } = spec.params;
+        const cls = spec.className ?? 'viz-overlay-rect';
+        let rect = container.querySelector('rect');
+        if (!rect) {
+            rect = document.createElementNS(svgNS, 'rect');
+            container.appendChild(rect);
+        }
+        rect.setAttribute('x', String(x));
+        rect.setAttribute('y', String(y));
+        rect.setAttribute('width', String(w));
+        rect.setAttribute('height', String(h));
+        if (fill === undefined) {
+            rect.setAttribute('fill', '#3b82f6');
+            rect.setAttribute('fill-opacity', '0.12');
+        }
+        else {
+            rect.setAttribute('fill', fill);
+            rect.removeAttribute('fill-opacity');
+        }
+        if (stroke === undefined) {
+            rect.setAttribute('stroke', '#3b82f6');
+            rect.setAttribute('stroke-opacity', '0.9');
+        }
+        else {
+            rect.setAttribute('stroke', stroke);
+            rect.removeAttribute('stroke-opacity');
+        }
+        rect.setAttribute('stroke-width', String(strokeWidth ?? 3));
+        if (rx !== undefined)
+            rect.setAttribute('rx', String(rx));
+        else
+            rect.removeAttribute('rx');
+        if (ry !== undefined)
+            rect.setAttribute('ry', String(ry));
+        else
+            rect.removeAttribute('ry');
+        if (opacity !== undefined)
+            rect.setAttribute('opacity', String(opacity));
+        else
+            rect.removeAttribute('opacity');
+        rect.setAttribute('class', cls);
+    },
+};
+// Generic Overlay: Circle
+export const coreCircleOverlay = {
+    render: ({ spec }) => {
+        const { x, y, r, opacity, fill, stroke, strokeWidth } = spec.params;
+        const cls = spec.className ?? 'viz-overlay-circle';
+        const opAttr = opacity !== undefined ? ` opacity="${opacity}"` : '';
+        const usingDefaultFill = fill === undefined;
+        const usingDefaultStroke = stroke === undefined;
+        const resolvedFill = fill ?? '#3b82f6';
+        const resolvedStroke = stroke ?? '#3b82f6';
+        const resolvedStrokeWidth = strokeWidth ?? 3;
+        const fillOpacityAttr = usingDefaultFill ? ' fill-opacity="0.12"' : '';
+        const strokeOpacityAttr = usingDefaultStroke ? ' stroke-opacity="0.9"' : '';
+        return `<circle cx="${x}" cy="${y}" r="${r}" fill="${resolvedFill}"${fillOpacityAttr} stroke="${resolvedStroke}"${strokeOpacityAttr} stroke-width="${resolvedStrokeWidth}"${opAttr} class="${cls}" />`;
+    },
+    update: ({ spec }, container) => {
+        const svgNS = 'http://www.w3.org/2000/svg';
+        const { x, y, r, opacity, fill, stroke, strokeWidth } = spec.params;
+        const cls = spec.className ?? 'viz-overlay-circle';
+        let circle = container.querySelector('circle');
+        if (!circle) {
+            circle = document.createElementNS(svgNS, 'circle');
+            container.appendChild(circle);
+        }
+        circle.setAttribute('cx', String(x));
+        circle.setAttribute('cy', String(y));
+        circle.setAttribute('r', String(r));
+        if (fill === undefined) {
+            circle.setAttribute('fill', '#3b82f6');
+            circle.setAttribute('fill-opacity', '0.12');
+        }
+        else {
+            circle.setAttribute('fill', fill);
+            circle.removeAttribute('fill-opacity');
+        }
+        if (stroke === undefined) {
+            circle.setAttribute('stroke', '#3b82f6');
+            circle.setAttribute('stroke-opacity', '0.9');
+        }
+        else {
+            circle.setAttribute('stroke', stroke);
+            circle.removeAttribute('stroke-opacity');
+        }
+        circle.setAttribute('stroke-width', String(strokeWidth ?? 3));
+        if (opacity !== undefined)
+            circle.setAttribute('opacity', String(opacity));
+        else
+            circle.removeAttribute('opacity');
+        circle.setAttribute('class', cls);
+    },
+};
+// Generic Overlay: Text
+export const coreTextOverlay = {
+    render: ({ spec }) => {
+        const { x, y, text, opacity, fill, fontSize, fontWeight, textAnchor, dominantBaseline, } = spec.params;
+        const cls = spec.className ?? 'viz-overlay-text';
+        const opAttr = opacity !== undefined ? ` opacity="${opacity}"` : '';
+        const fsAttr = fontSize !== undefined ? ` font-size="${fontSize}"` : '';
+        const fwAttr = fontWeight !== undefined ? ` font-weight="${fontWeight}"` : '';
+        const taAttr = textAnchor !== undefined ? ` text-anchor="${textAnchor}"` : '';
+        const dbAttr = dominantBaseline !== undefined
+            ? ` dominant-baseline="${dominantBaseline}"`
+            : '';
+        // Basic text rendering; users should avoid untrusted HTML here.
+        const resolvedFill = fill ?? '#111';
+        return `<text x="${x}" y="${y}" fill="${resolvedFill}"${opAttr}${fsAttr}${fwAttr}${taAttr}${dbAttr} class="${cls}">${text}</text>`;
+    },
+    update: ({ spec }, container) => {
+        const svgNS = 'http://www.w3.org/2000/svg';
+        const { x, y, text, opacity, fill, fontSize, fontWeight, textAnchor, dominantBaseline, } = spec.params;
+        const cls = spec.className ?? 'viz-overlay-text';
+        let el = container.querySelector('text');
+        if (!el) {
+            el = document.createElementNS(svgNS, 'text');
+            container.appendChild(el);
+        }
+        el.setAttribute('x', String(x));
+        el.setAttribute('y', String(y));
+        el.setAttribute('fill', fill ?? '#111');
+        if (opacity !== undefined)
+            el.setAttribute('opacity', String(opacity));
+        else
+            el.removeAttribute('opacity');
+        if (fontSize !== undefined)
+            el.setAttribute('font-size', String(fontSize));
+        else
+            el.removeAttribute('font-size');
+        if (fontWeight !== undefined)
+            el.setAttribute('font-weight', String(fontWeight));
+        else
+            el.removeAttribute('font-weight');
+        if (textAnchor !== undefined)
+            el.setAttribute('text-anchor', textAnchor);
+        else
+            el.removeAttribute('text-anchor');
+        if (dominantBaseline !== undefined)
+            el.setAttribute('dominant-baseline', dominantBaseline);
+        else
+            el.removeAttribute('dominant-baseline');
+        el.setAttribute('class', cls);
+        el.textContent = text;
+    },
+};
+function groupTransform(params) {
+    const tx = params.x ?? 0;
+    const ty = params.y ?? 0;
+    const s = params.scale ?? 1;
+    const r = params.rotation ?? 0;
+    // translate first so scale/rotation occur around the group origin.
+    const parts = [`translate(${tx}, ${ty})`];
+    if (r)
+        parts.push(`rotate(${r})`);
+    if (s !== 1)
+        parts.push(`scale(${s})`);
+    return parts.join(' ');
+}
+function clamp01(v) {
+    if (v < 0)
+        return 0;
+    if (v > 1)
+        return 1;
+    return v;
+}
+function effectiveNodePos(node) {
+    return {
+        x: node.runtime?.x ?? node.pos.x,
+        y: node.runtime?.y ?? node.pos.y,
+    };
+}
+function resolveGroupTransformInputs(params, nodesById) {
+    const baseX = params.x ?? 0;
+    const baseY = params.y ?? 0;
+    let x = baseX;
+    let y = baseY;
+    if (params.from && params.to) {
+        const start = nodesById.get(params.from);
+        const end = nodesById.get(params.to);
+        if (start && end) {
+            const p = clamp01(params.progress ?? 0);
+            const a = effectiveNodePos(start);
+            const b = effectiveNodePos(end);
+            x = a.x + (b.x - a.x) * p + baseX;
+            y = a.y + (b.y - a.y) * p + baseY;
+        }
+    }
+    const userScale = params.scale ?? 1;
+    const m = params.magnitude;
+    const magScale = m === undefined ? 1 : 0.85 + 0.3 * clamp01(Math.abs(m));
+    const scale = userScale * magScale;
+    return {
+        x,
+        y,
+        scale,
+        rotation: params.rotation ?? 0,
+    };
+}
+// Composite Overlay: Group
+export const coreGroupOverlay = {
+    render: ({ spec, nodesById, edgesById, scene, registry }) => {
+        const { children, opacity } = spec.params;
+        const inputs = resolveGroupTransformInputs(spec.params, nodesById);
+        const tr = groupTransform(inputs);
+        const opAttr = opacity !== undefined ? ` opacity="${opacity}"` : '';
+        const reg = registry;
+        if (!reg) {
+            // Best-effort render even if registry is missing.
+            return `<g transform="${tr}"${opAttr}></g>`;
+        }
+        let output = `<g transform="${tr}"${opAttr}>`;
+        children.forEach((childSpec, idx) => {
+            const renderer = reg.get(childSpec.id);
+            if (!renderer)
+                return;
+            const childCtx = {
+                spec: childSpec,
+                nodesById,
+                edgesById,
+                scene,
+                registry: reg,
+            };
+            // Wrap children in their own <g> so update() has stable containers.
+            const key = childSpec.key
+                ? `key:${childSpec.key}`
+                : `idx:${idx}:${childSpec.id}`;
+            output += `<g data-viz-role="overlay-child" data-overlay-child-id="${key}">`;
+            output += renderer.render(childCtx);
+            output += '</g>';
+        });
+        output += '</g>';
+        return output;
+    },
+    update: ({ spec, nodesById, edgesById, scene, registry }, container) => {
+        const reg = registry;
+        if (!reg)
+            return;
+        const { children, opacity } = spec.params;
+        const inputs = resolveGroupTransformInputs(spec.params, nodesById);
+        container.setAttribute('transform', groupTransform(inputs));
+        if (opacity !== undefined) {
+            container.setAttribute('opacity', String(opacity));
+        }
+        else {
+            container.removeAttribute('opacity');
+        }
+        const svgNS = 'http://www.w3.org/2000/svg';
+        const existing = new Map();
+        Array.from(container.children).forEach((child) => {
+            if (child instanceof SVGGElement) {
+                const id = child.getAttribute('data-overlay-child-id');
+                if (id)
+                    existing.set(id, child);
+            }
+        });
+        const keep = new Set();
+        children.forEach((childSpec, idx) => {
+            const renderer = reg.get(childSpec.id);
+            if (!renderer)
+                return;
+            const key = childSpec.key
+                ? `key:${childSpec.key}`
+                : `idx:${idx}:${childSpec.id}`;
+            keep.add(key);
+            let childGroup = existing.get(key);
+            if (!childGroup) {
+                childGroup = document.createElementNS(svgNS, 'g');
+                childGroup.setAttribute('data-viz-role', 'overlay-child');
+                childGroup.setAttribute('data-overlay-child-id', key);
+                container.appendChild(childGroup);
+            }
+            const childCtx = {
+                spec: childSpec,
+                nodesById,
+                edgesById,
+                scene,
+                registry: reg,
+            };
+            if (renderer.update) {
+                renderer.update(childCtx, childGroup);
+            }
+            else {
+                childGroup.innerHTML = renderer.render(childCtx);
+            }
+        });
+        existing.forEach((el, id) => {
+            if (!keep.has(id))
+                el.remove();
+        });
+    },
+};
 export const defaultCoreOverlayRegistry = new CoreOverlayRegistry()
     .register('signal', coreSignalOverlay)
     .register('grid-labels', coreGridLabelsOverlay)
-    .register('data-points', coreDataPointOverlay);
+    .register('data-points', coreDataPointOverlay)
+    // Generic primitives
+    .register('rect', coreRectOverlay)
+    .register('circle', coreCircleOverlay)
+    .register('text', coreTextOverlay)
+    // Composite overlays
+    .register('group', coreGroupOverlay);

package/dist/runtimePatcher.d.ts

@@ -5,9 +5,9 @@ export interface RuntimePatchCtx {
     nodeShapesById: Map<string, SVGElement>;
     nodeLabelsById: Map<string, SVGTextElement>;
     edgeGroupsById: Map<string, SVGGElement>;
-    edgeLinesById: Map<string, SVGLineElement>;
-    edgeHitsById: Map<string, SVGLineElement>;
-    edgeLabelsById: Map<string, SVGTextElement>;
+    edgeLinesById: Map<string, SVGPathElement>;
+    edgeHitsById: Map<string, SVGPathElement>;
+    edgeLabelsById: Map<string, SVGTextElement[]>;
 }
 export declare function createRuntimePatchCtx(svg: SVGSVGElement): RuntimePatchCtx;
 export declare function patchRuntime(scene: VizScene, ctx: RuntimePatchCtx): void;

package/dist/runtimePatcher.js

@@ -1,11 +1,130 @@
-import { applyShapeGeometry, computeNodeAnchor, effectivePos } from './shapes';
-function computeEdgeEndpoints(start, end, edge) {
-    const anchor = edge.anchor ?? 'boundary';
-    const startPos = effectivePos(start);
-    const endPos = effectivePos(end);
-    const startAnchor = computeNodeAnchor(start, endPos, anchor);
-    const endAnchor = computeNodeAnchor(end, startPos, anchor);
-    return { start: startAnchor, end: endAnchor };
+import { applyShapeGeometry, effectivePos } from './shapes';
+import { computeEdgePath, computeEdgeEndpoints } from './edgePaths';
+import { resolveEdgeLabelPosition, collectEdgeLabels } from './edgeLabels';
+const svgNS = 'http://www.w3.org/2000/svg';
+/** Sanitise a CSS color for use as a marker ID suffix. */
+function colorToMarkerSuffix(color) {
+    return color.replace(/[^a-zA-Z0-9]/g, '_');
+}
+/** Return the marker id to use for a marker type with an optional custom stroke and position. */
+function markerIdFor(markerType, stroke, position = 'end') {
+    if (markerType === 'none')
+        return '';
+    const base = `viz-${markerType}`;
+    const suffix = position === 'start' ? '-start' : '';
+    return stroke
+        ? `${base}${suffix}-${colorToMarkerSuffix(stroke)}`
+        : `${base}${suffix}`;
+}
+/**
+ * Create the SVG content element(s) for a marker type.
+ */
+function createMarkerContent(markerType, color) {
+    switch (markerType) {
+        case 'arrow': {
+            const p = document.createElementNS(svgNS, 'polygon');
+            p.setAttribute('points', '0,2 10,5 0,8');
+            p.setAttribute('fill', color);
+            return p;
+        }
+        case 'arrowOpen': {
+            const p = document.createElementNS(svgNS, 'polyline');
+            p.setAttribute('points', '0,2 10,5 0,8');
+            p.setAttribute('fill', 'white');
+            p.setAttribute('stroke', color);
+            p.setAttribute('stroke-width', '1.5');
+            p.setAttribute('stroke-linejoin', 'miter');
+            return p;
+        }
+        case 'diamond': {
+            const p = document.createElementNS(svgNS, 'polygon');
+            p.setAttribute('points', '0,5 5,2 10,5 5,8');
+            p.setAttribute('fill', color);
+            return p;
+        }
+        case 'diamondOpen': {
+            const p = document.createElementNS(svgNS, 'polygon');
+            p.setAttribute('points', '0,5 5,2 10,5 5,8');
+            p.setAttribute('fill', 'white');
+            p.setAttribute('stroke', color);
+            p.setAttribute('stroke-width', '1.5');
+            return p;
+        }
+        case 'circle': {
+            const c = document.createElementNS(svgNS, 'circle');
+            c.setAttribute('cx', '5');
+            c.setAttribute('cy', '5');
+            c.setAttribute('r', '3');
+            c.setAttribute('fill', color);
+            return c;
+        }
+        case 'circleOpen': {
+            const c = document.createElementNS(svgNS, 'circle');
+            c.setAttribute('cx', '5');
+            c.setAttribute('cy', '5');
+            c.setAttribute('r', '3');
+            c.setAttribute('fill', 'white');
+            c.setAttribute('stroke', color);
+            c.setAttribute('stroke-width', '1.5');
+            return c;
+        }
+        case 'square': {
+            const r = document.createElementNS(svgNS, 'rect');
+            r.setAttribute('x', '2');
+            r.setAttribute('y', '2');
+            r.setAttribute('width', '6');
+            r.setAttribute('height', '6');
+            r.setAttribute('fill', color);
+            return r;
+        }
+        case 'bar': {
+            const l = document.createElementNS(svgNS, 'line');
+            l.setAttribute('x1', '5');
+            l.setAttribute('y1', '1');
+            l.setAttribute('x2', '5');
+            l.setAttribute('y2', '9');
+            l.setAttribute('stroke', color);
+            l.setAttribute('stroke-width', '2');
+            l.setAttribute('stroke-linecap', 'round');
+            return l;
+        }
+        case 'halfArrow': {
+            const p = document.createElementNS(svgNS, 'polygon');
+            p.setAttribute('points', '0,2 10,5 0,5');
+            p.setAttribute('fill', color);
+            return p;
+        }
+        default:
+            return null;
+    }
+}
+/**
+ * Ensure a `<marker>` for the given color and type exists inside `<defs>`.
+ * Creates one on the fly when the RuntimePatcher encounters a new stroke color or marker type.
+ */
+function ensureColoredMarker(svg, color, markerType = 'arrow', position = 'end') {
+    const mid = markerIdFor(markerType, color, position);
+    if (!mid)
+        return '';
+    if (!svg.querySelector(`#${CSS.escape(mid)}`)) {
+        const defs = svg.querySelector('defs');
+        if (defs) {
+            const m = document.createElementNS(svgNS, 'marker');
+            m.setAttribute('id', mid);
+            m.setAttribute('viewBox', '0 0 10 10');
+            m.setAttribute('markerWidth', '10');
+            m.setAttribute('markerHeight', '10');
+            m.setAttribute('refX', '9');
+            m.setAttribute('refY', '5');
+            m.setAttribute('orient', position === 'start' ? 'auto-start-reverse' : 'auto');
+            const content = createMarkerContent(markerType, color);
+            if (content) {
+                m.appendChild(content);
+            }
+            defs.appendChild(m);
+        }
+    }
+    return mid;
 }
 export function createRuntimePatchCtx(svg) {
     const nodeGroupsById = new Map();
@@ -51,10 +170,9 @@ export function createRuntimePatchCtx(svg) {
                 group.querySelector('.viz-edge-hit');
             if (hit)
                 edgeHitsById.set(id, hit);
-            const label = group.querySelector('[data-viz-role="edge-label"]') ||
-                group.querySelector('.viz-edge-label');
-            if (label)
-                edgeLabelsById.set(id, label);
+            const labels = Array.from(group.querySelectorAll('[data-viz-role="edge-label"],.viz-edge-label'));
+            if (labels.length > 0)
+                edgeLabelsById.set(id, labels);
         }
     }
     return {
@@ -70,20 +188,61 @@ export function createRuntimePatchCtx(svg) {
 }
 export function patchRuntime(scene, ctx) {
     const nodesById = new Map(scene.nodes.map((n) => [n.id, n]));
+    // Pre-compute parent position deltas for container propagation.
+    // When a container node moves via runtime, children should follow.
+    const parentDeltas = new Map();
+    for (const node of scene.nodes) {
+        if (node.container) {
+            const dx = (node.runtime?.x ?? node.pos.x) - node.pos.x;
+            const dy = (node.runtime?.y ?? node.pos.y) - node.pos.y;
+            if (dx !== 0 || dy !== 0) {
+                parentDeltas.set(node.id, { dx, dy });
+            }
+        }
+    }
     // Nodes: patch geometry + label position + runtime transforms/opacity.
     for (const node of scene.nodes) {
         const group = ctx.nodeGroupsById.get(node.id);
         const shape = ctx.nodeShapesById.get(node.id);
         if (!group || !shape)
             continue;
-        const { x, y } = effectivePos(node);
+        let { x, y } = effectivePos(node);
+        // Apply parent container offset so children follow the container
+        if (node.parentId) {
+            const delta = parentDeltas.get(node.parentId);
+            if (delta) {
+                x += delta.dx;
+                y += delta.dy;
+            }
+        }
         // Geometry
         applyShapeGeometry(shape, node.shape, { x, y });
+        // Container header line (update position if present)
+        if (node.container?.headerHeight &&
+            'w' in node.shape &&
+            'h' in node.shape) {
+            const headerLine = group.querySelector('[data-viz-role="container-header"]');
+            if (headerLine) {
+                const sw = node.shape.w;
+                const sh = node.shape.h;
+                const headerY = y - sh / 2 + node.container.headerHeight;
+                headerLine.setAttribute('x1', String(x - sw / 2));
+                headerLine.setAttribute('y1', String(headerY));
+                headerLine.setAttribute('x2', String(x + sw / 2));
+                headerLine.setAttribute('y2', String(headerY));
+            }
+        }
         // Label position
         const label = ctx.nodeLabelsById.get(node.id);
         if (label && node.label) {
-            const lx = x + (node.label.dx || 0);
-            const ly = y + (node.label.dy || 0);
+            let lx = x + (node.label.dx || 0);
+            let ly = y + (node.label.dy || 0);
+            // Container header label centering
+            if (node.container?.headerHeight && 'h' in node.shape && !node.label.dy) {
+                const sh = node.shape.h;
+                ly = y - sh / 2 + node.container.headerHeight / 2;
+                lx = x + (node.label.dx || 0);
+            }
             label.setAttribute('x', String(lx));
             label.setAttribute('y', String(ly));
         }
@@ -112,6 +271,18 @@ export function patchRuntime(scene, ctx) {
         else {
             group.removeAttribute('transform');
         }
+        // Port positions follow the node
+        if (node.ports) {
+            const portEls = group.querySelectorAll('[data-viz-role="port"]');
+            portEls.forEach((portEl) => {
+                const portId = portEl.getAttribute('data-port');
+                const port = node.ports.find((p) => p.id === portId);
+                if (port) {
+                    portEl.setAttribute('cx', String(x + port.offset.x));
+                    portEl.setAttribute('cy', String(y + port.offset.y));
+                }
+            });
+        }
     }
     // Edges: patch endpoints + runtime props (opacity, strokeDashoffset) + label + hit.
     for (const edge of scene.edges) {
@@ -124,24 +295,53 @@ export function patchRuntime(scene, ctx) {
         if (!start || !end)
             continue;
         const endpoints = computeEdgeEndpoints(start, end, edge);
-        // Endpoints
-        line.setAttribute('x1', String(endpoints.start.x));
-        line.setAttribute('y1', String(endpoints.start.y));
-        line.setAttribute('x2', String(endpoints.end.x));
-        line.setAttribute('y2', String(endpoints.end.y));
+        const edgePath = computeEdgePath(endpoints.start, endpoints.end, edge.routing, edge.waypoints);
+        // Path
+        line.setAttribute('d', edgePath.d);
+        // Per-edge style overrides (inline style wins over CSS class defaults)
+        if (edge.style?.stroke !== undefined) {
+            line.style.stroke = edge.style.stroke;
+        }
+        if (edge.style?.strokeWidth !== undefined)
+            line.style.strokeWidth = String(edge.style.strokeWidth);
+        if (edge.style?.fill !== undefined)
+            line.style.fill = edge.style.fill;
+        if (edge.style?.opacity !== undefined)
+            line.style.opacity = String(edge.style.opacity);
+        // Update marker-end and marker-start to match edge stroke color
+        if (edge.markerEnd && edge.markerEnd !== 'none') {
+            const mid = edge.style?.stroke
+                ? ensureColoredMarker(ctx.svg, edge.style.stroke, edge.markerEnd, 'end')
+                : markerIdFor(edge.markerEnd, undefined, 'end');
+            line.setAttribute('marker-end', `url(#${mid})`);
+        }
+        else {
+            line.removeAttribute('marker-end');
+        }
+        if (edge.markerStart && edge.markerStart !== 'none') {
+            const mid = edge.style?.stroke
+                ? ensureColoredMarker(ctx.svg, edge.style.stroke, edge.markerStart, 'start')
+                : markerIdFor(edge.markerStart, undefined, 'start');
+            line.setAttribute('marker-start', `url(#${mid})`);
+        }
+        else {
+            line.removeAttribute('marker-start');
+        }
         const hit = ctx.edgeHitsById.get(edge.id);
         if (hit) {
-            hit.setAttribute('x1', String(endpoints.start.x));
-            hit.setAttribute('y1', String(endpoints.start.y));
-            hit.setAttribute('x2', String(endpoints.end.x));
-            hit.setAttribute('y2', String(endpoints.end.y));
-        }
-        const label = ctx.edgeLabelsById.get(edge.id);
-        if (label && edge.label) {
-            const mx = (endpoints.start.x + endpoints.end.x) / 2 + (edge.label.dx || 0);
-            const my = (endpoints.start.y + endpoints.end.y) / 2 + (edge.label.dy || 0);
-            label.setAttribute('x', String(mx));
-            label.setAttribute('y', String(my));
+            hit.setAttribute('d', edgePath.d);
+        }
+        const labelEls = ctx.edgeLabelsById.get(edge.id);
+        if (labelEls) {
+            const allLabels = collectEdgeLabels(edge);
+            labelEls.forEach((el, idx) => {
+                const lbl = allLabels[idx];
+                if (!lbl)
+                    return;
+                const pos = resolveEdgeLabelPosition(lbl, edgePath);
+                el.setAttribute('x', String(pos.x));
+                el.setAttribute('y', String(pos.y));
+            });
         }
         // Runtime overrides
         if (edge.runtime?.opacity !== undefined) {