seat-editor 3.6.28 → 3.6.29

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.
Files changed (6) hide show
  1. package/dist/app/graph-view-new/page.js +6 -1
  2. package/dist/app/graph-view-new/page.jsx +6 -1
  3. package/dist/features/view-only-5/connection-layer.js +29 -3
  4. package/dist/features/view-only-5/connection-layer.jsx +57 -26
  5. package/dist/features/view-only-5/use-connection-graph.js +4 -7
  6. package/package.json +1 -1
package/dist/app/graph-view-new/page.js CHANGED
@@ -145,9 +145,14 @@ export default function GraphView() {
145
145
  setDataDrag(null);
146
146
  }
147
147
  };
148
+ const [edges, setEdges] = useState([]);
149
+ console.log({ edges });
148
150
  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: () => {
149
151
  setActionPrivileged((prev) => (Object.assign(Object.assign({}, prev), { [item.key]: !prev[item.key] })));
150
- }, 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: {
152
+ }, children: item.name }, item.key))) }), _jsx(LayerView, { componentProps: componentSection, statusKey: "section", defaultBackground: "#1e2d4a", mappingKey: "properties", keyNode: "nodes", onEdgesChange: (edges, table) => {
153
+ console.log(edges, "edges");
154
+ setEdges(edges);
155
+ }, initialEdges: edges, isConnectEdge: isConnecting, isSelectNode: isSelectNode, connectionMatchKey: {
151
156
  key: "use_connection",
152
157
  value: 1
153
158
  },
package/dist/app/graph-view-new/page.jsx CHANGED
@@ -144,6 +144,8 @@ export default function GraphView() {
144
144
  setDataDrag(null);
145
145
  }
146
146
  };
147
+ const [edges, setEdges] = useState([]);
148
+ console.log({ edges });
147
149
  return (<div className="w-full h-screen flex relative">
148
150
  <div className="flex">
149
151
  <div className="absolute top-0 left-0 z-10 flex gap-2">
@@ -153,7 +155,10 @@ export default function GraphView() {
153
155
  {item.name}
154
156
  </Button>))}
155
157
  </div>
156
- <LayerView componentProps={componentSection} statusKey="section" defaultBackground="#1e2d4a" mappingKey="properties" keyNode="nodes" onEdgesChange={(table, edges) => console.log({ edges, table })} isConnectEdge={isConnecting} isSelectNode={isSelectNode} connectionMatchKey={{
158
+ <LayerView componentProps={componentSection} statusKey="section" defaultBackground="#1e2d4a" mappingKey="properties" keyNode="nodes" onEdgesChange={(edges, table) => {
159
+ console.log(edges, "edges");
160
+ setEdges(edges);
161
+ }} initialEdges={edges} isConnectEdge={isConnecting} isSelectNode={isSelectNode} connectionMatchKey={{
157
162
  key: "use_connection",
158
163
  value: 1
159
164
  }}
package/dist/features/view-only-5/connection-layer.js CHANGED
@@ -62,7 +62,7 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
62
62
  return floodFill([sel.from, sel.to], edges);
63
63
  }, [selectedEdge, edges]);
64
64
  const nodeHighlightMapByNode = useMemo(() => {
65
- if (selectedNodeId) {
65
+ if (selectedNodeId || connecting) {
66
66
  return floodFill([selectedNodeId], edges);
67
67
  }
68
68
  if (selectedEdge) {
@@ -73,6 +73,12 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
73
73
  }
74
74
  return new Map();
75
75
  }, [selectedEdge, selectedNodeId, edges]);
76
+ const nodeHighlightMapByConnecting = useMemo(() => {
77
+ if (connecting) {
78
+ return floodFill([connecting.fromId], edges);
79
+ }
80
+ return new Map();
81
+ }, [connecting, edges]);
76
82
  const edgePaths = useMemo(() => {
77
83
  const map = new Map();
78
84
  edges.forEach((edge) => {
@@ -106,7 +112,22 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
106
112
  if (!showConnection) {
107
113
  return null;
108
114
  }
109
- return (_jsxs("g", { id: "connection-layer", children: [Array.from(nodeHighlightMap.entries()).map(([nodeId, level]) => {
115
+ return (_jsxs("g", { id: "connection-layer", children: [Array.from(nodeHighlightMapByConnecting.entries()).map(([nodeId, level]) => {
116
+ var _a, _b, _c;
117
+ const node = getNodeById(nodeId);
118
+ if (!node)
119
+ return null;
120
+ const w = (_a = node.width) !== null && _a !== void 0 ? _a : NODE_WIDTH;
121
+ const h = (_b = node.height) !== null && _b !== void 0 ? _b : NODE_HEIGHT;
122
+ const rotation = (_c = node.rotation) !== null && _c !== void 0 ? _c : 0;
123
+ const color = getLevelColor(level);
124
+ const padding = 4;
125
+ if (level > 1)
126
+ return null;
127
+ 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,
128
+ // strokeDasharray={level === 0 ? "none" : "5 3"}
129
+ rx: 5 })] }, `highlight-${nodeId}`));
130
+ }), Array.from(nodeHighlightMap.entries()).map(([nodeId, level]) => {
110
131
  var _a, _b, _c;
111
132
  const node = getNodeById(nodeId);
112
133
  if (!node)
@@ -148,6 +169,7 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
148
169
  const connectionMatch = tableMatchConnectionKey === null || tableMatchConnectionKey === void 0 ? void 0 : tableMatchConnectionKey.some((el) => el.id === edge.to || el.id === edge.from);
149
170
  const fromLevel = nodeHighlightMap.get(edge.from);
150
171
  const toLevel = nodeHighlightMap.get(edge.to);
172
+ const isStillConnectingProcess = (connecting === null || connecting === void 0 ? void 0 : connecting.fromId) === edge.from || (connecting === null || connecting === void 0 ? void 0 : connecting.fromId) === edge.to;
151
173
  const isRing1 = (selectedNodeId && selectedNodeId === edge.from) ||
152
174
  selectedNodeId === edge.to;
153
175
  const isDraggingFrom = (draggingAnchor === null || draggingAnchor === void 0 ? void 0 : draggingAnchor.edgeId) === edge.id && draggingAnchor.side === "from";
@@ -155,7 +177,11 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
155
177
  return (_jsxs("g", { children: [_jsx("path", { d: pathD, stroke: "transparent", strokeWidth: 14, fill: "none", style: { cursor: "pointer" }, onClick: (e) => {
156
178
  e.stopPropagation();
157
179
  onSelectEdge(edge.id);
158
- }, 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) => {
180
+ }, 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
181
+ ? 1
182
+ : connecting
183
+ ? 0
184
+ : 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) => {
159
185
  e.stopPropagation();
160
186
  onStartDragAnchor(e, edge.id, "from");
161
187
  } }), _jsx("circle", { cx: fromPos.x, cy: fromPos.y, r: 3, fill: connectionMatch ? "#F1416C" : "#7239EA",
package/dist/features/view-only-5/connection-layer.jsx CHANGED
@@ -61,7 +61,7 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
61
61
  return floodFill([sel.from, sel.to], edges);
62
62
  }, [selectedEdge, edges]);
63
63
  const nodeHighlightMapByNode = useMemo(() => {
64
- if (selectedNodeId) {
64
+ if (selectedNodeId || connecting) {
65
65
  return floodFill([selectedNodeId], edges);
66
66
  }
67
67
  if (selectedEdge) {
@@ -72,6 +72,12 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
72
72
  }
73
73
  return new Map();
74
74
  }, [selectedEdge, selectedNodeId, edges]);
75
+ const nodeHighlightMapByConnecting = useMemo(() => {
76
+ if (connecting) {
77
+ return floodFill([connecting.fromId], edges);
78
+ }
79
+ return new Map();
80
+ }, [connecting, edges]);
75
81
  const edgePaths = useMemo(() => {
76
82
  const map = new Map();
77
83
  edges.forEach((edge) => {
@@ -106,6 +112,26 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
106
112
  return null;
107
113
  }
108
114
  return (<g id="connection-layer">
115
+ {Array.from(nodeHighlightMapByConnecting.entries()).map(([nodeId, level]) => {
116
+ var _a, _b, _c;
117
+ const node = getNodeById(nodeId);
118
+ if (!node)
119
+ return null;
120
+ const w = (_a = node.width) !== null && _a !== void 0 ? _a : NODE_WIDTH;
121
+ const h = (_b = node.height) !== null && _b !== void 0 ? _b : NODE_HEIGHT;
122
+ const rotation = (_c = node.rotation) !== null && _c !== void 0 ? _c : 0;
123
+ const color = getLevelColor(level);
124
+ const padding = 4;
125
+ if (level > 1)
126
+ return null;
127
+ return (<g key={`highlight-${nodeId}`} transform={`translate(${node.x}, ${node.y}) rotate(${rotation})`} style={{ pointerEvents: "none" }}>
128
+ <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}/>
129
+ <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}
130
+ // strokeDasharray={level === 0 ? "none" : "5 3"}
131
+ rx={5}/>
132
+ </g>);
133
+ })}
134
+
109
135
  {/* Node highlight flood fill */}
110
136
  {Array.from(nodeHighlightMap.entries()).map(([nodeId, level]) => {
111
137
  var _a, _b, _c;
@@ -188,6 +214,7 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
188
214
  const connectionMatch = tableMatchConnectionKey === null || tableMatchConnectionKey === void 0 ? void 0 : tableMatchConnectionKey.some((el) => el.id === edge.to || el.id === edge.from);
189
215
  const fromLevel = nodeHighlightMap.get(edge.from);
190
216
  const toLevel = nodeHighlightMap.get(edge.to);
217
+ const isStillConnectingProcess = (connecting === null || connecting === void 0 ? void 0 : connecting.fromId) === edge.from || (connecting === null || connecting === void 0 ? void 0 : connecting.fromId) === edge.to;
191
218
  const isRing1 = (selectedNodeId && selectedNodeId === edge.from) ||
192
219
  selectedNodeId === edge.to;
193
220
  const isDraggingFrom = (draggingAnchor === null || draggingAnchor === void 0 ? void 0 : draggingAnchor.edgeId) === edge.id && draggingAnchor.side === "from";
@@ -204,50 +231,54 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
204
231
 
205
232
  {/* Curve */}
206
233
 
207
- <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" }}/>
234
+ <path d={pathD} stroke={connectionMatch ? "#F1416C" : "#7239EA"} strokeWidth={isSel ? 2 : isHov ? 2 : 1.5} fill={"none"} opacity={(isRing1 && selectedNodeId) || isStillConnectingProcess
235
+ ? 1
236
+ : connecting
237
+ ? 0
238
+ : 0.3} strokeLinecap="round" style={{ pointerEvents: "none" }}/>
208
239
 
209
240
  {/* FROM dot */}
210
241
  {/* {isSel && ( */}
211
- <g>
212
- {isDraggingFrom && (<circle cx={fromPos.x} cy={fromPos.y} r={12} fill="#7239EA" opacity={0.15} style={{ pointerEvents: "none" }}/>)}
213
- <circle cx={fromPos.x} cy={fromPos.y} r={10} fill="transparent" style={{ cursor: "grab" }} onMouseDown={(e) => {
242
+ <g>
243
+ {isDraggingFrom && (<circle cx={fromPos.x} cy={fromPos.y} r={12} fill="#7239EA" opacity={0.15} style={{ pointerEvents: "none" }}/>)}
244
+ <circle cx={fromPos.x} cy={fromPos.y} r={10} fill="transparent" style={{ cursor: "grab" }} onMouseDown={(e) => {
214
245
  e.stopPropagation();
215
246
  onStartDragAnchor(e, edge.id, "from");
216
247
  }}/>
217
- <circle cx={fromPos.x} cy={fromPos.y} r={3} fill={connectionMatch ? "#F1416C" : "#7239EA"}
248
+ <circle cx={fromPos.x} cy={fromPos.y} r={3} fill={connectionMatch ? "#F1416C" : "#7239EA"}
218
249
  // stroke="#0f172a"
219
250
  // strokeWidth={1.5}
220
251
  style={{ pointerEvents: "none" }}/>
221
- {/* <circle
222
- cx={fromPos.x}
223
- cy={fromPos.y}
224
- r={2.5}
225
- fill="#0f172a"
226
- style={{ pointerEvents: "none" }}
227
- /> */}
228
- </g>
252
+ {/* <circle
253
+ cx={fromPos.x}
254
+ cy={fromPos.y}
255
+ r={2.5}
256
+ fill="#0f172a"
257
+ style={{ pointerEvents: "none" }}
258
+ /> */}
259
+ </g>
229
260
  {/* )} */}
230
261
 
231
262
  {/* TO dot */}
232
263
  {/* {isSel && ( */}
233
- <g>
234
- {isDraggingTo && (<circle cx={toPos.x} cy={toPos.y} r={12} fill="#7239EA" opacity={0.15} style={{ pointerEvents: "none" }}/>)}
235
- <circle cx={toPos.x} cy={toPos.y} r={10} fill="transparent" style={{ cursor: "grab" }} onMouseDown={(e) => {
264
+ <g>
265
+ {isDraggingTo && (<circle cx={toPos.x} cy={toPos.y} r={12} fill="#7239EA" opacity={0.15} style={{ pointerEvents: "none" }}/>)}
266
+ <circle cx={toPos.x} cy={toPos.y} r={10} fill="transparent" style={{ cursor: "grab" }} onMouseDown={(e) => {
236
267
  e.stopPropagation();
237
268
  onStartDragAnchor(e, edge.id, "to");
238
269
  }}/>
239
- <circle cx={toPos.x} cy={toPos.y} r={3} fill={connectionMatch ? "#F1416C" : "#7239EA"}
270
+ <circle cx={toPos.x} cy={toPos.y} r={3} fill={connectionMatch ? "#F1416C" : "#7239EA"}
240
271
  // stroke="#0f172a"
241
272
  // strokeWidth={1.5}
242
273
  style={{ pointerEvents: "none" }}/>
243
- {/* <circle
244
- cx={toPos.x}
245
- cy={toPos.y}
246
- r={2.5}
247
- fill="#0f172a"
248
- style={{ pointerEvents: "none" }}
249
- /> */}
250
- </g>
274
+ {/* <circle
275
+ cx={toPos.x}
276
+ cy={toPos.y}
277
+ r={2.5}
278
+ fill="#0f172a"
279
+ style={{ pointerEvents: "none" }}
280
+ /> */}
281
+ </g>
251
282
  {/* )} */}
252
283
 
253
284
  {/* Waypoints */}
package/dist/features/view-only-5/use-connection-graph.js CHANGED
@@ -2,6 +2,7 @@
2
2
  import { useCallback, useEffect, useRef, useState } from "react";
3
3
  import { rotatePoint, snap } from "./utils";
4
4
  import { useAppSelector } from "../../hooks/use-redux";
5
+ import { isEqual } from "lodash";
5
6
  export const useConnectionGraph = ({ svgRef, onEdgesChange, keyNode, mappingKey, initialEdges, }) => {
6
7
  const components = useAppSelector((state) => state.board.components);
7
8
  const [edges, setEdges] = useState([]);
@@ -170,8 +171,7 @@ export const useConnectionGraph = ({ svgRef, onEdgesChange, keyNode, mappingKey,
170
171
  }, [edges]);
171
172
  // initialize edges
172
173
  useEffect(() => {
173
- var _a;
174
- if (initialEdges) {
174
+ if (!isEqual(initialEdges, edges) && components) {
175
175
  //process initial edges
176
176
  const allElements = components === null || components === void 0 ? void 0 : components.map((table) => {
177
177
  if (mappingKey && (table === null || table === void 0 ? void 0 : table[mappingKey])) {
@@ -179,10 +179,7 @@ export const useConnectionGraph = ({ svgRef, onEdgesChange, keyNode, mappingKey,
179
179
  }
180
180
  return Object.assign({}, table);
181
181
  });
182
- // const findSourceTarget = allElements?.find(
183
- // (el) => el.id === connecting.fromId
184
- // );
185
- 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) => {
182
+ const transformAllEdges = initialEdges === null || initialEdges === void 0 ? void 0 : initialEdges.map((edge) => {
186
183
  const fromElement = allElements === null || allElements === void 0 ? void 0 : allElements.find((el) => el.id === edge.from);
187
184
  if (!fromElement)
188
185
  return null;
@@ -254,7 +251,7 @@ export const useConnectionGraph = ({ svgRef, onEdgesChange, keyNode, mappingKey,
254
251
  });
255
252
  setEdges(transformAllEdges === null || transformAllEdges === void 0 ? void 0 : transformAllEdges.filter((el) => el !== null));
256
253
  }
257
- }, [initialEdges]);
254
+ }, [initialEdges, components]);
258
255
  return {
259
256
  edges,
260
257
  setEdges,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "seat-editor",
3
- "version": "3.6.28",
3
+ "version": "3.6.29",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",