seat-editor 3.6.45 → 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.
@@ -150,7 +150,6 @@ export default function GraphView() {
150
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: () => {
151
151
  setActionPrivileged((prev) => (Object.assign(Object.assign({}, prev), { [item.key]: !prev[item.key] })));
152
152
  }, children: item.name }, item.key))) }), _jsx(LayerView, { componentProps: componentSection, statusKey: "section", defaultBackground: "#1e2d4a", mappingKey: "properties", keyNode: "nodes", onEdgesChange: (edgesd) => {
153
- console.log({ edgesd });
154
153
  setEdges(edgesd);
155
154
  }, initialEdges: edges, isConnectEdge: isConnecting, isSelectNode: isSelectNode, connectionMatchKey: {
156
155
  key: "use_checking_availability",
@@ -191,5 +190,9 @@ export default function GraphView() {
191
190
  colorGroupSelection: COLORS_SECTION,
192
191
  dataKey: "uuid_table",
193
192
  selection: selection,
193
+ }, displaySettings: {
194
+ connectingNode: true,
195
+ extraComponents: true,
196
+ selectionGroup: true,
194
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" }) }) })] }) }));
195
198
  }
@@ -156,7 +156,6 @@ export default function GraphView() {
156
156
  </Button>))}
157
157
  </div>
158
158
  <LayerView componentProps={componentSection} statusKey="section" defaultBackground="#1e2d4a" mappingKey="properties" keyNode="nodes" onEdgesChange={(edgesd) => {
159
- console.log({ edgesd });
160
159
  setEdges(edgesd);
161
160
  }} initialEdges={edges} isConnectEdge={isConnecting} isSelectNode={isSelectNode} connectionMatchKey={{
162
161
  key: "use_checking_availability",
@@ -197,6 +196,10 @@ export default function GraphView() {
197
196
  colorGroupSelection: COLORS_SECTION,
198
197
  dataKey: "uuid_table",
199
198
  selection: selection,
199
+ }} displaySettings={{
200
+ connectingNode: true,
201
+ extraComponents: true,
202
+ selectionGroup: true,
200
203
  }}/>
201
204
  <div className="w-1/5 p-4" onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave}>
202
205
  <div id="table"/>
@@ -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;
@@ -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)
@@ -652,7 +652,7 @@ const LayerView = (props) => {
652
652
  statusKey,
653
653
  initialEdges: props === null || props === void 0 ? void 0 : props.initialEdges,
654
654
  onTableMainConnection,
655
- groupSelection
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, {
@@ -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)
@@ -651,7 +651,7 @@ const LayerView = (props) => {
651
651
  statusKey,
652
652
  initialEdges: props === null || props === void 0 ? void 0 : props.initialEdges,
653
653
  onTableMainConnection,
654
- groupSelection
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;
@@ -38,8 +38,9 @@ export const useConnectionGraph = ({ svgRef, onEdgesChange, keyNode, mappingKey,
38
38
  setEdges((prev) => {
39
39
  const exists = prev.find((e) => (e.from === connecting.fromId && e.to === toId) ||
40
40
  (e.from === toId && e.to === connecting.fromId));
41
- if (exists)
42
- return prev;
41
+ if (exists) {
42
+ return prev.filter((e) => e.id !== exists.id);
43
+ }
43
44
  return [
44
45
  ...prev,
45
46
  {
@@ -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[];
@@ -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.45",
3
+ "version": "3.6.46",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",