seat-editor 3.6.27 → 3.6.29

package/dist/app/graph-view-new/constant.d.ts

@@ -7,6 +7,7 @@ export declare const data: ({
     code: string;
     name: string;
     capacity: number;
+    use_connection: number;
     pax: {
         adults: number;
     };
@@ -132,6 +133,109 @@ export declare const data: ({
         uuid: string;
         image: any;
     }[];
+} | {
+    uuid_table: string;
+    uuid_rsvp: any;
+    uuid_event_outlet: any;
+    uuid_reserved: any;
+    uuid_rsvp_table: any;
+    code: string;
+    name: string;
+    capacity: number;
+    use_connection: number;
+    pax: any;
+    req_pax: any;
+    total_pax: any;
+    total_req_pax: any;
+    uuid_status: any;
+    status_bg_color: any;
+    status_name: any;
+    status_color: any;
+    status_icon: any;
+    title: any;
+    firstname: any;
+    lastname: any;
+    fullname: any;
+    ranks: any;
+    tags: any;
+    rank_sp: any;
+    rank_ts: any;
+    start_date: any;
+    end_date: any;
+    start_time: any;
+    end_time: any;
+    walk_in: any;
+    dp_amount: any;
+    dp_status: any;
+    online_payment: any;
+    rsvp_type: any;
+    rsvp_input: any;
+    is_reserved: number;
+    is_hold: number;
+    is_lock: number;
+    is_overtime: number;
+    is_upcoming: number;
+    conflicted: number;
+    is_late: number;
+    properties: {
+        x: number;
+        y: number;
+        id: string;
+        fill: string;
+        tags: ({
+            gap: string;
+            key: string;
+            items: {
+                type: string;
+                value: string;
+            }[];
+            direction: string;
+            offsetX?: undefined;
+            offsetY?: undefined;
+        } | {
+            gap: string;
+            key: string;
+            items: {
+                type: string;
+                value: string;
+            }[];
+            offsetX: string;
+            offsetY: string;
+            direction: string;
+        })[];
+        text: string;
+        shape: string;
+        width: number;
+        height: number;
+        labels: {
+            x: number;
+            y: number;
+            label: string;
+            fontSize: number;
+            fontColor: string;
+        }[];
+        points: any[];
+        opacity: number;
+        rotation: number;
+        seatCount: number;
+        uuid_table: string;
+        stroke?: undefined;
+        seatFill?: undefined;
+        openSpace?: undefined;
+        seatPositions?: undefined;
+    };
+    image_mapping: {
+        x: number;
+        y: number;
+        id: string;
+        fill: string;
+        shape: string;
+        width: number;
+        height: number;
+    }[];
+    upcomings: any[];
+    areas: any;
+    sections: any;
 } | {
     uuid_table: string;
     uuid_rsvp: string;
@@ -261,6 +365,7 @@ export declare const data: ({
         uuid: string;
         image: any;
     }[];
+    use_connection?: undefined;
 } | {
     uuid_table: string;
     uuid_rsvp: any;
@@ -363,6 +468,7 @@ export declare const data: ({
     upcomings: any[];
     areas: any;
     sections: any;
+    use_connection?: undefined;
 } | {
     uuid_table: string;
     uuid_rsvp: any;
@@ -471,6 +577,7 @@ export declare const data: ({
     upcomings: any[];
     areas: any;
     sections: any;
+    use_connection?: undefined;
 } | {
     uuid_table: string;
     uuid_rsvp: any;
@@ -578,6 +685,7 @@ export declare const data: ({
     upcomings: any[];
     areas: any;
     sections: any;
+    use_connection?: undefined;
 })[];
 export declare const COLORS_SECTION: string[];
 export declare const background: {

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

@@ -8,6 +8,7 @@ export const data = [
         code: "T1",
         name: "TABLE 1",
         capacity: 5,
+        use_connection: 1,
         pax: {
             adults: 4,
         },
@@ -168,6 +169,7 @@ export const data = [
         code: "V1",
         name: "VIP 1",
         capacity: 8,
+        use_connection: 1,
         pax: null,
         req_pax: null,
         total_pax: null,

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

@@ -2,10 +2,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
 import LayerView from "../../features/view-only-5";
-import { COLORS_SECTION, data } from "./constant";
+import { data } from "./constant";
 import { Button } from "antd";
 import { useMemo, useState } from "react";
-import { selection } from "./selection";
 export default function GraphView() {
     const [isConnecting, setIsConnecting] = useState(false);
     const [actionPrivileged, setActionPrivileged] = useState({
@@ -36,10 +35,13 @@ export default function GraphView() {
         },
     ]);
     const [sectionActive, setSectionActive] = useState(null);
-    const componentSection = useMemo(() => data === null || data === void 0 ? void 0 : data.map((data) => {
+    const componentSection = useMemo(() => {
         var _a;
-        return (Object.assign(Object.assign({}, data), { section: (_a = sections.find((section) => section.items.some((item) => item.uuid_table === data.uuid_table))) === null || _a === void 0 ? void 0 : _a.id }));
-    }), [data, sections]);
+        return (_a = data === null || data === void 0 ? void 0 : data.map((data) => {
+            var _a;
+            return (Object.assign(Object.assign({}, data), { section: (_a = sections.find((section) => section.items.some((item) => item.uuid_table === data.uuid_table))) === null || _a === void 0 ? void 0 : _a.id }));
+        })) === null || _a === void 0 ? void 0 : _a.slice(0, 10);
+    }, [data, sections]);
     const onMakeSelection = (datas) => {
         setSections((prev) => {
             const uuidSet = new Set(datas.map((d) => d.uuid_table));
@@ -143,31 +145,43 @@ export default function GraphView() {
             setDataDrag(null);
         }
     };
+    const [edges, setEdges] = useState([]);
+    console.log({ edges });
     return (_jsx("div", { className: "w-full h-screen flex relative", children: _jsxs("div", { className: "flex", children: [_jsx("div", { className: "absolute top-0 left-0 z-10 flex gap-2", children: priviledged.map((item) => (_jsx(Button, { type: actionPrivileged[item.key] ? "primary" : "default", htmlType: "button", onClick: () => {
                             setActionPrivileged((prev) => (Object.assign(Object.assign({}, prev), { [item.key]: !prev[item.key] })));
-                        }, children: item.name }, item.key))) }), _jsx(LayerView, { componentProps: componentSection, statusKey: "section", defaultBackground: "#1e2d4a", mappingKey: "properties", keyNode: "nodes", onEdgesChange: (table, edges) => console.log({ edges, table }), isConnectEdge: isConnecting, isSelectNode: isSelectNode, 
+                        }, children: item.name }, item.key))) }), _jsx(LayerView, { componentProps: componentSection, statusKey: "section", defaultBackground: "#1e2d4a", mappingKey: "properties", keyNode: "nodes", onEdgesChange: (edges, table) => {
+                        console.log(edges, "edges");
+                        setEdges(edges);
+                    }, initialEdges: edges, isConnectEdge: isConnecting, isSelectNode: isSelectNode, connectionMatchKey: {
+                        key: "use_connection",
+                        value: 1
+                    }, 
                     // extraComponentProps={background}
                     onSelectComponent: handleSelectItem, 
                     // actionPrivileged={{
                     //   select: true,
                     // }}
-                    onMakeSelection: onMakeSelection, tableMatchKey: [
-                        {
-                            key: "capacity",
-                            value: 5,
-                            properties: {
-                                fill: "#000000",
-                            },
-                            // element: {
-                            //   icon: undefined,
-                            //   props: {},
-                            // },
-                        },
-                    ], onDragTable: (_, data) => setDataDrag(data), actionPrivileged: actionPrivileged, groupSelection: {
-                        colorGroupSelection: COLORS_SECTION,
-                        dataKey: "uuid_table",
-                        selection: selection
-                    }, onRightClick: (e, data) => {
+                    onMakeSelection: onMakeSelection, 
+                    // tableMatchKey={[
+                    //   // {
+                    //   //   key: "capacity",
+                    //   //   value: 5,
+                    //   //   properties: {
+                    //   //     fill: "#000000",
+                    //   //   },
+                    //     // element: {
+                    //     //   icon: undefined,
+                    //     //   props: {},
+                    //     // },
+                    //   },
+                    // ]}
+                    onDragTable: (_, data) => setDataDrag(data), actionPrivileged: actionPrivileged, 
+                    // groupSelection={{
+                    //   colorGroupSelection: COLORS_SECTION,
+                    //   dataKey: "uuid_table",
+                    //   selection: selection
+                    // }}
+                    onRightClick: (e, data) => {
                         console.log({ e, data });
                     }, allowTooltip: true, onHoldTable: (e, data) => {
                         console.log({ e, data });

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

@@ -1,10 +1,9 @@
 "use client";
 import clsx from "clsx";
 import LayerView from "../../features/view-only-5";
-import { COLORS_SECTION, data } from "./constant";
+import { data } from "./constant";
 import { Button } from "antd";
 import { useMemo, useState } from "react";
-import { selection } from "./selection";
 export default function GraphView() {
     const [isConnecting, setIsConnecting] = useState(false);
     const [actionPrivileged, setActionPrivileged] = useState({
@@ -35,10 +34,13 @@ export default function GraphView() {
         },
     ]);
     const [sectionActive, setSectionActive] = useState(null);
-    const componentSection = useMemo(() => data === null || data === void 0 ? void 0 : data.map((data) => {
+    const componentSection = useMemo(() => {
         var _a;
-        return (Object.assign(Object.assign({}, data), { section: (_a = sections.find((section) => section.items.some((item) => item.uuid_table === data.uuid_table))) === null || _a === void 0 ? void 0 : _a.id }));
-    }), [data, sections]);
+        return (_a = data === null || data === void 0 ? void 0 : data.map((data) => {
+            var _a;
+            return (Object.assign(Object.assign({}, data), { section: (_a = sections.find((section) => section.items.some((item) => item.uuid_table === data.uuid_table))) === null || _a === void 0 ? void 0 : _a.id }));
+        })) === null || _a === void 0 ? void 0 : _a.slice(0, 10);
+    }, [data, sections]);
     const onMakeSelection = (datas) => {
         setSections((prev) => {
             const uuidSet = new Set(datas.map((d) => d.uuid_table));
@@ -142,6 +144,8 @@ export default function GraphView() {
             setDataDrag(null);
         }
     };
+    const [edges, setEdges] = useState([]);
+    console.log({ edges });
     return (<div className="w-full h-screen flex relative">
       <div className="flex">
         <div className="absolute top-0 left-0 z-10 flex gap-2">
@@ -151,29 +155,39 @@ export default function GraphView() {
               {item.name}
             </Button>))}
         </div>
-        <LayerView componentProps={componentSection} statusKey="section" defaultBackground="#1e2d4a" mappingKey="properties" keyNode="nodes" onEdgesChange={(table, edges) => console.log({ edges, table })} isConnectEdge={isConnecting} isSelectNode={isSelectNode} 
+        <LayerView componentProps={componentSection} statusKey="section" defaultBackground="#1e2d4a" mappingKey="properties" keyNode="nodes" onEdgesChange={(edges, table) => {
+            console.log(edges, "edges");
+            setEdges(edges);
+        }} initialEdges={edges} isConnectEdge={isConnecting} isSelectNode={isSelectNode} connectionMatchKey={{
+            key: "use_connection",
+            value: 1
+        }} 
     // extraComponentProps={background}
     onSelectComponent={handleSelectItem} 
     // actionPrivileged={{
     //   select: true,
     // }}
-    onMakeSelection={onMakeSelection} tableMatchKey={[
-            {
-                key: "capacity",
-                value: 5,
-                properties: {
-                    fill: "#000000",
-                },
-                // element: {
-                //   icon: undefined,
-                //   props: {},
-                // },
-            },
-        ]} onDragTable={(_, data) => setDataDrag(data)} actionPrivileged={actionPrivileged} groupSelection={{
-            colorGroupSelection: COLORS_SECTION,
-            dataKey: "uuid_table",
-            selection: selection
-        }} onRightClick={(e, data) => {
+    onMakeSelection={onMakeSelection} 
+    // tableMatchKey={[
+    //   // {
+    //   //   key: "capacity",
+    //   //   value: 5,
+    //   //   properties: {
+    //   //     fill: "#000000",
+    //   //   },
+    //     // element: {
+    //     //   icon: undefined,
+    //     //   props: {},
+    //     // },
+    //   },
+    // ]}
+    onDragTable={(_, data) => setDataDrag(data)} actionPrivileged={actionPrivileged} 
+    // groupSelection={{
+    //   colorGroupSelection: COLORS_SECTION,
+    //   dataKey: "uuid_table",
+    //   selection: selection
+    // }}
+    onRightClick={(e, data) => {
             console.log({ e, data });
         }} allowTooltip={true} onHoldTable={(e, data) => {
             console.log({ e, data });

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

@@ -79,11 +79,11 @@ export const ConnectHandle = ({ cx, cy, width, height, nodeId, rotation = 0, isC
     };
     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: {
+    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 && (connecting === null || connecting === void 0 ? void 0 : connecting.fromId) === nodeId) ? "#5014D0" : hovered ? "#3E97FF" : "transparent", strokeWidth: isActive ? 1 : 1, strokeDasharray: (isActive && hovered) ? "solid" : "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) => {
                     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)))] }));
+                anchors.map((a, i) => (_jsx("circle", { cx: a.x, cy: a.y, r: 3, fill: isActive ? "#7239EA" : "#38bdf8", opacity: 0.5, style: { pointerEvents: "none" } }, i)))] }));
 };

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

@@ -80,7 +80,7 @@ export const ConnectHandle = ({ cx, cy, width, height, nodeId, rotation = 0, isC
         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" }}/>
+      <rect x={-hw - 4} y={-hh - 4} width={width + 8} height={height + 8} fill={"transparent"} stroke={(isActive && (connecting === null || connecting === void 0 ? void 0 : connecting.fromId) === nodeId) ? "#5014D0" : hovered ? "#3E97FF" : "transparent"} strokeWidth={isActive ? 1 : 1} strokeDasharray={(isActive && hovered) ? "solid" : "none"} rx={4} style={{ pointerEvents: "none" }}/>
 
       {/* Hit area */}
       <rect x={-hw - 4} y={-hh - 4} width={width + 8} height={height + 8} fill="transparent" style={{
@@ -92,7 +92,7 @@ export const ConnectHandle = ({ cx, cy, width, height, nodeId, rotation = 0, isC
 
       {/* 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" }}/>))}
+            anchors.map((a, i) => (<circle key={i} cx={a.x} cy={a.y} r={3} fill={isActive ? "#7239EA" : "#38bdf8"} opacity={0.5} style={{ pointerEvents: "none" }}/>))}
       
     </g>);
 };

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

@@ -32,6 +32,15 @@ type Props = {
     selectedNodeId: string | null;
     showConnection?: boolean;
     renderedElements?: ComponentProps[];
+    groupSelection?: {
+        colorGroupSelection: string[];
+        dataKey: string;
+        selection: Record<number, string[]>;
+    };
+    connectionMatchKey?: {
+        key: string;
+        value: string | number;
+    };
 };
 export declare const ConnectionLayer: React.FC<Props>;
 export {};

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

@@ -1,14 +1,7 @@
 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, rotatePoint, } from "./utils";
-const LEVEL_COLORS = [
-    "#22c55e",
-    "#f59e0b",
-    "#f97316",
-    "#ef4444",
-    "#a78bfa",
-    "#38bdf8",
-];
+const LEVEL_COLORS = ["#7239EA", "#3E97FF"];
 const getLevelColor = (level) => LEVEL_COLORS[Math.min(level, LEVEL_COLORS.length - 1)];
 const floodFill = (seedIds, edges) => {
     const levelMap = new Map();
@@ -52,8 +45,14 @@ 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, showConnection, renderedElements, }) => {
+export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAnchor, mousePos, isConnectEdge, getNodeById, onSelectEdge, onDeleteEdge, onStartDragWaypoint, onInsertWaypoint, onRemoveWaypoint, onStartDragAnchor, selectedNodeId, showConnection, renderedElements, groupSelection, connectionMatchKey, }) => {
     const [hoveredEdge, setHoveredEdge] = useState(null);
+    const tableMatchConnectionKey = useMemo(() => renderedElements === null || renderedElements === void 0 ? void 0 : renderedElements.filter((el) => {
+        if (connectionMatchKey) {
+            return (el === null || el === void 0 ? void 0 : el[connectionMatchKey === null || connectionMatchKey === void 0 ? void 0 : connectionMatchKey.key]) === (connectionMatchKey === null || connectionMatchKey === void 0 ? void 0 : connectionMatchKey.value);
+        }
+        return true;
+    }), [renderedElements, connectionMatchKey]);
     const nodeHighlightMap = useMemo(() => {
         if (!selectedEdge)
             return new Map();
@@ -63,7 +62,7 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
         return floodFill([sel.from, sel.to], edges);
     }, [selectedEdge, edges]);
     const nodeHighlightMapByNode = useMemo(() => {
-        if (selectedNodeId) {
+        if (selectedNodeId || connecting) {
             return floodFill([selectedNodeId], edges);
         }
         if (selectedEdge) {
@@ -74,6 +73,12 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
         }
         return new Map();
     }, [selectedEdge, selectedNodeId, edges]);
+    const nodeHighlightMapByConnecting = useMemo(() => {
+        if (connecting) {
+            return floodFill([connecting.fromId], edges);
+        }
+        return new Map();
+    }, [connecting, edges]);
     const edgePaths = useMemo(() => {
         const map = new Map();
         edges.forEach((edge) => {
@@ -107,16 +112,7 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
     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]) => {
+    return (_jsxs("g", { id: "connection-layer", children: [Array.from(nodeHighlightMapByConnecting.entries()).map(([nodeId, level]) => {
                 var _a, _b, _c;
                 const node = getNodeById(nodeId);
                 if (!node)
@@ -126,7 +122,26 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
                 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}`));
+                if (level > 1)
+                    return null;
+                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 })] }, `highlight-${nodeId}`));
+            }), 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;
+                if (level > 0)
+                    return null;
+                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 }), _jsx("g", { transform: `translate(${w / 2 + padding - 2}, ${-h / 2 - padding})` })] }, `highlight-${nodeId}`));
             }), Array.from(nodeHighlightMapByNode.entries()).map(([nodeId, level]) => {
                 var _a, _b, _c;
                 const node = getNodeById(nodeId);
@@ -137,7 +152,12 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
                 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}`));
+                // console.log("nodeHighlightMapByNode", nodeId, level, color);
+                if (level > 1)
+                    return null;
+                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 }), _jsx("g", { transform: `translate(${w / 2 + padding - 2}, ${-h / 2 - padding})` })] }, `highlight-${nodeId}`));
             }), edges.map((edge) => {
                 var _a;
                 const ep = edgePaths.get(edge.id);
@@ -146,34 +166,34 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
                 const { pathD, allPoints, fromPos, toPos, midX, midY } = ep;
                 const isSel = selectedEdge === edge.id;
                 const isHov = hoveredEdge === edge.id;
+                const connectionMatch = tableMatchConnectionKey === null || tableMatchConnectionKey === void 0 ? void 0 : tableMatchConnectionKey.some((el) => el.id === edge.to || el.id === edge.from);
                 const fromLevel = nodeHighlightMap.get(edge.from);
                 const toLevel = nodeHighlightMap.get(edge.to);
-                const isInNetwork = fromLevel !== undefined && toLevel !== undefined;
-                const networkColor = isInNetwork
-                    ? getLevelColor(Math.max(fromLevel, toLevel))
-                    : "#38bdf8";
+                const isStillConnectingProcess = (connecting === null || connecting === void 0 ? void 0 : connecting.fromId) === edge.from || (connecting === null || connecting === void 0 ? void 0 : connecting.fromId) === edge.to;
+                const isRing1 = (selectedNodeId && selectedNodeId === edge.from) ||
+                    selectedNodeId === edge.to;
                 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;
                 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) || 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) => {
+                            }, 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: connectionMatch ? "#F1416C" : "#7239EA", strokeWidth: isSel ? 2 : isHov ? 2 : 1.5, fill: "none", opacity: (isRing1 && selectedNodeId) || isStillConnectingProcess
+                                ? 1
+                                : connecting
+                                    ? 0
+                                    : 0.3, strokeLinecap: "round", style: { pointerEvents: "none" } }), _jsxs("g", { children: [isDraggingFrom && (_jsx("circle", { cx: fromPos.x, cy: fromPos.y, r: 12, fill: "#7239EA", 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) => {
+                                    } }), _jsx("circle", { cx: fromPos.x, cy: fromPos.y, r: 3, fill: connectionMatch ? "#F1416C" : "#7239EA", 
+                                    // stroke="#0f172a"
+                                    // strokeWidth={1.5}
+                                    style: { pointerEvents: "none" } })] }), _jsxs("g", { children: [isDraggingTo && (_jsx("circle", { cx: toPos.x, cy: toPos.y, r: 12, fill: "#7239EA", 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 &&
+                                    } }), _jsx("circle", { cx: toPos.x, cy: toPos.y, r: 3, fill: connectionMatch ? "#F1416C" : "#7239EA", 
+                                    // stroke="#0f172a"
+                                    // strokeWidth={1.5}
+                                    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;
@@ -191,7 +211,7 @@ 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 &&
                 (() => {
-                    const findSourceTarget = renderedElements === null || renderedElements === void 0 ? void 0 : renderedElements.find((el) => el.id === connecting.fromId);
+                    const findSourceTarget = renderedElements === null || renderedElements === void 0 ? void 0 : renderedElements.find((el) => { var _a; return ((_a = el === null || el === void 0 ? void 0 : el[groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.dataKey]) !== null && _a !== void 0 ? _a : el.id) === connecting.fromId; });
                     if (!findSourceTarget)
                         return null;
                     const { x, y, rotation, width, height } = findSourceTarget;

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

@@ -1,13 +1,6 @@
 import React, { useMemo, useState } from "react";
 import { buildPath, getRectEdge, GRID_SIZE, NODE_WIDTH, NODE_HEIGHT, snap, rotatePoint, } from "./utils";
-const LEVEL_COLORS = [
-    "#22c55e",
-    "#f59e0b",
-    "#f97316",
-    "#ef4444",
-    "#a78bfa",
-    "#38bdf8",
-];
+const LEVEL_COLORS = ["#7239EA", "#3E97FF"];
 const getLevelColor = (level) => LEVEL_COLORS[Math.min(level, LEVEL_COLORS.length - 1)];
 const floodFill = (seedIds, edges) => {
     const levelMap = new Map();
@@ -51,8 +44,14 @@ 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, showConnection, renderedElements, }) => {
+export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAnchor, mousePos, isConnectEdge, getNodeById, onSelectEdge, onDeleteEdge, onStartDragWaypoint, onInsertWaypoint, onRemoveWaypoint, onStartDragAnchor, selectedNodeId, showConnection, renderedElements, groupSelection, connectionMatchKey, }) => {
     const [hoveredEdge, setHoveredEdge] = useState(null);
+    const tableMatchConnectionKey = useMemo(() => renderedElements === null || renderedElements === void 0 ? void 0 : renderedElements.filter((el) => {
+        if (connectionMatchKey) {
+            return (el === null || el === void 0 ? void 0 : el[connectionMatchKey === null || connectionMatchKey === void 0 ? void 0 : connectionMatchKey.key]) === (connectionMatchKey === null || connectionMatchKey === void 0 ? void 0 : connectionMatchKey.value);
+        }
+        return true;
+    }), [renderedElements, connectionMatchKey]);
     const nodeHighlightMap = useMemo(() => {
         if (!selectedEdge)
             return new Map();
@@ -62,7 +61,7 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
         return floodFill([sel.from, sel.to], edges);
     }, [selectedEdge, edges]);
     const nodeHighlightMapByNode = useMemo(() => {
-        if (selectedNodeId) {
+        if (selectedNodeId || connecting) {
             return floodFill([selectedNodeId], edges);
         }
         if (selectedEdge) {
@@ -73,6 +72,12 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
         }
         return new Map();
     }, [selectedEdge, selectedNodeId, edges]);
+    const nodeHighlightMapByConnecting = useMemo(() => {
+        if (connecting) {
+            return floodFill([connecting.fromId], edges);
+        }
+        return new Map();
+    }, [connecting, edges]);
     const edgePaths = useMemo(() => {
         const map = new Map();
         edges.forEach((edge) => {
@@ -106,16 +111,27 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
     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">
+      {Array.from(nodeHighlightMapByConnecting.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;
+            if (level > 1)
+                return null;
+            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}/>
+            </g>);
+        })}
+
       {/* Node highlight flood fill */}
       {Array.from(nodeHighlightMap.entries()).map(([nodeId, level]) => {
             var _a, _b, _c;
@@ -127,14 +143,26 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
             const rotation = (_c = node.rotation) !== null && _c !== void 0 ? _c : 0;
             const color = getLevelColor(level);
             const padding = 4;
+            if (level > 0)
+                return null;
             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}/>
+            <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>
+              {/* <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>);
         })}
@@ -149,14 +177,27 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
             const rotation = (_c = node.rotation) !== null && _c !== void 0 ? _c : 0;
             const color = getLevelColor(level);
             const padding = 4;
+            // console.log("nodeHighlightMapByNode", nodeId, level, color);
+            if (level > 1)
+                return null;
             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}/>
+            <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>
+              {/* <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>);
         })}
@@ -170,18 +211,14 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
             const { pathD, allPoints, fromPos, toPos, midX, midY } = ep;
             const isSel = selectedEdge === edge.id;
             const isHov = hoveredEdge === edge.id;
+            const connectionMatch = tableMatchConnectionKey === null || tableMatchConnectionKey === void 0 ? void 0 : tableMatchConnectionKey.some((el) => el.id === edge.to || el.id === edge.from);
             const fromLevel = nodeHighlightMap.get(edge.from);
             const toLevel = nodeHighlightMap.get(edge.to);
-            const isInNetwork = fromLevel !== undefined && toLevel !== undefined;
-            const networkColor = isInNetwork
-                ? getLevelColor(Math.max(fromLevel, toLevel))
-                : "#38bdf8";
+            const isStillConnectingProcess = (connecting === null || connecting === void 0 ? void 0 : connecting.fromId) === edge.from || (connecting === null || connecting === void 0 ? void 0 : connecting.fromId) === edge.to;
+            const isRing1 = (selectedNodeId && selectedNodeId === edge.from) ||
+                selectedNodeId === edge.to;
             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;
             return (<g key={edge.id}>
             {/* Hit area */}
             <path d={pathD} stroke="transparent" strokeWidth={14} fill="none" style={{ cursor: "pointer" }} onClick={(e) => {
@@ -193,35 +230,56 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
             {(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) || isNotRing1
-                    ? 0.2
-                    : 0.9} strokeLinecap="round" style={{ pointerEvents: "none" }}/>
+
+            <path d={pathD} stroke={connectionMatch ? "#F1416C" : "#7239EA"} strokeWidth={isSel ? 2 : isHov ? 2 : 1.5} fill={"none"} opacity={(isRing1 && selectedNodeId) || isStillConnectingProcess
+                    ? 1
+                    : connecting
+                        ? 0
+                        : 0.3} 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>)}
+            {/* {isSel && ( */}
+            <g>
+              {isDraggingFrom && (<circle cx={fromPos.x} cy={fromPos.y} r={12} fill="#7239EA" 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={3} fill={connectionMatch ? "#F1416C" : "#7239EA"} 
+            // 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>)}
+            {/* {isSel && ( */}
+            <g>
+              {isDraggingTo && (<circle cx={toPos.x} cy={toPos.y} r={12} fill="#7239EA" 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={3} fill={connectionMatch ? "#F1416C" : "#7239EA"} 
+            // 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}`}>
@@ -265,7 +323,7 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
       {/* Preview saat connecting */}
       {connecting &&
             (() => {
-                const findSourceTarget = renderedElements === null || renderedElements === void 0 ? void 0 : renderedElements.find((el) => el.id === connecting.fromId);
+                const findSourceTarget = renderedElements === null || renderedElements === void 0 ? void 0 : renderedElements.find((el) => { var _a; return ((_a = el === null || el === void 0 ? void 0 : el[groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.dataKey]) !== null && _a !== void 0 ? _a : el.id) === connecting.fromId; });
                 if (!findSourceTarget)
                     return null;
                 const { x, y, rotation, width, height } = findSourceTarget;

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

@@ -116,6 +116,10 @@ export interface LayerViewProps<TMeta = undefined> {
     onHoldTable?: (e: React.PointerEvent<SVGSVGElement>, component: ComponentProps<TMeta>[]) => void;
     showConnection?: boolean;
     initialEdges?: EdgeType[];
+    connectionMatchKey?: {
+        key: string;
+        value: string | number;
+    };
 }
 declare const LayerView: <TMeta>(props: LayerViewProps<TMeta>) => import("react/jsx-runtime").JSX.Element;
 export default LayerView;

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

@@ -29,7 +29,7 @@ const LayerView = (props) => {
         selectNode: false,
         connectingNode: false,
         dragTransferTable: false,
-    }, onMakeSelection, groupSelection, onHoldTable, showConnection } = props;
+    }, onMakeSelection, groupSelection, onHoldTable, showConnection, connectionMatchKey } = props;
     const widthTooltip = (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.minWidth) || 168;
     const tableGhost = useRef(null);
     const hoverUnderghostId = useRef(null);
@@ -618,11 +618,12 @@ const LayerView = (props) => {
     };
     // ─── Node helper ──────────────────────────────────────────────────────────
     const getNodeById = useCallback((id) => {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         const comp = componentsEditor.find((item) => {
+            var _a, _b, _c;
             if (mappingKey && (item === null || item === void 0 ? void 0 : item[mappingKey]))
-                return item[mappingKey].id == id;
-            return (item === null || item === void 0 ? void 0 : item.id) == id;
+                return (_b = (_a = item[mappingKey]) === null || _a === void 0 ? void 0 : _a[groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.dataKey]) !== null && _b !== void 0 ? _b : item[mappingKey].id == id;
+            return (_c = item === null || item === void 0 ? void 0 : item[groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.dataKey]) !== null && _c !== void 0 ? _c : item.id == id;
         });
         if (!comp)
             return null;
@@ -632,7 +633,7 @@ const LayerView = (props) => {
         const rotation = (_c = v.rotation) !== null && _c !== void 0 ? _c : 0;
         const rotated = rotatePoint(w / 2, h / 2, rotation);
         return {
-            id: String(v.id),
+            id: (_d = v === null || v === void 0 ? void 0 : v[groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.dataKey]) !== null && _d !== void 0 ? _d : String(v.id),
             x: v.x + rotated.x,
             y: v.y + rotated.y,
             width: w,
@@ -662,7 +663,7 @@ const LayerView = (props) => {
     const viewBox = isValidBoundingBox
         ? `${boundingBox.minX - (((_a = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _a === void 0 ? void 0 : _a.paddingLeft) || 0)} ${boundingBox.minY - (((_b = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _b === void 0 ? void 0 : _b.paddingTop) || 0)} ${boundingBox.width + (((_c = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _c === void 0 ? void 0 : _c.paddingRight) || 0)} ${boundingBox.height + (((_d = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _d === void 0 ? void 0 : _d.paddingBottom) || 0)}`
         : "0 0 1000 1000";
-    const renderedElements = useMemo(() => renderElements(componentsEditor, mappingKey, tableMatchKey, graph.connecting, groupSelection), [
+    const renderedElements = useMemo(() => renderElements(componentsEditor, mappingKey, tableMatchKey, graph.connecting, groupSelection, graph.edges, connectionMatchKey), [
         componentsEditor,
         mappingKey,
         tableMatchKey,
@@ -671,6 +672,8 @@ const LayerView = (props) => {
         groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.selection,
         groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.dataKey,
         groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.colorGroupSelection,
+        graph.edges,
+        connectionMatchKey
     ]);
     return (_jsxs("div", Object.assign({ className: "relative w-full h-full flex-1", ref: containerRef, style: { overflow: "auto", WebkitOverflowScrolling: "touch" } }, props.containerProps, { children: [loading && (_jsx("div", { className: "absolute z-10 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-opacity-50 bg-white w-full h-full flex items-center justify-center", children: (loadingRender === null || loadingRender === void 0 ? void 0 : loadingRender.element) || _jsx(Spin, {}) })), _jsx(TransformWrapper, Object.assign({ ref: transformRef, disablePadding: true, centerZoomedOut: true, panning: { disabled: panningGroup, wheelPanning: true }, wheel: { disabled: false }, onTransformed: ({ state: { scale } }) => setScale(scale), minScale: 1, maxScale: 1000, initialScale: 1, smooth: true, centerOnInit: true }, props.transformProps, { children: _jsxs(TransformComponent, { wrapperStyle: { width: "100%", height: "100%" }, contentStyle: { width: "100%", height: "100%" }, children: [_jsxs("svg", Object.assign({ id: "workspace", ref: svgRef, width: "100%", height: "100%", overflow: "hidden", viewBox: viewBox, className: "h-full", xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "xMidYMid meet", onContextMenu: (e) => e.preventDefault(), 
                             // onDrop={(e) => handleTableEvent(e, "drop")}
@@ -684,12 +687,12 @@ 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, showConnection: showConnection, renderedElements: renderedElements }), renderedElements.map((item) => {
-                                    var _a, _b, _c, _d;
+                                        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, groupSelection: groupSelection, connectionMatchKey: connectionMatchKey }), renderedElements.map((item) => {
+                                    var _a, _b, _c, _d, _e;
                                     const rotated = rotatePoint(item.width / 2, item.height / 2, (_a = item.rotation) !== null && _a !== void 0 ? _a : 0);
                                     return (_jsx(ConnectHandle, { 
                                         // isAnchor={true}
-                                        connecting: graph.connecting, cx: item.x + rotated.x, cy: item.y + rotated.y, width: (_b = item.width) !== null && _b !== void 0 ? _b : 100, height: (_c = item.height) !== null && _c !== void 0 ? _c : 50, rotation: (_d = item.rotation) !== null && _d !== void 0 ? _d : 0, nodeId: String(item.id), isConnecting: !!graph.connecting, isDraggingAnchor: !!graph.draggingAnchor, onStartConnect: (nodeId, clickPos) => graph.startConnect(nodeId, clickPos), onEndConnect: (nodeId, clickPos) => {
+                                        connecting: graph.connecting, cx: item.x + rotated.x, cy: item.y + rotated.y, width: (_b = item.width) !== null && _b !== void 0 ? _b : 100, height: (_c = item.height) !== null && _c !== void 0 ? _c : 50, rotation: (_d = item.rotation) !== null && _d !== void 0 ? _d : 0, nodeId: (_e = item === null || item === void 0 ? void 0 : item[groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.dataKey]) !== null && _e !== void 0 ? _e : String(item.id), isConnecting: !!graph.connecting, isDraggingAnchor: !!graph.draggingAnchor, onStartConnect: (nodeId, clickPos) => graph.startConnect(nodeId, clickPos), onEndConnect: (nodeId, clickPos) => {
                                             if (graph.draggingAnchor)
                                                 graph.updateAnchor(nodeId, clickPos);
                                             else

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

@@ -28,7 +28,7 @@ const LayerView = (props) => {
         selectNode: false,
         connectingNode: false,
         dragTransferTable: false,
-    }, onMakeSelection, groupSelection, onHoldTable, showConnection } = props;
+    }, onMakeSelection, groupSelection, onHoldTable, showConnection, connectionMatchKey } = props;
     const widthTooltip = (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.minWidth) || 168;
     const tableGhost = useRef(null);
     const hoverUnderghostId = useRef(null);
@@ -617,11 +617,12 @@ const LayerView = (props) => {
     };
     // ─── Node helper ──────────────────────────────────────────────────────────
     const getNodeById = useCallback((id) => {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         const comp = componentsEditor.find((item) => {
+            var _a, _b, _c;
             if (mappingKey && (item === null || item === void 0 ? void 0 : item[mappingKey]))
-                return item[mappingKey].id == id;
-            return (item === null || item === void 0 ? void 0 : item.id) == id;
+                return (_b = (_a = item[mappingKey]) === null || _a === void 0 ? void 0 : _a[groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.dataKey]) !== null && _b !== void 0 ? _b : item[mappingKey].id == id;
+            return (_c = item === null || item === void 0 ? void 0 : item[groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.dataKey]) !== null && _c !== void 0 ? _c : item.id == id;
         });
         if (!comp)
             return null;
@@ -631,7 +632,7 @@ const LayerView = (props) => {
         const rotation = (_c = v.rotation) !== null && _c !== void 0 ? _c : 0;
         const rotated = rotatePoint(w / 2, h / 2, rotation);
         return {
-            id: String(v.id),
+            id: (_d = v === null || v === void 0 ? void 0 : v[groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.dataKey]) !== null && _d !== void 0 ? _d : String(v.id),
             x: v.x + rotated.x,
             y: v.y + rotated.y,
             width: w,
@@ -661,7 +662,7 @@ const LayerView = (props) => {
     const viewBox = isValidBoundingBox
         ? `${boundingBox.minX - (((_a = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _a === void 0 ? void 0 : _a.paddingLeft) || 0)} ${boundingBox.minY - (((_b = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _b === void 0 ? void 0 : _b.paddingTop) || 0)} ${boundingBox.width + (((_c = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _c === void 0 ? void 0 : _c.paddingRight) || 0)} ${boundingBox.height + (((_d = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _d === void 0 ? void 0 : _d.paddingBottom) || 0)}`
         : "0 0 1000 1000";
-    const renderedElements = useMemo(() => renderElements(componentsEditor, mappingKey, tableMatchKey, graph.connecting, groupSelection), [
+    const renderedElements = useMemo(() => renderElements(componentsEditor, mappingKey, tableMatchKey, graph.connecting, groupSelection, graph.edges, connectionMatchKey), [
         componentsEditor,
         mappingKey,
         tableMatchKey,
@@ -670,6 +671,8 @@ const LayerView = (props) => {
         groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.selection,
         groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.dataKey,
         groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.colorGroupSelection,
+        graph.edges,
+        connectionMatchKey
     ]);
     return (<div className="relative w-full h-full flex-1" ref={containerRef} style={{ overflow: "auto", WebkitOverflowScrolling: "touch" }} {...props.containerProps}>
       {loading && (<div className="absolute z-10 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-opacity-50 bg-white w-full h-full flex items-center justify-center">
@@ -703,14 +706,14 @@ 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} showConnection={showConnection} renderedElements={renderedElements}/>
+            <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} groupSelection={groupSelection} connectionMatchKey={connectionMatchKey}/>
 
             {renderedElements.map((item) => {
-            var _a, _b, _c, _d;
+            var _a, _b, _c, _d, _e;
             const rotated = rotatePoint(item.width / 2, item.height / 2, (_a = item.rotation) !== null && _a !== void 0 ? _a : 0);
             return (<ConnectHandle key={item.id} 
             // isAnchor={true}
-            connecting={graph.connecting} cx={item.x + rotated.x} cy={item.y + rotated.y} width={(_b = item.width) !== null && _b !== void 0 ? _b : 100} height={(_c = item.height) !== null && _c !== void 0 ? _c : 50} rotation={(_d = item.rotation) !== null && _d !== void 0 ? _d : 0} nodeId={String(item.id)} isConnecting={!!graph.connecting} isDraggingAnchor={!!graph.draggingAnchor} onStartConnect={(nodeId, clickPos) => graph.startConnect(nodeId, clickPos)} onEndConnect={(nodeId, clickPos) => {
+            connecting={graph.connecting} cx={item.x + rotated.x} cy={item.y + rotated.y} width={(_b = item.width) !== null && _b !== void 0 ? _b : 100} height={(_c = item.height) !== null && _c !== void 0 ? _c : 50} rotation={(_d = item.rotation) !== null && _d !== void 0 ? _d : 0} nodeId={(_e = item === null || item === void 0 ? void 0 : item[groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.dataKey]) !== null && _e !== void 0 ? _e : String(item.id)} isConnecting={!!graph.connecting} isDraggingAnchor={!!graph.draggingAnchor} onStartConnect={(nodeId, clickPos) => graph.startConnect(nodeId, clickPos)} onEndConnect={(nodeId, clickPos) => {
                     if (graph.draggingAnchor)
                         graph.updateAnchor(nodeId, clickPos);
                     else

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

@@ -2,6 +2,7 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { rotatePoint, snap } from "./utils";
 import { useAppSelector } from "../../hooks/use-redux";
+import { isEqual } from "lodash";
 export const useConnectionGraph = ({ svgRef, onEdgesChange, keyNode, mappingKey, initialEdges, }) => {
     const components = useAppSelector((state) => state.board.components);
     const [edges, setEdges] = useState([]);
@@ -170,7 +171,7 @@ export const useConnectionGraph = ({ svgRef, onEdgesChange, keyNode, mappingKey,
     }, [edges]);
     // initialize edges
     useEffect(() => {
-        if (initialEdges) {
+        if (!isEqual(initialEdges, edges) && components) {
             //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])) {
@@ -178,9 +179,6 @@ export const useConnectionGraph = ({ svgRef, onEdgesChange, keyNode, mappingKey,
                 }
                 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)
@@ -213,6 +211,7 @@ export const useConnectionGraph = ({ svgRef, onEdgesChange, keyNode, mappingKey,
                 const fromPos = {
                     x: fromCx + fromLx * Math.cos(rad) - fromLy * Math.sin(rad),
                     y: fromCy + fromLx * Math.sin(rad) + fromLy * Math.cos(rad),
+                    name: edge.fromPos.name,
                 };
                 const toElement = allElements === null || allElements === void 0 ? void 0 : allElements.find((el) => el.id === edge.to);
                 if (!toElement)
@@ -245,12 +244,14 @@ export const useConnectionGraph = ({ svgRef, onEdgesChange, keyNode, mappingKey,
                 const toPos = {
                     x: toCx + toLx * Math.cos(rad2) - toLy * Math.sin(rad2),
                     y: toCy + toLx * Math.sin(rad2) + toLy * Math.cos(rad2),
+                    name: edge.toPos.name,
                 };
                 return Object.assign(Object.assign({}, edge), { from: fromElement.id, to: toElement.id, fromPos,
                     toPos });
             });
+            setEdges(transformAllEdges === null || transformAllEdges === void 0 ? void 0 : transformAllEdges.filter((el) => el !== null));
         }
-    }, [initialEdges]);
+    }, [initialEdges, components]);
     return {
         edges,
         setEdges,

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

@@ -21,6 +21,7 @@ export type EdgeType = {
         x: number;
         y: number;
     }[];
+    status?: number;
 };
 export type NodeType = {
     id: string;
@@ -61,4 +62,7 @@ export declare const renderElements: (elementEditor: ComponentProps[], mappingKe
     colorGroupSelection: string[];
     dataKey: string;
     selection: Record<number, string[]>;
+}, edges?: EdgeType[], connectionMatchKey?: {
+    key: string;
+    value: string | number;
 }) => ComponentProps[];

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

@@ -71,7 +71,11 @@ const findIndexByValue = (obj, targetValue) => {
     const foundEntry = Object.entries(obj).find(([_, values]) => values.includes(targetValue));
     return foundEntry ? Number(foundEntry[0]) : undefined;
 };
-export const renderElements = (elementEditor, mappingKey, tableMatchKey, connecting, groupSelection) => {
+export const renderElements = (elementEditor, mappingKey, tableMatchKey, connecting, groupSelection, edges, connectionMatchKey) => {
+    var _a;
+    const allIDFromIdConnection = ((_a = edges === null || edges === void 0 ? void 0 : edges.filter((edge) => edge.from === (connecting === null || connecting === void 0 ? void 0 : connecting.fromId) || edge.to === (connecting === null || connecting === void 0 ? void 0 : connecting.fromId)
+    //bikin ed.to di merge dengan ed.from
+    )) === null || _a === void 0 ? void 0 : _a.map((edge) => edge.to === (connecting === null || connecting === void 0 ? void 0 : connecting.fromId) ? edge.from : edge.to)) || [];
     return elementEditor.map((editorItem) => {
         var _a, _b;
         const isUsingMapping = mappingKey &&
@@ -84,9 +88,10 @@ export const renderElements = (elementEditor, mappingKey, tableMatchKey, connect
                 if (hasKey)
                     return item.value == (editorItem === null || editorItem === void 0 ? void 0 : editorItem[item.key]);
             });
-            // console.log({ finalProps })
             const findIndexSelection = findIndexByValue(groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.selection, finalProps === null || finalProps === void 0 ? void 0 : finalProps[groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.dataKey]);
             let fill = finalProps === null || finalProps === void 0 ? void 0 : finalProps.fill;
+            let stroke = finalProps === null || finalProps === void 0 ? void 0 : finalProps.stroke;
+            let seatFill = finalProps === null || finalProps === void 0 ? void 0 : finalProps.seatFill;
             if (findIndexSelection !== undefined) {
                 fill = groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.colorGroupSelection[findIndexSelection];
             }
@@ -94,13 +99,20 @@ export const renderElements = (elementEditor, mappingKey, tableMatchKey, connect
                 fill = (_b = tableMatch === null || tableMatch === void 0 ? void 0 : tableMatch.properties) === null || _b === void 0 ? void 0 : _b.fill;
             }
             if ((connecting === null || connecting === void 0 ? void 0 : connecting.fromId) == (finalProps === null || finalProps === void 0 ? void 0 : finalProps.id)) {
-                fill = "#7239EA";
+                fill = "#F8F5FF";
+                stroke = "#5014D0";
+            }
+            if ((allIDFromIdConnection === null || allIDFromIdConnection === void 0 ? void 0 : allIDFromIdConnection.includes(finalProps === null || finalProps === void 0 ? void 0 : finalProps.id)) && (connecting === null || connecting === void 0 ? void 0 : connecting.fromId) !== (finalProps === null || finalProps === void 0 ? void 0 : finalProps.id)) {
+                fill = "#EEF6FF";
+                stroke = "#3E97FF";
+                seatFill = "#3E97FF";
+            }
+            finalProps = Object.assign(Object.assign(Object.assign({}, finalProps), tableMatch === null || tableMatch === void 0 ? void 0 : tableMatch.properties), { fill: fill, stroke, className: tableMatch === null || tableMatch === void 0 ? void 0 : tableMatch.className, element: tableMatch === null || tableMatch === void 0 ? void 0 : tableMatch.element });
+        }
+        if (connectionMatchKey) {
+            if (!(finalProps === null || finalProps === void 0 ? void 0 : finalProps[connectionMatchKey.key])) {
+                finalProps = Object.assign(Object.assign({}, finalProps), { [connectionMatchKey.key]: editorItem === null || editorItem === void 0 ? void 0 : editorItem[connectionMatchKey.key] });
             }
-            // fill =
-            //   connecting?.fromId == finalProps?.id
-            //     ? "#7239EA"
-            //     : tableMatch?.properties?.fill ?? finalProps?.fill;
-            finalProps = Object.assign(Object.assign(Object.assign({}, finalProps), tableMatch === null || tableMatch === void 0 ? void 0 : tableMatch.properties), { fill: fill, className: tableMatch === null || tableMatch === void 0 ? void 0 : tableMatch.className, element: tableMatch === null || tableMatch === void 0 ? void 0 : tableMatch.element });
         }
         return finalProps;
     });

package/package.json

@@ -1,9 +1,12 @@
 {
   "name": "seat-editor",
-  "version": "3.6.27",
+  "version": "3.6.29",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
   "files": [
     "dist"
   ],