seat-editor 3.6.28 → 3.6.30

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

@@ -35,13 +35,10 @@ export default function GraphView() {
         },
     ]);
     const [sectionActive, setSectionActive] = useState(null);
-    const componentSection = useMemo(() => {
+    const componentSection = useMemo(() => data === null || data === void 0 ? void 0 : data.map((data) => {
         var _a;
-        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]);
+        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]);
     const onMakeSelection = (datas) => {
         setSections((prev) => {
             const uuidSet = new Set(datas.map((d) => d.uuid_table));
@@ -145,11 +142,16 @@ 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, connectionMatchKey: {
-                        key: "use_connection",
-                        value: 1
+                        }, 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_checking_availability",
+                        value: 0
                     }, 
                     // extraComponentProps={background}
                     onSelectComponent: handleSelectItem, 

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

@@ -34,13 +34,10 @@ export default function GraphView() {
         },
     ]);
     const [sectionActive, setSectionActive] = useState(null);
-    const componentSection = useMemo(() => {
+    const componentSection = useMemo(() => data === null || data === void 0 ? void 0 : data.map((data) => {
         var _a;
-        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]);
+        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]);
     const onMakeSelection = (datas) => {
         setSections((prev) => {
             const uuidSet = new Set(datas.map((d) => d.uuid_table));
@@ -144,6 +141,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">
@@ -153,9 +152,12 @@ 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} connectionMatchKey={{
-            key: "use_connection",
-            value: 1
+        <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_checking_availability",
+            value: 0
         }} 
     // extraComponentProps={background}
     onSelectComponent={handleSelectItem} 

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

@@ -71,9 +71,13 @@ export const ConnectHandle = ({ cx, cy, width, height, nodeId, rotation = 0, isC
         }
         else if (isActive) {
             onEndConnect(nodeId, worldPos);
+            onSelectEdge && onSelectEdge("");
+            onSelectNode && onSelectNode("");
             return;
         }
         else {
+            onSelectNode && onSelectNode("");
+            onSelectEdge && onSelectEdge("");
             onStartConnect(nodeId, worldPos);
         }
     };

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

@@ -70,9 +70,13 @@ export const ConnectHandle = ({ cx, cy, width, height, nodeId, rotation = 0, isC
         }
         else if (isActive) {
             onEndConnect(nodeId, worldPos);
+            onSelectEdge && onSelectEdge("");
+            onSelectNode && onSelectNode("");
             return;
         }
         else {
+            onSelectNode && onSelectNode("");
+            onSelectEdge && onSelectEdge("");
             onStartConnect(nodeId, worldPos);
         }
     };

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

@@ -41,6 +41,7 @@ type Props = {
         key: string;
         value: string | number;
     };
+    isSelectNode?: boolean;
 };
 export declare const ConnectionLayer: React.FC<Props>;
 export {};

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

@@ -45,7 +45,7 @@ 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, groupSelection, connectionMatchKey, }) => {
+export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAnchor, mousePos, isConnectEdge, getNodeById, onSelectEdge, onDeleteEdge, onStartDragWaypoint, onInsertWaypoint, onRemoveWaypoint, onStartDragAnchor, selectedNodeId, showConnection, renderedElements, groupSelection, connectionMatchKey, isSelectNode }) => {
     const [hoveredEdge, setHoveredEdge] = useState(null);
     const tableMatchConnectionKey = useMemo(() => renderedElements === null || renderedElements === void 0 ? void 0 : renderedElements.filter((el) => {
         if (connectionMatchKey) {
@@ -53,6 +53,7 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
         }
         return true;
     }), [renderedElements, connectionMatchKey]);
+    console.log("tableMatchConnectionKey", tableMatchConnectionKey);
     const nodeHighlightMap = useMemo(() => {
         if (!selectedEdge)
             return new Map();
@@ -62,7 +63,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 +74,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,7 +113,22 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
     if (!showConnection) {
         return null;
     }
-    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)
+                    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 (_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)
@@ -146,8 +168,9 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
                 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 fromLevel = nodeHighlightMap.get(edge.from);
+                // const toLevel = nodeHighlightMap.get(edge.to);
+                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";
@@ -155,7 +178,11 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
                 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: connectionMatch ? "#F1416C" : "#7239EA", strokeWidth: isSel ? 2 : isHov ? 2 : 1.5, fill: "none", opacity: isRing1 && selectedNodeId ? 1 : 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) => {
+                            }, 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: 3, fill: connectionMatch ? "#F1416C" : "#7239EA", 

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

@@ -44,7 +44,7 @@ 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, groupSelection, connectionMatchKey, }) => {
+export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAnchor, mousePos, isConnectEdge, getNodeById, onSelectEdge, onDeleteEdge, onStartDragWaypoint, onInsertWaypoint, onRemoveWaypoint, onStartDragAnchor, selectedNodeId, showConnection, renderedElements, groupSelection, connectionMatchKey, isSelectNode }) => {
     const [hoveredEdge, setHoveredEdge] = useState(null);
     const tableMatchConnectionKey = useMemo(() => renderedElements === null || renderedElements === void 0 ? void 0 : renderedElements.filter((el) => {
         if (connectionMatchKey) {
@@ -52,6 +52,7 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
         }
         return true;
     }), [renderedElements, connectionMatchKey]);
+    console.log("tableMatchConnectionKey", tableMatchConnectionKey);
     const nodeHighlightMap = useMemo(() => {
         if (!selectedEdge)
             return new Map();
@@ -61,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) {
@@ -72,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) => {
@@ -106,6 +113,26 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
         return null;
     }
     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;
@@ -186,8 +213,9 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
             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 fromLevel = nodeHighlightMap.get(edge.from);
+            // const toLevel = nodeHighlightMap.get(edge.to);
+            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";
@@ -204,50 +232,54 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
 
             {/* Curve */}
 
-            <path d={pathD} stroke={connectionMatch ? "#F1416C" : "#7239EA"} strokeWidth={isSel ? 2 : isHov ? 2 : 1.5} fill={"none"} opacity={isRing1 && selectedNodeId ? 1 : 0.3} 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="#7239EA" opacity={0.15} style={{ pointerEvents: "none" }}/>)}
-                <circle cx={fromPos.x} cy={fromPos.y} r={10} fill="transparent" style={{ cursor: "grab" }} onMouseDown={(e) => {
+            <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"} 
+              <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>
+              {/* <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="#7239EA" opacity={0.15} style={{ pointerEvents: "none" }}/>)}
-                <circle cx={toPos.x} cy={toPos.y} r={10} fill="transparent" style={{ cursor: "grab" }} onMouseDown={(e) => {
+            <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"} 
+              <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>
+              {/* <circle
+                    cx={toPos.x}
+                    cy={toPos.y}
+                    r={2.5}
+                    fill="#0f172a"
+                    style={{ pointerEvents: "none" }}
+                  /> */}
+            </g>
             {/* )} */}
 
             {/* Waypoints */}

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

@@ -120,6 +120,7 @@ export interface LayerViewProps<TMeta = undefined> {
         key: string;
         value: string | number;
     };
+    onTableMainConnection?: (id: string) => void;
 }
 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, connectionMatchKey } = props;
+    }, onMakeSelection, groupSelection, onHoldTable, showConnection, connectionMatchKey, onTableMainConnection } = props;
     const widthTooltip = (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.minWidth) || 168;
     const tableGhost = useRef(null);
     const hoverUnderghostId = useRef(null);
@@ -687,12 +687,15 @@ 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, groupSelection: groupSelection, connectionMatchKey: connectionMatchKey }), renderedElements.map((item) => {
+                                        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, isSelectNode: actionPrivileged.selectNode }), 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: (_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) => {
+                                        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) => {
                                             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, connectionMatchKey } = props;
+    }, onMakeSelection, groupSelection, onHoldTable, showConnection, connectionMatchKey, onTableMainConnection } = props;
     const widthTooltip = (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.minWidth) || 168;
     const tableGhost = useRef(null);
     const hoverUnderghostId = useRef(null);
@@ -706,14 +706,17 @@ 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} groupSelection={groupSelection} connectionMatchKey={connectionMatchKey}/>
+            <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} isSelectNode={actionPrivileged.selectNode}/>
 
             {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 (<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)} 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);
+                    onTableMainConnection && onTableMainConnection(nodeId);
+                }} onEndConnect={(nodeId, clickPos) => {
                     if (graph.draggingAnchor)
                         graph.updateAnchor(nodeId, clickPos);
                     else

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

@@ -60,4 +60,5 @@ export declare const useConnectionGraph: ({ svgRef, onEdgesChange, keyNode, mapp
     onMouseMove: (e: React.MouseEvent<SVGSVGElement>) => void;
     onMouseUp: () => void;
     selectNode: (nodeId: string) => void;
+    clearSelectionNode: () => void;
 };

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([]);
@@ -137,6 +138,7 @@ export const useConnectionGraph = ({ svgRef, onEdgesChange, keyNode, mappingKey,
             deleteEdge(selectedEdge);
     }, [selectedEdge, deleteEdge]);
     const clearSelection = useCallback(() => setSelectedEdge(null), []);
+    const clearSelectionNode = useCallback(() => setSelectedNode(null), []);
     // ── Keyboard ─────────────────────────────────────────────────────
     useEffect(() => {
         const onKey = (e) => {
@@ -149,6 +151,7 @@ export const useConnectionGraph = ({ svgRef, onEdgesChange, keyNode, mappingKey,
                 cancelConnect();
                 cancelDragAnchor();
                 clearSelection();
+                clearSelectionNode();
             }
         };
         window.addEventListener("keydown", onKey);
@@ -170,8 +173,7 @@ export const useConnectionGraph = ({ svgRef, onEdgesChange, keyNode, mappingKey,
     }, [edges]);
     // initialize edges
     useEffect(() => {
-        var _a;
-        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])) {
@@ -179,10 +181,7 @@ export const useConnectionGraph = ({ svgRef, onEdgesChange, keyNode, mappingKey,
                 }
                 return Object.assign({}, table);
             });
-            // const findSourceTarget = allElements?.find(
-            //   (el) => el.id === connecting.fromId
-            // );
-            const transformAllEdges = (_a = initialEdges === null || initialEdges === void 0 ? void 0 : initialEdges.filter((edge) => (edge === null || edge === void 0 ? void 0 : edge.status) === 1)) === null || _a === void 0 ? void 0 : _a.map((edge) => {
+            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)
                     return null;
@@ -254,7 +253,7 @@ export const useConnectionGraph = ({ svgRef, onEdgesChange, keyNode, mappingKey,
             });
             setEdges(transformAllEdges === null || transformAllEdges === void 0 ? void 0 : transformAllEdges.filter((el) => el !== null));
         }
-    }, [initialEdges]);
+    }, [initialEdges, components]);
     return {
         edges,
         setEdges,
@@ -279,5 +278,6 @@ export const useConnectionGraph = ({ svgRef, onEdgesChange, keyNode, mappingKey,
         onMouseMove,
         onMouseUp,
         selectNode,
+        clearSelectionNode
     };
 };

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

@@ -110,8 +110,10 @@ export const renderElements = (elementEditor, mappingKey, tableMatchKey, connect
             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) {
+            console.log("finalProps?.[connectionMatchKey.key]", finalProps, finalProps === null || finalProps === void 0 ? void 0 : finalProps[connectionMatchKey.key]);
             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] });
+                console.log("finalProps?.[connectionMatchKey.key]", finalProps, finalProps === null || finalProps === void 0 ? void 0 : finalProps[connectionMatchKey.key]);
             }
         }
         return finalProps;

package/package.json

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