seat-editor 3.6.37 → 3.6.39

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

@@ -6,6 +6,7 @@ import { COLORS_SECTION, data, NODE_PROPERTIES } from "./constant";
 import { Button } from "antd";
 import { useMemo, useState } from "react";
 import { selection } from "./selection";
+import { isEmpty } from "lodash";
 export default function GraphView() {
     const [isConnecting, setIsConnecting] = useState(false);
     const [actionPrivileged, setActionPrivileged] = useState({
@@ -18,7 +19,7 @@ export default function GraphView() {
         selection: false,
         selectNode: false,
         connectingNode: true,
-        dragTransferTable: false
+        dragTransferTable: false,
     });
     const [isSelectNode, setIsSelectNode] = useState(false);
     const [sections, setSections] = useState([
@@ -109,7 +110,7 @@ export default function GraphView() {
         {
             key: "dragTransferTable",
             name: "Drag Transfer Table",
-        }
+        },
     ];
     const [dataDrag, setDataDrag] = useState(null);
     console.log({ dataDrag });
@@ -143,15 +144,15 @@ export default function GraphView() {
             setDataDrag(null);
         }
     };
-    const [edges, setEdges] = useState([]);
+    const [edges, setEdges] = useState(NODE_PROPERTIES);
     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: (edges) => {
-                        setEdges(edges);
-                    }, initialEdges: NODE_PROPERTIES, isConnectEdge: isConnecting, isSelectNode: isSelectNode, connectionMatchKey: {
+                        }, children: item.name }, item.key))) }), _jsx(LayerView, { componentProps: componentSection, statusKey: "section", defaultBackground: "#1e2d4a", mappingKey: "properties", keyNode: "nodes", onEdgesChange: (edgesd) => {
+                        // setEdges(edgesd);
+                    }, initialEdges: isEmpty(edges) ? NODE_PROPERTIES : edges, isConnectEdge: isConnecting, isSelectNode: isSelectNode, connectionMatchKey: {
                         key: "use_checking_availability",
-                        value: 0
+                        value: 0,
                     }, onTableMainConnection: (e) => {
                         console.log({ e });
                     }, 
@@ -187,6 +188,6 @@ export default function GraphView() {
                     }, showConnection: true, groupSelection: {
                         colorGroupSelection: COLORS_SECTION,
                         dataKey: "uuid_table",
-                        selection: selection
+                        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

@@ -5,6 +5,7 @@ import { COLORS_SECTION, data, NODE_PROPERTIES } from "./constant";
 import { Button } from "antd";
 import { useMemo, useState } from "react";
 import { selection } from "./selection";
+import { isEmpty } from "lodash";
 export default function GraphView() {
     const [isConnecting, setIsConnecting] = useState(false);
     const [actionPrivileged, setActionPrivileged] = useState({
@@ -17,7 +18,7 @@ export default function GraphView() {
         selection: false,
         selectNode: false,
         connectingNode: true,
-        dragTransferTable: false
+        dragTransferTable: false,
     });
     const [isSelectNode, setIsSelectNode] = useState(false);
     const [sections, setSections] = useState([
@@ -108,7 +109,7 @@ export default function GraphView() {
         {
             key: "dragTransferTable",
             name: "Drag Transfer Table",
-        }
+        },
     ];
     const [dataDrag, setDataDrag] = useState(null);
     console.log({ dataDrag });
@@ -142,7 +143,7 @@ export default function GraphView() {
             setDataDrag(null);
         }
     };
-    const [edges, setEdges] = useState([]);
+    const [edges, setEdges] = useState(NODE_PROPERTIES);
     console.log({ edges });
     return (<div className="w-full h-screen flex relative">
       <div className="flex">
@@ -153,11 +154,11 @@ export default function GraphView() {
               {item.name}
             </Button>))}
         </div>
-        <LayerView componentProps={componentSection} statusKey="section" defaultBackground="#1e2d4a" mappingKey="properties" keyNode="nodes" onEdgesChange={(edges) => {
-            setEdges(edges);
-        }} initialEdges={NODE_PROPERTIES} isConnectEdge={isConnecting} isSelectNode={isSelectNode} connectionMatchKey={{
+        <LayerView componentProps={componentSection} statusKey="section" defaultBackground="#1e2d4a" mappingKey="properties" keyNode="nodes" onEdgesChange={(edgesd) => {
+            // setEdges(edgesd);
+        }} initialEdges={isEmpty(edges) ? NODE_PROPERTIES : edges} isConnectEdge={isConnecting} isSelectNode={isSelectNode} connectionMatchKey={{
             key: "use_checking_availability",
-            value: 0
+            value: 0,
         }} onTableMainConnection={(e) => {
             console.log({ e });
         }} 
@@ -193,7 +194,7 @@ export default function GraphView() {
         }} showConnection={true} groupSelection={{
             colorGroupSelection: COLORS_SECTION,
             dataKey: "uuid_table",
-            selection: selection
+            selection: selection,
         }}/>
         <div className="w-1/5 p-4" onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave}>
           <div id="table"/>

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

@@ -48,7 +48,7 @@ export const useConnectionGraph = ({ svgRef, onEdgesChange, keyNode, mappingKey,
                     fromPos: connecting.fromPos,
                     toPos,
                     waypoints: [],
-                    status: 1
+                    status: 1,
                 },
             ];
         });
@@ -161,7 +161,7 @@ export const useConnectionGraph = ({ svgRef, onEdgesChange, keyNode, mappingKey,
         return () => window.removeEventListener("keydown", onKey);
     }, [deleteSelectedEdge, cancelConnect, cancelDragAnchor, clearSelection]);
     // ── onEdgesChange ────────────────────────────────────────────────
-    useEffect(() => {
+    const onUpdateEdges = () => {
         const sourceToTargets = new Map();
         edges.forEach((e) => {
             if (!sourceToTargets.has(e.from))
@@ -169,7 +169,8 @@ export const useConnectionGraph = ({ svgRef, onEdgesChange, keyNode, mappingKey,
             sourceToTargets.get(e.from).push(e.to);
         });
         onEdgesChange === null || onEdgesChange === void 0 ? void 0 : onEdgesChange(edges);
-    }, [edges, onEdgesChange]);
+    };
+    const hasInitialEdges = useRef(false);
     // initialize edges
     useEffect(() => {
         if (!isEqual(initialEdges, edges) && components) {
@@ -251,9 +252,16 @@ export const useConnectionGraph = ({ svgRef, onEdgesChange, keyNode, mappingKey,
                 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 });
             });
+            hasInitialEdges.current = true;
             setEdges(transformAllEdges === null || transformAllEdges === void 0 ? void 0 : transformAllEdges.filter((el) => el !== null));
         }
     }, [initialEdges, components, groupSelection, edges]);
+    useEffect(() => {
+        const isNotEqual = !isEqual(edges, initialEdges);
+        if (isNotEqual && hasInitialEdges.current) {
+            onUpdateEdges && onUpdateEdges();
+        }
+    }, [edges]);
     return {
         edges,
         setEdges,
@@ -278,6 +286,6 @@ export const useConnectionGraph = ({ svgRef, onEdgesChange, keyNode, mappingKey,
         onMouseMove,
         onMouseUp,
         selectNode,
-        clearSelectionNode
+        clearSelectionNode,
     };
 };

package/package.json

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