seat-editor 3.6.25 → 3.6.27

package/dist/app/graph-view-new/page.js

@@ -17,7 +17,8 @@ export default function GraphView() {
         double: false,
         selection: false,
         selectNode: false,
-        connectingNode: false,
+        connectingNode: true,
+        dragTransferTable: false
     });
     const [isSelectNode, setIsSelectNode] = useState(false);
     const [sections, setSections] = useState([
@@ -105,6 +106,10 @@ export default function GraphView() {
             key: "connectingNode",
             name: "Connecting Node",
         },
+        {
+            key: "dragTransferTable",
+            name: "Drag Transfer Table",
+        }
     ];
     const [dataDrag, setDataDrag] = useState(null);
     console.log({ dataDrag });
@@ -164,5 +169,7 @@ export default function GraphView() {
                         selection: selection
                     }, onRightClick: (e, data) => {
                         console.log({ e, data });
-                    }, allowTooltip: true }), _jsxs("div", { className: "w-1/5 p-4", onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, children: [_jsx("div", { id: "table" }), _jsxs("div", { className: "rounded-lg bg-white p-4", children: [_jsx("h1", { className: "text-2xl font-bold", children: "Section" }), sections.map((section) => (_jsxs("div", { className: clsx("font-bold text-white rounded-md p-2 cursor-pointer", sectionActive === section.id && "!bg-blue-500"), style: { backgroundColor: section.color }, onClick: () => setSectionActive(section.id), children: [_jsx("h2", { className: "text-lg", children: section.name }), section.items.length > 0 && (_jsx("ul", { className: "list-disc pl-5 bg-opacity-50 bg-white p-2 rounded ", children: section.items.map((item) => (_jsx("li", { children: item.name }, item.id))) }))] }, section.id)))] })] }), _jsx("div", { className: "w-1/5 p-4", children: _jsx("div", { className: "rounded-lg bg-white p-4", children: _jsx("h1", { className: "text-2xl font-bold", children: "Nodes" }) }) })] }) }));
+                    }, allowTooltip: true, onHoldTable: (e, data) => {
+                        console.log({ e, data });
+                    }, showConnection: true }), _jsxs("div", { className: "w-1/5 p-4", onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, children: [_jsx("div", { id: "table" }), _jsxs("div", { className: "rounded-lg bg-white p-4", children: [_jsx("h1", { className: "text-2xl font-bold", children: "Section" }), sections.map((section) => (_jsxs("div", { className: clsx("font-bold text-white rounded-md p-2 cursor-pointer", sectionActive === section.id && "!bg-blue-500"), style: { backgroundColor: section.color }, onClick: () => setSectionActive(section.id), children: [_jsx("h2", { className: "text-lg", children: section.name }), section.items.length > 0 && (_jsx("ul", { className: "list-disc pl-5 bg-opacity-50 bg-white p-2 rounded ", children: section.items.map((item) => (_jsx("li", { children: item.name }, item.id))) }))] }, section.id)))] })] }), _jsx("div", { className: "w-1/5 p-4", children: _jsx("div", { className: "rounded-lg bg-white p-4", children: _jsx("h1", { className: "text-2xl font-bold", children: "Nodes" }) }) })] }) }));
 }

package/dist/app/graph-view-new/page.jsx

@@ -16,7 +16,8 @@ export default function GraphView() {
         double: false,
         selection: false,
         selectNode: false,
-        connectingNode: false,
+        connectingNode: true,
+        dragTransferTable: false
     });
     const [isSelectNode, setIsSelectNode] = useState(false);
     const [sections, setSections] = useState([
@@ -104,6 +105,10 @@ export default function GraphView() {
             key: "connectingNode",
             name: "Connecting Node",
         },
+        {
+            key: "dragTransferTable",
+            name: "Drag Transfer Table",
+        }
     ];
     const [dataDrag, setDataDrag] = useState(null);
     console.log({ dataDrag });
@@ -170,7 +175,9 @@ export default function GraphView() {
             selection: selection
         }} onRightClick={(e, data) => {
             console.log({ e, data });
-        }} allowTooltip={true}/>
+        }} allowTooltip={true} onHoldTable={(e, data) => {
+            console.log({ e, data });
+        }} showConnection={true}/>
         <div className="w-1/5 p-4" onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave}>
           <div id="table"/>
           <div className="rounded-lg bg-white p-4">

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

@@ -11,10 +11,12 @@ type Props = {
     onStartConnect: (nodeId: string, clickPos: {
         x: number;
         y: number;
+        name: string;
     }) => void;
     onEndConnect: (nodeId: string, clickPos: {
         x: number;
         y: number;
+        name: string;
     }) => void;
     isConnectEdge?: boolean;
     onSelectNode: (nodeId: string) => void;
@@ -30,8 +32,24 @@ type Props = {
         fromPos: {
             x: number;
             y: number;
+            name: string;
         };
     } | null;
+    showConnection?: boolean;
+};
+export declare const getLocalAnchors: (w: number, h: number) => {
+    x: number;
+    y: number;
+    name: string;
+}[];
+export declare const nearestAnchor: (lx: number, ly: number, anchors: {
+    x: number;
+    y: number;
+    name: string;
+}[]) => {
+    x: number;
+    y: number;
+    name: string;
 };
 export declare const ConnectHandle: React.FC<Props>;
 export {};

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

@@ -1,17 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 // 4 titik per sisi dalam local space
-const getLocalAnchors = (w, h) => {
+export 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
+        { x: 0, y: -hh, name: "top" }, // index 0
+        { x: hw, y: 0, name: "right" }, // index 1
+        { x: 0, y: hh, name: "bottom" }, // index 2
+        { x: -hw, y: 0, name: "left" }, // index 3
     ];
 };
-const nearestAnchor = (lx, ly, anchors) => {
+export const nearestAnchor = (lx, ly, anchors) => {
     let best = anchors[0];
     let bestD = Infinity;
     for (const a of anchors) {
@@ -21,9 +21,9 @@ const nearestAnchor = (lx, ly, anchors) => {
             best = a;
         }
     }
-    return best;
+    return best; // Sekarang mengembalikan objek lengkap termasuk property 'name'
 };
-export const ConnectHandle = ({ cx, cy, width, height, nodeId, rotation = 0, isConnecting, isDraggingAnchor, onStartConnect, onEndConnect, isConnectEdge, onSelectNode, isSelectNode, onSelectEdge, edges, connecting, }) => {
+export const ConnectHandle = ({ cx, cy, width, height, nodeId, rotation = 0, isConnecting, isDraggingAnchor, onStartConnect, onEndConnect, isConnectEdge, onSelectNode, isSelectNode, onSelectEdge, edges, connecting, showConnection }) => {
     const hw = width / 2;
     const hh = height / 2;
     const [hovered, setHovered] = useState(false);
@@ -45,24 +45,24 @@ export const ConnectHandle = ({ cx, cy, width, height, nodeId, rotation = 0, isC
             y: dx * Math.sin(rad) + dy * Math.cos(rad),
         };
     };
-    const toWorld = (lx, ly) => {
+    const toWorld = (lx, ly, name) => {
         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),
+            name,
         };
     };
     useEffect(() => {
         if (!isActiveSelectEdge) {
             onSelectEdge && onSelectEdge("");
-            onSelectEdge && onSelectNode("");
         }
     }, [isActiveSelectEdge]);
     const handlePointerDown = (e) => {
         e.stopPropagation();
         const local = toLocalPos(e);
         const snapped = nearestAnchor(local.x, local.y, anchors);
-        const worldPos = toWorld(snapped.x, snapped.y);
+        const worldPos = toWorld(snapped.x, snapped.y, snapped.name);
         if (isActiveSelectEdge) {
             const findEdge = edges.find((e) => e.from === nodeId || e.to === nodeId);
             onSelectEdge(findEdge === null || findEdge === void 0 ? void 0 : findEdge.id);
@@ -77,14 +77,12 @@ export const ConnectHandle = ({ cx, cy, width, height, nodeId, rotation = 0, isC
             onStartConnect(nodeId, worldPos);
         }
     };
+    if (!showConnection)
+        return null;
     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

@@ -1,16 +1,16 @@
 import React, { useEffect, useState } from "react";
 // 4 titik per sisi dalam local space
-const getLocalAnchors = (w, h) => {
+export 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
+        { x: 0, y: -hh, name: "top" }, // index 0
+        { x: hw, y: 0, name: "right" }, // index 1
+        { x: 0, y: hh, name: "bottom" }, // index 2
+        { x: -hw, y: 0, name: "left" }, // index 3
     ];
 };
-const nearestAnchor = (lx, ly, anchors) => {
+export const nearestAnchor = (lx, ly, anchors) => {
     let best = anchors[0];
     let bestD = Infinity;
     for (const a of anchors) {
@@ -20,9 +20,9 @@ const nearestAnchor = (lx, ly, anchors) => {
             best = a;
         }
     }
-    return best;
+    return best; // Sekarang mengembalikan objek lengkap termasuk property 'name'
 };
-export const ConnectHandle = ({ cx, cy, width, height, nodeId, rotation = 0, isConnecting, isDraggingAnchor, onStartConnect, onEndConnect, isConnectEdge, onSelectNode, isSelectNode, onSelectEdge, edges, connecting, }) => {
+export const ConnectHandle = ({ cx, cy, width, height, nodeId, rotation = 0, isConnecting, isDraggingAnchor, onStartConnect, onEndConnect, isConnectEdge, onSelectNode, isSelectNode, onSelectEdge, edges, connecting, showConnection }) => {
     const hw = width / 2;
     const hh = height / 2;
     const [hovered, setHovered] = useState(false);
@@ -44,24 +44,24 @@ export const ConnectHandle = ({ cx, cy, width, height, nodeId, rotation = 0, isC
             y: dx * Math.sin(rad) + dy * Math.cos(rad),
         };
     };
-    const toWorld = (lx, ly) => {
+    const toWorld = (lx, ly, name) => {
         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),
+            name,
         };
     };
     useEffect(() => {
         if (!isActiveSelectEdge) {
             onSelectEdge && onSelectEdge("");
-            onSelectEdge && onSelectNode("");
         }
     }, [isActiveSelectEdge]);
     const handlePointerDown = (e) => {
         e.stopPropagation();
         const local = toLocalPos(e);
         const snapped = nearestAnchor(local.x, local.y, anchors);
-        const worldPos = toWorld(snapped.x, snapped.y);
+        const worldPos = toWorld(snapped.x, snapped.y, snapped.name);
         if (isActiveSelectEdge) {
             const findEdge = edges.find((e) => e.from === nodeId || e.to === nodeId);
             onSelectEdge(findEdge === null || findEdge === void 0 ? void 0 : findEdge.id);
@@ -76,6 +76,8 @@ export const ConnectHandle = ({ cx, cy, width, height, nodeId, rotation = 0, isC
             onStartConnect(nodeId, worldPos);
         }
     };
+    if (!showConnection)
+        return null;
     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" }}/>
@@ -85,10 +87,6 @@ export const ConnectHandle = ({ cx, cy, width, height, nodeId, rotation = 0, isC
             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);
         }}/>
 

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

@@ -1,5 +1,6 @@
 import React from "react";
 import { EdgeType, NodeType } from "./utils";
+import { ComponentProps } from "../view-only-3";
 export type DraggingAnchor = {
     edgeId: string;
     side: "from" | "to";
@@ -12,6 +13,7 @@ type Props = {
         fromPos: {
             x: number;
             y: number;
+            name: string;
         };
     } | null;
     draggingAnchor: DraggingAnchor | null;
@@ -28,6 +30,8 @@ type Props = {
     onStartDragAnchor: (e: React.MouseEvent, edgeId: string, side: "from" | "to") => void;
     isConnectEdge: boolean;
     selectedNodeId: string | null;
+    showConnection?: boolean;
+    renderedElements?: ComponentProps[];
 };
 export declare const ConnectionLayer: React.FC<Props>;
 export {};

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

@@ -1,6 +1,6 @@
 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";
+import { buildPath, getRectEdge, GRID_SIZE, NODE_WIDTH, NODE_HEIGHT, snap, rotatePoint, } from "./utils";
 const LEVEL_COLORS = [
     "#22c55e",
     "#f59e0b",
@@ -52,9 +52,8 @@ const quadraticMidpoint = (from, to) => {
         y: mt * mt * from.y + 2 * mt * t * cpy + t * t * to.y,
     };
 };
-export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAnchor, mousePos, isConnectEdge, getNodeById, onSelectEdge, onDeleteEdge, onStartDragWaypoint, onInsertWaypoint, onRemoveWaypoint, onStartDragAnchor, selectedNodeId, }) => {
+export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAnchor, mousePos, isConnectEdge, getNodeById, onSelectEdge, onDeleteEdge, onStartDragWaypoint, onInsertWaypoint, onRemoveWaypoint, onStartDragAnchor, selectedNodeId, showConnection, renderedElements, }) => {
     const [hoveredEdge, setHoveredEdge] = useState(null);
-    // console.log({ selectedEdge})
     const nodeHighlightMap = useMemo(() => {
         if (!selectedEdge)
             return new Map();
@@ -105,6 +104,18 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
         });
         return map;
     }, [edges, getNodeById, draggingAnchor, mousePos]);
+    if (!showConnection) {
+        return null;
+    }
+    // const toLocalPos = ({ cx, cy, rotation }) => {
+    //   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),
+    //   };
+    // };
     return (_jsxs("g", { id: "connection-layer", children: [Array.from(nodeHighlightMap.entries()).map(([nodeId, level]) => {
                 var _a, _b, _c;
                 const node = getNodeById(nodeId);
@@ -143,8 +154,10 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
                     : "#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";
-                // const currentConnection = 
-                const isNotRing1 = connecting && ((connecting === null || connecting === void 0 ? void 0 : connecting.fromId) !== edge.from && (connecting === null || connecting === void 0 ? void 0 : connecting.fromId) !== edge.to);
+                // const currentConnection =
+                const isNotRing1 = connecting &&
+                    (connecting === null || connecting === void 0 ? void 0 : connecting.fromId) !== edge.from &&
+                    (connecting === null || connecting === void 0 ? void 0 : connecting.fromId) !== edge.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);
@@ -152,7 +165,9 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
                                 ? "#a78bfa"
                                 : isInNetwork && selectedEdge
                                     ? networkColor
-                                    : "#38bdf8", strokeWidth: isSel ? 2 : isHov ? 2 : 1.5, fill: "none", opacity: (selectedEdge && !isSel && !isInNetwork) || isNotRing1 ? 0.2 : 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) => {
+                                    : "#38bdf8", strokeWidth: isSel ? 2 : isHov ? 2 : 1.5, fill: "none", opacity: (selectedEdge && !isSel && !isInNetwork) || isNotRing1
+                                ? 0.2
+                                : 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) => {
@@ -176,9 +191,43 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
                             }, 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 &&
                 (() => {
-                    var _a, _b;
-                    const pts = computePoints(connecting.fromPos, mousePos, []);
+                    const findSourceTarget = renderedElements === null || renderedElements === void 0 ? void 0 : renderedElements.find((el) => el.id === connecting.fromId);
+                    if (!findSourceTarget)
+                        return null;
+                    const { x, y, rotation, width, height } = findSourceTarget;
+                    const rotated = rotatePoint(width / 2, height / 2, rotation !== null && rotation !== void 0 ? rotation : 0);
+                    const w = width !== null && width !== void 0 ? width : NODE_WIDTH;
+                    const h = height !== null && height !== void 0 ? height : NODE_HEIGHT;
+                    const cx = x + rotated.x;
+                    const cy = y + rotated.y;
+                    // 3. Tentukan koordinat local space berdasarkan name/side
+                    let lx = 0;
+                    let ly = 0;
+                    const hw = w / 2;
+                    const hh = h / 2;
+                    if (connecting.fromPos.name === "top") {
+                        lx = 0;
+                        ly = -hh;
+                    }
+                    else if (connecting.fromPos.name === "right") {
+                        lx = hw;
+                        ly = 0;
+                    }
+                    else if (connecting.fromPos.name === "bottom") {
+                        lx = 0;
+                        ly = hh;
+                    }
+                    else if (connecting.fromPos.name === "left") {
+                        lx = -hw;
+                        ly = 0;
+                    }
+                    const rad = (rotation * Math.PI) / 180;
+                    const fromPos = {
+                        x: cx + lx * Math.cos(rad) - ly * Math.sin(rad),
+                        y: cy + lx * Math.sin(rad) + ly * Math.cos(rad),
+                    };
+                    const pts = computePoints(fromPos, mousePos, []);
                     const pathD = buildPath(pts);
-                    return (_jsxs("g", { children: [_jsx("circle", { cx: (_a = connecting === null || connecting === void 0 ? void 0 : connecting.fromPos) === null || _a === void 0 ? void 0 : _a.x, cy: (_b = connecting === null || connecting === void 0 ? void 0 : connecting.fromPos) === null || _b === void 0 ? void 0 : _b.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" } })] }));
+                    return (_jsxs("g", { children: [_jsx("circle", { cx: fromPos === null || fromPos === void 0 ? void 0 : fromPos.x, cy: fromPos === null || fromPos === void 0 ? void 0 : 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

@@ -1,5 +1,5 @@
 import React, { useMemo, useState } from "react";
-import { buildPath, getRectEdge, GRID_SIZE, NODE_WIDTH, NODE_HEIGHT, snap, } from "./utils";
+import { buildPath, getRectEdge, GRID_SIZE, NODE_WIDTH, NODE_HEIGHT, snap, rotatePoint, } from "./utils";
 const LEVEL_COLORS = [
     "#22c55e",
     "#f59e0b",
@@ -51,9 +51,8 @@ const quadraticMidpoint = (from, to) => {
         y: mt * mt * from.y + 2 * mt * t * cpy + t * t * to.y,
     };
 };
-export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAnchor, mousePos, isConnectEdge, getNodeById, onSelectEdge, onDeleteEdge, onStartDragWaypoint, onInsertWaypoint, onRemoveWaypoint, onStartDragAnchor, selectedNodeId, }) => {
+export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAnchor, mousePos, isConnectEdge, getNodeById, onSelectEdge, onDeleteEdge, onStartDragWaypoint, onInsertWaypoint, onRemoveWaypoint, onStartDragAnchor, selectedNodeId, showConnection, renderedElements, }) => {
     const [hoveredEdge, setHoveredEdge] = useState(null);
-    // console.log({ selectedEdge})
     const nodeHighlightMap = useMemo(() => {
         if (!selectedEdge)
             return new Map();
@@ -104,6 +103,18 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
         });
         return map;
     }, [edges, getNodeById, draggingAnchor, mousePos]);
+    if (!showConnection) {
+        return null;
+    }
+    // const toLocalPos = ({ cx, cy, rotation }) => {
+    //   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),
+    //   };
+    // };
     return (<g id="connection-layer">
       {/* Node highlight flood fill */}
       {Array.from(nodeHighlightMap.entries()).map(([nodeId, level]) => {
@@ -167,8 +178,10 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
                 : "#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";
-            // const currentConnection = 
-            const isNotRing1 = connecting && ((connecting === null || connecting === void 0 ? void 0 : connecting.fromId) !== edge.from && (connecting === null || connecting === void 0 ? void 0 : connecting.fromId) !== edge.to);
+            // const currentConnection =
+            const isNotRing1 = connecting &&
+                (connecting === null || connecting === void 0 ? void 0 : connecting.fromId) !== edge.from &&
+                (connecting === null || connecting === void 0 ? void 0 : connecting.fromId) !== edge.to;
             return (<g key={edge.id}>
             {/* Hit area */}
             <path d={pathD} stroke="transparent" strokeWidth={14} fill="none" style={{ cursor: "pointer" }} onClick={(e) => {
@@ -184,7 +197,9 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
                     ? "#a78bfa"
                     : isInNetwork && selectedEdge
                         ? networkColor
-                        : "#38bdf8"} strokeWidth={isSel ? 2 : isHov ? 2 : 1.5} fill="none" opacity={(selectedEdge && !isSel && !isInNetwork) || isNotRing1 ? 0.2 : 0.9} strokeLinecap="round" style={{ pointerEvents: "none" }}/>
+                        : "#38bdf8"} strokeWidth={isSel ? 2 : isHov ? 2 : 1.5} fill="none" opacity={(selectedEdge && !isSel && !isInNetwork) || isNotRing1
+                    ? 0.2
+                    : 0.9} strokeLinecap="round" style={{ pointerEvents: "none" }}/>
 
             {/* FROM dot */}
             {isSel && (<g>
@@ -250,11 +265,45 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
       {/* Preview saat connecting */}
       {connecting &&
             (() => {
-                var _a, _b;
-                const pts = computePoints(connecting.fromPos, mousePos, []);
+                const findSourceTarget = renderedElements === null || renderedElements === void 0 ? void 0 : renderedElements.find((el) => el.id === connecting.fromId);
+                if (!findSourceTarget)
+                    return null;
+                const { x, y, rotation, width, height } = findSourceTarget;
+                const rotated = rotatePoint(width / 2, height / 2, rotation !== null && rotation !== void 0 ? rotation : 0);
+                const w = width !== null && width !== void 0 ? width : NODE_WIDTH;
+                const h = height !== null && height !== void 0 ? height : NODE_HEIGHT;
+                const cx = x + rotated.x;
+                const cy = y + rotated.y;
+                // 3. Tentukan koordinat local space berdasarkan name/side
+                let lx = 0;
+                let ly = 0;
+                const hw = w / 2;
+                const hh = h / 2;
+                if (connecting.fromPos.name === "top") {
+                    lx = 0;
+                    ly = -hh;
+                }
+                else if (connecting.fromPos.name === "right") {
+                    lx = hw;
+                    ly = 0;
+                }
+                else if (connecting.fromPos.name === "bottom") {
+                    lx = 0;
+                    ly = hh;
+                }
+                else if (connecting.fromPos.name === "left") {
+                    lx = -hw;
+                    ly = 0;
+                }
+                const rad = (rotation * Math.PI) / 180;
+                const fromPos = {
+                    x: cx + lx * Math.cos(rad) - ly * Math.sin(rad),
+                    y: cy + lx * Math.sin(rad) + ly * Math.cos(rad),
+                };
+                const pts = computePoints(fromPos, mousePos, []);
                 const pathD = buildPath(pts);
                 return (<g>
-              <circle cx={(_a = connecting === null || connecting === void 0 ? void 0 : connecting.fromPos) === null || _a === void 0 ? void 0 : _a.x} cy={(_b = connecting === null || connecting === void 0 ? void 0 : connecting.fromPos) === null || _b === void 0 ? void 0 : _b.y} r={4} fill="#a78bfa" stroke="#0f172a" strokeWidth={0.8} opacity={0.9} style={{ pointerEvents: "none" }}/>
+              <circle cx={fromPos === null || fromPos === void 0 ? void 0 : fromPos.x} cy={fromPos === null || fromPos === void 0 ? void 0 : 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>);
             })()}

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

@@ -100,6 +100,7 @@ export interface LayerViewProps<TMeta = undefined> {
         dragTable?: boolean;
         selectNode?: boolean;
         connectingNode?: boolean;
+        dragTransferTable?: boolean;
     };
     onEdgesChange?: (edges: EdgeType[], table: PropertiesProps[]) => void;
     keyNode?: string;
@@ -112,6 +113,9 @@ export interface LayerViewProps<TMeta = undefined> {
         dataKey: string;
         selection: Record<number, string[]>;
     };
+    onHoldTable?: (e: React.PointerEvent<SVGSVGElement>, component: ComponentProps<TMeta>[]) => void;
+    showConnection?: boolean;
+    initialEdges?: EdgeType[];
 }
 declare const LayerView: <TMeta>(props: LayerViewProps<TMeta>) => import("react/jsx-runtime").JSX.Element;
 export default LayerView;

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

@@ -28,7 +28,8 @@ const LayerView = (props) => {
         dragTable: false,
         selectNode: false,
         connectingNode: false,
-    }, onMakeSelection, groupSelection, } = props;
+        dragTransferTable: false,
+    }, onMakeSelection, groupSelection, onHoldTable, showConnection } = props;
     const widthTooltip = (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.minWidth) || 168;
     const tableGhost = useRef(null);
     const hoverUnderghostId = useRef(null);
@@ -266,6 +267,7 @@ const LayerView = (props) => {
             setSelectedLines(null);
         }
     }, [actionPrivileged]);
+    const timerRef = useRef(null);
     const handlePointerDown = (e) => {
         var _a, _b, _c;
         const svg = svgRef.current;
@@ -286,7 +288,7 @@ const LayerView = (props) => {
         const downInOutSelection = hadSelection && makeSelection && e.button !== 2;
         const unSelectAll = hadSelection && e.button === 2 && targetGroup && !targetSelectionGroup;
         const hasSelectionDownOutSelection = !targetSelectionGroup && targetGroup && hadSelection;
-        if (downOutTable) {
+        if (downOutTable || (!targetGroup && !targetSelectionGroup)) {
             if (graph.connecting) {
                 graph.cancelConnect();
             }
@@ -318,6 +320,23 @@ const LayerView = (props) => {
             setTooltip((prev) => (Object.assign(Object.assign({}, prev), { visible: false })));
             return;
         }
+        if ((actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.dragTransferTable) && e.button === 0) {
+            const targetGroup = e.target.closest("g[data-id]");
+            const targetSelectionGroup = e.target.closest("g[data-selection]");
+            if (targetGroup) {
+                const dataId = JSON.parse(targetGroup.getAttribute("data-id") || "{}");
+                const findDayaById = originalData({ id: dataId, type: "find" });
+                timerRef.current = setTimeout(() => {
+                    onHoldTable && onHoldTable(e, [findDayaById]);
+                }, 1000);
+            }
+            if (targetSelectionGroup) {
+                const tableData = dataElementSelectionGroupRef.current;
+                timerRef.current = setTimeout(() => {
+                    onHoldTable && onHoldTable(e, tableData);
+                }, 1000);
+            }
+        }
         let ghost = targetGroup === null || targetGroup === void 0 ? void 0 : targetGroup.cloneNode(true);
         const ghostId = JSON.parse((targetGroup === null || targetGroup === void 0 ? void 0 : targetGroup.getAttribute("data-id")) || "{}");
         const allowedDrag = (!(props === null || props === void 0 ? void 0 : props.dragTableBlockKey)
@@ -630,6 +649,7 @@ const LayerView = (props) => {
         mappingKey,
         tableMatchKey,
         statusKey,
+        initialEdges: props === null || props === void 0 ? void 0 : props.initialEdges,
     });
     // ─── Render ───────────────────────────────────────────────────────────────
     const hasBoundingBox = hasBoundingBoxRef.current;
@@ -664,7 +684,7 @@ const LayerView = (props) => {
                                 userSelect: "none",
                             } }, props.svgProps, { children: [_jsx("rect", { width: "100%", height: "100%", fill: "url(#biggrid)" }), hasBoundingBox && (_jsx("defs", { children: _jsx("clipPath", { id: "contentCrop", children: _jsx("rect", { x: boundingBox.minX, y: boundingBox.minY, width: boundingBox.width, height: boundingBox.height }) }) })), _jsx("g", { id: "main-layer", clipPath: "url(#contentCrop)", children: _jsx(Layers, { components: [...extraComponentsEditor, ...renderedElements], selectedTable: selectedTable, 
                                         // iconTags={iconTags}
-                                        eventMatchTable: eventMatchTable, privilegedTags: privilegedTags, selectionLines: selectedLines }) }), _jsx(ConnectionLayer, { edges: graph.edges, selectedEdge: graph.selectedEdge, connecting: graph.connecting, draggingAnchor: graph.draggingAnchor, mousePos: graph.mousePos, getNodeById: getNodeById, onSelectEdge: graph.selectEdge, onDeleteEdge: graph.deleteEdge, onStartDragWaypoint: graph.startDragWaypoint, onInsertWaypoint: graph.insertWaypoint, onRemoveWaypoint: graph.removeWaypoint, onStartDragAnchor: graph.startDragAnchor, isConnectEdge: actionPrivileged.connectingNode, selectedNodeId: graph.selectedNode }), renderedElements.map((item) => {
+                                        eventMatchTable: eventMatchTable, privilegedTags: privilegedTags, selectionLines: selectedLines }) }), _jsx(ConnectionLayer, { edges: graph.edges, selectedEdge: graph.selectedEdge, connecting: graph.connecting, draggingAnchor: graph.draggingAnchor, mousePos: graph.mousePos, getNodeById: getNodeById, onSelectEdge: graph.selectEdge, onDeleteEdge: graph.deleteEdge, onStartDragWaypoint: graph.startDragWaypoint, onInsertWaypoint: graph.insertWaypoint, onRemoveWaypoint: graph.removeWaypoint, onStartDragAnchor: graph.startDragAnchor, isConnectEdge: actionPrivileged.connectingNode, selectedNodeId: graph.selectedNode, showConnection: showConnection, renderedElements: renderedElements }), renderedElements.map((item) => {
                                     var _a, _b, _c, _d;
                                     const rotated = rotatePoint(item.width / 2, item.height / 2, (_a = item.rotation) !== null && _a !== void 0 ? _a : 0);
                                     return (_jsx(ConnectHandle, { 
@@ -674,7 +694,7 @@ const LayerView = (props) => {
                                                 graph.updateAnchor(nodeId, clickPos);
                                             else
                                                 graph.endConnect(nodeId, clickPos);
-                                        }, isConnectEdge: actionPrivileged.connectingNode, onSelectNode: graph.selectNode, isSelectNode: actionPrivileged.selectNode, onSelectEdge: graph.selectEdge, edges: graph.edges }, item.id));
+                                        }, isConnectEdge: actionPrivileged.connectingNode, onSelectNode: graph.selectNode, isSelectNode: actionPrivileged.selectNode, onSelectEdge: graph.selectEdge, edges: graph.edges, showConnection: showConnection }, item.id));
                                 })] })), tooltip.visible && (_jsx("div", { className: `seat-editor tooltip-container ${tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.className}`, style: Object.assign({ top: tooltip.y, left: tooltip.x, transform: `scale(${1 / scale})`, transformOrigin: "top left", minWidth: widthTooltip + "px" }, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.style), children: tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.children }))] }) }))] })));
 };
 export default LayerView;

package/dist/features/view-only-5/index.jsx

@@ -27,7 +27,8 @@ const LayerView = (props) => {
         dragTable: false,
         selectNode: false,
         connectingNode: false,
-    }, onMakeSelection, groupSelection, } = props;
+        dragTransferTable: false,
+    }, onMakeSelection, groupSelection, onHoldTable, showConnection } = props;
     const widthTooltip = (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.minWidth) || 168;
     const tableGhost = useRef(null);
     const hoverUnderghostId = useRef(null);
@@ -265,6 +266,7 @@ const LayerView = (props) => {
             setSelectedLines(null);
         }
     }, [actionPrivileged]);
+    const timerRef = useRef(null);
     const handlePointerDown = (e) => {
         var _a, _b, _c;
         const svg = svgRef.current;
@@ -285,7 +287,7 @@ const LayerView = (props) => {
         const downInOutSelection = hadSelection && makeSelection && e.button !== 2;
         const unSelectAll = hadSelection && e.button === 2 && targetGroup && !targetSelectionGroup;
         const hasSelectionDownOutSelection = !targetSelectionGroup && targetGroup && hadSelection;
-        if (downOutTable) {
+        if (downOutTable || (!targetGroup && !targetSelectionGroup)) {
             if (graph.connecting) {
                 graph.cancelConnect();
             }
@@ -317,6 +319,23 @@ const LayerView = (props) => {
             setTooltip((prev) => (Object.assign(Object.assign({}, prev), { visible: false })));
             return;
         }
+        if ((actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.dragTransferTable) && e.button === 0) {
+            const targetGroup = e.target.closest("g[data-id]");
+            const targetSelectionGroup = e.target.closest("g[data-selection]");
+            if (targetGroup) {
+                const dataId = JSON.parse(targetGroup.getAttribute("data-id") || "{}");
+                const findDayaById = originalData({ id: dataId, type: "find" });
+                timerRef.current = setTimeout(() => {
+                    onHoldTable && onHoldTable(e, [findDayaById]);
+                }, 1000);
+            }
+            if (targetSelectionGroup) {
+                const tableData = dataElementSelectionGroupRef.current;
+                timerRef.current = setTimeout(() => {
+                    onHoldTable && onHoldTable(e, tableData);
+                }, 1000);
+            }
+        }
         let ghost = targetGroup === null || targetGroup === void 0 ? void 0 : targetGroup.cloneNode(true);
         const ghostId = JSON.parse((targetGroup === null || targetGroup === void 0 ? void 0 : targetGroup.getAttribute("data-id")) || "{}");
         const allowedDrag = (!(props === null || props === void 0 ? void 0 : props.dragTableBlockKey)
@@ -629,6 +648,7 @@ const LayerView = (props) => {
         mappingKey,
         tableMatchKey,
         statusKey,
+        initialEdges: props === null || props === void 0 ? void 0 : props.initialEdges,
     });
     // ─── Render ───────────────────────────────────────────────────────────────
     const hasBoundingBox = hasBoundingBoxRef.current;
@@ -683,7 +703,7 @@ const LayerView = (props) => {
     eventMatchTable={eventMatchTable} privilegedTags={privilegedTags} selectionLines={selectedLines}/>
             </g>
 
-            <ConnectionLayer edges={graph.edges} selectedEdge={graph.selectedEdge} connecting={graph.connecting} draggingAnchor={graph.draggingAnchor} mousePos={graph.mousePos} getNodeById={getNodeById} onSelectEdge={graph.selectEdge} onDeleteEdge={graph.deleteEdge} onStartDragWaypoint={graph.startDragWaypoint} onInsertWaypoint={graph.insertWaypoint} onRemoveWaypoint={graph.removeWaypoint} onStartDragAnchor={graph.startDragAnchor} isConnectEdge={actionPrivileged.connectingNode} selectedNodeId={graph.selectedNode}/>
+            <ConnectionLayer edges={graph.edges} selectedEdge={graph.selectedEdge} connecting={graph.connecting} draggingAnchor={graph.draggingAnchor} mousePos={graph.mousePos} getNodeById={getNodeById} onSelectEdge={graph.selectEdge} onDeleteEdge={graph.deleteEdge} onStartDragWaypoint={graph.startDragWaypoint} onInsertWaypoint={graph.insertWaypoint} onRemoveWaypoint={graph.removeWaypoint} onStartDragAnchor={graph.startDragAnchor} isConnectEdge={actionPrivileged.connectingNode} selectedNodeId={graph.selectedNode} showConnection={showConnection} renderedElements={renderedElements}/>
 
             {renderedElements.map((item) => {
             var _a, _b, _c, _d;
@@ -695,7 +715,7 @@ const LayerView = (props) => {
                         graph.updateAnchor(nodeId, clickPos);
                     else
                         graph.endConnect(nodeId, clickPos);
-                }} isConnectEdge={actionPrivileged.connectingNode} onSelectNode={graph.selectNode} isSelectNode={actionPrivileged.selectNode} onSelectEdge={graph.selectEdge} edges={graph.edges}/>);
+                }} isConnectEdge={actionPrivileged.connectingNode} onSelectNode={graph.selectNode} isSelectNode={actionPrivileged.selectNode} onSelectEdge={graph.selectEdge} edges={graph.edges} showConnection={showConnection}/>);
         })}
           </svg>
 

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

@@ -11,8 +11,10 @@ export type UseConnectionGraphOptions = {
     mappingKey?: string;
     tableMatchKey?: TableMatchKey[];
     statusKey?: string;
+    showConnection?: boolean;
+    initialEdges?: EdgeType[];
 };
-export declare const useConnectionGraph: ({ svgRef, getNodeById, onEdgesChange, keyNode, mappingKey, tableMatchKey, statusKey, }: UseConnectionGraphOptions) => {
+export declare const useConnectionGraph: ({ svgRef, onEdgesChange, keyNode, mappingKey, initialEdges, }: UseConnectionGraphOptions) => {
     edges: EdgeType[];
     setEdges: React.Dispatch<React.SetStateAction<EdgeType[]>>;
     selectedEdge: string;
@@ -22,6 +24,7 @@ export declare const useConnectionGraph: ({ svgRef, getNodeById, onEdgesChange,
         fromPos: {
             x: number;
             y: number;
+            name: string;
         };
     };
     draggingAnchor: DraggingAnchor;
@@ -32,16 +35,19 @@ export declare const useConnectionGraph: ({ svgRef, getNodeById, onEdgesChange,
     startConnect: (fromId: string, fromPos: {
         x: number;
         y: number;
+        name: string;
     }) => void;
     endConnect: (toId: string, toPos: {
         x: number;
         y: number;
+        name: string;
     }) => void;
     cancelConnect: () => void;
     startDragAnchor: (e: React.MouseEvent, edgeId: string, side: "from" | "to") => void;
     updateAnchor: (targetNodeId: string, newPos: {
         x: number;
         y: number;
+        name: string;
     }) => void;
     cancelDragAnchor: () => void;
     startDragWaypoint: (e: React.MouseEvent, edgeId: string, index: number) => void;

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

@@ -1,8 +1,8 @@
 // use-connection-graph.ts
 import { useCallback, useEffect, useRef, useState } from "react";
-import { snap } from "./utils";
+import { rotatePoint, snap } from "./utils";
 import { useAppSelector } from "../../hooks/use-redux";
-export const useConnectionGraph = ({ svgRef, getNodeById, onEdgesChange, keyNode, mappingKey, tableMatchKey, statusKey, }) => {
+export const useConnectionGraph = ({ svgRef, onEdgesChange, keyNode, mappingKey, initialEdges, }) => {
     const components = useAppSelector((state) => state.board.components);
     const [edges, setEdges] = useState([]);
     const [selectedEdge, setSelectedEdge] = useState(null);
@@ -124,7 +124,7 @@ export const useConnectionGraph = ({ svgRef, getNodeById, onEdgesChange, keyNode
             return Object.assign(Object.assign({}, ed), { waypoints: ed.waypoints.filter((_, i) => i !== index) });
         }));
     }, []);
-    // __ Select Table 
+    // __ Select Table
     const selectNode = useCallback((nodeId) => setSelectedNode(nodeId), []);
     // ── Select / delete ──────────────────────────────────────────────
     const selectEdge = useCallback((id) => setSelectedEdge(id), []);
@@ -168,6 +168,89 @@ export const useConnectionGraph = ({ svgRef, getNodeById, onEdgesChange, keyNode
         });
         onEdgesChange === null || onEdgesChange === void 0 ? void 0 : onEdgesChange(edges, result);
     }, [edges]);
+    // initialize edges
+    useEffect(() => {
+        if (initialEdges) {
+            //process initial edges
+            const allElements = components === null || components === void 0 ? void 0 : components.map((table) => {
+                if (mappingKey && (table === null || table === void 0 ? void 0 : table[mappingKey])) {
+                    return Object.assign({}, table);
+                }
+                return Object.assign({}, table);
+            });
+            // const findSourceTarget = allElements?.find(
+            //   (el) => el.id === connecting.fromId
+            // );
+            const transformAllEdges = initialEdges === null || initialEdges === void 0 ? void 0 : initialEdges.map((edge) => {
+                const fromElement = allElements === null || allElements === void 0 ? void 0 : allElements.find((el) => el.id === edge.from);
+                if (!fromElement)
+                    return null;
+                const { x: fromX, y: fromY, rotation: fromRotation, width: fromWidth, height: fromHeight, } = fromElement;
+                const fromRotated = rotatePoint(fromWidth / 2, fromHeight / 2, fromRotation !== null && fromRotation !== void 0 ? fromRotation : 0);
+                const fromCx = fromX + fromRotated.x;
+                const fromCy = fromY + fromRotated.y;
+                let fromLx = 0;
+                let fromLy = 0;
+                const fromHw = fromWidth / 2;
+                const fromHh = fromHeight / 2;
+                if (edge.fromPos.name === "top") {
+                    fromLx = 0;
+                    fromLy = -fromHh;
+                }
+                else if (connecting.fromPos.name === "right") {
+                    fromLx = fromHw;
+                    fromLy = 0;
+                }
+                else if (connecting.fromPos.name === "bottom") {
+                    fromLx = 0;
+                    fromLy = fromHh;
+                }
+                else if (connecting.fromPos.name === "left") {
+                    fromLx = -fromHw;
+                    fromLy = 0;
+                }
+                const rad = (fromRotation * Math.PI) / 180;
+                const fromPos = {
+                    x: fromCx + fromLx * Math.cos(rad) - fromLy * Math.sin(rad),
+                    y: fromCy + fromLx * Math.sin(rad) + fromLy * Math.cos(rad),
+                };
+                const toElement = allElements === null || allElements === void 0 ? void 0 : allElements.find((el) => el.id === edge.to);
+                if (!toElement)
+                    return null;
+                const { x: toX, y: toY, rotation: toRotation, width: toWidth, height: toHeight, } = toElement;
+                const toRotated = rotatePoint(toWidth / 2, toHeight / 2, toRotation !== null && toRotation !== void 0 ? toRotation : 0);
+                const toCx = toX + toRotated.x;
+                const toCy = toY + toRotated.y;
+                let toLx = 0;
+                let toLy = 0;
+                const toHw = toWidth / 2;
+                const toHh = toHeight / 2;
+                if (edge.toPos.name === "top") {
+                    toLx = 0;
+                    toLy = -toHh;
+                }
+                else if (edge.toPos.name === "right") {
+                    toLx = toHw;
+                    toLy = 0;
+                }
+                else if (edge.toPos.name === "bottom") {
+                    toLx = 0;
+                    toLy = toHh;
+                }
+                else if (edge.toPos.name === "left") {
+                    toLx = -toHw;
+                    toLy = 0;
+                }
+                const rad2 = (toRotation * Math.PI) / 180;
+                const toPos = {
+                    x: toCx + toLx * Math.cos(rad2) - toLy * Math.sin(rad2),
+                    y: toCy + toLx * Math.sin(rad2) + toLy * Math.cos(rad2),
+                };
+                return Object.assign(Object.assign({}, edge), { from: fromElement.id, to: toElement.id, fromPos,
+                    toPos });
+            });
+        }
+    }, [initialEdges]);
     return {
         edges,
         setEdges,
@@ -191,6 +274,6 @@ export const useConnectionGraph = ({ svgRef, getNodeById, onEdgesChange, keyNode
         clearSelection,
         onMouseMove,
         onMouseUp,
-        selectNode
+        selectNode,
     };
 };

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

@@ -10,10 +10,12 @@ export type EdgeType = {
     fromPos?: {
         x: number;
         y: number;
+        name: string;
     };
     toPos?: {
         x: number;
         y: number;
+        name: string;
     };
     waypoints: {
         x: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "seat-editor",
-  "version": "3.6.25",
+  "version": "3.6.27",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",