seat-editor 3.6.20 → 3.6.22

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 (8) hide show
  1. package/dist/app/graph-view-new/page.js +2 -0
  2. package/dist/app/graph-view-new/page.jsx +2 -0
  3. package/dist/components/layer-v5/index.js +2 -3
  4. package/dist/components/layer-v5/index.jsx +3 -4
  5. package/dist/features/view-only-5/index.d.ts +1 -0
  6. package/dist/features/view-only-5/index.js +21 -4
  7. package/dist/features/view-only-5/index.jsx +21 -4
  8. package/package.json +1 -1
package/dist/app/graph-view-new/page.js CHANGED
@@ -162,5 +162,7 @@ export default function GraphView() {
162
162
  colorGroupSelection: COLORS_SECTION,
163
163
  dataKey: "uuid_table",
164
164
  selection: selection
165
+ }, onRightClick: (e, data) => {
166
+ console.log({ e, data });
165
167
  }, allowTooltip: true }), _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" }) }) })] }) }));
166
168
  }
package/dist/app/graph-view-new/page.jsx CHANGED
@@ -168,6 +168,8 @@ export default function GraphView() {
168
168
  colorGroupSelection: COLORS_SECTION,
169
169
  dataKey: "uuid_table",
170
170
  selection: selection
171
+ }} onRightClick={(e, data) => {
172
+ console.log({ e, data });
171
173
  }} allowTooltip={true}/>
172
174
  <div className="w-1/5 p-4" onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave}>
173
175
  <div id="table"/>
package/dist/components/layer-v5/index.js CHANGED
@@ -2,7 +2,7 @@
2
2
  import { createElement as _createElement } from "react";
3
3
  import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
4
4
  import { isEmpty, omit } from "lodash";
5
- import { arcByDirection, distributeWithSpacing, rectToPolygonNodes, } from "../layer-v3/utils";
5
+ import { arcByDirection, distributeWithSpacing, } from "../layer-v3/utils";
6
6
  // import { RsvpIcons } from "../../features/board-v3/icons";
7
7
  import { getBoundingBoxFromPoints } from "../layer-v3/utils";
8
8
  import { LabelItem } from "../layer-v3";
@@ -960,7 +960,6 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
960
960
  }
961
961
  };
962
962
  let date = new Date();
963
- const nodesRaw = rectToPolygonNodes(selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.width, selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.height);
964
- return (_jsxs("g", { children: [components === null || components === void 0 ? void 0 : components.map(renderShape), !isEmpty(selectionLines) && (_jsx("g", { id: "selection-lines", transform: `translate(${(selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.x) - 5},${(selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.y) - 5})`, children: _jsx("g", { transform: `rotate(${0}, 0,0)`, children: _jsx("rect", { width: selectionLines.width + 10, height: selectionLines.height + 10, fill: "none", stroke: "#4a90e2", strokeWidth: 1, strokeDasharray: "4 2", id: "rect-box-selection" }) }) }, `selection-${Date.now()}`))] }, `${date}`));
963
+ return (_jsxs("g", { children: [components === null || components === void 0 ? void 0 : components.map(renderShape), !isEmpty(selectionLines) && (_jsx("g", { id: "selection-lines", "data-selection": "selection-lines", transform: `translate(${(selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.x) - 5},${(selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.y) - 5})`, children: _jsx("g", { transform: `rotate(${0}, 0,0)`, children: _jsx("rect", { width: selectionLines.width + 10, height: selectionLines.height + 10, fill: "transparent", stroke: "#4a90e2", strokeWidth: 1, strokeDasharray: "4 2", id: "rect-box-selection" }) }) }, `selection-${Date.now()}`))] }, `${date}`));
965
964
  };
966
965
  export default Layers;
package/dist/components/layer-v5/index.jsx CHANGED
@@ -1,6 +1,6 @@
1
1
  "use client";
2
2
  import { isEmpty, omit } from "lodash";
3
- import { arcByDirection, distributeWithSpacing, rectToPolygonNodes, } from "../layer-v3/utils";
3
+ import { arcByDirection, distributeWithSpacing, } from "../layer-v3/utils";
4
4
  // import { RsvpIcons } from "../../features/board-v3/icons";
5
5
  import { getBoundingBoxFromPoints } from "../layer-v3/utils";
6
6
  import { LabelItem } from "../layer-v3";
@@ -1067,12 +1067,11 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
1067
1067
  }
1068
1068
  };
1069
1069
  let date = new Date();
1070
- const nodesRaw = rectToPolygonNodes(selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.width, selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.height);
1071
1070
  return (<g key={`${date}`}>
1072
1071
  {components === null || components === void 0 ? void 0 : components.map(renderShape)}
1073
- {!isEmpty(selectionLines) && (<g key={`selection-${Date.now()}`} id="selection-lines" transform={`translate(${(selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.x) - 5},${(selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.y) - 5})`}>
1072
+ {!isEmpty(selectionLines) && (<g key={`selection-${Date.now()}`} id="selection-lines" data-selection="selection-lines" transform={`translate(${(selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.x) - 5},${(selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.y) - 5})`}>
1074
1073
  <g transform={`rotate(${0}, 0,0)`}>
1075
- <rect width={selectionLines.width + 10} height={selectionLines.height + 10} fill="none" stroke="#4a90e2" strokeWidth={1} strokeDasharray={"4 2"} id="rect-box-selection"/>
1074
+ <rect width={selectionLines.width + 10} height={selectionLines.height + 10} fill="transparent" stroke="#4a90e2" strokeWidth={1} strokeDasharray={"4 2"} id="rect-box-selection"/>
1076
1075
  </g>
1077
1076
  </g>)}
1078
1077
  </g>);
package/dist/features/view-only-5/index.d.ts CHANGED
@@ -67,6 +67,7 @@ export interface LayerViewProps<TMeta = undefined> {
67
67
  style?: CSSProperties;
68
68
  minWidth?: number;
69
69
  children: React.ReactNode;
70
+ open: boolean;
70
71
  };
71
72
  dragTableBlockKey?: {
72
73
  key: string;
package/dist/features/view-only-5/index.js CHANGED
@@ -61,6 +61,9 @@ const LayerView = (props) => {
61
61
  }),
62
62
  }));
63
63
  const dispatch = useAppDispatch();
64
+ useEffect(() => {
65
+ setTooltip(Object.assign(Object.assign({}, tooltip), { visible: tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.open }));
66
+ }, [tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.open]);
64
67
  useEffect(() => {
65
68
  if (!loading && (loadingRender === null || loadingRender === void 0 ? void 0 : loadingRender.state)) {
66
69
  dispatch({ type: "panel/setLoading", payload: true });
@@ -272,12 +275,15 @@ const LayerView = (props) => {
272
275
  const startY = e.clientY;
273
276
  const { x, y } = getSvgCoords(e);
274
277
  const targetGroup = e.target.closest("g[data-id]");
278
+ const targetSelectionGroup = e.target.closest("g[data-selection]");
275
279
  const { clientX, clientY } = e;
276
280
  const hitPoint = document.elementFromPoint(clientX, clientY);
277
281
  const downOutTable = (hitPoint === null || hitPoint === void 0 ? void 0 : hitPoint.nodeName) === "svg";
278
282
  const makeSelection = (downOutTable || !targetGroup) && (actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.selection);
279
283
  const hadSelection = dataElementSelectionGroupRef.current.length > 0;
280
- const downInOutSelection = hadSelection && makeSelection;
284
+ const downInOutSelection = hadSelection && makeSelection && e.button !== 2;
285
+ const unSelectAll = hadSelection && e.button === 2 && targetGroup && !targetSelectionGroup;
286
+ const hasSelectionDownOutSelection = !targetSelectionGroup && targetGroup && hadSelection;
281
287
  if (downOutTable) {
282
288
  if (graph.connecting) {
283
289
  graph.cancelConnect();
@@ -295,7 +301,7 @@ const LayerView = (props) => {
295
301
  });
296
302
  (_a = svgRef.current) === null || _a === void 0 ? void 0 : _a.appendChild(boxSelection);
297
303
  }
298
- if (downInOutSelection) {
304
+ if (downInOutSelection || hasSelectionDownOutSelection || unSelectAll) {
299
305
  handleUnSelectComponent();
300
306
  }
301
307
  setPanningGroup(true);
@@ -408,7 +414,7 @@ const LayerView = (props) => {
408
414
  pointerMoveGhost(e.nativeEvent);
409
415
  const pointerHandleUp = (e) => {
410
416
  var _a, _b, _c, _d, _e;
411
- if (targetGroup) {
417
+ if (targetGroup && !hadSelection) {
412
418
  const dataId = JSON.parse(targetGroup.getAttribute("data-id") || "{}");
413
419
  isDragging.current = false;
414
420
  const svgSize = svg.getBoundingClientRect();
@@ -443,7 +449,18 @@ const LayerView = (props) => {
443
449
  clickTimerRef.current = null;
444
450
  }, DOUBLE_DELAY);
445
451
  }
446
- if (makeSelection && ((_a = dataElementSelectionGroupRef.current) === null || _a === void 0 ? void 0 : _a.length) > 0) {
452
+ if (hadSelection && targetSelectionGroup && e.button === 2) {
453
+ const svgSize = svg.getBoundingClientRect();
454
+ const relX = e.clientX - svgSize.left;
455
+ const relY = e.clientY - svgSize.top;
456
+ const centerX = svgSize.width / 2;
457
+ const centerY = svgSize.height / 2;
458
+ const newX = relX > centerX ? relX - widthTooltip : relX;
459
+ const newY = relY > centerY ? relY : relY;
460
+ const rightClick = e.button === 2 && allowTooltip;
461
+ setTooltip({ x: newX / scale, y: newY / scale, visible: rightClick });
462
+ }
463
+ if (makeSelection && ((_a = dataElementSelectionGroupRef.current) === null || _a === void 0 ? void 0 : _a.length) > 0 && e.button === 0) {
447
464
  const allTableInSelection = (_b = dataElementSelectionGroupRef.current) === null || _b === void 0 ? void 0 : _b.map((d) => d.id);
448
465
  const filterTableInSelection = componentProps === null || componentProps === void 0 ? void 0 : componentProps.filter((item) => {
449
466
  var _a, _b;
package/dist/features/view-only-5/index.jsx CHANGED
@@ -60,6 +60,9 @@ const LayerView = (props) => {
60
60
  }),
61
61
  }));
62
62
  const dispatch = useAppDispatch();
63
+ useEffect(() => {
64
+ setTooltip(Object.assign(Object.assign({}, tooltip), { visible: tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.open }));
65
+ }, [tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.open]);
63
66
  useEffect(() => {
64
67
  if (!loading && (loadingRender === null || loadingRender === void 0 ? void 0 : loadingRender.state)) {
65
68
  dispatch({ type: "panel/setLoading", payload: true });
@@ -271,12 +274,15 @@ const LayerView = (props) => {
271
274
  const startY = e.clientY;
272
275
  const { x, y } = getSvgCoords(e);
273
276
  const targetGroup = e.target.closest("g[data-id]");
277
+ const targetSelectionGroup = e.target.closest("g[data-selection]");
274
278
  const { clientX, clientY } = e;
275
279
  const hitPoint = document.elementFromPoint(clientX, clientY);
276
280
  const downOutTable = (hitPoint === null || hitPoint === void 0 ? void 0 : hitPoint.nodeName) === "svg";
277
281
  const makeSelection = (downOutTable || !targetGroup) && (actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.selection);
278
282
  const hadSelection = dataElementSelectionGroupRef.current.length > 0;
279
- const downInOutSelection = hadSelection && makeSelection;
283
+ const downInOutSelection = hadSelection && makeSelection && e.button !== 2;
284
+ const unSelectAll = hadSelection && e.button === 2 && targetGroup && !targetSelectionGroup;
285
+ const hasSelectionDownOutSelection = !targetSelectionGroup && targetGroup && hadSelection;
280
286
  if (downOutTable) {
281
287
  if (graph.connecting) {
282
288
  graph.cancelConnect();
@@ -294,7 +300,7 @@ const LayerView = (props) => {
294
300
  });
295
301
  (_a = svgRef.current) === null || _a === void 0 ? void 0 : _a.appendChild(boxSelection);
296
302
  }
297
- if (downInOutSelection) {
303
+ if (downInOutSelection || hasSelectionDownOutSelection || unSelectAll) {
298
304
  handleUnSelectComponent();
299
305
  }
300
306
  setPanningGroup(true);
@@ -407,7 +413,7 @@ const LayerView = (props) => {
407
413
  pointerMoveGhost(e.nativeEvent);
408
414
  const pointerHandleUp = (e) => {
409
415
  var _a, _b, _c, _d, _e;
410
- if (targetGroup) {
416
+ if (targetGroup && !hadSelection) {
411
417
  const dataId = JSON.parse(targetGroup.getAttribute("data-id") || "{}");
412
418
  isDragging.current = false;
413
419
  const svgSize = svg.getBoundingClientRect();
@@ -442,7 +448,18 @@ const LayerView = (props) => {
442
448
  clickTimerRef.current = null;
443
449
  }, DOUBLE_DELAY);
444
450
  }
445
- if (makeSelection && ((_a = dataElementSelectionGroupRef.current) === null || _a === void 0 ? void 0 : _a.length) > 0) {
451
+ if (hadSelection && targetSelectionGroup && e.button === 2) {
452
+ const svgSize = svg.getBoundingClientRect();
453
+ const relX = e.clientX - svgSize.left;
454
+ const relY = e.clientY - svgSize.top;
455
+ const centerX = svgSize.width / 2;
456
+ const centerY = svgSize.height / 2;
457
+ const newX = relX > centerX ? relX - widthTooltip : relX;
458
+ const newY = relY > centerY ? relY : relY;
459
+ const rightClick = e.button === 2 && allowTooltip;
460
+ setTooltip({ x: newX / scale, y: newY / scale, visible: rightClick });
461
+ }
462
+ if (makeSelection && ((_a = dataElementSelectionGroupRef.current) === null || _a === void 0 ? void 0 : _a.length) > 0 && e.button === 0) {
446
463
  const allTableInSelection = (_b = dataElementSelectionGroupRef.current) === null || _b === void 0 ? void 0 : _b.map((d) => d.id);
447
464
  const filterTableInSelection = componentProps === null || componentProps === void 0 ? void 0 : componentProps.filter((item) => {
448
465
  var _a, _b;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "seat-editor",
3
- "version": "3.6.20",
3
+ "version": "3.6.22",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",