seat-editor 3.4.8 → 3.5.0

package/dist/features/view-only-4/connect-handle.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const ConnectHandle = ({ cx, cy, width, height, nodeId, rotation = 0, // ← tambah ini
+isConnecting, onStartConnect, onEndConnect, }) => {
+    const hw = width / 2;
+    const hh = height / 2;
+    // Tombol ⊕ di pojok kanan atas (dalam local space)
+    const btnLocalX = hw - 2;
+    const btnLocalY = -hh - 8;
+    return (
+    // Semua di-wrap dalam g dengan translate ke center + rotate
+    // Sama persis seperti struktur render node aslinya
+    _jsx("g", { transform: `translate(${cx}, ${cy}) rotate(${rotation})`, children: isConnecting ? (
+        // Mode connecting: overlay seluruh node
+        _jsx("rect", { x: -hw - 4, y: -hh - 4, width: width + 8, height: height + 8, fill: "transparent", stroke: "#a78bfa", strokeWidth: 1.5, strokeDasharray: "4 2", rx: 4, style: { cursor: "crosshair" }, onMouseDown: (e) => {
+                e.stopPropagation();
+                onEndConnect(nodeId);
+            } })) : (
+        // Tombol ⊕ — posisi relatif dari center node
+        _jsxs("g", { transform: `translate(${btnLocalX}, ${btnLocalY})`, style: { cursor: "crosshair" }, onMouseDown: (e) => {
+                e.stopPropagation();
+                onStartConnect(nodeId);
+            }, children: [_jsx("circle", { r: 8, fill: "#0a0e1a", stroke: "#38bdf8", strokeWidth: 1.2, opacity: 0.9 }), _jsx("text", { textAnchor: "middle", dominantBaseline: "middle", fill: "#38bdf8", fontSize: 11, fontWeight: 700, style: { pointerEvents: "none", userSelect: "none" }, children: "\u2295" })] })) }));
+};

package/dist/features/view-only-4/connect-handle.jsx

@@ -0,0 +1,30 @@
+export const ConnectHandle = ({ cx, cy, width, height, nodeId, rotation = 0, // ← tambah ini
+isConnecting, onStartConnect, onEndConnect, }) => {
+    const hw = width / 2;
+    const hh = height / 2;
+    // Tombol ⊕ di pojok kanan atas (dalam local space)
+    const btnLocalX = hw - 2;
+    const btnLocalY = -hh - 8;
+    return (
+    // Semua di-wrap dalam g dengan translate ke center + rotate
+    // Sama persis seperti struktur render node aslinya
+    <g transform={`translate(${cx}, ${cy}) rotate(${rotation})`}>
+      
+      {isConnecting ? (
+        // Mode connecting: overlay seluruh node
+        <rect x={-hw - 4} y={-hh - 4} width={width + 8} height={height + 8} fill="transparent" stroke="#a78bfa" strokeWidth={1.5} strokeDasharray="4 2" rx={4} style={{ cursor: "crosshair" }} onMouseDown={(e) => {
+                e.stopPropagation();
+                onEndConnect(nodeId);
+            }}/>) : (
+        // Tombol ⊕ — posisi relatif dari center node
+        <g transform={`translate(${btnLocalX}, ${btnLocalY})`} style={{ cursor: "crosshair" }} onMouseDown={(e) => {
+                e.stopPropagation();
+                onStartConnect(nodeId);
+            }}>
+          <circle r={8} fill="#0a0e1a" stroke="#38bdf8" strokeWidth={1.2} opacity={0.9}/>
+          <text textAnchor="middle" dominantBaseline="middle" fill="#38bdf8" fontSize={11} fontWeight={700} style={{ pointerEvents: "none", userSelect: "none" }}>
+            ⊕
+          </text>
+        </g>)}
+    </g>);
+};

package/dist/features/view-only-4/connection-layer.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import { NodeType } from "./utils";
+import { EdgeType } from "./utils";
+type Props = {
+    edges: EdgeType[];
+    selectedEdge: string | null;
+    connecting: {
+        fromId: string;
+    } | null;
+    mousePos: {
+        x: number;
+        y: number;
+    };
+    getNodeById: (id: string) => NodeType | null;
+    onSelectEdge: (edgeId: string) => void;
+    onStartDragWaypoint: (e: React.MouseEvent, edgeId: string, index: number) => void;
+    onInsertWaypoint: (e: React.MouseEvent, edgeId: string, insertIndex: number, x: number, y: number) => void;
+    onRemoveWaypoint: (e: React.MouseEvent, edgeId: string, index: number) => void;
+};
+export declare const ConnectionLayer: React.FC<Props>;
+export {};

package/dist/features/view-only-4/connection-layer.js

@@ -0,0 +1,219 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// components/ConnectionLayer.tsx
+import { useMemo } from "react";
+import { buildPath, getRectEdge, snap, GRID_SIZE, NODE_WIDTH, NODE_HEIGHT } from "./utils";
+const LEVEL_COLORS = [
+    "#22c55e",
+    "#f59e0b",
+    "#f97316",
+    "#ef4444",
+    "#a78bfa",
+    "#38bdf8",
+];
+const getLevelColor = (level) => LEVEL_COLORS[Math.min(level, LEVEL_COLORS.length - 1)];
+// ── BFS flood fill ────────────────────────────────────────────────────
+const floodFill = (seedIds, edges) => {
+    const levelMap = new Map();
+    const queue = [];
+    seedIds.forEach((id) => { levelMap.set(id, 0); queue.push({ id, level: 0 }); });
+    while (queue.length > 0) {
+        const { id, level } = queue.shift();
+        edges.forEach((edge) => {
+            const neighbors = [];
+            if (edge.from === id)
+                neighbors.push(edge.to);
+            if (edge.to === id)
+                neighbors.push(edge.from);
+            neighbors.forEach((nId) => {
+                if (!levelMap.has(nId)) {
+                    levelMap.set(nId, level + 1);
+                    queue.push({ id: nId, level: level + 1 });
+                }
+            });
+        });
+    }
+    return levelMap;
+};
+// ── Arrow angle dari segmen TERAKHIR path ────────────────────────────
+/**
+ * Lihat 2 titik terakhir dari allPoints untuk tahu arah segmen akhir.
+ * buildPath routing H midX V curr.y H curr.x:
+ *   - Segmen terakhir selalu H → kecuali jika lurus vertikal
+ * Tapi kita cek arah prev→last secara dominan untuk akurasi.
+ */
+const getArrowAngle = (prev, last) => {
+    const dx = last.x - prev.x;
+    const dy = last.y - prev.y;
+    const absDx = Math.abs(dx);
+    const absDy = Math.abs(dy);
+    const threshold = 2; // presisi tinggi
+    // Lurus vertikal
+    if (absDx <= threshold)
+        return dy > 0 ? 90 : 270;
+    // Lurus horizontal
+    if (absDy <= threshold)
+        return dx > 0 ? 0 : 180;
+    // Untuk orthogonal H midX V curr.y H curr.x:
+    // segmen terakhir adalah H → arah kiri/kanan
+    return dx > 0 ? 0 : 180;
+};
+// ── Hitung split point untuk group of edges dari sumber yang sama ────
+//
+// Strategi:
+// 1. Hitung exit point masing-masing edge dari source
+// 2. Rata-rata semua exit point → "stem exit" (titik keluar bersama)
+// 3. Stem: source center → stem exit
+// 4. Branch: stem exit → waypoints → target
+//
+const getStemAndBranches = (sourceNode, targetNodes) => {
+    // Exit point tiap edge jika berjalan sendiri
+    const exits = targetNodes.map(({ node }) => getRectEdge(sourceNode, node, sourceNode.width, sourceNode.height));
+    // Rata-rata exit → shared stem exit point
+    const avgX = snap(exits.reduce((s, p) => s + p.x, 0) / exits.length);
+    const avgY = snap(exits.reduce((s, p) => s + p.y, 0) / exits.length);
+    const stemExit = { x: avgX, y: avgY };
+    // Untuk setiap branch: stem exit → waypoints edge → target edge point
+    const branches = targetNodes.map(({ node, edge }) => {
+        const end = getRectEdge(node, sourceNode, node.width, node.height);
+        const branchPoints = [stemExit, ...edge.waypoints, end];
+        return { edge, branchPoints, end };
+    });
+    return { stemExit, branches };
+};
+export const ConnectionLayer = ({ edges, selectedEdge, connecting, mousePos, getNodeById, onSelectEdge, onStartDragWaypoint, onInsertWaypoint, onRemoveWaypoint, }) => {
+    // ── Flood fill highlight ──────────────────────────────────────────
+    const nodeHighlightMap = useMemo(() => {
+        if (!selectedEdge)
+            return new Map();
+        const sel = edges.find((e) => e.id === selectedEdge);
+        if (!sel)
+            return new Map();
+        return floodFill([sel.from, sel.to], edges);
+    }, [selectedEdge, edges]);
+    // ── Group edges by source (from) ──────────────────────────────────
+    // sourceGroups: Map<fromId, EdgeType[]>
+    const sourceGroups = useMemo(() => {
+        const map = new Map();
+        edges.forEach((edge) => {
+            if (!map.has(edge.from))
+                map.set(edge.from, []);
+            map.get(edge.from).push(edge);
+        });
+        return map;
+    }, [edges]);
+    // ── Pre-compute stem & branch paths ──────────────────────────────
+    // stemPaths: Map<fromId, { stemPath, stemExit }>
+    // branchPaths: Map<edgeId, { branchPoints, angle }>
+    const { stemPaths, branchPaths } = useMemo(() => {
+        const stemPaths = new Map();
+        const branchPaths = new Map();
+        sourceGroups.forEach((groupEdges, fromId) => {
+            const sourceNode = getNodeById(fromId);
+            if (!sourceNode)
+                return;
+            const targetNodes = groupEdges
+                .map((edge) => {
+                const node = getNodeById(edge.to);
+                return node ? { node, edge } : null;
+            })
+                .filter(Boolean);
+            if (targetNodes.length === 0)
+                return;
+            if (targetNodes.length === 1) {
+                // Hanya 1 target — tidak perlu branching, render normal
+                const { node, edge } = targetNodes[0];
+                const start = getRectEdge(sourceNode, node, sourceNode.width, sourceNode.height);
+                const end = getRectEdge(node, sourceNode, node.width, node.height);
+                const allPoints = [start, ...edge.waypoints, end];
+                const pathD = buildPath(allPoints);
+                const angle = getArrowAngle(allPoints[allPoints.length - 2], allPoints[allPoints.length - 1]);
+                branchPaths.set(edge.id, { pathD, angle, allPoints });
+                return;
+            }
+            // Multiple targets → branching
+            const { stemExit, branches } = getStemAndBranches(sourceNode, targetNodes);
+            // Stem path: source exit → stem exit
+            // Gunakan exit point dari source ke arah rata-rata (stemExit)
+            const sourceExit = getRectEdge(sourceNode, stemExit, sourceNode.width, sourceNode.height);
+            const stemPoints = [sourceExit, stemExit];
+            stemPaths.set(fromId, {
+                pathD: buildPath(stemPoints),
+                stemExit,
+            });
+            // Branch paths
+            branches.forEach(({ edge, branchPoints }) => {
+                const angle = getArrowAngle(branchPoints[branchPoints.length - 2], branchPoints[branchPoints.length - 1]);
+                branchPaths.set(edge.id, {
+                    pathD: buildPath(branchPoints),
+                    angle,
+                    allPoints: branchPoints,
+                });
+            });
+        });
+        return { stemPaths, branchPaths };
+    }, [sourceGroups, getNodeById, edges]);
+    return (_jsxs("g", { id: "connection-layer", children: [Array.from(nodeHighlightMap.entries()).map(([nodeId, level]) => {
+                var _a, _b, _c;
+                const node = getNodeById(nodeId);
+                if (!node)
+                    return null;
+                const w = (_a = node.width) !== null && _a !== void 0 ? _a : NODE_WIDTH;
+                const h = (_b = node.height) !== null && _b !== void 0 ? _b : NODE_HEIGHT;
+                const rotation = (_c = node.rotation) !== null && _c !== void 0 ? _c : 0;
+                const color = getLevelColor(level);
+                const padding = 4;
+                return (_jsxs("g", { transform: `translate(${node.x}, ${node.y}) rotate(${rotation})`, style: { pointerEvents: "none" }, children: [_jsx("rect", { x: -w / 2 - padding, y: -h / 2 - padding, width: w + padding * 2, height: h + padding * 2, fill: "none", stroke: color, strokeWidth: 8, rx: 5, opacity: 0.08 }), _jsx("rect", { x: -w / 2 - padding, y: -h / 2 - padding, width: w + padding * 2, height: h + padding * 2, fill: "none", stroke: color, strokeWidth: level === 0 ? 2.5 : 1.5, strokeDasharray: level === 0 ? "none" : "5 3", rx: 5, opacity: level === 0 ? 1 : 0.75 }), _jsxs("g", { transform: `translate(${w / 2 + padding - 2}, ${-h / 2 - padding})`, children: [_jsx("circle", { r: 7, fill: color, opacity: 0.9 }), _jsx("text", { textAnchor: "middle", dominantBaseline: "middle", fill: "white", fontSize: 7, fontFamily: "monospace", fontWeight: 700, style: { userSelect: "none" }, children: level })] })] }, `highlight-${nodeId}`));
+            }), edges.map((edge) => {
+                const fromLevel = nodeHighlightMap.get(edge.from);
+                const toLevel = nodeHighlightMap.get(edge.to);
+                if (fromLevel === undefined || toLevel === undefined)
+                    return null;
+                if (edge.id === selectedEdge)
+                    return null;
+                const bp = branchPaths.get(edge.id);
+                if (!bp)
+                    return null;
+                const color = getLevelColor(Math.max(fromLevel, toLevel));
+                return (_jsx("path", { d: bp.pathD, stroke: color, strokeWidth: 1.5, fill: "none", opacity: 0.35, strokeDasharray: "4 3", style: { pointerEvents: "none" } }, `network-edge-${edge.id}`));
+            }), Array.from(stemPaths.entries()).map(([fromId, { pathD }]) => {
+                var _a;
+                const isStemOfSelected = selectedEdge && ((_a = edges.find((e) => e.id === selectedEdge)) === null || _a === void 0 ? void 0 : _a.from) === fromId;
+                return (_jsxs("g", { children: [_jsx("path", { d: pathD, stroke: "#38bdf8", strokeWidth: 6, fill: "none", opacity: 0.08, style: { pointerEvents: "none" } }), _jsx("path", { d: pathD, stroke: isStemOfSelected ? "#a78bfa" : "#38bdf8", strokeWidth: isStemOfSelected ? 2.5 : 2, fill: "none", opacity: 0.9, style: { pointerEvents: "none" } })] }, `stem-${fromId}`));
+            }), Array.from(stemPaths.entries()).map(([fromId, { stemExit }]) => {
+                var _a;
+                const isStemOfSelected = selectedEdge && ((_a = edges.find((e) => e.id === selectedEdge)) === null || _a === void 0 ? void 0 : _a.from) === fromId;
+                const color = isStemOfSelected ? "#a78bfa" : "#38bdf8";
+                return (_jsxs("g", { style: { pointerEvents: "none" }, children: [_jsx("circle", { cx: stemExit.x, cy: stemExit.y, r: 6, fill: "#0f172a", stroke: color, strokeWidth: 2 }), _jsx("circle", { cx: stemExit.x, cy: stemExit.y, r: 3, fill: color })] }, `split-dot-${fromId}`));
+            }), edges.map((edge) => {
+                const fromNode = getNodeById(edge.from);
+                const toNode = getNodeById(edge.to);
+                if (!fromNode || !toNode)
+                    return null;
+                const bp = branchPaths.get(edge.id);
+                if (!bp)
+                    return null;
+                const { pathD, angle, allPoints } = bp;
+                const isSel = selectedEdge === edge.id;
+                const markerId = `conn-arrow-${edge.id}`;
+                const markerSelId = `conn-arrow-sel-${edge.id}`;
+                return (_jsxs("g", { children: [_jsxs("defs", { children: [_jsx("marker", { id: markerId, markerWidth: "8", markerHeight: "8", refX: "7", refY: "3", orient: `${angle}deg`, children: _jsx("path", { d: "M 0 0 L 8 3 L 0 6 Z", fill: "#38bdf8", opacity: 0.9 }) }), _jsx("marker", { id: markerSelId, markerWidth: "8", markerHeight: "8", refX: "7", refY: "3", orient: `${angle}deg`, children: _jsx("path", { d: "M 0 0 L 8 3 L 0 6 Z", fill: "#a78bfa" }) })] }), _jsx("path", { d: pathD, stroke: "transparent", strokeWidth: 14, fill: "none", style: { cursor: "pointer" }, onClick: (e) => { e.stopPropagation(); onSelectEdge(edge.id); } }), isSel && (_jsx("path", { d: pathD, stroke: "#a78bfa", strokeWidth: 7, fill: "none", opacity: 0.12, style: { pointerEvents: "none" } })), _jsx("path", { d: pathD, stroke: isSel ? "#a78bfa" : "#38bdf8", strokeWidth: isSel ? 2 : 1.5, fill: "none", opacity: 0.9, markerEnd: `url(#${isSel ? markerSelId : markerId})`, style: { pointerEvents: "none" } }), edge.waypoints.map((wp, i) => (_jsxs("g", { children: [_jsx("circle", { cx: wp.x, cy: wp.y, r: 12, fill: "transparent", style: { cursor: "grab" }, onMouseDown: (e) => onStartDragWaypoint(e, edge.id, i), onContextMenu: (e) => onRemoveWaypoint(e, edge.id, i) }), _jsx("circle", { cx: wp.x, cy: wp.y, r: isSel ? 8 : 5, fill: isSel ? "#1e1b2e" : "#0f172a", stroke: isSel ? "#a78bfa" : "#38bdf8", strokeWidth: isSel ? 2 : 1.2, style: { pointerEvents: "none" } }), _jsx("circle", { cx: wp.x, cy: wp.y, r: isSel ? 3 : 2, fill: isSel ? "#a78bfa" : "#38bdf8", style: { pointerEvents: "none" } })] }, `wp-${edge.id}-${i}`))), isSel && allPoints.slice(0, -1).map((pt, i) => {
+                            const next = allPoints[i + 1];
+                            const mx = snap((pt.x + next.x) / 2);
+                            const my = snap((pt.y + next.y) / 2);
+                            const tooClose = edge.waypoints.some((wp) => Math.abs(wp.x - mx) < GRID_SIZE && Math.abs(wp.y - my) < GRID_SIZE);
+                            if (tooClose)
+                                return null;
+                            return (_jsxs("g", { children: [_jsx("circle", { cx: mx, cy: my, r: 10, fill: "transparent", style: { cursor: "crosshair" }, onMouseDown: (e) => onInsertWaypoint(e, edge.id, i, mx, my) }), _jsx("circle", { cx: mx, cy: my, r: 4, fill: "#1e1b2e", stroke: "#a78bfa", strokeWidth: 1, strokeDasharray: "2 2", style: { pointerEvents: "none" } }), _jsx("circle", { cx: mx, cy: my, r: 1.5, fill: "#a78bfa", style: { pointerEvents: "none" } })] }, `mid-${edge.id}-${i}`));
+                        })] }, edge.id));
+            }), connecting && (() => {
+                const fromNode = getNodeById(connecting.fromId);
+                if (!fromNode)
+                    return null;
+                // Gunakan mousePos exact (tidak di-snap) agar preview ikut mouse persis
+                const start = getRectEdge(fromNode, mousePos, fromNode.width, fromNode.height);
+                const allPoints = [start, { x: mousePos.x, y: mousePos.y }];
+                const pathD = buildPath(allPoints);
+                const angle = getArrowAngle(allPoints[allPoints.length - 2], allPoints[allPoints.length - 1]);
+                return (_jsxs("g", { children: [_jsx("defs", { children: _jsx("marker", { id: "conn-arrow-preview-live", markerWidth: "8", markerHeight: "8", refX: "7", refY: "3", orient: `${angle}deg`, children: _jsx("path", { d: "M 0 0 L 8 3 L 0 6 Z", fill: "#a78bfa", opacity: 0.85 }) }) }), _jsx("path", { d: pathD, stroke: "#a78bfa", strokeWidth: 1.5, fill: "none", strokeDasharray: "6 3", markerEnd: "url(#conn-arrow-preview-live)", opacity: 0.8, style: { pointerEvents: "none" } })] }));
+            })()] }));
+};

package/dist/features/view-only-4/connection-layer.jsx

@@ -0,0 +1,291 @@
+// components/ConnectionLayer.tsx
+import React, { useMemo } from "react";
+import { buildPath, getRectEdge, snap, GRID_SIZE, NODE_WIDTH, NODE_HEIGHT } from "./utils";
+const LEVEL_COLORS = [
+    "#22c55e",
+    "#f59e0b",
+    "#f97316",
+    "#ef4444",
+    "#a78bfa",
+    "#38bdf8",
+];
+const getLevelColor = (level) => LEVEL_COLORS[Math.min(level, LEVEL_COLORS.length - 1)];
+// ── BFS flood fill ────────────────────────────────────────────────────
+const floodFill = (seedIds, edges) => {
+    const levelMap = new Map();
+    const queue = [];
+    seedIds.forEach((id) => { levelMap.set(id, 0); queue.push({ id, level: 0 }); });
+    while (queue.length > 0) {
+        const { id, level } = queue.shift();
+        edges.forEach((edge) => {
+            const neighbors = [];
+            if (edge.from === id)
+                neighbors.push(edge.to);
+            if (edge.to === id)
+                neighbors.push(edge.from);
+            neighbors.forEach((nId) => {
+                if (!levelMap.has(nId)) {
+                    levelMap.set(nId, level + 1);
+                    queue.push({ id: nId, level: level + 1 });
+                }
+            });
+        });
+    }
+    return levelMap;
+};
+// ── Arrow angle dari segmen TERAKHIR path ────────────────────────────
+/**
+ * Lihat 2 titik terakhir dari allPoints untuk tahu arah segmen akhir.
+ * buildPath routing H midX V curr.y H curr.x:
+ *   - Segmen terakhir selalu H → kecuali jika lurus vertikal
+ * Tapi kita cek arah prev→last secara dominan untuk akurasi.
+ */
+const getArrowAngle = (prev, last) => {
+    const dx = last.x - prev.x;
+    const dy = last.y - prev.y;
+    const absDx = Math.abs(dx);
+    const absDy = Math.abs(dy);
+    const threshold = 2; // presisi tinggi
+    // Lurus vertikal
+    if (absDx <= threshold)
+        return dy > 0 ? 90 : 270;
+    // Lurus horizontal
+    if (absDy <= threshold)
+        return dx > 0 ? 0 : 180;
+    // Untuk orthogonal H midX V curr.y H curr.x:
+    // segmen terakhir adalah H → arah kiri/kanan
+    return dx > 0 ? 0 : 180;
+};
+// ── Hitung split point untuk group of edges dari sumber yang sama ────
+//
+// Strategi:
+// 1. Hitung exit point masing-masing edge dari source
+// 2. Rata-rata semua exit point → "stem exit" (titik keluar bersama)
+// 3. Stem: source center → stem exit
+// 4. Branch: stem exit → waypoints → target
+//
+const getStemAndBranches = (sourceNode, targetNodes) => {
+    // Exit point tiap edge jika berjalan sendiri
+    const exits = targetNodes.map(({ node }) => getRectEdge(sourceNode, node, sourceNode.width, sourceNode.height));
+    // Rata-rata exit → shared stem exit point
+    const avgX = snap(exits.reduce((s, p) => s + p.x, 0) / exits.length);
+    const avgY = snap(exits.reduce((s, p) => s + p.y, 0) / exits.length);
+    const stemExit = { x: avgX, y: avgY };
+    // Untuk setiap branch: stem exit → waypoints edge → target edge point
+    const branches = targetNodes.map(({ node, edge }) => {
+        const end = getRectEdge(node, sourceNode, node.width, node.height);
+        const branchPoints = [stemExit, ...edge.waypoints, end];
+        return { edge, branchPoints, end };
+    });
+    return { stemExit, branches };
+};
+export const ConnectionLayer = ({ edges, selectedEdge, connecting, mousePos, getNodeById, onSelectEdge, onStartDragWaypoint, onInsertWaypoint, onRemoveWaypoint, }) => {
+    // ── Flood fill highlight ──────────────────────────────────────────
+    const nodeHighlightMap = useMemo(() => {
+        if (!selectedEdge)
+            return new Map();
+        const sel = edges.find((e) => e.id === selectedEdge);
+        if (!sel)
+            return new Map();
+        return floodFill([sel.from, sel.to], edges);
+    }, [selectedEdge, edges]);
+    // ── Group edges by source (from) ──────────────────────────────────
+    // sourceGroups: Map<fromId, EdgeType[]>
+    const sourceGroups = useMemo(() => {
+        const map = new Map();
+        edges.forEach((edge) => {
+            if (!map.has(edge.from))
+                map.set(edge.from, []);
+            map.get(edge.from).push(edge);
+        });
+        return map;
+    }, [edges]);
+    // ── Pre-compute stem & branch paths ──────────────────────────────
+    // stemPaths: Map<fromId, { stemPath, stemExit }>
+    // branchPaths: Map<edgeId, { branchPoints, angle }>
+    const { stemPaths, branchPaths } = useMemo(() => {
+        const stemPaths = new Map();
+        const branchPaths = new Map();
+        sourceGroups.forEach((groupEdges, fromId) => {
+            const sourceNode = getNodeById(fromId);
+            if (!sourceNode)
+                return;
+            const targetNodes = groupEdges
+                .map((edge) => {
+                const node = getNodeById(edge.to);
+                return node ? { node, edge } : null;
+            })
+                .filter(Boolean);
+            if (targetNodes.length === 0)
+                return;
+            if (targetNodes.length === 1) {
+                // Hanya 1 target — tidak perlu branching, render normal
+                const { node, edge } = targetNodes[0];
+                const start = getRectEdge(sourceNode, node, sourceNode.width, sourceNode.height);
+                const end = getRectEdge(node, sourceNode, node.width, node.height);
+                const allPoints = [start, ...edge.waypoints, end];
+                const pathD = buildPath(allPoints);
+                const angle = getArrowAngle(allPoints[allPoints.length - 2], allPoints[allPoints.length - 1]);
+                branchPaths.set(edge.id, { pathD, angle, allPoints });
+                return;
+            }
+            // Multiple targets → branching
+            const { stemExit, branches } = getStemAndBranches(sourceNode, targetNodes);
+            // Stem path: source exit → stem exit
+            // Gunakan exit point dari source ke arah rata-rata (stemExit)
+            const sourceExit = getRectEdge(sourceNode, stemExit, sourceNode.width, sourceNode.height);
+            const stemPoints = [sourceExit, stemExit];
+            stemPaths.set(fromId, {
+                pathD: buildPath(stemPoints),
+                stemExit,
+            });
+            // Branch paths
+            branches.forEach(({ edge, branchPoints }) => {
+                const angle = getArrowAngle(branchPoints[branchPoints.length - 2], branchPoints[branchPoints.length - 1]);
+                branchPaths.set(edge.id, {
+                    pathD: buildPath(branchPoints),
+                    angle,
+                    allPoints: branchPoints,
+                });
+            });
+        });
+        return { stemPaths, branchPaths };
+    }, [sourceGroups, getNodeById, edges]);
+    return (<g id="connection-layer">
+
+      {/* ── Node border highlight (flood fill) ───────────────────────── */}
+      {Array.from(nodeHighlightMap.entries()).map(([nodeId, level]) => {
+            var _a, _b, _c;
+            const node = getNodeById(nodeId);
+            if (!node)
+                return null;
+            const w = (_a = node.width) !== null && _a !== void 0 ? _a : NODE_WIDTH;
+            const h = (_b = node.height) !== null && _b !== void 0 ? _b : NODE_HEIGHT;
+            const rotation = (_c = node.rotation) !== null && _c !== void 0 ? _c : 0;
+            const color = getLevelColor(level);
+            const padding = 4;
+            return (<g key={`highlight-${nodeId}`} transform={`translate(${node.x}, ${node.y}) rotate(${rotation})`} style={{ pointerEvents: "none" }}>
+            <rect x={-w / 2 - padding} y={-h / 2 - padding} width={w + padding * 2} height={h + padding * 2} fill="none" stroke={color} strokeWidth={8} rx={5} opacity={0.08}/>
+            <rect x={-w / 2 - padding} y={-h / 2 - padding} width={w + padding * 2} height={h + padding * 2} fill="none" stroke={color} strokeWidth={level === 0 ? 2.5 : 1.5} strokeDasharray={level === 0 ? "none" : "5 3"} rx={5} opacity={level === 0 ? 1 : 0.75}/>
+            <g transform={`translate(${w / 2 + padding - 2}, ${-h / 2 - padding})`}>
+              <circle r={7} fill={color} opacity={0.9}/>
+              <text textAnchor="middle" dominantBaseline="middle" fill="white" fontSize={7} fontFamily="monospace" fontWeight={700} style={{ userSelect: "none" }}>{level}</text>
+            </g>
+          </g>);
+        })}
+
+      {/* ── Edge network highlight (edges dalam jaringan) ────────────── */}
+      {edges.map((edge) => {
+            const fromLevel = nodeHighlightMap.get(edge.from);
+            const toLevel = nodeHighlightMap.get(edge.to);
+            if (fromLevel === undefined || toLevel === undefined)
+                return null;
+            if (edge.id === selectedEdge)
+                return null;
+            const bp = branchPaths.get(edge.id);
+            if (!bp)
+                return null;
+            const color = getLevelColor(Math.max(fromLevel, toLevel));
+            return (<path key={`network-edge-${edge.id}`} d={bp.pathD} stroke={color} strokeWidth={1.5} fill="none" opacity={0.35} strokeDasharray="4 3" style={{ pointerEvents: "none" }}/>);
+        })}
+
+      {/* ── Stem lines (shared source exit) ──────────────────────────── */}
+      {Array.from(stemPaths.entries()).map(([fromId, { pathD }]) => {
+            var _a;
+            const isStemOfSelected = selectedEdge && ((_a = edges.find((e) => e.id === selectedEdge)) === null || _a === void 0 ? void 0 : _a.from) === fromId;
+            return (<g key={`stem-${fromId}`}>
+            {/* Glow */}
+            <path d={pathD} stroke="#38bdf8" strokeWidth={6} fill="none" opacity={0.08} style={{ pointerEvents: "none" }}/>
+            {/* Stem line */}
+            <path d={pathD} stroke={isStemOfSelected ? "#a78bfa" : "#38bdf8"} strokeWidth={isStemOfSelected ? 2.5 : 2} fill="none" opacity={0.9} style={{ pointerEvents: "none" }}/>
+          </g>);
+        })}
+
+      {/* ── Split dot di titik cabang ─────────────────────────────────── */}
+      {Array.from(stemPaths.entries()).map(([fromId, { stemExit }]) => {
+            var _a;
+            const isStemOfSelected = selectedEdge && ((_a = edges.find((e) => e.id === selectedEdge)) === null || _a === void 0 ? void 0 : _a.from) === fromId;
+            const color = isStemOfSelected ? "#a78bfa" : "#38bdf8";
+            return (<g key={`split-dot-${fromId}`} style={{ pointerEvents: "none" }}>
+            <circle cx={stemExit.x} cy={stemExit.y} r={6} fill="#0f172a" stroke={color} strokeWidth={2}/>
+            <circle cx={stemExit.x} cy={stemExit.y} r={3} fill={color}/>
+          </g>);
+        })}
+
+      {/* ── Branch lines + waypoints ──────────────────────────────────── */}
+      {edges.map((edge) => {
+            const fromNode = getNodeById(edge.from);
+            const toNode = getNodeById(edge.to);
+            if (!fromNode || !toNode)
+                return null;
+            const bp = branchPaths.get(edge.id);
+            if (!bp)
+                return null;
+            const { pathD, angle, allPoints } = bp;
+            const isSel = selectedEdge === edge.id;
+            const markerId = `conn-arrow-${edge.id}`;
+            const markerSelId = `conn-arrow-sel-${edge.id}`;
+            return (<g key={edge.id}>
+            <defs>
+              <marker id={markerId} markerWidth="8" markerHeight="8" refX="7" refY="3" orient={`${angle}deg`}>
+                <path d="M 0 0 L 8 3 L 0 6 Z" fill="#38bdf8" opacity={0.9}/>
+              </marker>
+              <marker id={markerSelId} markerWidth="8" markerHeight="8" refX="7" refY="3" orient={`${angle}deg`}>
+                <path d="M 0 0 L 8 3 L 0 6 Z" fill="#a78bfa"/>
+              </marker>
+            </defs>
+
+            {/* Hit area */}
+            <path d={pathD} stroke="transparent" strokeWidth={14} fill="none" style={{ cursor: "pointer" }} onClick={(e) => { e.stopPropagation(); onSelectEdge(edge.id); }}/>
+
+            {/* Glow selected */}
+            {isSel && (<path d={pathD} stroke="#a78bfa" strokeWidth={7} fill="none" opacity={0.12} style={{ pointerEvents: "none" }}/>)}
+
+            {/* Branch line */}
+            <path d={pathD} stroke={isSel ? "#a78bfa" : "#38bdf8"} strokeWidth={isSel ? 2 : 1.5} fill="none" opacity={0.9} markerEnd={`url(#${isSel ? markerSelId : markerId})`} style={{ pointerEvents: "none" }}/>
+
+            {/* Waypoints */}
+            {edge.waypoints.map((wp, i) => (<g key={`wp-${edge.id}-${i}`}>
+                <circle cx={wp.x} cy={wp.y} r={12} fill="transparent" style={{ cursor: "grab" }} onMouseDown={(e) => onStartDragWaypoint(e, edge.id, i)} onContextMenu={(e) => onRemoveWaypoint(e, edge.id, i)}/>
+                <circle cx={wp.x} cy={wp.y} r={isSel ? 8 : 5} fill={isSel ? "#1e1b2e" : "#0f172a"} stroke={isSel ? "#a78bfa" : "#38bdf8"} strokeWidth={isSel ? 2 : 1.2} style={{ pointerEvents: "none" }}/>
+                <circle cx={wp.x} cy={wp.y} r={isSel ? 3 : 2} fill={isSel ? "#a78bfa" : "#38bdf8"} style={{ pointerEvents: "none" }}/>
+              </g>))}
+
+            {/* Midpoint insert handles */}
+            {isSel && allPoints.slice(0, -1).map((pt, i) => {
+                    const next = allPoints[i + 1];
+                    const mx = snap((pt.x + next.x) / 2);
+                    const my = snap((pt.y + next.y) / 2);
+                    const tooClose = edge.waypoints.some((wp) => Math.abs(wp.x - mx) < GRID_SIZE && Math.abs(wp.y - my) < GRID_SIZE);
+                    if (tooClose)
+                        return null;
+                    return (<g key={`mid-${edge.id}-${i}`}>
+                  <circle cx={mx} cy={my} r={10} fill="transparent" style={{ cursor: "crosshair" }} onMouseDown={(e) => onInsertWaypoint(e, edge.id, i, mx, my)}/>
+                  <circle cx={mx} cy={my} r={4} fill="#1e1b2e" stroke="#a78bfa" strokeWidth={1} strokeDasharray="2 2" style={{ pointerEvents: "none" }}/>
+                  <circle cx={mx} cy={my} r={1.5} fill="#a78bfa" style={{ pointerEvents: "none" }}/>
+                </g>);
+                })}
+          </g>);
+        })}
+
+      {/* ── Preview line saat connecting ─────────────────────────────── */}
+      {connecting && (() => {
+            const fromNode = getNodeById(connecting.fromId);
+            if (!fromNode)
+                return null;
+            // Gunakan mousePos exact (tidak di-snap) agar preview ikut mouse persis
+            const start = getRectEdge(fromNode, mousePos, fromNode.width, fromNode.height);
+            const allPoints = [start, { x: mousePos.x, y: mousePos.y }];
+            const pathD = buildPath(allPoints);
+            const angle = getArrowAngle(allPoints[allPoints.length - 2], allPoints[allPoints.length - 1]);
+            return (<g>
+            <defs>
+              <marker id="conn-arrow-preview-live" markerWidth="8" markerHeight="8" refX="7" refY="3" orient={`${angle}deg`}>
+                <path d="M 0 0 L 8 3 L 0 6 Z" fill="#a78bfa" opacity={0.85}/>
+              </marker>
+            </defs>
+            <path d={pathD} stroke="#a78bfa" strokeWidth={1.5} fill="none" strokeDasharray="6 3" markerEnd="url(#conn-arrow-preview-live)" opacity={0.8} style={{ pointerEvents: "none" }}/>
+          </g>);
+        })()}
+    </g>);
+};