seat-editor 3.6.26 → 3.6.28

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({
@@ -17,7 +16,7 @@ export default function GraphView() {
         double: false,
         selection: false,
         selectNode: false,
-        connectingNode: false,
+        connectingNode: true,
         dragTransferTable: false
     });
     const [isSelectNode, setIsSelectNode] = useState(false);
@@ -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));
@@ -145,31 +147,38 @@ export default function GraphView() {
     };
     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: (table, edges) => console.log({ edges, table }), 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 });
-                    } }), _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" }) }) })] }) }));
+                    }, 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

@@ -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({
@@ -16,7 +15,7 @@ export default function GraphView() {
         double: false,
         selection: false,
         selectNode: false,
-        connectingNode: false,
+        connectingNode: true,
         dragTransferTable: false
     });
     const [isSelectNode, setIsSelectNode] = useState(false);
@@ -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));
@@ -151,33 +153,40 @@ 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={(table, edges) => console.log({ edges, table })} 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 });
-        }}/>
+        }} 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,15 +77,13 @@ export const ConnectHandle = ({ cx, cy, width, height, nodeId, rotation = 0, isC
             onStartConnect(nodeId, worldPos);
         }
     };
-    return (_jsxs("g", { transform: `translate(${cx}, ${cy}) rotate(${rotation})`, children: [_jsx("rect", { x: -hw - 4, y: -hh - 4, width: width + 8, height: height + 8, fill: "transparent", stroke: isActive ? "#a78bfa" : hovered ? "#38bdf8" : "transparent", strokeWidth: isActive ? 2 : 1.5, strokeDasharray: isActive ? "4 2" : "none", rx: 4, style: { pointerEvents: "none" } }), _jsx("rect", { x: -hw - 4, y: -hh - 4, width: width + 8, height: height + 8, fill: "transparent", style: {
+    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 && (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) => {
-                    // 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)))] }));
+                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

@@ -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,25 +76,23 @@ 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" }}/>
+      <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={{
             cursor: isConnectEdge ? "crosshair" : "pointer",
             pointerEvents: isConnectEdge ? "all" : "none",
         }} onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)} onPointerDown={(e) => {
-            // console.log({ isConnectEdge, isSelectNode });
-            // console.log({ isConnectEdge, isSelectNode })
-            // if (!isConnectEdge ) return;
-            // if (!isSelectNode) return;
             handlePointerDown(e);
         }}/>
 
       {/* Anchor dots — muncul saat hover atau active */}
       {((hovered && isConnectEdge) || isActive) &&
-            anchors.map((a, i) => (<circle key={i} cx={a.x} cy={a.y} r={3} fill={isActive ? "#a78bfa" : "#38bdf8"} opacity={0.5} style={{ pointerEvents: "none" }}/>))}
+            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

@@ -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,17 @@ type Props = {
     onStartDragAnchor: (e: React.MouseEvent, edgeId: string, side: "from" | "to") => void;
     isConnectEdge: boolean;
     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 {};