seat-editor 3.4.7 → 3.5.0

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

@@ -0,0 +1,182 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { buildPath, getRectEdge, GRID_SIZE, NODE_WIDTH, NODE_HEIGHT, snap, } from "./utils";
+const LEVEL_COLORS = [
+    "#22c55e",
+    "#f59e0b",
+    "#f97316",
+    "#ef4444",
+    "#a78bfa",
+    "#38bdf8",
+];
+const getLevelColor = (level) => LEVEL_COLORS[Math.min(level, LEVEL_COLORS.length - 1)];
+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;
+};
+const computePoints = (fromPos, toPos, waypoints) => [fromPos, ...waypoints, toPos];
+// Hitung midpoint kurva quadratic bezier pada t=0.5
+const quadraticMidpoint = (from, to) => {
+    const dx = to.x - from.x;
+    const dy = to.y - from.y;
+    const dist = Math.sqrt(dx * dx + dy * dy);
+    const bend = Math.min(dist * 0.35, 80);
+    const mx = (from.x + to.x) / 2;
+    const my = (from.y + to.y) / 2;
+    const cpx = dist > 0 ? mx - (dy / dist) * bend : mx;
+    const cpy = dist > 0 ? my + (dx / dist) * bend : my;
+    const t = 0.5, mt = 0.5;
+    return {
+        x: mt * mt * from.x + 2 * mt * t * cpx + t * t * to.x,
+        y: mt * mt * from.y + 2 * mt * t * cpy + t * t * to.y,
+    };
+};
+export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAnchor, mousePos, isConnectEdge, isSelectNode, getNodeById, onSelectEdge, onDeleteEdge, onStartDragWaypoint, onInsertWaypoint, onRemoveWaypoint, onStartDragAnchor, selectedNodeId, }) => {
+    const [hoveredEdge, setHoveredEdge] = useState(null);
+    console.log({ selectedEdge });
+    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]);
+    const nodeHighlightMapByNode = useMemo(() => {
+        if (selectedNodeId) {
+            return floodFill([selectedNodeId], edges);
+        }
+        if (selectedEdge) {
+            const sel = edges.find((e) => e.id === selectedEdge);
+            if (!sel)
+                return new Map();
+            return floodFill([sel.from, sel.to], edges);
+        }
+        return new Map();
+    }, [selectedEdge, selectedNodeId, edges]);
+    const edgePaths = useMemo(() => {
+        const map = new Map();
+        edges.forEach((edge) => {
+            var _a, _b, _c;
+            const fromNode = getNodeById(edge.from);
+            const toNode = getNodeById(edge.to);
+            if (!fromNode || !toNode)
+                return;
+            const isDraggingFrom = (draggingAnchor === null || draggingAnchor === void 0 ? void 0 : draggingAnchor.edgeId) === edge.id && draggingAnchor.side === "from";
+            const isDraggingTo = (draggingAnchor === null || draggingAnchor === void 0 ? void 0 : draggingAnchor.edgeId) === edge.id && draggingAnchor.side === "to";
+            const fromPos = isDraggingFrom
+                ? mousePos
+                : (_a = edge.fromPos) !== null && _a !== void 0 ? _a : getRectEdge(fromNode, toNode, fromNode.width, fromNode.height);
+            const toPos = isDraggingTo
+                ? mousePos
+                : (_b = edge.toPos) !== null && _b !== void 0 ? _b : getRectEdge(toNode, fromNode, toNode.width, toNode.height);
+            const pts = computePoints(fromPos, toPos, (_c = edge.waypoints) !== null && _c !== void 0 ? _c : []);
+            const pathD = buildPath(pts);
+            const mid = quadraticMidpoint(fromPos, toPos);
+            map.set(edge.id, {
+                pathD,
+                allPoints: pts,
+                fromPos,
+                toPos,
+                midX: mid.x,
+                midY: mid.y,
+            });
+        });
+        return map;
+    }, [edges, getNodeById, draggingAnchor, mousePos]);
+    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(nodeHighlightMapByNode.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) => {
+                var _a;
+                const ep = edgePaths.get(edge.id);
+                if (!ep)
+                    return null;
+                const { pathD, allPoints, fromPos, toPos, midX, midY } = ep;
+                const isSel = selectedEdge === edge.id;
+                const isHov = hoveredEdge === edge.id;
+                const fromLevel = nodeHighlightMap.get(edge.from);
+                const toLevel = nodeHighlightMap.get(edge.to);
+                const isInNetwork = fromLevel !== undefined && toLevel !== undefined;
+                console.log({ isInNetwork, fromLevel, toLevel }, selectedEdge, !isSel && !isInNetwork);
+                const networkColor = isInNetwork
+                    ? getLevelColor(Math.max(fromLevel, toLevel))
+                    : "#38bdf8";
+                const isDraggingFrom = (draggingAnchor === null || draggingAnchor === void 0 ? void 0 : draggingAnchor.edgeId) === edge.id && draggingAnchor.side === "from";
+                const isDraggingTo = (draggingAnchor === null || draggingAnchor === void 0 ? void 0 : draggingAnchor.edgeId) === edge.id && draggingAnchor.side === "to";
+                return (_jsxs("g", { children: [_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, strokeLinecap: "round", style: { pointerEvents: "none" } }), isSel && (_jsxs("g", { children: [isDraggingFrom && (_jsx("circle", { cx: fromPos.x, cy: fromPos.y, r: 12, fill: "#38bdf8", opacity: 0.15, style: { pointerEvents: "none" } })), _jsx("circle", { cx: fromPos.x, cy: fromPos.y, r: 10, fill: "transparent", style: { cursor: "grab" }, onMouseDown: (e) => {
+                                        e.stopPropagation();
+                                        onStartDragAnchor(e, edge.id, "from");
+                                    } }), _jsx("circle", { cx: fromPos.x, cy: fromPos.y, r: 6, fill: isDraggingFrom ? "#a78bfa" : "#38bdf8", stroke: "#0f172a", strokeWidth: 1.5, style: { pointerEvents: "none" } }), _jsx("circle", { cx: fromPos.x, cy: fromPos.y, r: 2.5, fill: "#0f172a", style: { pointerEvents: "none" } })] })), isSel && (_jsxs("g", { children: [isDraggingTo && (_jsx("circle", { cx: toPos.x, cy: toPos.y, r: 12, fill: "#22c55e", opacity: 0.15, style: { pointerEvents: "none" } })), _jsx("circle", { cx: toPos.x, cy: toPos.y, r: 10, fill: "transparent", style: { cursor: "grab" }, onMouseDown: (e) => {
+                                        e.stopPropagation();
+                                        onStartDragAnchor(e, edge.id, "to");
+                                    } }), _jsx("circle", { cx: toPos.x, cy: toPos.y, r: 6, fill: isDraggingTo ? "#a78bfa" : "#22c55e", stroke: "#0f172a", strokeWidth: 1.5, style: { pointerEvents: "none" } }), _jsx("circle", { cx: toPos.x, cy: toPos.y, r: 2.5, fill: "#0f172a", style: { pointerEvents: "none" } })] })), ((_a = edge.waypoints) !== null && _a !== void 0 ? _a : []).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-${i}`))), isSel &&
+                            isConnectEdge &&
+                            allPoints.slice(0, -1).map((pt, i) => {
+                                var _a;
+                                const next = allPoints[i + 1];
+                                const mx = snap((pt.x + next.x) / 2);
+                                const my = snap((pt.y + next.y) / 2);
+                                const tooClose = ((_a = edge.waypoints) !== null && _a !== void 0 ? _a : []).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-${i}`));
+                            }), isSel && isConnectEdge && (_jsxs("g", { onClick: (e) => {
+                                e.stopPropagation();
+                                onDeleteEdge(edge.id);
+                            }, style: { cursor: "pointer" }, 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 pts = computePoints(connecting.fromPos, mousePos, []);
+                    const pathD = buildPath(pts);
+                    return (_jsxs("g", { children: [_jsx("circle", { cx: connecting.fromPos.x, cy: connecting.fromPos.y, r: 4, fill: "#a78bfa", stroke: "#0f172a", strokeWidth: 0.8, opacity: 0.9, style: { pointerEvents: "none" } }), _jsx("path", { d: pathD, stroke: "#a78bfa", strokeWidth: 1.5, fill: "none", strokeDasharray: "6 3", strokeLinecap: "round", opacity: 0.8, style: { pointerEvents: "none" } })] }));
+                })(), draggingAnchor && (_jsx("text", { x: mousePos.x + 14, y: mousePos.y - 8, fill: "#a78bfa", fontSize: 9, fontFamily: "monospace", opacity: 0.8, style: { pointerEvents: "none", userSelect: "none" }, children: "klik node tujuan" }))] }));
+};

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

@@ -0,0 +1,265 @@
+import React, { useMemo, useState } from "react";
+import { buildPath, getRectEdge, GRID_SIZE, NODE_WIDTH, NODE_HEIGHT, snap, } from "./utils";
+const LEVEL_COLORS = [
+    "#22c55e",
+    "#f59e0b",
+    "#f97316",
+    "#ef4444",
+    "#a78bfa",
+    "#38bdf8",
+];
+const getLevelColor = (level) => LEVEL_COLORS[Math.min(level, LEVEL_COLORS.length - 1)];
+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;
+};
+const computePoints = (fromPos, toPos, waypoints) => [fromPos, ...waypoints, toPos];
+// Hitung midpoint kurva quadratic bezier pada t=0.5
+const quadraticMidpoint = (from, to) => {
+    const dx = to.x - from.x;
+    const dy = to.y - from.y;
+    const dist = Math.sqrt(dx * dx + dy * dy);
+    const bend = Math.min(dist * 0.35, 80);
+    const mx = (from.x + to.x) / 2;
+    const my = (from.y + to.y) / 2;
+    const cpx = dist > 0 ? mx - (dy / dist) * bend : mx;
+    const cpy = dist > 0 ? my + (dx / dist) * bend : my;
+    const t = 0.5, mt = 0.5;
+    return {
+        x: mt * mt * from.x + 2 * mt * t * cpx + t * t * to.x,
+        y: mt * mt * from.y + 2 * mt * t * cpy + t * t * to.y,
+    };
+};
+export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAnchor, mousePos, isConnectEdge, isSelectNode, getNodeById, onSelectEdge, onDeleteEdge, onStartDragWaypoint, onInsertWaypoint, onRemoveWaypoint, onStartDragAnchor, selectedNodeId, }) => {
+    const [hoveredEdge, setHoveredEdge] = useState(null);
+    console.log({ selectedEdge });
+    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]);
+    const nodeHighlightMapByNode = useMemo(() => {
+        if (selectedNodeId) {
+            return floodFill([selectedNodeId], edges);
+        }
+        if (selectedEdge) {
+            const sel = edges.find((e) => e.id === selectedEdge);
+            if (!sel)
+                return new Map();
+            return floodFill([sel.from, sel.to], edges);
+        }
+        return new Map();
+    }, [selectedEdge, selectedNodeId, edges]);
+    const edgePaths = useMemo(() => {
+        const map = new Map();
+        edges.forEach((edge) => {
+            var _a, _b, _c;
+            const fromNode = getNodeById(edge.from);
+            const toNode = getNodeById(edge.to);
+            if (!fromNode || !toNode)
+                return;
+            const isDraggingFrom = (draggingAnchor === null || draggingAnchor === void 0 ? void 0 : draggingAnchor.edgeId) === edge.id && draggingAnchor.side === "from";
+            const isDraggingTo = (draggingAnchor === null || draggingAnchor === void 0 ? void 0 : draggingAnchor.edgeId) === edge.id && draggingAnchor.side === "to";
+            const fromPos = isDraggingFrom
+                ? mousePos
+                : (_a = edge.fromPos) !== null && _a !== void 0 ? _a : getRectEdge(fromNode, toNode, fromNode.width, fromNode.height);
+            const toPos = isDraggingTo
+                ? mousePos
+                : (_b = edge.toPos) !== null && _b !== void 0 ? _b : getRectEdge(toNode, fromNode, toNode.width, toNode.height);
+            const pts = computePoints(fromPos, toPos, (_c = edge.waypoints) !== null && _c !== void 0 ? _c : []);
+            const pathD = buildPath(pts);
+            const mid = quadraticMidpoint(fromPos, toPos);
+            map.set(edge.id, {
+                pathD,
+                allPoints: pts,
+                fromPos,
+                toPos,
+                midX: mid.x,
+                midY: mid.y,
+            });
+        });
+        return map;
+    }, [edges, getNodeById, draggingAnchor, mousePos]);
+    return (<g id="connection-layer">
+      {/* Node 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>);
+        })}
+
+      {Array.from(nodeHighlightMapByNode.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>);
+        })}
+
+      {/* Edges */}
+      {edges.map((edge) => {
+            var _a;
+            const ep = edgePaths.get(edge.id);
+            if (!ep)
+                return null;
+            const { pathD, allPoints, fromPos, toPos, midX, midY } = ep;
+            const isSel = selectedEdge === edge.id;
+            const isHov = hoveredEdge === edge.id;
+            const fromLevel = nodeHighlightMap.get(edge.from);
+            const toLevel = nodeHighlightMap.get(edge.to);
+            const isInNetwork = fromLevel !== undefined && toLevel !== undefined;
+            console.log({ isInNetwork, fromLevel, toLevel }, selectedEdge, !isSel && !isInNetwork);
+            const networkColor = isInNetwork
+                ? getLevelColor(Math.max(fromLevel, toLevel))
+                : "#38bdf8";
+            const isDraggingFrom = (draggingAnchor === null || draggingAnchor === void 0 ? void 0 : draggingAnchor.edgeId) === edge.id && draggingAnchor.side === "from";
+            const isDraggingTo = (draggingAnchor === null || draggingAnchor === void 0 ? void 0 : draggingAnchor.edgeId) === edge.id && draggingAnchor.side === "to";
+            return (<g key={edge.id}>
+            {/* Hit area */}
+            <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)}/>
+
+            {/* Glow */}
+            {(isSel || isHov) && (<path d={pathD} stroke={isSel ? "#a78bfa" : "#38bdf8"} strokeWidth={8} fill="none" opacity={isSel ? 0.12 : 0.06} style={{ pointerEvents: "none" }}/>)}
+
+            {/* Curve */}
+            <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} strokeLinecap="round" style={{ pointerEvents: "none" }}/>
+
+            {/* FROM dot */}
+            {isSel && (<g>
+                {isDraggingFrom && (<circle cx={fromPos.x} cy={fromPos.y} r={12} fill="#38bdf8" opacity={0.15} style={{ pointerEvents: "none" }}/>)}
+                <circle cx={fromPos.x} cy={fromPos.y} r={10} fill="transparent" style={{ cursor: "grab" }} onMouseDown={(e) => {
+                        e.stopPropagation();
+                        onStartDragAnchor(e, edge.id, "from");
+                    }}/>
+                <circle cx={fromPos.x} cy={fromPos.y} r={6} fill={isDraggingFrom ? "#a78bfa" : "#38bdf8"} stroke="#0f172a" strokeWidth={1.5} style={{ pointerEvents: "none" }}/>
+                <circle cx={fromPos.x} cy={fromPos.y} r={2.5} fill="#0f172a" style={{ pointerEvents: "none" }}/>
+              </g>)}
+
+            {/* TO dot */}
+            {isSel && (<g>
+                {isDraggingTo && (<circle cx={toPos.x} cy={toPos.y} r={12} fill="#22c55e" opacity={0.15} style={{ pointerEvents: "none" }}/>)}
+                <circle cx={toPos.x} cy={toPos.y} r={10} fill="transparent" style={{ cursor: "grab" }} onMouseDown={(e) => {
+                        e.stopPropagation();
+                        onStartDragAnchor(e, edge.id, "to");
+                    }}/>
+                <circle cx={toPos.x} cy={toPos.y} r={6} fill={isDraggingTo ? "#a78bfa" : "#22c55e"} stroke="#0f172a" strokeWidth={1.5} style={{ pointerEvents: "none" }}/>
+                <circle cx={toPos.x} cy={toPos.y} r={2.5} fill="#0f172a" style={{ pointerEvents: "none" }}/>
+              </g>)}
+
+            {/* Waypoints */}
+            {((_a = edge.waypoints) !== null && _a !== void 0 ? _a : []).map((wp, i) => (<g key={`wp-${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 &&
+                    isConnectEdge &&
+                    allPoints.slice(0, -1).map((pt, i) => {
+                        var _a;
+                        const next = allPoints[i + 1];
+                        const mx = snap((pt.x + next.x) / 2);
+                        const my = snap((pt.y + next.y) / 2);
+                        const tooClose = ((_a = edge.waypoints) !== null && _a !== void 0 ? _a : []).some((wp) => Math.abs(wp.x - mx) < GRID_SIZE &&
+                            Math.abs(wp.y - my) < GRID_SIZE);
+                        if (tooClose)
+                            return null;
+                        return (<g key={`mid-${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>);
+                    })}
+
+            {/* DEL badge */}
+            {isSel && isConnectEdge && (<g onClick={(e) => {
+                        e.stopPropagation();
+                        onDeleteEdge(edge.id);
+                    }} style={{ cursor: "pointer" }}>
+                <rect x={midX - 16} y={midY - 10} width={32} height={18} rx={4} fill="#1e1b2e" stroke="#a78bfa" strokeWidth={1} opacity={0.95}/>
+                <text x={midX} y={midY} textAnchor="middle" dominantBaseline="middle" fill="#a78bfa" fontSize={9} fontFamily="monospace" fontWeight={600}>
+                  DEL
+                </text>
+              </g>)}
+          </g>);
+        })}
+
+      {/* Preview saat connecting */}
+      {connecting &&
+            (() => {
+                const pts = computePoints(connecting.fromPos, mousePos, []);
+                const pathD = buildPath(pts);
+                return (<g>
+              <circle cx={connecting.fromPos.x} cy={connecting.fromPos.y} r={4} fill="#a78bfa" stroke="#0f172a" strokeWidth={0.8} opacity={0.9} style={{ pointerEvents: "none" }}/>
+              <path d={pathD} stroke="#a78bfa" strokeWidth={1.5} fill="none" strokeDasharray="6 3" strokeLinecap="round" opacity={0.8} style={{ pointerEvents: "none" }}/>
+            </g>);
+            })()}
+
+      {/* Hint drag anchor */}
+      {draggingAnchor && (<text x={mousePos.x + 14} y={mousePos.y - 8} fill="#a78bfa" fontSize={9} fontFamily="monospace" opacity={0.8} style={{ pointerEvents: "none", userSelect: "none" }}>
+          klik node tujuan
+        </text>)}
+    </g>);
+};

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

@@ -0,0 +1,102 @@
+import React, { CSSProperties, SVGAttributes } from "react";
+import { ReactZoomPanPinchRef, ReactZoomPanPinchProps, ReactZoomPanPinchContentRef } from "react-zoom-pan-pinch";
+import { PropertiesProps } from "../../dto/table";
+import { EventHandleType } from "../../dto/event-handler";
+import { EdgeType } from "./utils";
+export type TableGhost = {
+    table: PropertiesProps;
+    event: EventHandleType;
+};
+export type TableMatchKey = {
+    key: string | number;
+    properties?: PropertiesProps;
+    className?: string;
+};
+export type TableMatchEvent = {
+    event: EventHandleType;
+    properties: PropertiesProps;
+};
+export type ComponentProps<T = undefined> = T extends undefined ? PropertiesProps : Omit<PropertiesProps, keyof T> & T;
+export type OnCurrentStateChange<TMeta = undefined> = ({ components, extraComponents, background, boundingBox, }: {
+    components: ComponentProps<TMeta>[];
+    extraComponents: ComponentProps[];
+    background: string;
+    boundingBox: PropertiesProps | null;
+}) => void;
+export type TransformProps = React.ForwardRefExoticComponent<Omit<ReactZoomPanPinchProps, "ref"> & React.RefAttributes<ReactZoomPanPinchContentRef>>;
+export type RefLayerView = {
+    svgRef: SVGSVGElement;
+    transformRef: ReactZoomPanPinchRef;
+    containerRef: HTMLDivElement;
+    tableGhost: SVGGElement;
+    hoverUnderghost: ComponentProps;
+};
+export type TypeActionProps<TMeta = undefined> = {
+    targetTable: ComponentProps<TMeta>;
+    sourceTable: ComponentProps<TMeta>;
+};
+export interface LayerViewProps<TMeta = undefined> {
+    componentProps?: ComponentProps<TMeta>[];
+    extraComponentProps?: ComponentProps[];
+    onSelectComponent?: (component: ComponentProps<TMeta>) => void;
+    onDoubleClick?: (component: ComponentProps<TMeta>) => void;
+    mappingKey?: string;
+    tableMatchKey?: TableMatchKey[];
+    eventMatchTable?: TableMatchEvent[];
+    statusKey?: string;
+    defaultBackground?: string;
+    transformProps?: ReactZoomPanPinchProps;
+    containerProps?: React.HTMLAttributes<HTMLDivElement>;
+    svgProps?: SVGAttributes<SVGSVGElement>;
+    ghostAttributes?: SVGAttributes<SVGGElement>;
+    iconTags?: {
+        icon: React.JSX.Element;
+        key: string;
+    }[];
+    privilegedTags?: {
+        key: string;
+        items: string[];
+    }[];
+    tooltipProps?: {
+        className?: string;
+        style?: CSSProperties;
+        minWidth?: number;
+        children: React.ReactNode;
+    };
+    dragTableBlockKey?: {
+        key: string;
+        value: string | number | null;
+    }[];
+    onRightClick?: (e: MouseEvent, component: ComponentProps<TMeta>) => void;
+    allowTooltip?: boolean;
+    onDrop?: (e: React.MouseEvent<SVGSVGElement>, component: TypeActionProps<TMeta>) => void;
+    onSwitch?: (e: MouseEvent, component: TypeActionProps<TMeta>) => void;
+    refs?: React.ForwardedRef<RefLayerView>;
+    viewStyles?: {
+        paddingTop?: number;
+        paddingLeft?: number;
+        paddingRight?: number;
+        paddingBottom?: number;
+    };
+    loadingRender?: {
+        state: boolean;
+        element: React.JSX.Element;
+    };
+    defaultBoundingBox?: PropertiesProps;
+    viewOnly?: boolean;
+    actionPrivileged?: {
+        select?: boolean;
+        move?: boolean;
+        switch?: boolean;
+        drop?: boolean;
+        rightClick?: boolean;
+        double?: boolean;
+    };
+    onEdgesChange?: (edges: EdgeType[], table: PropertiesProps[]) => void;
+    keyNode?: string;
+    isConnectEdge?: boolean;
+    isSelectNode?: boolean;
+    onMakeSelection?: (component: ComponentProps<TMeta>[]) => void;
+}
+declare const LayerView: <TMeta>(props: LayerViewProps<TMeta>) => import("react/jsx-runtime").JSX.Element;
+export default LayerView;