seat-editor 3.6.34 → 3.6.35

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

@@ -301,6 +301,23 @@ export declare const data: ({
     updated_by: string;
 })[];
 export declare const COLORS_SECTION: string[];
+export declare const NODE_PROPERTIES: {
+    id: string;
+    to: string;
+    from: string;
+    toPos: {
+        x: number;
+        y: number;
+        name: string;
+    };
+    status: number;
+    fromPos: {
+        x: number;
+        y: number;
+        name: string;
+    };
+    waypoints: any[];
+}[];
 export declare const background: {
     x: number;
     y: number;

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

@@ -2930,6 +2930,93 @@ export const COLORS_SECTION = [
     "#FBC6D3",
     "#D5C4F9",
 ];
+export const NODE_PROPERTIES = [
+    {
+        id: "edge-1783410035523",
+        to: "01bbb9f3-cdec-4e8a-8515-fce4b603a10a",
+        from: "6da49554-e25e-43c5-8873-b8df3d8ce389",
+        toPos: {
+            x: 2431,
+            y: 463,
+            name: "left",
+        },
+        status: 1,
+        fromPos: {
+            x: 2484,
+            y: 321,
+            name: "bottom",
+        },
+        waypoints: [],
+    },
+    {
+        id: "edge-1783410036151",
+        to: "c5aab141-cb77-46cc-bed1-a2222eac9ed9",
+        from: "6da49554-e25e-43c5-8873-b8df3d8ce389",
+        toPos: {
+            x: 2351,
+            y: 459,
+            name: "left",
+        },
+        status: 1,
+        fromPos: {
+            x: 2484,
+            y: 321,
+            name: "bottom",
+        },
+        waypoints: [],
+    },
+    {
+        id: "edge-1783410036683",
+        to: "72477b41-bb67-4969-b622-f2ff5e3d5328",
+        from: "6da49554-e25e-43c5-8873-b8df3d8ce389",
+        toPos: {
+            x: 2279,
+            y: 460,
+            name: "left",
+        },
+        status: 1,
+        fromPos: {
+            x: 2484,
+            y: 321,
+            name: "bottom",
+        },
+        waypoints: [],
+    },
+    {
+        id: "edge-1783410037651",
+        to: "73ef9906-5776-471a-98d6-86190bf32a72",
+        from: "6da49554-e25e-43c5-8873-b8df3d8ce389",
+        toPos: {
+            x: 2126,
+            y: 458,
+            name: "right",
+        },
+        status: 1,
+        fromPos: {
+            x: 2484,
+            y: 321,
+            name: "bottom",
+        },
+        waypoints: [],
+    },
+    {
+        id: "edge-1783410038349",
+        to: "443e4d6e-1090-4302-9f22-7e254b3e941b",
+        from: "6da49554-e25e-43c5-8873-b8df3d8ce389",
+        toPos: {
+            x: 1978,
+            y: 458,
+            name: "left",
+        },
+        status: 1,
+        fromPos: {
+            x: 2484,
+            y: 321,
+            name: "bottom",
+        },
+        waypoints: [],
+    },
+];
 export const background = [
     {
         x: 1108,

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

@@ -2,9 +2,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
 import LayerView from "../../features/view-only-5";
-import { data } from "./constant";
+import { COLORS_SECTION, data, NODE_PROPERTIES } 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({
@@ -149,9 +150,11 @@ export default function GraphView() {
                         }, 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: {
+                    }, initialEdges: NODE_PROPERTIES, isConnectEdge: isConnecting, isSelectNode: isSelectNode, connectionMatchKey: {
                         key: "use_checking_availability",
                         value: 0
+                    }, onTableMainConnection: (e) => {
+                        console.log({ e });
                     }, 
                     // extraComponentProps={background}
                     onSelectComponent: handleSelectItem, 
@@ -182,5 +185,9 @@ export default function GraphView() {
                         console.log({ e, data });
                     }, allowTooltip: true, onHoldTable: (e, data) => {
                         console.log({ e, data });
-                    }, showConnection: true }), _jsxs("div", { className: "w-1/5 p-4", onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, children: [_jsx("div", { id: "table" }), _jsxs("div", { className: "rounded-lg bg-white p-4", children: [_jsx("h1", { className: "text-2xl font-bold", children: "Section" }), sections.map((section) => (_jsxs("div", { className: clsx("font-bold text-white rounded-md p-2 cursor-pointer", sectionActive === section.id && "!bg-blue-500"), style: { backgroundColor: section.color }, onClick: () => setSectionActive(section.id), children: [_jsx("h2", { className: "text-lg", children: section.name }), section.items.length > 0 && (_jsx("ul", { className: "list-disc pl-5 bg-opacity-50 bg-white p-2 rounded ", children: section.items.map((item) => (_jsx("li", { children: item.name }, item.id))) }))] }, section.id)))] })] }), _jsx("div", { className: "w-1/5 p-4", children: _jsx("div", { className: "rounded-lg bg-white p-4", children: _jsx("h1", { className: "text-2xl font-bold", children: "Nodes" }) }) })] }) }));
+                    }, showConnection: true, groupSelection: {
+                        colorGroupSelection: COLORS_SECTION,
+                        dataKey: "uuid_table",
+                        selection: selection
+                    } }), _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,9 +1,10 @@
 "use client";
 import clsx from "clsx";
 import LayerView from "../../features/view-only-5";
-import { data } from "./constant";
+import { COLORS_SECTION, data, NODE_PROPERTIES } 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({
@@ -155,9 +156,11 @@ export default function GraphView() {
         <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={{
+        }} initialEdges={NODE_PROPERTIES} isConnectEdge={isConnecting} isSelectNode={isSelectNode} connectionMatchKey={{
             key: "use_checking_availability",
             value: 0
+        }} onTableMainConnection={(e) => {
+            console.log({ e });
         }} 
     // extraComponentProps={background}
     onSelectComponent={handleSelectItem} 
@@ -188,7 +191,11 @@ export default function GraphView() {
             console.log({ e, data });
         }} allowTooltip={true} onHoldTable={(e, data) => {
             console.log({ e, data });
-        }} showConnection={true}/>
+        }} showConnection={true} groupSelection={{
+            colorGroupSelection: COLORS_SECTION,
+            dataKey: "uuid_table",
+            selection: selection
+        }}/>
         <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/index.js

@@ -651,7 +651,8 @@ const LayerView = (props) => {
         tableMatchKey,
         statusKey,
         initialEdges: props === null || props === void 0 ? void 0 : props.initialEdges,
-        onTableMainConnection: props === null || props === void 0 ? void 0 : props.onTableMainConnection
+        onTableMainConnection: props === null || props === void 0 ? void 0 : props.onTableMainConnection,
+        groupSelection
     });
     // ─── Render ───────────────────────────────────────────────────────────────
     const hasBoundingBox = hasBoundingBoxRef.current;
@@ -693,10 +694,7 @@ const LayerView = (props) => {
                                     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: (_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);
-                                            onTableMainConnection && onTableMainConnection(nodeId);
-                                        }, 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

@@ -650,7 +650,8 @@ const LayerView = (props) => {
         tableMatchKey,
         statusKey,
         initialEdges: props === null || props === void 0 ? void 0 : props.initialEdges,
-        onTableMainConnection: props === null || props === void 0 ? void 0 : props.onTableMainConnection
+        onTableMainConnection: props === null || props === void 0 ? void 0 : props.onTableMainConnection,
+        groupSelection
     });
     // ─── Render ───────────────────────────────────────────────────────────────
     const hasBoundingBox = hasBoundingBoxRef.current;
@@ -714,10 +715,7 @@ const LayerView = (props) => {
             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={(_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);
-                    onTableMainConnection && onTableMainConnection(nodeId);
-                }} 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.d.ts

@@ -14,8 +14,13 @@ export type UseConnectionGraphOptions = {
     showConnection?: boolean;
     initialEdges?: EdgeType[];
     onTableMainConnection?: (id: string | null) => void;
+    groupSelection?: {
+        colorGroupSelection: string[];
+        dataKey: string;
+        selection: Record<number, string[]>;
+    };
 };
-export declare const useConnectionGraph: ({ svgRef, onEdgesChange, keyNode, mappingKey, initialEdges, onTableMainConnection }: UseConnectionGraphOptions) => {
+export declare const useConnectionGraph: ({ svgRef, onEdgesChange, keyNode, mappingKey, initialEdges, onTableMainConnection, groupSelection, }: UseConnectionGraphOptions) => {
     edges: EdgeType[];
     setEdges: React.Dispatch<React.SetStateAction<EdgeType[]>>;
     selectedEdge: string;

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

@@ -3,7 +3,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, onTableMainConnection }) => {
+export const useConnectionGraph = ({ svgRef, onEdgesChange, keyNode, mappingKey, initialEdges, onTableMainConnection, groupSelection, }) => {
     const components = useAppSelector((state) => state.board.components);
     const [edges, setEdges] = useState([]);
     const [selectedEdge, setSelectedEdge] = useState(null);
@@ -27,6 +27,7 @@ export const useConnectionGraph = ({ svgRef, onEdgesChange, keyNode, mappingKey,
     const startConnect = useCallback((fromId, fromPos) => {
         setConnecting({ fromId, fromPos });
         setSelectedEdge(null);
+        onTableMainConnection(fromId);
     }, []);
     const endConnect = useCallback((toId, toPos) => {
         if (!connecting || connecting.fromId === toId) {
@@ -179,12 +180,13 @@ export const useConnectionGraph = ({ svgRef, onEdgesChange, keyNode, mappingKey,
             //process initial edges
             const allElements = components === null || components === void 0 ? void 0 : components.map((table) => {
                 if (mappingKey && (table === null || table === void 0 ? void 0 : table[mappingKey])) {
-                    return Object.assign({}, table);
+                    return Object.assign({}, table === null || table === void 0 ? void 0 : table[mappingKey]);
                 }
                 return Object.assign({}, table);
             });
             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);
+                var _a, _b;
+                const fromElement = allElements === null || allElements === void 0 ? void 0 : allElements.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) === edge.from; });
                 if (!fromElement)
                     return null;
                 const { x: fromX, y: fromY, rotation: fromRotation, width: fromWidth, height: fromHeight, } = fromElement;
@@ -199,15 +201,15 @@ export const useConnectionGraph = ({ svgRef, onEdgesChange, keyNode, mappingKey,
                     fromLx = 0;
                     fromLy = -fromHh;
                 }
-                else if (connecting.fromPos.name === "right") {
+                else if (edge.fromPos.name === "right") {
                     fromLx = fromHw;
                     fromLy = 0;
                 }
-                else if (connecting.fromPos.name === "bottom") {
+                else if (edge.fromPos.name === "bottom") {
                     fromLx = 0;
                     fromLy = fromHh;
                 }
-                else if (connecting.fromPos.name === "left") {
+                else if (edge.fromPos.name === "left") {
                     fromLx = -fromHw;
                     fromLy = 0;
                 }
@@ -217,7 +219,7 @@ export const useConnectionGraph = ({ svgRef, onEdgesChange, keyNode, mappingKey,
                     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);
+                const toElement = allElements === null || allElements === void 0 ? void 0 : allElements.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) === edge.to; });
                 if (!toElement)
                     return null;
                 const { x: toX, y: toY, rotation: toRotation, width: toWidth, height: toHeight, } = toElement;
@@ -250,12 +252,12 @@ export const useConnectionGraph = ({ svgRef, onEdgesChange, keyNode, mappingKey,
                     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,
+                return Object.assign(Object.assign({}, edge), { from: (_a = fromElement === null || fromElement === void 0 ? void 0 : fromElement[groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.dataKey]) !== null && _a !== void 0 ? _a : fromElement.id, to: (_b = toElement === null || toElement === void 0 ? void 0 : toElement[groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.dataKey]) !== null && _b !== void 0 ? _b : toElement.id, fromPos,
                     toPos });
             });
             setEdges(transformAllEdges === null || transformAllEdges === void 0 ? void 0 : transformAllEdges.filter((el) => el !== null));
         }
-    }, [initialEdges, components]);
+    }, [initialEdges, components, groupSelection, edges]);
     return {
         edges,
         setEdges,

package/package.json

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