seat-editor 3.6.50 → 3.6.51

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 (9) hide show
  1. package/dist/features/view-only-5/connect-handle.js +1 -1
  2. package/dist/features/view-only-5/connect-handle.jsx +1 -1
  3. package/dist/features/view-only-5/connection-layer.js +18 -31
  4. package/dist/features/view-only-5/connection-layer.jsx +102 -46
  5. package/dist/features/view-only-5/index.js +4 -8
  6. package/dist/features/view-only-5/index.jsx +4 -8
  7. package/dist/features/view-only-5/utils.d.ts +1 -1
  8. package/dist/features/view-only-5/utils.js +30 -21
  9. package/package.json +1 -1
package/dist/features/view-only-5/connect-handle.js CHANGED
@@ -84,7 +84,7 @@ export const ConnectHandle = ({ cx, cy, width, height, nodeId, rotation = 0, isC
84
84
  if (!showConnection)
85
85
  return null;
86
86
  return (_jsxs("g", { transform: `translate(${cx}, ${cy}) rotate(${rotation})`, children: [_jsx("rect", { x: -hw - 4, y: -hh - 4, width: width + 8, height: height + 8, fill: "transparent", stroke: (isActive && (connecting === null || connecting === void 0 ? void 0 : connecting.fromId) === nodeId) ? "#5014D0" : hovered ? "#3E97FF" : "transparent", strokeWidth: isActive ? 1 : 1, strokeDasharray: (isActive && hovered) ? "solid" : "none", rx: 4, style: { pointerEvents: "none" } }), _jsx("rect", { x: -hw - 4, y: -hh - 4, width: width + 8, height: height + 8, fill: "transparent", style: {
87
- cursor: isConnectEdge ? "crosshair" : "pointer",
87
+ cursor: (isConnectEdge && !isActiveSelectEdge) ? "crosshair" : "pointer",
88
88
  pointerEvents: isConnectEdge ? "all" : "none",
89
89
  }, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), onPointerDown: (e) => {
90
90
  handlePointerDown(e);
package/dist/features/view-only-5/connect-handle.jsx CHANGED
@@ -88,7 +88,7 @@ export const ConnectHandle = ({ cx, cy, width, height, nodeId, rotation = 0, isC
88
88
 
89
89
  {/* Hit area */}
90
90
  <rect x={-hw - 4} y={-hh - 4} width={width + 8} height={height + 8} fill="transparent" style={{
91
- cursor: isConnectEdge ? "crosshair" : "pointer",
91
+ cursor: (isConnectEdge && !isActiveSelectEdge) ? "crosshair" : "pointer",
92
92
  pointerEvents: isConnectEdge ? "all" : "none",
93
93
  }} onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)} onPointerDown={(e) => {
94
94
  handlePointerDown(e);
package/dist/features/view-only-5/connection-layer.js CHANGED
@@ -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, isSelectNode }) => {
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,14 +53,12 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
53
53
  }
54
54
  return true;
55
55
  }), [renderedElements, connectionMatchKey]);
56
- const nodeHighlightMap = useMemo(() => {
57
- if (!selectedEdge)
58
- return new Map();
59
- const sel = edges.find((e) => e.id === selectedEdge);
60
- if (!sel)
61
- return new Map();
62
- return floodFill([sel.from, sel.to], edges);
63
- }, [selectedEdge, edges]);
56
+ // const nodeHighlightMap = useMemo<Map<string, number>>(() => {
57
+ // if (!selectedEdge) return new Map();
58
+ // const sel = edges.find((e) => e.id === selectedEdge);
59
+ // if (!sel) return new Map();
60
+ // return floodFill([sel.from, sel.to], edges);
61
+ // }, [selectedEdge, edges]);
64
62
  const nodeHighlightMapByNode = useMemo(() => {
65
63
  if (selectedNodeId || connecting) {
66
64
  return floodFill([selectedNodeId], edges);
@@ -127,21 +125,6 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
127
125
  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
126
  // strokeDasharray={level === 0 ? "none" : "5 3"}
129
127
  rx: 5 })] }, `highlight-${nodeId}`));
130
- }), Array.from(nodeHighlightMap.entries()).map(([nodeId, level]) => {
131
- var _a, _b, _c;
132
- const node = getNodeById(nodeId);
133
- if (!node)
134
- return null;
135
- const w = (_a = node.width) !== null && _a !== void 0 ? _a : NODE_WIDTH;
136
- const h = (_b = node.height) !== null && _b !== void 0 ? _b : NODE_HEIGHT;
137
- const rotation = (_c = node.rotation) !== null && _c !== void 0 ? _c : 0;
138
- const color = getLevelColor(level);
139
- const padding = 4;
140
- if (level > 0)
141
- return null;
142
- 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,
143
- // strokeDasharray={level === 0 ? "none" : "5 3"}
144
- rx: 5, opacity: level === 0 ? 1 : 0.75 }), _jsx("g", { transform: `translate(${w / 2 + padding - 2}, ${-h / 2 - padding})` })] }, `highlight-${nodeId}`));
145
128
  }), Array.from(nodeHighlightMapByNode.entries()).map(([nodeId, level]) => {
146
129
  var _a, _b, _c;
147
130
  const node = getNodeById(nodeId);
@@ -165,7 +148,11 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
165
148
  const { pathD, allPoints, fromPos, toPos, midX, midY } = ep;
166
149
  const isSel = selectedEdge === edge.id;
167
150
  const isHov = hoveredEdge === edge.id;
168
- const connectionMatch = tableMatchConnectionKey === null || tableMatchConnectionKey === void 0 ? void 0 : tableMatchConnectionKey.some((el) => { var _a, _b; 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 || ((_b = el === null || el === void 0 ? void 0 : el[groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.dataKey]) !== null && _b !== void 0 ? _b : el.id) === edge.from; });
151
+ const connectionMatch = tableMatchConnectionKey === null || tableMatchConnectionKey === void 0 ? void 0 : tableMatchConnectionKey.some((el) => {
152
+ var _a, _b;
153
+ 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 ||
154
+ ((_b = el === null || el === void 0 ? void 0 : el[groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.dataKey]) !== null && _b !== void 0 ? _b : el.id) === edge.from;
155
+ });
169
156
  // const fromLevel = nodeHighlightMap.get(edge.from);
170
157
  // const toLevel = nodeHighlightMap.get(edge.to);
171
158
  const isStillConnectingProcess = (connecting === null || connecting === void 0 ? void 0 : connecting.fromId) === edge.from || (connecting === null || connecting === void 0 ? void 0 : connecting.fromId) === edge.to;
@@ -192,8 +179,11 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
192
179
  } }), _jsx("circle", { cx: toPos.x, cy: toPos.y, r: 3, fill: connectionMatch ? "#F1416C" : "#7239EA",
193
180
  // stroke="#0f172a"
194
181
  // strokeWidth={1.5}
195
- style: { pointerEvents: "none" } })] }), ((_a = edge.waypoints) !== null && _a !== void 0 ? _a : []).map((wp, i) => (_jsxs("g", { children: [_jsx("circle", { cx: wp.x, cy: wp.y, r: 12, fill: "transparent", style: { cursor: "grab" }, onMouseDown: (e) => onStartDragWaypoint(e, edge.id, i), onContextMenu: (e) => onRemoveWaypoint(e, edge.id, i) }), _jsx("circle", { cx: wp.x, cy: wp.y, r: isSel ? 8 : 5, fill: isSel ? "#1e1b2e" : "#0f172a", stroke: isSel ? "#a78bfa" : "#38bdf8", strokeWidth: isSel ? 2 : 1.2, style: { pointerEvents: "none" } }), _jsx("circle", { cx: wp.x, cy: wp.y, r: isSel ? 3 : 2, fill: isSel ? "#a78bfa" : "#38bdf8", style: { pointerEvents: "none" } })] }, `wp-${i}`))), isSel &&
196
- (isConnectEdge && !isSelectNode) &&
182
+ style: { pointerEvents: "none" } })] }), !isSelectNode &&
183
+ isConnectEdge &&
184
+ ((_a = edge.waypoints) !== null && _a !== void 0 ? _a : []).map((wp, i) => (_jsxs("g", { children: [_jsx("circle", { cx: wp.x, cy: wp.y, r: 12, fill: "transparent", style: { cursor: "grab" }, onMouseDown: (e) => onStartDragWaypoint(e, edge.id, i), onContextMenu: (e) => onRemoveWaypoint(e, edge.id, i) }), _jsx("circle", { cx: wp.x, cy: wp.y, r: isSel ? 8 : 5, fill: isSel ? "#1e1b2e" : "#0f172a", stroke: isSel ? "#a78bfa" : "#38bdf8", strokeWidth: isSel ? 2 : 1.2, style: { pointerEvents: "none" } }), _jsx("circle", { cx: wp.x, cy: wp.y, r: isSel ? 3 : 2, fill: isSel ? "#a78bfa" : "#38bdf8", style: { pointerEvents: "none" } })] }, `wp-${i}`))), isSel &&
185
+ isConnectEdge &&
186
+ !isSelectNode &&
197
187
  allPoints.slice(0, -1).map((pt, i) => {
198
188
  var _a;
199
189
  const next = allPoints[i + 1];
@@ -204,10 +194,7 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
204
194
  if (tooClose)
205
195
  return null;
206
196
  return (_jsxs("g", { children: [_jsx("circle", { cx: mx, cy: my, r: 10, fill: "transparent", style: { cursor: "crosshair" }, onMouseDown: (e) => onInsertWaypoint(e, edge.id, i, mx, my) }), _jsx("circle", { cx: mx, cy: my, r: 4, fill: "#1e1b2e", stroke: "#a78bfa", strokeWidth: 1, strokeDasharray: "2 2", style: { pointerEvents: "none" } }), _jsx("circle", { cx: mx, cy: my, r: 1.5, fill: "#a78bfa", style: { pointerEvents: "none" } })] }, `mid-${i}`));
207
- }), isSel && (isConnectEdge && !isSelectNode) && (_jsxs("g", { onClick: (e) => {
208
- e.stopPropagation();
209
- onDeleteEdge(edge.id);
210
- }, style: { cursor: "pointer" }, children: [_jsx("rect", { x: midX - 16, y: midY - 10, width: 32, height: 18, rx: 4, fill: "#1e1b2e", stroke: "#a78bfa", strokeWidth: 1, opacity: 0.95 }), _jsx("text", { x: midX, y: midY, textAnchor: "middle", dominantBaseline: "middle", fill: "#a78bfa", fontSize: 9, fontFamily: "monospace", fontWeight: 600, children: "DEL" })] }))] }, edge.id));
197
+ })] }, edge.id));
211
198
  }), connecting &&
212
199
  (() => {
213
200
  const findSourceTarget = renderedElements === null || renderedElements === void 0 ? void 0 : renderedElements.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) === connecting.fromId; });
package/dist/features/view-only-5/connection-layer.jsx CHANGED
@@ -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, isSelectNode }) => {
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,14 +52,12 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
52
52
  }
53
53
  return true;
54
54
  }), [renderedElements, connectionMatchKey]);
55
- const nodeHighlightMap = useMemo(() => {
56
- if (!selectedEdge)
57
- return new Map();
58
- const sel = edges.find((e) => e.id === selectedEdge);
59
- if (!sel)
60
- return new Map();
61
- return floodFill([sel.from, sel.to], edges);
62
- }, [selectedEdge, edges]);
55
+ // const nodeHighlightMap = useMemo<Map<string, number>>(() => {
56
+ // if (!selectedEdge) return new Map();
57
+ // const sel = edges.find((e) => e.id === selectedEdge);
58
+ // if (!sel) return new Map();
59
+ // return floodFill([sel.from, sel.to], edges);
60
+ // }, [selectedEdge, edges]);
63
61
  const nodeHighlightMapByNode = useMemo(() => {
64
62
  if (selectedNodeId || connecting) {
65
63
  return floodFill([selectedNodeId], edges);
@@ -133,25 +131,51 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
133
131
  })}
134
132
 
135
133
  {/* Node highlight flood fill */}
136
- {Array.from(nodeHighlightMap.entries()).map(([nodeId, level]) => {
137
- var _a, _b, _c;
138
- const node = getNodeById(nodeId);
139
- if (!node)
140
- return null;
141
- const w = (_a = node.width) !== null && _a !== void 0 ? _a : NODE_WIDTH;
142
- const h = (_b = node.height) !== null && _b !== void 0 ? _b : NODE_HEIGHT;
143
- const rotation = (_c = node.rotation) !== null && _c !== void 0 ? _c : 0;
144
- const color = getLevelColor(level);
145
- const padding = 4;
146
- if (level > 0)
147
- return null;
148
- return (<g key={`highlight-${nodeId}`} transform={`translate(${node.x}, ${node.y}) rotate(${rotation})`} style={{ pointerEvents: "none" }}>
149
- <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}/>
150
- <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}
151
- // strokeDasharray={level === 0 ? "none" : "5 3"}
152
- rx={5} opacity={level === 0 ? 1 : 0.75}/>
153
- <g transform={`translate(${w / 2 + padding - 2}, ${-h / 2 - padding})`}>
154
- {/* <circle r={7} fill={color} opacity={0.9} />
134
+ {/* {Array.from(nodeHighlightMap.entries()).map(([nodeId, level]) => {
135
+ const node = getNodeById(nodeId);
136
+ if (!node) return null;
137
+ const w = node.width ?? NODE_WIDTH;
138
+ const h = node.height ?? NODE_HEIGHT;
139
+ const rotation = node.rotation ?? 0;
140
+ const color = getLevelColor(level);
141
+ const padding = 4;
142
+ if (level > 0) return null;
143
+
144
+ return (
145
+ <g
146
+ key={`highlight-${nodeId}`}
147
+ transform={`translate(${node.x}, ${node.y}) rotate(${rotation})`}
148
+ style={{ pointerEvents: "none" }}
149
+ >
150
+ <rect
151
+ x={-w / 2 - padding}
152
+ y={-h / 2 - padding}
153
+ width={w + padding * 2}
154
+ height={h + padding * 2}
155
+ fill="none"
156
+ stroke={color}
157
+ strokeWidth={8}
158
+ rx={5}
159
+ opacity={0.08}
160
+ />
161
+ <rect
162
+ x={-w / 2 - padding}
163
+ y={-h / 2 - padding}
164
+ width={w + padding * 2}
165
+ height={h + padding * 2}
166
+ fill="none"
167
+ stroke={color}
168
+ strokeWidth={level === 0 ? 2.5 : 1.5}
169
+ // strokeDasharray={level === 0 ? "none" : "5 3"}
170
+ rx={5}
171
+ opacity={level === 0 ? 1 : 0.75}
172
+ />
173
+ <g
174
+ transform={`translate(${w / 2 + padding - 2}, ${
175
+ -h / 2 - padding
176
+ })`}
177
+ >
178
+ {/* <circle r={7} fill={color} opacity={0.9} />
155
179
  <text
156
180
  textAnchor="middle"
157
181
  dominantBaseline="middle"
@@ -163,9 +187,10 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
163
187
  >
164
188
  {level}
165
189
  </text> */}
190
+ {/* </g>
166
191
  </g>
167
- </g>);
168
- })}
192
+ );
193
+ })} */}
169
194
 
170
195
  {Array.from(nodeHighlightMapByNode.entries()).map(([nodeId, level]) => {
171
196
  var _a, _b, _c;
@@ -210,7 +235,11 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
210
235
  const { pathD, allPoints, fromPos, toPos, midX, midY } = ep;
211
236
  const isSel = selectedEdge === edge.id;
212
237
  const isHov = hoveredEdge === edge.id;
213
- const connectionMatch = tableMatchConnectionKey === null || tableMatchConnectionKey === void 0 ? void 0 : tableMatchConnectionKey.some((el) => { var _a, _b; 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 || ((_b = el === null || el === void 0 ? void 0 : el[groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.dataKey]) !== null && _b !== void 0 ? _b : el.id) === edge.from; });
238
+ const connectionMatch = tableMatchConnectionKey === null || tableMatchConnectionKey === void 0 ? void 0 : tableMatchConnectionKey.some((el) => {
239
+ var _a, _b;
240
+ 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 ||
241
+ ((_b = el === null || el === void 0 ? void 0 : el[groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.dataKey]) !== null && _b !== void 0 ? _b : el.id) === edge.from;
242
+ });
214
243
  // const fromLevel = nodeHighlightMap.get(edge.from);
215
244
  // const toLevel = nodeHighlightMap.get(edge.to);
216
245
  const isStillConnectingProcess = (connecting === null || connecting === void 0 ? void 0 : connecting.fromId) === edge.from || (connecting === null || connecting === void 0 ? void 0 : connecting.fromId) === edge.to;
@@ -281,15 +310,18 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
281
310
  {/* )} */}
282
311
 
283
312
  {/* Waypoints */}
284
- {((_a = edge.waypoints) !== null && _a !== void 0 ? _a : []).map((wp, i) => (<g key={`wp-${i}`}>
285
- <circle cx={wp.x} cy={wp.y} r={12} fill="transparent" style={{ cursor: "grab" }} onMouseDown={(e) => onStartDragWaypoint(e, edge.id, i)} onContextMenu={(e) => onRemoveWaypoint(e, edge.id, i)}/>
286
- <circle cx={wp.x} cy={wp.y} r={isSel ? 8 : 5} fill={isSel ? "#1e1b2e" : "#0f172a"} stroke={isSel ? "#a78bfa" : "#38bdf8"} strokeWidth={isSel ? 2 : 1.2} style={{ pointerEvents: "none" }}/>
287
- <circle cx={wp.x} cy={wp.y} r={isSel ? 3 : 2} fill={isSel ? "#a78bfa" : "#38bdf8"} style={{ pointerEvents: "none" }}/>
288
- </g>))}
313
+ {!isSelectNode &&
314
+ isConnectEdge &&
315
+ ((_a = edge.waypoints) !== null && _a !== void 0 ? _a : []).map((wp, i) => (<g key={`wp-${i}`}>
316
+ <circle cx={wp.x} cy={wp.y} r={12} fill="transparent" style={{ cursor: "grab" }} onMouseDown={(e) => onStartDragWaypoint(e, edge.id, i)} onContextMenu={(e) => onRemoveWaypoint(e, edge.id, i)}/>
317
+ <circle cx={wp.x} cy={wp.y} r={isSel ? 8 : 5} fill={isSel ? "#1e1b2e" : "#0f172a"} stroke={isSel ? "#a78bfa" : "#38bdf8"} strokeWidth={isSel ? 2 : 1.2} style={{ pointerEvents: "none" }}/>
318
+ <circle cx={wp.x} cy={wp.y} r={isSel ? 3 : 2} fill={isSel ? "#a78bfa" : "#38bdf8"} style={{ pointerEvents: "none" }}/>
319
+ </g>))}
289
320
 
290
321
  {/* Midpoint insert handles */}
291
322
  {isSel &&
292
- (isConnectEdge && !isSelectNode) &&
323
+ isConnectEdge &&
324
+ !isSelectNode &&
293
325
  allPoints.slice(0, -1).map((pt, i) => {
294
326
  var _a;
295
327
  const next = allPoints[i + 1];
@@ -307,15 +339,39 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
307
339
  })}
308
340
 
309
341
  {/* DEL badge */}
310
- {isSel && (isConnectEdge && !isSelectNode) && (<g onClick={(e) => {
311
- e.stopPropagation();
312
- onDeleteEdge(edge.id);
313
- }} style={{ cursor: "pointer" }}>
314
- <rect x={midX - 16} y={midY - 10} width={32} height={18} rx={4} fill="#1e1b2e" stroke="#a78bfa" strokeWidth={1} opacity={0.95}/>
315
- <text x={midX} y={midY} textAnchor="middle" dominantBaseline="middle" fill="#a78bfa" fontSize={9} fontFamily="monospace" fontWeight={600}>
316
- DEL
317
- </text>
318
- </g>)}
342
+ {/* {isSel && (isConnectEdge && !isSelectNode) && (
343
+ <g
344
+ onClick={(e) => {
345
+ e.stopPropagation();
346
+ onDeleteEdge(edge.id);
347
+ }}
348
+ style={{ cursor: "pointer" }}
349
+ >
350
+ <rect
351
+ x={midX - 16}
352
+ y={midY - 10}
353
+ width={32}
354
+ height={18}
355
+ rx={4}
356
+ fill="#1e1b2e"
357
+ stroke="#a78bfa"
358
+ strokeWidth={1}
359
+ opacity={0.95}
360
+ />
361
+ <text
362
+ x={midX}
363
+ y={midY}
364
+ textAnchor="middle"
365
+ dominantBaseline="middle"
366
+ fill="#a78bfa"
367
+ fontSize={9}
368
+ fontFamily="monospace"
369
+ fontWeight={600}
370
+ >
371
+ DEL
372
+ </text>
373
+ </g>
374
+ )} */}
319
375
  </g>);
320
376
  })}
321
377
 
package/dist/features/view-only-5/index.js CHANGED
@@ -676,15 +676,10 @@ const LayerView = (props) => {
676
676
  // ─── Node helper ──────────────────────────────────────────────────────────
677
677
  const getNodeById = useCallback((id) => {
678
678
  var _a, _b, _c, _d;
679
- const comp = componentsEditor.find((item) => {
680
- var _a, _b, _c;
681
- if (mappingKey && (item === null || item === void 0 ? void 0 : item[mappingKey]))
682
- return ((_b = (_a = item[mappingKey]) === null || _a === void 0 ? void 0 : _a[groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.dataKey]) !== null && _b !== void 0 ? _b : item[mappingKey].id == id);
683
- return (_c = item === null || item === void 0 ? void 0 : item[groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.dataKey]) !== null && _c !== void 0 ? _c : item.id == id;
684
- });
679
+ const comp = renderedElements.find((c) => { var _a; return ((_a = c[groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.dataKey]) !== null && _a !== void 0 ? _a : c.id) === id; });
685
680
  if (!comp)
686
681
  return null;
687
- const v = mappingKey ? comp[mappingKey] : comp;
682
+ const v = comp;
688
683
  const w = (_a = v.width) !== null && _a !== void 0 ? _a : 100;
689
684
  const h = (_b = v.height) !== null && _b !== void 0 ? _b : 50;
690
685
  const rotation = (_c = v.rotation) !== null && _c !== void 0 ? _c : 0;
@@ -758,7 +753,7 @@ const LayerView = (props) => {
758
753
  window.removeEventListener("keyup", handleKeyUp);
759
754
  };
760
755
  }, [dataElementSelectionGroupRef.current]);
761
- const renderedElements = useMemo(() => renderElements(componentsEditor, mappingKey, tableMatchKey, graph.connecting, groupSelection, graph.edges, connectionMatchKey, displaySettings === null || displaySettings === void 0 ? void 0 : displaySettings.selectionGroup), [
756
+ const renderedElements = useMemo(() => renderElements(componentsEditor, mappingKey, tableMatchKey, graph.connecting, groupSelection, graph.edges, connectionMatchKey, displaySettings === null || displaySettings === void 0 ? void 0 : displaySettings.selectionGroup, graph.selectedNode), [
762
757
  componentsEditor,
763
758
  mappingKey,
764
759
  tableMatchKey,
@@ -769,6 +764,7 @@ const LayerView = (props) => {
769
764
  groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.colorGroupSelection,
770
765
  graph.edges,
771
766
  connectionMatchKey,
767
+ graph.selectedNode
772
768
  ]);
773
769
  return (_jsxs("div", Object.assign({ className: "relative w-full h-full flex-1", ref: containerRef, style: { overflow: "auto", WebkitOverflowScrolling: "touch" } }, props.containerProps, { children: [loading && (_jsx("div", { className: "absolute z-10 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-opacity-50 bg-white w-full h-full flex items-center justify-center", children: (loadingRender === null || loadingRender === void 0 ? void 0 : loadingRender.element) || _jsx(Spin, {}) })), _jsx(TransformWrapper, Object.assign({ ref: transformRef, disablePadding: true, centerZoomedOut: true, panning: { disabled: panningGroup, wheelPanning: true }, wheel: { disabled: false }, onTransformed: ({ state: { scale } }) => setScale(scale), minScale: 1, maxScale: 1000, initialScale: 1, smooth: true, centerOnInit: true }, props.transformProps, { children: _jsxs(TransformComponent, { wrapperStyle: { width: "100%", height: "100%" }, contentStyle: { width: "100%", height: "100%" }, children: [_jsxs("svg", Object.assign({ id: "workspace", ref: svgRef, width: "100%", height: "100%", overflow: "hidden", viewBox: viewBox, className: "h-full", xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "xMidYMid meet", onContextMenu: (e) => e.preventDefault(),
774
770
  // onDrop={(e) => handleTableEvent(e, "drop")}
package/dist/features/view-only-5/index.jsx CHANGED
@@ -675,15 +675,10 @@ const LayerView = (props) => {
675
675
  // ─── Node helper ──────────────────────────────────────────────────────────
676
676
  const getNodeById = useCallback((id) => {
677
677
  var _a, _b, _c, _d;
678
- const comp = componentsEditor.find((item) => {
679
- var _a, _b, _c;
680
- if (mappingKey && (item === null || item === void 0 ? void 0 : item[mappingKey]))
681
- return ((_b = (_a = item[mappingKey]) === null || _a === void 0 ? void 0 : _a[groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.dataKey]) !== null && _b !== void 0 ? _b : item[mappingKey].id == id);
682
- return (_c = item === null || item === void 0 ? void 0 : item[groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.dataKey]) !== null && _c !== void 0 ? _c : item.id == id;
683
- });
678
+ const comp = renderedElements.find((c) => { var _a; return ((_a = c[groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.dataKey]) !== null && _a !== void 0 ? _a : c.id) === id; });
684
679
  if (!comp)
685
680
  return null;
686
- const v = mappingKey ? comp[mappingKey] : comp;
681
+ const v = comp;
687
682
  const w = (_a = v.width) !== null && _a !== void 0 ? _a : 100;
688
683
  const h = (_b = v.height) !== null && _b !== void 0 ? _b : 50;
689
684
  const rotation = (_c = v.rotation) !== null && _c !== void 0 ? _c : 0;
@@ -757,7 +752,7 @@ const LayerView = (props) => {
757
752
  window.removeEventListener("keyup", handleKeyUp);
758
753
  };
759
754
  }, [dataElementSelectionGroupRef.current]);
760
- const renderedElements = useMemo(() => renderElements(componentsEditor, mappingKey, tableMatchKey, graph.connecting, groupSelection, graph.edges, connectionMatchKey, displaySettings === null || displaySettings === void 0 ? void 0 : displaySettings.selectionGroup), [
755
+ const renderedElements = useMemo(() => renderElements(componentsEditor, mappingKey, tableMatchKey, graph.connecting, groupSelection, graph.edges, connectionMatchKey, displaySettings === null || displaySettings === void 0 ? void 0 : displaySettings.selectionGroup, graph.selectedNode), [
761
756
  componentsEditor,
762
757
  mappingKey,
763
758
  tableMatchKey,
@@ -768,6 +763,7 @@ const LayerView = (props) => {
768
763
  groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.colorGroupSelection,
769
764
  graph.edges,
770
765
  connectionMatchKey,
766
+ graph.selectedNode
771
767
  ]);
772
768
  return (<div className="relative w-full h-full flex-1" ref={containerRef} style={{ overflow: "auto", WebkitOverflowScrolling: "touch" }} {...props.containerProps}>
773
769
  {loading && (<div className="absolute z-10 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-opacity-50 bg-white w-full h-full flex items-center justify-center">
package/dist/features/view-only-5/utils.d.ts CHANGED
@@ -65,4 +65,4 @@ export declare const renderElements: (elementEditor: ComponentProps[], mappingKe
65
65
  }, edges?: EdgeType[], connectionMatchKey?: {
66
66
  key: string;
67
67
  value: string | number;
68
- }, settingSelectionGroup?: boolean) => ComponentProps[];
68
+ }, settingSelectionGroup?: boolean, selectedNodeId?: string) => ComponentProps[];
package/dist/features/view-only-5/utils.js CHANGED
@@ -71,48 +71,57 @@ const findIndexByValue = (obj, targetValue) => {
71
71
  const foundEntry = Object.entries(obj).find(([_, values]) => values.includes(targetValue));
72
72
  return foundEntry ? Number(foundEntry[0]) : undefined;
73
73
  };
74
- export const renderElements = (elementEditor, mappingKey, tableMatchKey, connecting, groupSelection, edges, connectionMatchKey, settingSelectionGroup) => {
74
+ export const renderElements = (elementEditor, mappingKey, tableMatchKey, connecting, groupSelection, edges, connectionMatchKey, settingSelectionGroup, selectedNodeId) => {
75
75
  var _a;
76
- const allIDFromIdConnection = ((_a = edges === null || edges === void 0 ? void 0 : edges.filter((edge) => edge.from === (connecting === null || connecting === void 0 ? void 0 : connecting.fromId) || edge.to === (connecting === null || connecting === void 0 ? void 0 : connecting.fromId)
76
+ const allIDFromIdConnection = ((_a = edges === null || edges === void 0 ? void 0 : edges.filter((edge) => edge.from === (connecting === null || connecting === void 0 ? void 0 : connecting.fromId) || edge.to === (connecting === null || connecting === void 0 ? void 0 : connecting.fromId) || selectedNodeId
77
77
  //bikin ed.to di merge dengan ed.from
78
- )) === null || _a === void 0 ? void 0 : _a.map((edge) => edge.to === (connecting === null || connecting === void 0 ? void 0 : connecting.fromId) ? edge.from : edge.to)) || [];
78
+ )) === null || _a === void 0 ? void 0 : _a.map((edge) => (edge.to === (connecting === null || connecting === void 0 ? void 0 : connecting.fromId) ? edge.from : edge.to))) ||
79
+ [];
79
80
  return elementEditor.map((editorItem) => {
80
81
  var _a, _b, _c, _d;
81
82
  const isUsingMapping = mappingKey &&
82
83
  typeof editorItem[mappingKey] === "object" &&
83
84
  editorItem[mappingKey] !== null;
84
85
  let finalProps = isUsingMapping ? editorItem[mappingKey] : editorItem;
86
+ const findIndexSelection = findIndexByValue(groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.selection, finalProps === null || finalProps === void 0 ? void 0 : finalProps[groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.dataKey]);
87
+ let fill = finalProps === null || finalProps === void 0 ? void 0 : finalProps.fill;
88
+ let stroke = finalProps === null || finalProps === void 0 ? void 0 : finalProps.stroke;
89
+ let seatFill = finalProps === null || finalProps === void 0 ? void 0 : finalProps.seatFill;
85
90
  if (tableMatchKey) {
86
91
  const tableMatch = tableMatchKey.find((item) => {
87
92
  const hasKey = Object.keys(editorItem).some((key) => key == item.key);
88
93
  if (hasKey)
89
94
  return item.value == (editorItem === null || editorItem === void 0 ? void 0 : editorItem[item.key]);
90
95
  });
91
- const findIndexSelection = findIndexByValue(groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.selection, finalProps === null || finalProps === void 0 ? void 0 : finalProps[groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.dataKey]);
92
- let fill = finalProps === null || finalProps === void 0 ? void 0 : finalProps.fill;
93
- let stroke = finalProps === null || finalProps === void 0 ? void 0 : finalProps.stroke;
94
- let seatFill = finalProps === null || finalProps === void 0 ? void 0 : finalProps.seatFill;
95
- if (findIndexSelection !== undefined && settingSelectionGroup) {
96
- fill = groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.colorGroupSelection[findIndexSelection];
97
- seatFill = groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.colorGroupSelection[findIndexSelection];
98
- stroke = groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.colorGroupSelection[findIndexSelection];
99
- }
100
96
  if ((_a = tableMatch === null || tableMatch === void 0 ? void 0 : tableMatch.properties) === null || _a === void 0 ? void 0 : _a.fill) {
101
97
  fill = (_b = tableMatch === null || tableMatch === void 0 ? void 0 : tableMatch.properties) === null || _b === void 0 ? void 0 : _b.fill;
102
98
  seatFill = (_c = tableMatch === null || tableMatch === void 0 ? void 0 : tableMatch.properties) === null || _c === void 0 ? void 0 : _c.seatFill;
103
99
  stroke = (_d = tableMatch === null || tableMatch === void 0 ? void 0 : tableMatch.properties) === null || _d === void 0 ? void 0 : _d.stroke;
104
100
  }
105
- if ((connecting === null || connecting === void 0 ? void 0 : connecting.fromId) == (finalProps === null || finalProps === void 0 ? void 0 : finalProps.id)) {
106
- fill = "#F8F5FF";
107
- stroke = "#5014D0";
108
- }
109
- if ((allIDFromIdConnection === null || allIDFromIdConnection === void 0 ? void 0 : allIDFromIdConnection.includes(finalProps === null || finalProps === void 0 ? void 0 : finalProps.id)) && (connecting === null || connecting === void 0 ? void 0 : connecting.fromId) !== (finalProps === null || finalProps === void 0 ? void 0 : finalProps.id)) {
110
- fill = "#EEF6FF";
111
- stroke = "#3E97FF";
112
- seatFill = "#3E97FF";
113
- }
114
101
  finalProps = Object.assign(Object.assign(Object.assign({}, finalProps), tableMatch === null || tableMatch === void 0 ? void 0 : tableMatch.properties), { fill: fill, seatFill: seatFill, stroke, className: tableMatch === null || tableMatch === void 0 ? void 0 : tableMatch.className, element: tableMatch === null || tableMatch === void 0 ? void 0 : tableMatch.element });
115
102
  }
103
+ if (findIndexSelection) {
104
+ if (findIndexSelection !== undefined && settingSelectionGroup) {
105
+ fill = groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.colorGroupSelection[findIndexSelection];
106
+ seatFill = groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.colorGroupSelection[findIndexSelection];
107
+ stroke = groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.colorGroupSelection[findIndexSelection];
108
+ finalProps = Object.assign(Object.assign({}, finalProps), { fill: fill, seatFill: seatFill, stroke });
109
+ }
110
+ }
111
+ if (((connecting === null || connecting === void 0 ? void 0 : connecting.fromId) || selectedNodeId) ==
112
+ ((finalProps === null || finalProps === void 0 ? void 0 : finalProps[groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.dataKey]) || (finalProps === null || finalProps === void 0 ? void 0 : finalProps.id))) {
113
+ fill = "#F8F5FF";
114
+ stroke = "#5014D0";
115
+ finalProps = Object.assign(Object.assign({}, finalProps), { fill: fill, seatFill: seatFill, stroke });
116
+ }
117
+ if ((allIDFromIdConnection === null || allIDFromIdConnection === void 0 ? void 0 : allIDFromIdConnection.includes((finalProps === null || finalProps === void 0 ? void 0 : finalProps[groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.dataKey]) || (finalProps === null || finalProps === void 0 ? void 0 : finalProps.id))) &&
118
+ (connecting === null || connecting === void 0 ? void 0 : connecting.fromId) !==
119
+ ((finalProps === null || finalProps === void 0 ? void 0 : finalProps[groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.dataKey]) || (finalProps === null || finalProps === void 0 ? void 0 : finalProps.id))) {
120
+ fill = "#EEF6FF";
121
+ stroke = "#3E97FF";
122
+ seatFill = "#3E97FF";
123
+ finalProps = Object.assign(Object.assign({}, finalProps), { fill: fill, seatFill: seatFill, stroke });
124
+ }
116
125
  if (connectionMatchKey) {
117
126
  if (!(finalProps === null || finalProps === void 0 ? void 0 : finalProps[connectionMatchKey.key])) {
118
127
  finalProps = Object.assign(Object.assign({}, finalProps), { [connectionMatchKey.key]: editorItem === null || editorItem === void 0 ? void 0 : editorItem[connectionMatchKey.key] });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "seat-editor",
3
- "version": "3.6.50",
3
+ "version": "3.6.51",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",