seat-editor 3.4.7 → 3.5.0

package/dist/features/view-only-5/use-connection-graph.js

@@ -0,0 +1,196 @@
+// use-connection-graph.ts
+import { useCallback, useEffect, useRef, useState } from "react";
+import { snap } from "./utils";
+import { useAppSelector } from "@/hooks/use-redux";
+export const useConnectionGraph = ({ svgRef, getNodeById, onEdgesChange, keyNode, mappingKey, tableMatchKey, statusKey, }) => {
+    const components = useAppSelector((state) => state.board.components);
+    const [edges, setEdges] = useState([]);
+    const [selectedEdge, setSelectedEdge] = useState(null);
+    const [selectedNode, setSelectedNode] = useState(null);
+    const [connecting, setConnecting] = useState(null);
+    const [draggingAnchor, setDraggingAnchor] = useState(null);
+    const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
+    const draggingWP = useRef(null);
+    const getSVGPoint = useCallback((clientX, clientY) => {
+        var _a;
+        const svg = svgRef.current;
+        if (!svg)
+            return { x: 0, y: 0 };
+        const pt = svg.createSVGPoint();
+        pt.x = clientX;
+        pt.y = clientY;
+        const p = pt.matrixTransform((_a = svg.getScreenCTM()) === null || _a === void 0 ? void 0 : _a.inverse());
+        return { x: p.x, y: p.y };
+    }, [svgRef]);
+    // ── Connect ──────────────────────────────────────────────────────
+    const startConnect = useCallback((fromId, fromPos) => {
+        setConnecting({ fromId, fromPos });
+        setSelectedEdge(null);
+    }, []);
+    const endConnect = useCallback((toId, toPos) => {
+        if (!connecting || connecting.fromId === toId) {
+            setConnecting(null);
+            return;
+        }
+        setEdges((prev) => {
+            const exists = prev.find((e) => (e.from === connecting.fromId && e.to === toId) ||
+                (e.from === toId && e.to === connecting.fromId));
+            if (exists)
+                return prev;
+            return [
+                ...prev,
+                {
+                    id: `edge-${Date.now()}`,
+                    from: connecting.fromId,
+                    to: toId,
+                    fromPos: connecting.fromPos,
+                    toPos,
+                    waypoints: [],
+                },
+            ];
+        });
+        setConnecting(null);
+    }, [connecting]);
+    const cancelConnect = useCallback(() => setConnecting(null), []);
+    // ── Drag endpoint ────────────────────────────────────────────────
+    const startDragAnchor = useCallback((e, edgeId, side) => {
+        e.stopPropagation();
+        setDraggingAnchor({ edgeId, side });
+    }, []);
+    const updateAnchor = useCallback((targetNodeId, newPos) => {
+        if (!draggingAnchor)
+            return;
+        const { edgeId, side } = draggingAnchor;
+        setEdges((prev) => prev.map((edge) => {
+            if (edge.id !== edgeId)
+                return edge;
+            if (side === "from") {
+                if (targetNodeId === edge.to)
+                    return edge;
+                return Object.assign(Object.assign({}, edge), { from: targetNodeId, fromPos: newPos, waypoints: [] });
+            }
+            else {
+                if (targetNodeId === edge.from)
+                    return edge;
+                return Object.assign(Object.assign({}, edge), { to: targetNodeId, toPos: newPos, waypoints: [] });
+            }
+        }));
+        setDraggingAnchor(null);
+    }, [draggingAnchor]);
+    const cancelDragAnchor = useCallback(() => setDraggingAnchor(null), []);
+    // ── Mouse ────────────────────────────────────────────────────────
+    const onMouseMove = useCallback((e) => {
+        const pos = getSVGPoint(e.clientX, e.clientY);
+        setMousePos(pos);
+        if (draggingWP.current) {
+            const { edgeId, index } = draggingWP.current;
+            setEdges((prev) => prev.map((ed) => {
+                if (ed.id !== edgeId)
+                    return ed;
+                return Object.assign(Object.assign({}, ed), { waypoints: ed.waypoints.map((wp, i) => i === index ? { x: snap(pos.x), y: snap(pos.y) } : wp) });
+            }));
+        }
+    }, [getSVGPoint]);
+    const onMouseUp = useCallback(() => {
+        draggingWP.current = null;
+        if (draggingAnchor)
+            setDraggingAnchor(null);
+    }, [draggingAnchor]);
+    // ── Waypoints ────────────────────────────────────────────────────
+    const startDragWaypoint = useCallback((e, edgeId, index) => {
+        e.stopPropagation();
+        draggingWP.current = { edgeId, index };
+        setSelectedEdge(edgeId);
+    }, []);
+    const insertWaypoint = useCallback((e, edgeId, insertIndex, x, y) => {
+        e.stopPropagation();
+        setEdges((prev) => prev.map((ed) => {
+            if (ed.id !== edgeId)
+                return ed;
+            const newWP = [...ed.waypoints];
+            newWP.splice(insertIndex, 0, { x: snap(x), y: snap(y) });
+            return Object.assign(Object.assign({}, ed), { waypoints: newWP });
+        }));
+        draggingWP.current = { edgeId, index: insertIndex };
+    }, []);
+    const removeWaypoint = useCallback((e, edgeId, index) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setEdges((prev) => prev.map((ed) => {
+            if (ed.id !== edgeId)
+                return ed;
+            if (ed.waypoints.length <= 1)
+                return ed;
+            return Object.assign(Object.assign({}, ed), { waypoints: ed.waypoints.filter((_, i) => i !== index) });
+        }));
+    }, []);
+    // __ Select Table 
+    const selectNode = useCallback((nodeId) => setSelectedNode(nodeId), []);
+    // ── Select / delete ──────────────────────────────────────────────
+    const selectEdge = useCallback((id) => setSelectedEdge(id), []);
+    const deleteEdge = useCallback((id) => {
+        setEdges((p) => p.filter((e) => e.id !== id));
+        setSelectedEdge(null);
+    }, []);
+    const deleteSelectedEdge = useCallback(() => {
+        if (selectedEdge)
+            deleteEdge(selectedEdge);
+    }, [selectedEdge, deleteEdge]);
+    const clearSelection = useCallback(() => setSelectedEdge(null), []);
+    // ── Keyboard ─────────────────────────────────────────────────────
+    useEffect(() => {
+        const onKey = (e) => {
+            const tag = e.target.tagName.toLowerCase();
+            if (tag === "input" || tag === "textarea")
+                return;
+            if (e.key === "Delete" || e.key === "Backspace")
+                deleteSelectedEdge();
+            if (e.key === "Escape") {
+                cancelConnect();
+                cancelDragAnchor();
+                clearSelection();
+            }
+        };
+        window.addEventListener("keydown", onKey);
+        return () => window.removeEventListener("keydown", onKey);
+    }, [deleteSelectedEdge, cancelConnect, cancelDragAnchor, clearSelection]);
+    // ── onEdgesChange ────────────────────────────────────────────────
+    useEffect(() => {
+        const sourceToTargets = new Map();
+        edges.forEach((e) => {
+            if (!sourceToTargets.has(e.from))
+                sourceToTargets.set(e.from, []);
+            sourceToTargets.get(e.from).push(e.to);
+        });
+        const result = components === null || components === void 0 ? void 0 : components.map((table) => {
+            var _a, _b;
+            return (Object.assign(Object.assign({}, table), { [keyNode]: (_b = sourceToTargets.get(String((_a = table === null || table === void 0 ? void 0 : table[mappingKey]) === null || _a === void 0 ? void 0 : _a.id))) !== null && _b !== void 0 ? _b : [] }));
+        });
+        onEdgesChange === null || onEdgesChange === void 0 ? void 0 : onEdgesChange(edges, result);
+    }, [edges]);
+    return {
+        edges,
+        setEdges,
+        selectedEdge,
+        selectedNode,
+        connecting,
+        draggingAnchor,
+        mousePos,
+        startConnect,
+        endConnect,
+        cancelConnect,
+        startDragAnchor,
+        updateAnchor,
+        cancelDragAnchor,
+        startDragWaypoint,
+        insertWaypoint,
+        removeWaypoint,
+        selectEdge,
+        deleteEdge,
+        deleteSelectedEdge,
+        clearSelection,
+        onMouseMove,
+        onMouseUp,
+        selectNode
+    };
+};

package/dist/features/view-only-5/utils.d.ts

@@ -0,0 +1,52 @@
+import { ComponentProps, TableMatchKey } from ".";
+export declare const GRID_SIZE = 20;
+export declare const NODE_WIDTH = 120;
+export declare const NODE_HEIGHT = 50;
+export declare const snap: (v: number) => number;
+export type EdgeType = {
+    id: string;
+    from: string;
+    to: string;
+    fromPos?: {
+        x: number;
+        y: number;
+    };
+    toPos?: {
+        x: number;
+        y: number;
+    };
+    waypoints: {
+        x: number;
+        y: number;
+    }[];
+};
+export type NodeType = {
+    id: string;
+    x: number;
+    y: number;
+    width?: number;
+    height?: number;
+    rotation?: number;
+};
+export declare const rotatePoint: (px: number, py: number, deg: number) => {
+    x: number;
+    y: number;
+};
+export declare const getRectEdge: (from: {
+    x: number;
+    y: number;
+    width?: number;
+    height?: number;
+    rotation?: number;
+}, to: {
+    x: number;
+    y: number;
+}, width?: number, height?: number) => {
+    x: number;
+    y: number;
+};
+export declare const buildPath: (points: {
+    x: number;
+    y: number;
+}[]) => string;
+export declare const renderElements: (elementEditor: ComponentProps[], mappingKey?: string, tableMatchKey?: TableMatchKey[], statusKey?: string) => ComponentProps[];

package/dist/features/view-only-5/utils.js

@@ -0,0 +1,80 @@
+export const GRID_SIZE = 20;
+export const NODE_WIDTH = 120;
+export const NODE_HEIGHT = 50;
+export const snap = (v) => Math.round(v / GRID_SIZE) * GRID_SIZE;
+// ─── Rotate ──────────────────────────────────────────────────────────────────
+export const rotatePoint = (px, py, deg) => {
+    const rad = (deg * Math.PI) / 180;
+    return {
+        x: px * Math.cos(rad) - py * Math.sin(rad),
+        y: px * Math.sin(rad) + py * Math.cos(rad),
+    };
+};
+// ─── getRectEdge ─────────────────────────────────────────────────────────────
+export const getRectEdge = (from, to, width, height) => {
+    var _a, _b, _c, _d, _e;
+    const w = (_b = (_a = from.width) !== null && _a !== void 0 ? _a : width) !== null && _b !== void 0 ? _b : NODE_WIDTH;
+    const h = (_d = (_c = from.height) !== null && _c !== void 0 ? _c : height) !== null && _d !== void 0 ? _d : NODE_HEIGHT;
+    const rotation = (_e = from.rotation) !== null && _e !== void 0 ? _e : 0;
+    const dx = to.x - from.x;
+    const dy = to.y - from.y;
+    if (dx === 0 && dy === 0)
+        return { x: from.x, y: from.y };
+    const angle = Math.atan2(dy, dx);
+    const rad = -(rotation * Math.PI) / 180;
+    const localAngle = angle + rad;
+    const absCos = Math.abs(Math.cos(localAngle));
+    const absSin = Math.abs(Math.sin(localAngle));
+    const offset = (h / 2) * absCos <= (w / 2) * absSin
+        ? (h / 2) / absSin
+        : (w / 2) / absCos;
+    const localEdgeX = Math.cos(localAngle) * offset;
+    const localEdgeY = Math.sin(localAngle) * offset;
+    const worldEdge = rotatePoint(localEdgeX, localEdgeY, rotation);
+    return { x: from.x + worldEdge.x, y: from.y + worldEdge.y };
+};
+// ─── buildPath (single cubic bezier curve) ───────────────────────────────────
+export const buildPath = (points) => {
+    if (points.length < 2)
+        return "";
+    const start = points[0];
+    const end = points[points.length - 1];
+    if (points.length === 2) {
+        // Quadratic bezier — 1 control point di tengah, digeser tegak lurus
+        const mx = (start.x + end.x) / 2;
+        const my = (start.y + end.y) / 2;
+        const dx = end.x - start.x;
+        const dy = end.y - start.y;
+        const dist = Math.sqrt(dx * dx + dy * dy);
+        const bend = Math.min(dist * 0.35, 80);
+        // Control point tegak lurus dari midpoint
+        const cpx = mx - (dy / dist) * bend;
+        const cpy = my + (dx / dist) * bend;
+        return `M ${start.x} ${start.y} Q ${cpx} ${cpy}, ${end.x} ${end.y}`;
+    }
+    // Dengan waypoints — quadratic berantai lewat midpoints
+    let d = `M ${start.x} ${start.y}`;
+    for (let i = 0; i < points.length - 1; i++) {
+        const p1 = points[i];
+        const p2 = points[i + 1];
+        const cpx = (p1.x + p2.x) / 2;
+        const cpy = (p1.y + p2.y) / 2;
+        d += ` Q ${p1.x} ${p1.y}, ${cpx} ${cpy}`;
+    }
+    d += ` L ${end.x} ${end.y}`;
+    return d;
+};
+// ─── renderElements ──────────────────────────────────────────────────────────
+export const renderElements = (elementEditor, mappingKey, tableMatchKey, statusKey) => {
+    return elementEditor.map((editorItem) => {
+        const isUsingMapping = mappingKey &&
+            typeof editorItem[mappingKey] === "object" &&
+            editorItem[mappingKey] !== null;
+        let finalProps = isUsingMapping ? editorItem[mappingKey] : editorItem;
+        if (tableMatchKey) {
+            const tableMatch = tableMatchKey.find((item) => item.key == (editorItem === null || editorItem === void 0 ? void 0 : editorItem[statusKey]));
+            finalProps = Object.assign(Object.assign(Object.assign({}, finalProps), tableMatch === null || tableMatch === void 0 ? void 0 : tableMatch.properties), { className: tableMatch === null || tableMatch === void 0 ? void 0 : tableMatch.className });
+        }
+        return finalProps;
+    });
+};

package/dist/features/view-only-6/connect-handle.d.ts

@@ -0,0 +1,13 @@
+type Props = {
+    cx: number;
+    cy: number;
+    width: number;
+    height: number;
+    nodeId: string;
+    rotation?: number;
+    isConnecting: boolean;
+    onStartConnect: (nodeId: string) => void;
+    onEndConnect: (nodeId: string) => void;
+};
+export declare const ConnectHandle: React.FC<Props>;
+export {};

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+export const ConnectHandle = ({ cx, cy, width, height, nodeId, rotation = 0, isConnecting, onStartConnect, onEndConnect, }) => {
+    const hw = width / 2;
+    const hh = height / 2;
+    const [hovered, setHovered] = useState(false);
+    const isActive = isConnecting; // sedang jadi source
+    return (_jsx("g", { transform: `translate(${cx}, ${cy}) rotate(${rotation})`, children: _jsx("rect", { x: -hw - 4, y: -hh - 4, width: width + 8, height: height + 8, fill: "transparent", stroke: isActive ? "#a78bfa" // ungu kalau sedang connecting
+                : hovered ? "#38bdf8" // biru kalau hover
+                    : "transparent" // invisible kalau idle
+            , strokeWidth: isActive ? 2 : 1.5, strokeDasharray: isActive ? "4 2" : "none", rx: 4, "data-connect-handle": "true", style: { cursor: "crosshair", pointerEvents: "all" }, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), onPointerDown: (e) => {
+                e.stopPropagation();
+                if (isActive) {
+                    onEndConnect(nodeId);
+                }
+                else {
+                    onStartConnect(nodeId);
+                }
+            } }) }));
+};

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

@@ -0,0 +1,21 @@
+import { useState } from "react";
+export const ConnectHandle = ({ cx, cy, width, height, nodeId, rotation = 0, isConnecting, onStartConnect, onEndConnect, }) => {
+    const hw = width / 2;
+    const hh = height / 2;
+    const [hovered, setHovered] = useState(false);
+    const isActive = isConnecting; // sedang jadi source
+    return (<g transform={`translate(${cx}, ${cy}) rotate(${rotation})`}>
+      <rect x={-hw - 4} y={-hh - 4} width={width + 8} height={height + 8} fill="transparent" stroke={isActive ? "#a78bfa" // ungu kalau sedang connecting
+            : hovered ? "#38bdf8" // biru kalau hover
+                : "transparent" // invisible kalau idle
+        } strokeWidth={isActive ? 2 : 1.5} strokeDasharray={isActive ? "4 2" : "none"} rx={4} data-connect-handle="true" style={{ cursor: "crosshair", pointerEvents: "all" }} onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)} onPointerDown={(e) => {
+            e.stopPropagation();
+            if (isActive) {
+                onEndConnect(nodeId);
+            }
+            else {
+                onStartConnect(nodeId);
+            }
+        }}/>
+    </g>);
+};

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

@@ -0,0 +1,22 @@
+import React from "react";
+import { NodeType } from "./utils";
+export type EdgeType = {
+    id: string;
+    from: string;
+    to: string;
+};
+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;
+};
+export declare const ConnectionLayer: React.FC<Props>;
+export {};

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

@@ -0,0 +1,191 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// components/ConnectionLayer.tsx
+import { useMemo, useState } from "react";
+import { buildCurvePath, getCurveEndAngle, getRectEdge, NODE_WIDTH, NODE_HEIGHT, } from "./utils";
+// ─── Constants ────────────────────────────────────────────────────────────────
+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;
+};
+// ─── Group edges by source ────────────────────────────────────────────────────
+const groupBySource = (edges) => {
+    const map = new Map();
+    edges.forEach((edge) => {
+        if (!map.has(edge.from))
+            map.set(edge.from, []);
+        map.get(edge.from).push(edge);
+    });
+    return map;
+};
+// ─── Component ────────────────────────────────────────────────────────────────
+export const ConnectionLayer = ({ edges, selectedEdge, connecting, mousePos, getNodeById, onSelectEdge,
+// onDeleteEdge,
+ }) => {
+    const [hoveredEdge, setHoveredEdge] = useState(null);
+    // ── 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 by source for shared stem ──────────────────────────────
+    const sourceGroups = useMemo(() => groupBySource(edges), [edges]);
+    // ── Pre-compute curve data per edge ──────────────────────────────
+    const curveData = useMemo(() => {
+        const map = new Map();
+        edges.forEach((edge) => {
+            const fromNode = getNodeById(edge.from);
+            const toNode = getNodeById(edge.to);
+            if (!fromNode || !toNode)
+                return;
+            const start = getRectEdge(fromNode, toNode, fromNode.width, fromNode.height);
+            const end = getRectEdge(toNode, fromNode, toNode.width, toNode.height);
+            const pathD = buildCurvePath(start, end);
+            const angle = getCurveEndAngle(start, end);
+            // Midpoint di kurva (t=0.5) untuk label/badge
+            const dx = end.x - start.x;
+            const dy = end.y - start.y;
+            const absDx = Math.abs(dx);
+            const absDy = Math.abs(dy);
+            const strength = Math.max(Math.max(absDx, absDy) * 0.5, 60);
+            let cp1;
+            let cp2;
+            if (absDx >= absDy) {
+                cp1 = { x: start.x + strength, y: start.y };
+                cp2 = { x: end.x - strength, y: end.y };
+            }
+            else {
+                cp1 = { x: start.x, y: start.y + strength };
+                cp2 = { x: end.x, y: end.y - strength };
+            }
+            // Cubic bezier at t=0.5
+            const t = 0.5;
+            const mt = 1 - t;
+            const midX = mt * mt * mt * start.x +
+                3 * mt * mt * t * cp1.x +
+                3 * mt * t * t * cp2.x +
+                t * t * t * end.x;
+            const midY = mt * mt * mt * start.y +
+                3 * mt * mt * t * cp1.y +
+                3 * mt * t * t * cp2.y +
+                t * t * t * end.y;
+            map.set(edge.id, { start, end, pathD, angle, midX, midY });
+        });
+        return map;
+    }, [edges, getNodeById]);
+    // ── Shared stem exit point per source ────────────────────────────
+    const stemData = useMemo(() => {
+        const map = new Map();
+        sourceGroups.forEach((groupEdges, fromId) => {
+            if (groupEdges.length <= 1)
+                return;
+            const sourceNode = getNodeById(fromId);
+            if (!sourceNode)
+                return;
+            const exits = groupEdges
+                .map((edge) => {
+                const toNode = getNodeById(edge.to);
+                if (!toNode)
+                    return null;
+                return getRectEdge(sourceNode, toNode, sourceNode.width, sourceNode.height);
+            })
+                .filter(Boolean);
+            if (exits.length === 0)
+                return;
+            map.set(fromId, {
+                x: exits.reduce((s, p) => s + p.x, 0) / exits.length,
+                y: exits.reduce((s, p) => s + p.y, 0) / exits.length,
+            });
+        });
+        return map;
+    }, [sourceGroups, getNodeById]);
+    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}`));
+            }), Array.from(stemData.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: 5, fill: "#0f172a", stroke: color, strokeWidth: 1.5 }), _jsx("circle", { cx: stemExit.x, cy: stemExit.y, r: 2.5, fill: color })] }, `stem-dot-${fromId}`));
+            }), edges.map((edge) => {
+                const data = curveData.get(edge.id);
+                if (!data)
+                    return null;
+                const { pathD, angle, midX, midY } = data;
+                const isSel = selectedEdge === edge.id;
+                const isHov = hoveredEdge === edge.id;
+                const markerId = `conn-arrow-${edge.id}`;
+                const markerSelId = `conn-arrow-sel-${edge.id}`;
+                // Warna edge jika dalam network highlight
+                const fromLevel = nodeHighlightMap.get(edge.from);
+                const toLevel = nodeHighlightMap.get(edge.to);
+                const isInNetwork = fromLevel !== undefined && toLevel !== undefined;
+                const networkColor = isInNetwork
+                    ? getLevelColor(Math.max(fromLevel, toLevel))
+                    : "#38bdf8";
+                return (_jsxs("g", { children: [_jsx("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: isSel
+                                        ? "#a78bfa"
+                                        : isInNetwork && !isSel
+                                            ? networkColor
+                                            : "#38bdf8", opacity: 0.9 }) }) }), _jsx("path", { d: pathD, stroke: "transparent", strokeWidth: 14, fill: "none", style: { cursor: "pointer" }, onClick: (e) => {
+                                e.stopPropagation();
+                                onSelectEdge(edge.id);
+                            }, onMouseEnter: () => setHoveredEdge(edge.id), onMouseLeave: () => setHoveredEdge(null) }), (isSel || isHov) && (_jsx("path", { d: pathD, stroke: isSel ? "#a78bfa" : "#38bdf8", strokeWidth: 8, fill: "none", opacity: isSel ? 0.12 : 0.06, style: { pointerEvents: "none" } })), _jsx("path", { d: pathD, stroke: isSel
+                                ? "#a78bfa"
+                                : isInNetwork && selectedEdge
+                                    ? networkColor
+                                    : "#38bdf8", strokeWidth: isSel ? 2 : isHov ? 2 : 1.5, fill: "none", opacity: selectedEdge && !isSel && !isInNetwork ? 0.25 : 0.9, markerEnd: `url(#${markerId})`, style: { pointerEvents: "none" } }), isSel && (_jsxs("g", { style: { pointerEvents: "none" }, children: [_jsx("rect", { x: midX - 16, y: midY - 10, width: 32, height: 18, rx: 4, fill: "#1e1b2e", stroke: "#a78bfa", strokeWidth: 1, opacity: 0.95 }), _jsx("text", { x: midX, y: midY, textAnchor: "middle", dominantBaseline: "middle", fill: "#a78bfa", fontSize: 9, fontFamily: "monospace", fontWeight: 600, children: "DEL" })] }))] }, edge.id));
+            }), connecting &&
+                (() => {
+                    const fromNode = getNodeById(connecting.fromId);
+                    if (!fromNode)
+                        return null;
+                    const start = getRectEdge(fromNode, mousePos, fromNode.width, fromNode.height);
+                    const pathD = buildCurvePath(start, mousePos);
+                    const angle = getCurveEndAngle(start, mousePos);
+                    return (_jsxs("g", { children: [_jsx("defs", { children: _jsx("marker", { id: "conn-preview-arrow", 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-preview-arrow)", opacity: 0.8, style: { pointerEvents: "none" } })] }));
+                })()] }));
+};