seat-editor 3.6.29 → 3.6.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -35,13 +35,10 @@ export default function GraphView() {
35
35
  },
36
36
  ]);
37
37
  const [sectionActive, setSectionActive] = useState(null);
38
- const componentSection = useMemo(() => {
38
+ const componentSection = useMemo(() => data === null || data === void 0 ? void 0 : data.map((data) => {
39
39
  var _a;
40
- return (_a = data === null || data === void 0 ? void 0 : data.map((data) => {
41
- var _a;
42
- 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 }));
43
- })) === null || _a === void 0 ? void 0 : _a.slice(0, 10);
44
- }, [data, sections]);
40
+ 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 }));
41
+ }), [data, sections]);
45
42
  const onMakeSelection = (datas) => {
46
43
  setSections((prev) => {
47
44
  const uuidSet = new Set(datas.map((d) => d.uuid_table));
@@ -153,8 +150,8 @@ export default function GraphView() {
153
150
  console.log(edges, "edges");
154
151
  setEdges(edges);
155
152
  }, initialEdges: edges, isConnectEdge: isConnecting, isSelectNode: isSelectNode, connectionMatchKey: {
156
- key: "use_connection",
157
- value: 1
153
+ key: "use_checking_availability",
154
+ value: 0
158
155
  },
159
156
  // extraComponentProps={background}
160
157
  onSelectComponent: handleSelectItem,
@@ -34,13 +34,10 @@ export default function GraphView() {
34
34
  },
35
35
  ]);
36
36
  const [sectionActive, setSectionActive] = useState(null);
37
- const componentSection = useMemo(() => {
37
+ const componentSection = useMemo(() => data === null || data === void 0 ? void 0 : data.map((data) => {
38
38
  var _a;
39
- return (_a = data === null || data === void 0 ? void 0 : data.map((data) => {
40
- var _a;
41
- 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 }));
42
- })) === null || _a === void 0 ? void 0 : _a.slice(0, 10);
43
- }, [data, sections]);
39
+ 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 }));
40
+ }), [data, sections]);
44
41
  const onMakeSelection = (datas) => {
45
42
  setSections((prev) => {
46
43
  const uuidSet = new Set(datas.map((d) => d.uuid_table));
@@ -159,8 +156,8 @@ export default function GraphView() {
159
156
  console.log(edges, "edges");
160
157
  setEdges(edges);
161
158
  }} initialEdges={edges} isConnectEdge={isConnecting} isSelectNode={isSelectNode} connectionMatchKey={{
162
- key: "use_connection",
163
- value: 1
159
+ key: "use_checking_availability",
160
+ value: 0
164
161
  }}
165
162
  // extraComponentProps={background}
166
163
  onSelectComponent={handleSelectItem}
@@ -71,9 +71,13 @@ export const ConnectHandle = ({ cx, cy, width, height, nodeId, rotation = 0, isC
71
71
  }
72
72
  else if (isActive) {
73
73
  onEndConnect(nodeId, worldPos);
74
+ onSelectEdge && onSelectEdge("");
75
+ onSelectNode && onSelectNode("");
74
76
  return;
75
77
  }
76
78
  else {
79
+ onSelectNode && onSelectNode("");
80
+ onSelectEdge && onSelectEdge("");
77
81
  onStartConnect(nodeId, worldPos);
78
82
  }
79
83
  };
@@ -70,9 +70,13 @@ export const ConnectHandle = ({ cx, cy, width, height, nodeId, rotation = 0, isC
70
70
  }
71
71
  else if (isActive) {
72
72
  onEndConnect(nodeId, worldPos);
73
+ onSelectEdge && onSelectEdge("");
74
+ onSelectNode && onSelectNode("");
73
75
  return;
74
76
  }
75
77
  else {
78
+ onSelectNode && onSelectNode("");
79
+ onSelectEdge && onSelectEdge("");
76
80
  onStartConnect(nodeId, worldPos);
77
81
  }
78
82
  };
@@ -41,6 +41,7 @@ type Props = {
41
41
  key: string;
42
42
  value: string | number;
43
43
  };
44
+ isSelectNode?: boolean;
44
45
  };
45
46
  export declare const ConnectionLayer: React.FC<Props>;
46
47
  export {};
@@ -45,7 +45,7 @@ const quadraticMidpoint = (from, to) => {
45
45
  y: mt * mt * from.y + 2 * mt * t * cpy + t * t * to.y,
46
46
  };
47
47
  };
48
- export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAnchor, mousePos, isConnectEdge, getNodeById, onSelectEdge, onDeleteEdge, onStartDragWaypoint, onInsertWaypoint, onRemoveWaypoint, onStartDragAnchor, selectedNodeId, showConnection, renderedElements, groupSelection, connectionMatchKey, }) => {
48
+ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAnchor, mousePos, isConnectEdge, getNodeById, onSelectEdge, onDeleteEdge, onStartDragWaypoint, onInsertWaypoint, onRemoveWaypoint, onStartDragAnchor, selectedNodeId, showConnection, renderedElements, groupSelection, connectionMatchKey, isSelectNode }) => {
49
49
  const [hoveredEdge, setHoveredEdge] = useState(null);
50
50
  const tableMatchConnectionKey = useMemo(() => renderedElements === null || renderedElements === void 0 ? void 0 : renderedElements.filter((el) => {
51
51
  if (connectionMatchKey) {
@@ -53,6 +53,7 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
53
53
  }
54
54
  return true;
55
55
  }), [renderedElements, connectionMatchKey]);
56
+ console.log("tableMatchConnectionKey", tableMatchConnectionKey);
56
57
  const nodeHighlightMap = useMemo(() => {
57
58
  if (!selectedEdge)
58
59
  return new Map();
@@ -167,8 +168,8 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
167
168
  const isSel = selectedEdge === edge.id;
168
169
  const isHov = hoveredEdge === edge.id;
169
170
  const connectionMatch = tableMatchConnectionKey === null || tableMatchConnectionKey === void 0 ? void 0 : tableMatchConnectionKey.some((el) => el.id === edge.to || el.id === edge.from);
170
- const fromLevel = nodeHighlightMap.get(edge.from);
171
- const toLevel = nodeHighlightMap.get(edge.to);
171
+ // const fromLevel = nodeHighlightMap.get(edge.from);
172
+ // const toLevel = nodeHighlightMap.get(edge.to);
172
173
  const isStillConnectingProcess = (connecting === null || connecting === void 0 ? void 0 : connecting.fromId) === edge.from || (connecting === null || connecting === void 0 ? void 0 : connecting.fromId) === edge.to;
173
174
  const isRing1 = (selectedNodeId && selectedNodeId === edge.from) ||
174
175
  selectedNodeId === edge.to;
@@ -44,7 +44,7 @@ const quadraticMidpoint = (from, to) => {
44
44
  y: mt * mt * from.y + 2 * mt * t * cpy + t * t * to.y,
45
45
  };
46
46
  };
47
- export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAnchor, mousePos, isConnectEdge, getNodeById, onSelectEdge, onDeleteEdge, onStartDragWaypoint, onInsertWaypoint, onRemoveWaypoint, onStartDragAnchor, selectedNodeId, showConnection, renderedElements, groupSelection, connectionMatchKey, }) => {
47
+ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAnchor, mousePos, isConnectEdge, getNodeById, onSelectEdge, onDeleteEdge, onStartDragWaypoint, onInsertWaypoint, onRemoveWaypoint, onStartDragAnchor, selectedNodeId, showConnection, renderedElements, groupSelection, connectionMatchKey, isSelectNode }) => {
48
48
  const [hoveredEdge, setHoveredEdge] = useState(null);
49
49
  const tableMatchConnectionKey = useMemo(() => renderedElements === null || renderedElements === void 0 ? void 0 : renderedElements.filter((el) => {
50
50
  if (connectionMatchKey) {
@@ -52,6 +52,7 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
52
52
  }
53
53
  return true;
54
54
  }), [renderedElements, connectionMatchKey]);
55
+ console.log("tableMatchConnectionKey", tableMatchConnectionKey);
55
56
  const nodeHighlightMap = useMemo(() => {
56
57
  if (!selectedEdge)
57
58
  return new Map();
@@ -212,8 +213,8 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
212
213
  const isSel = selectedEdge === edge.id;
213
214
  const isHov = hoveredEdge === edge.id;
214
215
  const connectionMatch = tableMatchConnectionKey === null || tableMatchConnectionKey === void 0 ? void 0 : tableMatchConnectionKey.some((el) => el.id === edge.to || el.id === edge.from);
215
- const fromLevel = nodeHighlightMap.get(edge.from);
216
- const toLevel = nodeHighlightMap.get(edge.to);
216
+ // const fromLevel = nodeHighlightMap.get(edge.from);
217
+ // const toLevel = nodeHighlightMap.get(edge.to);
217
218
  const isStillConnectingProcess = (connecting === null || connecting === void 0 ? void 0 : connecting.fromId) === edge.from || (connecting === null || connecting === void 0 ? void 0 : connecting.fromId) === edge.to;
218
219
  const isRing1 = (selectedNodeId && selectedNodeId === edge.from) ||
219
220
  selectedNodeId === edge.to;
@@ -120,6 +120,7 @@ export interface LayerViewProps<TMeta = undefined> {
120
120
  key: string;
121
121
  value: string | number;
122
122
  };
123
+ onTableMainConnection?: (id: string) => void;
123
124
  }
124
125
  declare const LayerView: <TMeta>(props: LayerViewProps<TMeta>) => import("react/jsx-runtime").JSX.Element;
125
126
  export default LayerView;
@@ -29,7 +29,7 @@ const LayerView = (props) => {
29
29
  selectNode: false,
30
30
  connectingNode: false,
31
31
  dragTransferTable: false,
32
- }, onMakeSelection, groupSelection, onHoldTable, showConnection, connectionMatchKey } = props;
32
+ }, onMakeSelection, groupSelection, onHoldTable, showConnection, connectionMatchKey, onTableMainConnection } = props;
33
33
  const widthTooltip = (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.minWidth) || 168;
34
34
  const tableGhost = useRef(null);
35
35
  const hoverUnderghostId = useRef(null);
@@ -687,12 +687,15 @@ const LayerView = (props) => {
687
687
  userSelect: "none",
688
688
  } }, 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,
689
689
  // iconTags={iconTags}
690
- 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) => {
690
+ 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) => {
691
691
  var _a, _b, _c, _d, _e;
692
692
  const rotated = rotatePoint(item.width / 2, item.height / 2, (_a = item.rotation) !== null && _a !== void 0 ? _a : 0);
693
693
  return (_jsx(ConnectHandle, {
694
694
  // isAnchor={true}
695
- 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) => {
695
+ 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) => {
696
+ graph.startConnect(nodeId, clickPos);
697
+ onTableMainConnection && onTableMainConnection(nodeId);
698
+ }, onEndConnect: (nodeId, clickPos) => {
696
699
  if (graph.draggingAnchor)
697
700
  graph.updateAnchor(nodeId, clickPos);
698
701
  else
@@ -28,7 +28,7 @@ const LayerView = (props) => {
28
28
  selectNode: false,
29
29
  connectingNode: false,
30
30
  dragTransferTable: false,
31
- }, onMakeSelection, groupSelection, onHoldTable, showConnection, connectionMatchKey } = props;
31
+ }, onMakeSelection, groupSelection, onHoldTable, showConnection, connectionMatchKey, onTableMainConnection } = props;
32
32
  const widthTooltip = (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.minWidth) || 168;
33
33
  const tableGhost = useRef(null);
34
34
  const hoverUnderghostId = useRef(null);
@@ -706,14 +706,17 @@ const LayerView = (props) => {
706
706
  eventMatchTable={eventMatchTable} privilegedTags={privilegedTags} selectionLines={selectedLines}/>
707
707
  </g>
708
708
 
709
- <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}/>
709
+ <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}/>
710
710
 
711
711
  {renderedElements.map((item) => {
712
712
  var _a, _b, _c, _d, _e;
713
713
  const rotated = rotatePoint(item.width / 2, item.height / 2, (_a = item.rotation) !== null && _a !== void 0 ? _a : 0);
714
714
  return (<ConnectHandle key={item.id}
715
715
  // isAnchor={true}
716
- 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) => {
716
+ 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) => {
717
+ graph.startConnect(nodeId, clickPos);
718
+ onTableMainConnection && onTableMainConnection(nodeId);
719
+ }} onEndConnect={(nodeId, clickPos) => {
717
720
  if (graph.draggingAnchor)
718
721
  graph.updateAnchor(nodeId, clickPos);
719
722
  else
@@ -60,4 +60,5 @@ export declare const useConnectionGraph: ({ svgRef, onEdgesChange, keyNode, mapp
60
60
  onMouseMove: (e: React.MouseEvent<SVGSVGElement>) => void;
61
61
  onMouseUp: () => void;
62
62
  selectNode: (nodeId: string) => void;
63
+ clearSelectionNode: () => void;
63
64
  };
@@ -138,6 +138,7 @@ export const useConnectionGraph = ({ svgRef, onEdgesChange, keyNode, mappingKey,
138
138
  deleteEdge(selectedEdge);
139
139
  }, [selectedEdge, deleteEdge]);
140
140
  const clearSelection = useCallback(() => setSelectedEdge(null), []);
141
+ const clearSelectionNode = useCallback(() => setSelectedNode(null), []);
141
142
  // ── Keyboard ─────────────────────────────────────────────────────
142
143
  useEffect(() => {
143
144
  const onKey = (e) => {
@@ -150,6 +151,7 @@ export const useConnectionGraph = ({ svgRef, onEdgesChange, keyNode, mappingKey,
150
151
  cancelConnect();
151
152
  cancelDragAnchor();
152
153
  clearSelection();
154
+ clearSelectionNode();
153
155
  }
154
156
  };
155
157
  window.addEventListener("keydown", onKey);
@@ -276,5 +278,6 @@ export const useConnectionGraph = ({ svgRef, onEdgesChange, keyNode, mappingKey,
276
278
  onMouseMove,
277
279
  onMouseUp,
278
280
  selectNode,
281
+ clearSelectionNode
279
282
  };
280
283
  };
@@ -110,8 +110,10 @@ export const renderElements = (elementEditor, mappingKey, tableMatchKey, connect
110
110
  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 });
111
111
  }
112
112
  if (connectionMatchKey) {
113
+ console.log("finalProps?.[connectionMatchKey.key]", finalProps, finalProps === null || finalProps === void 0 ? void 0 : finalProps[connectionMatchKey.key]);
113
114
  if (!(finalProps === null || finalProps === void 0 ? void 0 : finalProps[connectionMatchKey.key])) {
114
115
  finalProps = Object.assign(Object.assign({}, finalProps), { [connectionMatchKey.key]: editorItem === null || editorItem === void 0 ? void 0 : editorItem[connectionMatchKey.key] });
116
+ console.log("finalProps?.[connectionMatchKey.key]", finalProps, finalProps === null || finalProps === void 0 ? void 0 : finalProps[connectionMatchKey.key]);
115
117
  }
116
118
  }
117
119
  return finalProps;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "seat-editor",
3
- "version": "3.6.29",
3
+ "version": "3.6.30",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",