seat-editor 3.6.44 → 3.6.46

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/app/graph-view-new/page.js +11 -6
  2. package/dist/app/graph-view-new/page.jsx +11 -6
  3. package/dist/features/view-only-5/index.d.ts +5 -0
  4. package/dist/features/view-only-5/index.js +13 -8
  5. package/dist/features/view-only-5/index.jsx +13 -8
  6. package/dist/features/view-only-5/use-connection-graph.js +8 -3
  7. package/dist/features/view-only-5/utils.d.ts +1 -1
  8. package/dist/features/view-only-5/utils.js +3 -3
  9. package/package.json +1 -1
package/dist/app/graph-view-new/page.js CHANGED
@@ -4,9 +4,8 @@ import clsx from "clsx";
4
4
  import LayerView from "../../features/view-only-5";
5
5
  import { COLORS_SECTION, data, NODE_PROPERTIES } from "./constant";
6
6
  import { Button } from "antd";
7
- import { useMemo, useState } from "react";
7
+ import { useEffect, useMemo, useState } from "react";
8
8
  import { selection } from "./selection";
9
- import { isEmpty } from "lodash";
10
9
  export default function GraphView() {
11
10
  const [isConnecting, setIsConnecting] = useState(false);
12
11
  const [actionPrivileged, setActionPrivileged] = useState({
@@ -144,13 +143,15 @@ export default function GraphView() {
144
143
  setDataDrag(null);
145
144
  }
146
145
  };
147
- const [edges, setEdges] = useState(NODE_PROPERTIES);
148
- console.log({ edges });
146
+ const [edges, setEdges] = useState([]);
147
+ useEffect(() => {
148
+ setEdges(NODE_PROPERTIES);
149
+ }, [NODE_PROPERTIES]);
149
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: () => {
150
151
  setActionPrivileged((prev) => (Object.assign(Object.assign({}, prev), { [item.key]: !prev[item.key] })));
151
152
  }, children: item.name }, item.key))) }), _jsx(LayerView, { componentProps: componentSection, statusKey: "section", defaultBackground: "#1e2d4a", mappingKey: "properties", keyNode: "nodes", onEdgesChange: (edgesd) => {
152
- // setEdges(edgesd);
153
- }, initialEdges: isEmpty(edges) ? NODE_PROPERTIES : edges, isConnectEdge: isConnecting, isSelectNode: isSelectNode, connectionMatchKey: {
153
+ setEdges(edgesd);
154
+ }, initialEdges: edges, isConnectEdge: isConnecting, isSelectNode: isSelectNode, connectionMatchKey: {
154
155
  key: "use_checking_availability",
155
156
  value: 0,
156
157
  }, onTableMainConnection: (e) => {
@@ -189,5 +190,9 @@ export default function GraphView() {
189
190
  colorGroupSelection: COLORS_SECTION,
190
191
  dataKey: "uuid_table",
191
192
  selection: selection,
193
+ }, displaySettings: {
194
+ connectingNode: true,
195
+ extraComponents: true,
196
+ selectionGroup: true,
192
197
  } }), _jsxs("div", { className: "w-1/5 p-4", onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, children: [_jsx("div", { id: "table" }), _jsxs("div", { className: "rounded-lg bg-white p-4", children: [_jsx("h1", { className: "text-2xl font-bold", children: "Section" }), sections.map((section) => (_jsxs("div", { className: clsx("font-bold text-white rounded-md p-2 cursor-pointer", sectionActive === section.id && "!bg-blue-500"), style: { backgroundColor: section.color }, onClick: () => setSectionActive(section.id), children: [_jsx("h2", { className: "text-lg", children: section.name }), section.items.length > 0 && (_jsx("ul", { className: "list-disc pl-5 bg-opacity-50 bg-white p-2 rounded ", children: section.items.map((item) => (_jsx("li", { children: item.name }, item.id))) }))] }, section.id)))] })] }), _jsx("div", { className: "w-1/5 p-4", children: _jsx("div", { className: "rounded-lg bg-white p-4", children: _jsx("h1", { className: "text-2xl font-bold", children: "Nodes" }) }) })] }) }));
193
198
  }
package/dist/app/graph-view-new/page.jsx CHANGED
@@ -3,9 +3,8 @@ import clsx from "clsx";
3
3
  import LayerView from "../../features/view-only-5";
4
4
  import { COLORS_SECTION, data, NODE_PROPERTIES } from "./constant";
5
5
  import { Button } from "antd";
6
- import { useMemo, useState } from "react";
6
+ import { useEffect, useMemo, useState } from "react";
7
7
  import { selection } from "./selection";
8
- import { isEmpty } from "lodash";
9
8
  export default function GraphView() {
10
9
  const [isConnecting, setIsConnecting] = useState(false);
11
10
  const [actionPrivileged, setActionPrivileged] = useState({
@@ -143,8 +142,10 @@ export default function GraphView() {
143
142
  setDataDrag(null);
144
143
  }
145
144
  };
146
- const [edges, setEdges] = useState(NODE_PROPERTIES);
147
- console.log({ edges });
145
+ const [edges, setEdges] = useState([]);
146
+ useEffect(() => {
147
+ setEdges(NODE_PROPERTIES);
148
+ }, [NODE_PROPERTIES]);
148
149
  return (<div className="w-full h-screen flex relative">
149
150
  <div className="flex">
150
151
  <div className="absolute top-0 left-0 z-10 flex gap-2">
@@ -155,8 +156,8 @@ export default function GraphView() {
155
156
  </Button>))}
156
157
  </div>
157
158
  <LayerView componentProps={componentSection} statusKey="section" defaultBackground="#1e2d4a" mappingKey="properties" keyNode="nodes" onEdgesChange={(edgesd) => {
158
- // setEdges(edgesd);
159
- }} initialEdges={isEmpty(edges) ? NODE_PROPERTIES : edges} isConnectEdge={isConnecting} isSelectNode={isSelectNode} connectionMatchKey={{
159
+ setEdges(edgesd);
160
+ }} initialEdges={edges} isConnectEdge={isConnecting} isSelectNode={isSelectNode} connectionMatchKey={{
160
161
  key: "use_checking_availability",
161
162
  value: 0,
162
163
  }} onTableMainConnection={(e) => {
@@ -195,6 +196,10 @@ export default function GraphView() {
195
196
  colorGroupSelection: COLORS_SECTION,
196
197
  dataKey: "uuid_table",
197
198
  selection: selection,
199
+ }} displaySettings={{
200
+ connectingNode: true,
201
+ extraComponents: true,
202
+ selectionGroup: true,
198
203
  }}/>
199
204
  <div className="w-1/5 p-4" onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave}>
200
205
  <div id="table"/>
package/dist/features/view-only-5/index.d.ts CHANGED
@@ -121,6 +121,11 @@ export interface LayerViewProps<TMeta = undefined> {
121
121
  value: string | number;
122
122
  };
123
123
  onTableMainConnection?: (id: string | null) => void;
124
+ displaySettings?: {
125
+ extraComponents?: boolean;
126
+ connectingNode?: boolean;
127
+ selectionGroup?: boolean;
128
+ };
124
129
  }
125
130
  declare const LayerView: <TMeta>(props: LayerViewProps<TMeta>) => import("react/jsx-runtime").JSX.Element;
126
131
  export default LayerView;
package/dist/features/view-only-5/index.js CHANGED
@@ -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, onTableMainConnection } = props;
32
+ }, onMakeSelection, groupSelection, onHoldTable, showConnection, connectionMatchKey, onTableMainConnection, displaySettings, } = 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);
@@ -622,7 +622,7 @@ const LayerView = (props) => {
622
622
  const comp = componentsEditor.find((item) => {
623
623
  var _a, _b, _c;
624
624
  if (mappingKey && (item === null || item === void 0 ? void 0 : item[mappingKey]))
625
- 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;
625
+ 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);
626
626
  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;
627
627
  });
628
628
  if (!comp)
@@ -651,8 +651,8 @@ const LayerView = (props) => {
651
651
  tableMatchKey,
652
652
  statusKey,
653
653
  initialEdges: props === null || props === void 0 ? void 0 : props.initialEdges,
654
- onTableMainConnection: props === null || props === void 0 ? void 0 : props.onTableMainConnection,
655
- groupSelection
654
+ onTableMainConnection,
655
+ groupSelection,
656
656
  });
657
657
  // ─── Render ───────────────────────────────────────────────────────────────
658
658
  const hasBoundingBox = hasBoundingBoxRef.current;
@@ -665,7 +665,7 @@ const LayerView = (props) => {
665
665
  const viewBox = isValidBoundingBox
666
666
  ? `${boundingBox.minX - (((_a = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _a === void 0 ? void 0 : _a.paddingLeft) || 0)} ${boundingBox.minY - (((_b = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _b === void 0 ? void 0 : _b.paddingTop) || 0)} ${boundingBox.width + (((_c = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _c === void 0 ? void 0 : _c.paddingRight) || 0)} ${boundingBox.height + (((_d = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _d === void 0 ? void 0 : _d.paddingBottom) || 0)}`
667
667
  : "0 0 1000 1000";
668
- const renderedElements = useMemo(() => renderElements(componentsEditor, mappingKey, tableMatchKey, graph.connecting, groupSelection, graph.edges, connectionMatchKey), [
668
+ const renderedElements = useMemo(() => renderElements(componentsEditor, mappingKey, tableMatchKey, graph.connecting, groupSelection, graph.edges, connectionMatchKey, displaySettings === null || displaySettings === void 0 ? void 0 : displaySettings.selectionGroup), [
669
669
  componentsEditor,
670
670
  mappingKey,
671
671
  tableMatchKey,
@@ -675,7 +675,7 @@ const LayerView = (props) => {
675
675
  groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.dataKey,
676
676
  groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.colorGroupSelection,
677
677
  graph.edges,
678
- connectionMatchKey
678
+ connectionMatchKey,
679
679
  ]);
680
680
  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(),
681
681
  // onDrop={(e) => handleTableEvent(e, "drop")}
@@ -687,9 +687,14 @@ const LayerView = (props) => {
687
687
  display: "block",
688
688
  touchAction: "none",
689
689
  userSelect: "none",
690
- } }, 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,
690
+ } }, 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: [
691
+ ...((displaySettings === null || displaySettings === void 0 ? void 0 : displaySettings.extraComponents)
692
+ ? extraComponentsEditor
693
+ : []),
694
+ ...renderedElements,
695
+ ], selectedTable: selectedTable,
691
696
  // iconTags={iconTags}
692
- 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) => {
697
+ eventMatchTable: eventMatchTable, privilegedTags: privilegedTags, selectionLines: selectedLines }) }), _jsx(ConnectionLayer, { edges: (displaySettings === null || displaySettings === void 0 ? void 0 : displaySettings.connectingNode) ? 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) => {
693
698
  var _a, _b, _c, _d, _e;
694
699
  const rotated = rotatePoint(item.width / 2, item.height / 2, (_a = item.rotation) !== null && _a !== void 0 ? _a : 0);
695
700
  return (_jsx(ConnectHandle, {
package/dist/features/view-only-5/index.jsx CHANGED
@@ -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, onTableMainConnection } = props;
31
+ }, onMakeSelection, groupSelection, onHoldTable, showConnection, connectionMatchKey, onTableMainConnection, displaySettings, } = 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);
@@ -621,7 +621,7 @@ const LayerView = (props) => {
621
621
  const comp = componentsEditor.find((item) => {
622
622
  var _a, _b, _c;
623
623
  if (mappingKey && (item === null || item === void 0 ? void 0 : item[mappingKey]))
624
- 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;
624
+ 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);
625
625
  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;
626
626
  });
627
627
  if (!comp)
@@ -650,8 +650,8 @@ const LayerView = (props) => {
650
650
  tableMatchKey,
651
651
  statusKey,
652
652
  initialEdges: props === null || props === void 0 ? void 0 : props.initialEdges,
653
- onTableMainConnection: props === null || props === void 0 ? void 0 : props.onTableMainConnection,
654
- groupSelection
653
+ onTableMainConnection,
654
+ groupSelection,
655
655
  });
656
656
  // ─── Render ───────────────────────────────────────────────────────────────
657
657
  const hasBoundingBox = hasBoundingBoxRef.current;
@@ -664,7 +664,7 @@ const LayerView = (props) => {
664
664
  const viewBox = isValidBoundingBox
665
665
  ? `${boundingBox.minX - (((_a = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _a === void 0 ? void 0 : _a.paddingLeft) || 0)} ${boundingBox.minY - (((_b = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _b === void 0 ? void 0 : _b.paddingTop) || 0)} ${boundingBox.width + (((_c = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _c === void 0 ? void 0 : _c.paddingRight) || 0)} ${boundingBox.height + (((_d = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _d === void 0 ? void 0 : _d.paddingBottom) || 0)}`
666
666
  : "0 0 1000 1000";
667
- const renderedElements = useMemo(() => renderElements(componentsEditor, mappingKey, tableMatchKey, graph.connecting, groupSelection, graph.edges, connectionMatchKey), [
667
+ const renderedElements = useMemo(() => renderElements(componentsEditor, mappingKey, tableMatchKey, graph.connecting, groupSelection, graph.edges, connectionMatchKey, displaySettings === null || displaySettings === void 0 ? void 0 : displaySettings.selectionGroup), [
668
668
  componentsEditor,
669
669
  mappingKey,
670
670
  tableMatchKey,
@@ -674,7 +674,7 @@ const LayerView = (props) => {
674
674
  groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.dataKey,
675
675
  groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.colorGroupSelection,
676
676
  graph.edges,
677
- connectionMatchKey
677
+ connectionMatchKey,
678
678
  ]);
679
679
  return (<div className="relative w-full h-full flex-1" ref={containerRef} style={{ overflow: "auto", WebkitOverflowScrolling: "touch" }} {...props.containerProps}>
680
680
  {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">
@@ -703,12 +703,17 @@ const LayerView = (props) => {
703
703
  </defs>)}
704
704
 
705
705
  <g id="main-layer" clipPath="url(#contentCrop)">
706
- <Layers components={[...extraComponentsEditor, ...renderedElements]} selectedTable={selectedTable}
706
+ <Layers components={[
707
+ ...((displaySettings === null || displaySettings === void 0 ? void 0 : displaySettings.extraComponents)
708
+ ? extraComponentsEditor
709
+ : []),
710
+ ...renderedElements,
711
+ ]} selectedTable={selectedTable}
707
712
  // iconTags={iconTags}
708
713
  eventMatchTable={eventMatchTable} privilegedTags={privilegedTags} selectionLines={selectedLines}/>
709
714
  </g>
710
715
 
711
- <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}/>
716
+ <ConnectionLayer edges={(displaySettings === null || displaySettings === void 0 ? void 0 : displaySettings.connectingNode) ? 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}/>
712
717
 
713
718
  {renderedElements.map((item) => {
714
719
  var _a, _b, _c, _d, _e;
package/dist/features/view-only-5/use-connection-graph.js CHANGED
@@ -32,13 +32,15 @@ export const useConnectionGraph = ({ svgRef, onEdgesChange, keyNode, mappingKey,
32
32
  const endConnect = useCallback((toId, toPos) => {
33
33
  if (!connecting || connecting.fromId === toId) {
34
34
  setConnecting(null);
35
+ onTableMainConnection(null);
35
36
  return;
36
37
  }
37
38
  setEdges((prev) => {
38
39
  const exists = prev.find((e) => (e.from === connecting.fromId && e.to === toId) ||
39
40
  (e.from === toId && e.to === connecting.fromId));
40
- if (exists)
41
- return prev;
41
+ if (exists) {
42
+ return prev.filter((e) => e.id !== exists.id);
43
+ }
42
44
  return [
43
45
  ...prev,
44
46
  {
@@ -54,7 +56,10 @@ export const useConnectionGraph = ({ svgRef, onEdgesChange, keyNode, mappingKey,
54
56
  });
55
57
  // setConnecting(null);
56
58
  }, [connecting]);
57
- const cancelConnect = useCallback(() => setConnecting(null), []);
59
+ const cancelConnect = useCallback(() => {
60
+ onTableMainConnection(null);
61
+ setConnecting(null);
62
+ }, []);
58
63
  // ── Drag endpoint ────────────────────────────────────────────────
59
64
  const startDragAnchor = useCallback((e, edgeId, side) => {
60
65
  e.stopPropagation();
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
- }) => ComponentProps[];
68
+ }, settingSelectionGroup?: boolean) => ComponentProps[];
package/dist/features/view-only-5/utils.js CHANGED
@@ -71,7 +71,7 @@ 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) => {
74
+ export const renderElements = (elementEditor, mappingKey, tableMatchKey, connecting, groupSelection, edges, connectionMatchKey, settingSelectionGroup) => {
75
75
  var _a;
76
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)
77
77
  //bikin ed.to di merge dengan ed.from
@@ -92,7 +92,7 @@ export const renderElements = (elementEditor, mappingKey, tableMatchKey, connect
92
92
  let fill = finalProps === null || finalProps === void 0 ? void 0 : finalProps.fill;
93
93
  let stroke = finalProps === null || finalProps === void 0 ? void 0 : finalProps.stroke;
94
94
  let seatFill = finalProps === null || finalProps === void 0 ? void 0 : finalProps.seatFill;
95
- if (findIndexSelection !== undefined) {
95
+ if (findIndexSelection !== undefined && settingSelectionGroup) {
96
96
  fill = groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.colorGroupSelection[findIndexSelection];
97
97
  }
98
98
  if ((_a = tableMatch === null || tableMatch === void 0 ? void 0 : tableMatch.properties) === null || _a === void 0 ? void 0 : _a.fill) {
@@ -107,7 +107,7 @@ export const renderElements = (elementEditor, mappingKey, tableMatchKey, connect
107
107
  stroke = "#3E97FF";
108
108
  seatFill = "#3E97FF";
109
109
  }
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 });
110
+ 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 });
111
111
  }
112
112
  if (connectionMatchKey) {
113
113
  if (!(finalProps === null || finalProps === void 0 ? void 0 : finalProps[connectionMatchKey.key])) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "seat-editor",
3
- "version": "3.6.44",
3
+ "version": "3.6.46",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",