seat-editor 3.4.7 → 3.5.0

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

@@ -0,0 +1,41 @@
+import { EdgeType, NodeType } from "./utils";
+import { PropertiesProps } from "@/dto/table";
+import { TableMatchKey } from ".";
+export type UseConnectionGraphOptions = {
+    svgRef: React.RefObject<SVGSVGElement>;
+    /**
+     * Fungsi untuk convert komponen dari store ke NodeType.
+     * Karena node kamu bukan node biasa tapi komponen dari board,
+     * kamu perlu provide ini untuk mapping id -> posisi
+     */
+    getNodeById: (id: string) => NodeType | null;
+    onEdgesChange?: (edges: EdgeType[], table: PropertiesProps[]) => void;
+    keyNode?: string;
+    mappingKey?: string;
+    tableMatchKey?: TableMatchKey[];
+    statusKey?: string;
+};
+export declare const useConnectionGraph: ({ svgRef, getNodeById, onEdgesChange, keyNode, mappingKey, tableMatchKey, statusKey, }: UseConnectionGraphOptions) => {
+    edges: EdgeType[];
+    setEdges: import("react").Dispatch<import("react").SetStateAction<EdgeType[]>>;
+    selectedEdge: string;
+    connecting: {
+        fromId: string;
+    };
+    mousePos: {
+        x: number;
+        y: number;
+    };
+    startConnect: (fromId: string) => void;
+    endConnect: (toId: string) => void;
+    cancelConnect: () => void;
+    startDragWaypoint: (e: React.MouseEvent, edgeId: string, index: number) => void;
+    insertWaypoint: (e: React.MouseEvent, edgeId: string, insertIndex: number, x: number, y: number) => void;
+    removeWaypoint: (e: React.MouseEvent, edgeId: string, index: number) => void;
+    selectEdge: (edgeId: string) => void;
+    deleteEdge: (edgeId: string) => void;
+    deleteSelectedEdge: () => void;
+    clearSelection: () => void;
+    onMouseMove: (e: React.MouseEvent<SVGSVGElement> | MouseEvent) => void;
+    onMouseUp: () => void;
+};

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

@@ -0,0 +1,182 @@
+// hooks/use-connection-graph.ts
+import { useCallback, useEffect, useRef, useState } from "react";
+import { defaultWaypoints, getRectEdge, snap, } from "./utils"; // sesuaikan path
+import { useAppSelector } from "@/hooks/use-redux";
+export const useConnectionGraph = ({ svgRef, getNodeById, onEdgesChange, keyNode, mappingKey, tableMatchKey, statusKey, }) => {
+    const components = useAppSelector((state) => state.board.components);
+    const [selectedWaypoint, setSelectedWaypoint] = useState(null);
+    const [edges, setEdges] = useState([]);
+    const [selectedEdge, setSelectedEdge] = useState(null);
+    const [connecting, setConnecting] = useState(null);
+    const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
+    // Dragging waypoint state
+    const draggingWP = useRef(null);
+    // Convert client coords -> SVG coords (dengan transform matrix)
+    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 svgP = pt.matrixTransform((_a = svg.getScreenCTM()) === null || _a === void 0 ? void 0 : _a.inverse());
+        return { x: svgP.x, y: svgP.y };
+    }, [svgRef]);
+    // ─── Connect ─────────────────────────────────────────────────────────────
+    const startConnect = useCallback((fromId) => {
+        setConnecting({ fromId });
+        setSelectedEdge(null);
+    }, []);
+    const endConnect = useCallback((toId) => {
+        if (!connecting || connecting.fromId === toId) {
+            setConnecting(null);
+            return;
+        }
+        const fromNode = getNodeById(connecting.fromId);
+        const toNode = getNodeById(toId);
+        if (!fromNode || !toNode) {
+            setConnecting(null);
+            return;
+        }
+        // Cegah duplikat
+        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;
+            const start = getRectEdge(fromNode, toNode, fromNode.width, fromNode.height);
+            const end = getRectEdge(toNode, fromNode, toNode.width, toNode.height);
+            return [
+                ...prev,
+                {
+                    id: `edge-${Date.now()}`,
+                    from: connecting.fromId,
+                    to: toId,
+                    waypoints: defaultWaypoints(start, end),
+                },
+            ];
+        });
+        setConnecting(null);
+    }, [connecting, getNodeById]);
+    const cancelConnect = useCallback(() => setConnecting(null), []);
+    // ─── Mouse move (track mouse + drag waypoint) ─────────────────────────────
+    const onMouseMove = useCallback((e) => {
+        const clientX = "clientX" in e ? e.clientX : 0;
+        const clientY = "clientY" in e ? e.clientY : 0;
+        const svgPt = getSVGPoint(clientX, clientY);
+        setMousePos(svgPt);
+        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(svgPt.x), y: snap(svgPt.y) } : wp) });
+            }));
+        }
+    }, [getSVGPoint]);
+    const onMouseUp = useCallback(() => {
+        draggingWP.current = null;
+    }, []);
+    // ─── Waypoint drag ────────────────────────────────────────────────────────
+    const startDragWaypoint = useCallback((e, edgeId, index) => {
+        e.stopPropagation();
+        draggingWP.current = { edgeId, index };
+        setSelectedEdge(edgeId);
+    }, []);
+    // Insert waypoint di midpoint
+    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 });
+        }));
+        // Langsung set drag ke waypoint baru
+        draggingWP.current = { edgeId, index: insertIndex };
+    }, []);
+    // Remove waypoint kanan klik
+    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) });
+        }));
+    }, []);
+    // ─── Edge select / delete ─────────────────────────────────────────────────
+    const selectEdge = useCallback((edgeId) => {
+        setSelectedEdge(edgeId);
+    }, []);
+    const deleteEdge = useCallback((edgeId) => {
+        setEdges((prev) => prev.filter((e) => e.id !== edgeId));
+        setSelectedEdge(null);
+    }, []);
+    const deleteSelectedEdge = useCallback(() => {
+        if (selectedEdge)
+            deleteEdge(selectedEdge);
+    }, [selectedEdge, deleteEdge]);
+    const clearSelection = useCallback(() => {
+        setSelectedEdge(null);
+    }, []);
+    // Tambahkan di dalam useConnectionGraph hook
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            if (e.key === "Delete" || e.key === "Backspace") {
+                // Pastikan user tidak sedang ketik di input/textarea
+                const tag = e.target.tagName.toLowerCase();
+                if (tag === "input" || tag === "textarea")
+                    return;
+                if (selectedEdge) {
+                    deleteSelectedEdge();
+                }
+            }
+            if (e.key === "Escape") {
+                cancelConnect();
+                clearSelection();
+            }
+        };
+        window.addEventListener("keydown", handleKeyDown);
+        return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [selectedEdge, deleteSelectedEdge, cancelConnect, clearSelection]);
+    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 {
+        // state
+        edges,
+        setEdges,
+        selectedEdge,
+        connecting,
+        mousePos,
+        // actions
+        startConnect,
+        endConnect,
+        cancelConnect,
+        startDragWaypoint,
+        insertWaypoint,
+        removeWaypoint,
+        selectEdge,
+        deleteEdge,
+        deleteSelectedEdge,
+        clearSelection,
+        // event handlers untuk SVG
+        onMouseMove,
+        onMouseUp,
+    };
+};

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

@@ -0,0 +1,74 @@
+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;
+    waypoints: {
+        x: number;
+        y: number;
+    }[];
+};
+export type NodeType = {
+    id: string;
+    x: number;
+    y: number;
+    width?: number;
+    height?: number;
+    rotation?: number;
+};
+/**
+ * Rotate point (px, py) sekitar origin (0,0) sebesar deg derajat.
+ */
+export declare const rotatePoint: (px: number, py: number, deg: number) => {
+    x: number;
+    y: number;
+};
+/**
+ * Hitung titik edge pada sisi rect node yang menghadap ke arah `to`,
+ * dengan mempertimbangkan rotation node.
+ */
+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;
+};
+/**
+ * Build SVG path melalui array of points.
+ * Selalu berakhir tepat di titik tujuan.
+ *
+ * Routing per segmen:
+ * - Sejajar vertikal (dx <= threshold)   → V
+ * - Sejajar horizontal (dy <= threshold) → H
+ * - Dominan vertikal (dy > dx)           → H midX V curr.y H curr.x
+ * - Dominan horizontal (dx >= dy)        → H midX V curr.y H curr.x
+ *
+ * Semua routing diakhiri dengan koordinat EKSAK curr.x, curr.y
+ * sehingga path selalu sampai ke titik tujuan.
+ */
+export declare const buildPath: (points: {
+    x: number;
+    y: number;
+}[]) => string;
+export declare const defaultWaypoints: (start: {
+    x: number;
+    y: number;
+}, end: {
+    x: number;
+    y: number;
+}) => {
+    x: number;
+    y: number;
+}[];
+export declare const renderElements: (elementEditor: ComponentProps[], mappingKey?: string, tableMatchKey?: TableMatchKey[], statusKey?: string) => ComponentProps[];

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

@@ -0,0 +1,106 @@
+// utils.ts
+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 point (px, py) sekitar origin (0,0) sebesar deg derajat.
+ */
+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),
+    };
+};
+/**
+ * Hitung titik edge pada sisi rect node yang menghadap ke arah `to`,
+ * dengan mempertimbangkan rotation node.
+ */
+export const getRectEdge = (from, to, width, height) => {
+    var _a, _b, _c;
+    const w = (_a = from.width) !== null && _a !== void 0 ? _a : NODE_WIDTH;
+    const h = (_b = from.height) !== null && _b !== void 0 ? _b : NODE_HEIGHT;
+    const rotation = (_c = from.rotation) !== null && _c !== void 0 ? _c : 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);
+    // Un-rotate arah ke local space node
+    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;
+    // Re-rotate balik ke world space
+    const worldEdge = rotatePoint(localEdgeX, localEdgeY, rotation);
+    return {
+        x: snap(from.x + worldEdge.x),
+        y: snap(from.y + worldEdge.y),
+    };
+};
+/**
+ * Build SVG path melalui array of points.
+ * Selalu berakhir tepat di titik tujuan.
+ *
+ * Routing per segmen:
+ * - Sejajar vertikal (dx <= threshold)   → V
+ * - Sejajar horizontal (dy <= threshold) → H
+ * - Dominan vertikal (dy > dx)           → H midX V curr.y H curr.x
+ * - Dominan horizontal (dx >= dy)        → H midX V curr.y H curr.x
+ *
+ * Semua routing diakhiri dengan koordinat EKSAK curr.x, curr.y
+ * sehingga path selalu sampai ke titik tujuan.
+ */
+export const buildPath = (points) => {
+    if (points.length < 2)
+        return "";
+    let d = `M ${points[0].x} ${points[0].y}`;
+    const threshold = 2; // presisi tinggi agar tidak salah deteksi lurus
+    for (let i = 1; i < points.length; i++) {
+        const prev = points[i - 1];
+        const curr = points[i];
+        const dx = Math.abs(curr.x - prev.x);
+        const dy = Math.abs(curr.y - prev.y);
+        if (dx <= threshold) {
+            // Lurus vertikal — snap ke curr.x agar tidak offset kecil
+            d += ` V ${curr.y}`;
+        }
+        else if (dy <= threshold) {
+            // Lurus horizontal
+            d += ` H ${curr.x}`;
+        }
+        else {
+            // Orthogonal — selalu akhiri dengan posisi EKSAK curr.x curr.y
+            const midX = snap((prev.x + curr.x) / 2);
+            d += ` H ${midX} V ${curr.y} H ${curr.x}`;
+        }
+    }
+    return d;
+};
+export const defaultWaypoints = (start, end) => {
+    return [
+        {
+            x: snap((start.x + end.x) / 2),
+            y: snap((start.y + end.y) / 2),
+        },
+    ];
+};
+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-5/connect-handle.d.ts

@@ -0,0 +1,30 @@
+import React from "react";
+type Props = {
+    cx: number;
+    cy: number;
+    width: number;
+    height: number;
+    nodeId: string;
+    rotation?: number;
+    isConnecting: boolean;
+    isDraggingAnchor: boolean;
+    onStartConnect: (nodeId: string, clickPos: {
+        x: number;
+        y: number;
+    }) => void;
+    onEndConnect: (nodeId: string, clickPos: {
+        x: number;
+        y: number;
+    }) => void;
+    isConnectEdge?: boolean;
+    onSelectNode: (nodeId: string) => void;
+    isSelectNode?: boolean;
+    onSelectEdge?: (edgeId: string) => void;
+    edges: {
+        id: string;
+        from: string;
+        to: string;
+    }[];
+};
+export declare const ConnectHandle: React.FC<Props>;
+export {};

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

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// connect-handle.tsx
+import { useState } from "react";
+// 4 titik per sisi dalam local space
+const getLocalAnchors = (w, h) => {
+    const hw = w / 2;
+    const hh = h / 2;
+    return [
+        { x: 0, y: -hh }, // top center
+        { x: hw, y: 0 }, // right center
+        { x: 0, y: hh }, // bottom center
+        { x: -hw, y: 0 }, // left center
+    ];
+};
+const nearestAnchor = (lx, ly, anchors) => {
+    let best = anchors[0];
+    let bestD = Infinity;
+    for (const a of anchors) {
+        const d = Math.hypot(a.x - lx, a.y - ly);
+        if (d < bestD) {
+            bestD = d;
+            best = a;
+        }
+    }
+    return best;
+};
+export const ConnectHandle = ({ cx, cy, width, height, nodeId, rotation = 0, isConnecting, isDraggingAnchor, onStartConnect, onEndConnect, isConnectEdge, onSelectNode, isSelectNode, onSelectEdge, edges }) => {
+    const hw = width / 2;
+    const hh = height / 2;
+    const [hovered, setHovered] = useState(false);
+    const isActive = isConnecting || isDraggingAnchor;
+    const isActiveSelectEdge = isSelectNode;
+    const anchors = getLocalAnchors(width, height);
+    const toLocalPos = (e) => {
+        var _a;
+        const svg = e.currentTarget.closest("svg");
+        const pt = svg.createSVGPoint();
+        pt.x = e.clientX;
+        pt.y = e.clientY;
+        const world = pt.matrixTransform((_a = svg.getScreenCTM()) === null || _a === void 0 ? void 0 : _a.inverse());
+        const dx = world.x - cx;
+        const dy = world.y - cy;
+        const rad = -(rotation * Math.PI) / 180;
+        return {
+            x: dx * Math.cos(rad) - dy * Math.sin(rad),
+            y: dx * Math.sin(rad) + dy * Math.cos(rad),
+        };
+    };
+    const toWorld = (lx, ly) => {
+        const rad = (rotation * Math.PI) / 180;
+        return {
+            x: cx + lx * Math.cos(rad) - ly * Math.sin(rad),
+            y: cy + lx * Math.sin(rad) + ly * Math.cos(rad),
+        };
+    };
+    const handlePointerDown = (e) => {
+        e.stopPropagation();
+        const local = toLocalPos(e);
+        const snapped = nearestAnchor(local.x, local.y, anchors);
+        const worldPos = toWorld(snapped.x, snapped.y);
+        console.log({ isActiveSelectEdge });
+        if (isActiveSelectEdge) {
+            const findEdge = edges.find(e => e.from === nodeId || e.to === nodeId);
+            console.log({ findEdge });
+            onSelectEdge(findEdge === null || findEdge === void 0 ? void 0 : findEdge.id);
+            onSelectNode(nodeId);
+            return;
+        }
+        else if (isActive) {
+            onEndConnect(nodeId, worldPos);
+            return;
+        }
+        else {
+            onStartConnect(nodeId, worldPos);
+        }
+    };
+    return (_jsxs("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" : hovered ? "#38bdf8" : "transparent", strokeWidth: isActive ? 2 : 1.5, strokeDasharray: isActive ? "4 2" : "none", rx: 4, style: { pointerEvents: "none" } }), _jsx("rect", { x: -hw - 4, y: -hh - 4, width: width + 8, height: height + 8, fill: "transparent", style: {
+                    cursor: isConnectEdge ? "crosshair" : "pointer",
+                    pointerEvents: isConnectEdge ? "all" : "none",
+                }, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), onPointerDown: (e) => {
+                    console.log({ isConnectEdge, isSelectNode });
+                    // console.log({ isConnectEdge, isSelectNode })
+                    // if (!isConnectEdge ) return;
+                    // if (!isSelectNode) return;
+                    handlePointerDown(e);
+                } }), ((hovered && isConnectEdge) || isActive) &&
+                anchors.map((a, i) => (_jsx("circle", { cx: a.x, cy: a.y, r: 3, fill: isActive ? "#a78bfa" : "#38bdf8", opacity: 0.5, style: { pointerEvents: "none" } }, i)))] }));
+};

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

@@ -0,0 +1,96 @@
+// connect-handle.tsx
+import React, { useState } from "react";
+// 4 titik per sisi dalam local space
+const getLocalAnchors = (w, h) => {
+    const hw = w / 2;
+    const hh = h / 2;
+    return [
+        { x: 0, y: -hh }, // top center
+        { x: hw, y: 0 }, // right center
+        { x: 0, y: hh }, // bottom center
+        { x: -hw, y: 0 }, // left center
+    ];
+};
+const nearestAnchor = (lx, ly, anchors) => {
+    let best = anchors[0];
+    let bestD = Infinity;
+    for (const a of anchors) {
+        const d = Math.hypot(a.x - lx, a.y - ly);
+        if (d < bestD) {
+            bestD = d;
+            best = a;
+        }
+    }
+    return best;
+};
+export const ConnectHandle = ({ cx, cy, width, height, nodeId, rotation = 0, isConnecting, isDraggingAnchor, onStartConnect, onEndConnect, isConnectEdge, onSelectNode, isSelectNode, onSelectEdge, edges }) => {
+    const hw = width / 2;
+    const hh = height / 2;
+    const [hovered, setHovered] = useState(false);
+    const isActive = isConnecting || isDraggingAnchor;
+    const isActiveSelectEdge = isSelectNode;
+    const anchors = getLocalAnchors(width, height);
+    const toLocalPos = (e) => {
+        var _a;
+        const svg = e.currentTarget.closest("svg");
+        const pt = svg.createSVGPoint();
+        pt.x = e.clientX;
+        pt.y = e.clientY;
+        const world = pt.matrixTransform((_a = svg.getScreenCTM()) === null || _a === void 0 ? void 0 : _a.inverse());
+        const dx = world.x - cx;
+        const dy = world.y - cy;
+        const rad = -(rotation * Math.PI) / 180;
+        return {
+            x: dx * Math.cos(rad) - dy * Math.sin(rad),
+            y: dx * Math.sin(rad) + dy * Math.cos(rad),
+        };
+    };
+    const toWorld = (lx, ly) => {
+        const rad = (rotation * Math.PI) / 180;
+        return {
+            x: cx + lx * Math.cos(rad) - ly * Math.sin(rad),
+            y: cy + lx * Math.sin(rad) + ly * Math.cos(rad),
+        };
+    };
+    const handlePointerDown = (e) => {
+        e.stopPropagation();
+        const local = toLocalPos(e);
+        const snapped = nearestAnchor(local.x, local.y, anchors);
+        const worldPos = toWorld(snapped.x, snapped.y);
+        console.log({ isActiveSelectEdge });
+        if (isActiveSelectEdge) {
+            const findEdge = edges.find(e => e.from === nodeId || e.to === nodeId);
+            console.log({ findEdge });
+            onSelectEdge(findEdge === null || findEdge === void 0 ? void 0 : findEdge.id);
+            onSelectNode(nodeId);
+            return;
+        }
+        else if (isActive) {
+            onEndConnect(nodeId, worldPos);
+            return;
+        }
+        else {
+            onStartConnect(nodeId, worldPos);
+        }
+    };
+    return (<g transform={`translate(${cx}, ${cy}) rotate(${rotation})`}>
+      {/* Border visual */}
+      <rect x={-hw - 4} y={-hh - 4} width={width + 8} height={height + 8} fill="transparent" stroke={isActive ? "#a78bfa" : hovered ? "#38bdf8" : "transparent"} strokeWidth={isActive ? 2 : 1.5} strokeDasharray={isActive ? "4 2" : "none"} rx={4} style={{ pointerEvents: "none" }}/>
+
+      {/* Hit area */}
+      <rect x={-hw - 4} y={-hh - 4} width={width + 8} height={height + 8} fill="transparent" style={{
+            cursor: isConnectEdge ? "crosshair" : "pointer",
+            pointerEvents: isConnectEdge ? "all" : "none",
+        }} onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)} onPointerDown={(e) => {
+            console.log({ isConnectEdge, isSelectNode });
+            // console.log({ isConnectEdge, isSelectNode })
+            // if (!isConnectEdge ) return;
+            // if (!isSelectNode) return;
+            handlePointerDown(e);
+        }}/>
+
+      {/* Anchor dots — muncul saat hover atau active */}
+      {((hovered && isConnectEdge) || isActive) &&
+            anchors.map((a, i) => (<circle key={i} cx={a.x} cy={a.y} r={3} fill={isActive ? "#a78bfa" : "#38bdf8"} opacity={0.5} style={{ pointerEvents: "none" }}/>))}
+    </g>);
+};

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

@@ -0,0 +1,34 @@
+import React from "react";
+import { EdgeType, NodeType } from "./utils";
+export type DraggingAnchor = {
+    edgeId: string;
+    side: "from" | "to";
+};
+type Props = {
+    edges: EdgeType[];
+    selectedEdge: string | null;
+    connecting: {
+        fromId: string;
+        fromPos: {
+            x: number;
+            y: number;
+        };
+    } | null;
+    draggingAnchor: DraggingAnchor | null;
+    mousePos: {
+        x: number;
+        y: number;
+    };
+    getNodeById: (id: string) => NodeType | null;
+    onSelectEdge: (edgeId: string) => void;
+    onDeleteEdge: (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;
+    onStartDragAnchor: (e: React.MouseEvent, edgeId: string, side: "from" | "to") => void;
+    isConnectEdge: boolean;
+    isSelectNode: boolean;
+    selectedNodeId: string | null;
+};
+export declare const ConnectionLayer: React.FC<Props>;
+export {};