seat-editor 3.6.38 → 3.6.40

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

@@ -161,102 +161,109 @@ 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))
                 sourceToTargets.set(e.from, []);
             sourceToTargets.get(e.from).push(e.to);
         });
-        const isNotEqual = !isEqual(edges, initialEdges);
-        if (isNotEqual) {
-            onEdgesChange === null || onEdgesChange === void 0 ? void 0 : onEdgesChange(edges);
-        }
-    }, [edges, onEdgesChange]);
-    // initialize edges
+        onEdgesChange === null || onEdgesChange === void 0 ? void 0 : onEdgesChange(edges);
+    };
+    const hasInitialEdges = useRef(false);
+    // 1. useEffect Inisialisasi: Jalankan HANYA jika belum diinisialisasi
+    useEffect(() => {
+        // Jika sudah pernah inisialisasi atau data belum siap, jangan jalankan lagi
+        if (hasInitialEdges.current || !(initialEdges === null || initialEdges === void 0 ? void 0 : initialEdges.length) || !components)
+            return;
+        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 === null || table === void 0 ? void 0 : table[mappingKey]);
+            }
+            return Object.assign({}, table);
+        });
+        const transformAllEdges = initialEdges === null || initialEdges === void 0 ? void 0 : initialEdges.map((edge) => {
+            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;
+            const fromRotated = rotatePoint(fromWidth / 2, fromHeight / 2, fromRotation !== null && fromRotation !== void 0 ? fromRotation : 0);
+            const fromCx = fromX + fromRotated.x;
+            const fromCy = fromY + fromRotated.y;
+            let fromLx = 0, fromLy = 0;
+            const fromHw = fromWidth / 2;
+            const fromHh = fromHeight / 2;
+            if (edge.fromPos.name === "top") {
+                fromLx = 0;
+                fromLy = -fromHh;
+            }
+            else if (edge.fromPos.name === "right") {
+                fromLx = fromHw;
+                fromLy = 0;
+            }
+            else if (edge.fromPos.name === "bottom") {
+                fromLx = 0;
+                fromLy = fromHh;
+            }
+            else if (edge.fromPos.name === "left") {
+                fromLx = -fromHw;
+                fromLy = 0;
+            }
+            const rad = ((fromRotation !== null && fromRotation !== void 0 ? fromRotation : 0) * Math.PI) / 180;
+            const fromPos = {
+                x: fromCx + fromLx * Math.cos(rad) - fromLy * Math.sin(rad),
+                y: fromCy + fromLx * Math.sin(rad) + fromLy * Math.cos(rad),
+                name: edge.fromPos.name,
+            };
+            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;
+            const toRotated = rotatePoint(toWidth / 2, toHeight / 2, toRotation !== null && toRotation !== void 0 ? toRotation : 0);
+            const toCx = toX + toRotated.x;
+            const toCy = toY + toRotated.y;
+            let toLx = 0, toLy = 0;
+            const toHw = toWidth / 2;
+            const toHh = toHeight / 2;
+            if (edge.toPos.name === "top") {
+                toLx = 0;
+                toLy = -toHh;
+            }
+            else if (edge.toPos.name === "right") {
+                toLx = toHw;
+                toLy = 0;
+            }
+            else if (edge.toPos.name === "bottom") {
+                toLx = 0;
+                toLy = toHh;
+            }
+            else if (edge.toPos.name === "left") {
+                toLx = -toHw;
+                toLy = 0;
+            }
+            const rad2 = ((toRotation !== null && toRotation !== void 0 ? toRotation : 0) * Math.PI) / 180;
+            const toPos = {
+                x: toCx + toLx * Math.cos(rad2) - toLy * Math.sin(rad2),
+                y: toCy + toLx * Math.sin(rad2) + toLy * Math.cos(rad2),
+                name: edge.toPos.name,
+            };
+            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 });
+        });
+        const filteredEdges = transformAllEdges === null || transformAllEdges === void 0 ? void 0 : transformAllEdges.filter((el) => el !== null);
+        // Tandai bahwa inisialisasi sukses sebelum setEdges agar useEffect kedua tidak kaget
+        hasInitialEdges.current = true;
+        setEdges(filteredEdges);
+    }, [initialEdges, components, groupSelection, mappingKey]); // Hapus 'edges' dari sini
+    // 2. useEffect Trigger Perubahan: Hanya kirim ke parent jika user memicu perubahan baru
     useEffect(() => {
-        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])) {
-                    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) => {
-                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;
-                const fromRotated = rotatePoint(fromWidth / 2, fromHeight / 2, fromRotation !== null && fromRotation !== void 0 ? fromRotation : 0);
-                const fromCx = fromX + fromRotated.x;
-                const fromCy = fromY + fromRotated.y;
-                let fromLx = 0;
-                let fromLy = 0;
-                const fromHw = fromWidth / 2;
-                const fromHh = fromHeight / 2;
-                if (edge.fromPos.name === "top") {
-                    fromLx = 0;
-                    fromLy = -fromHh;
-                }
-                else if (edge.fromPos.name === "right") {
-                    fromLx = fromHw;
-                    fromLy = 0;
-                }
-                else if (edge.fromPos.name === "bottom") {
-                    fromLx = 0;
-                    fromLy = fromHh;
-                }
-                else if (edge.fromPos.name === "left") {
-                    fromLx = -fromHw;
-                    fromLy = 0;
-                }
-                const rad = (fromRotation * Math.PI) / 180;
-                const fromPos = {
-                    x: fromCx + fromLx * Math.cos(rad) - fromLy * Math.sin(rad),
-                    y: fromCy + fromLx * Math.sin(rad) + fromLy * Math.cos(rad),
-                    name: edge.fromPos.name,
-                };
-                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;
-                const toRotated = rotatePoint(toWidth / 2, toHeight / 2, toRotation !== null && toRotation !== void 0 ? toRotation : 0);
-                const toCx = toX + toRotated.x;
-                const toCy = toY + toRotated.y;
-                let toLx = 0;
-                let toLy = 0;
-                const toHw = toWidth / 2;
-                const toHh = toHeight / 2;
-                if (edge.toPos.name === "top") {
-                    toLx = 0;
-                    toLy = -toHh;
-                }
-                else if (edge.toPos.name === "right") {
-                    toLx = toHw;
-                    toLy = 0;
-                }
-                else if (edge.toPos.name === "bottom") {
-                    toLx = 0;
-                    toLy = toHh;
-                }
-                else if (edge.toPos.name === "left") {
-                    toLx = -toHw;
-                    toLy = 0;
-                }
-                const rad2 = (toRotation * Math.PI) / 180;
-                const toPos = {
-                    x: toCx + toLx * Math.cos(rad2) - toLy * Math.sin(rad2),
-                    y: toCy + toLx * Math.sin(rad2) + toLy * Math.cos(rad2),
-                    name: edge.toPos.name,
-                };
-                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));
+        // Hanya panggil onUpdateEdges jika inisialisasi awal sudah selesai 
+        // DAN data edges saat ini memang berbeda dari initialEdges bawaan parent
+        if (hasInitialEdges.current && !isEqual(edges, initialEdges)) {
+            onUpdateEdges === null || onUpdateEdges === void 0 ? void 0 : onUpdateEdges();
         }
-    }, [initialEdges, components, groupSelection, edges]);
+    }, [edges]);
     return {
         edges,
         setEdges,

package/package.json

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