seat-editor 3.6.20 → 3.6.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/components/layer-v5/index.js +2 -3
  2. package/dist/components/layer-v5/index.jsx +3 -4
  3. package/dist/features/view-only-5/index.d.ts +1 -0
  4. package/dist/features/view-only-5/index.js +22 -4
  5. package/dist/features/view-only-5/index.jsx +22 -4
  6. package/package.json +1 -1
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,16 @@ 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]");
279
+ console.log({ targetGroup, targetSelectionGroup });
275
280
  const { clientX, clientY } = e;
276
281
  const hitPoint = document.elementFromPoint(clientX, clientY);
277
282
  const downOutTable = (hitPoint === null || hitPoint === void 0 ? void 0 : hitPoint.nodeName) === "svg";
278
283
  const makeSelection = (downOutTable || !targetGroup) && (actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.selection);
279
284
  const hadSelection = dataElementSelectionGroupRef.current.length > 0;
280
- const downInOutSelection = hadSelection && makeSelection;
285
+ const downInOutSelection = hadSelection && makeSelection && e.button !== 2;
286
+ console.log({ hadSelection, makeSelection, downInOutSelection });
287
+ const hasSelectionDownOutSelection = !targetSelectionGroup && targetGroup && hadSelection;
281
288
  if (downOutTable) {
282
289
  if (graph.connecting) {
283
290
  graph.cancelConnect();
@@ -295,7 +302,7 @@ const LayerView = (props) => {
295
302
  });
296
303
  (_a = svgRef.current) === null || _a === void 0 ? void 0 : _a.appendChild(boxSelection);
297
304
  }
298
- if (downInOutSelection) {
305
+ if (downInOutSelection || hasSelectionDownOutSelection) {
299
306
  handleUnSelectComponent();
300
307
  }
301
308
  setPanningGroup(true);
@@ -408,7 +415,7 @@ const LayerView = (props) => {
408
415
  pointerMoveGhost(e.nativeEvent);
409
416
  const pointerHandleUp = (e) => {
410
417
  var _a, _b, _c, _d, _e;
411
- if (targetGroup) {
418
+ if (targetGroup && !hadSelection) {
412
419
  const dataId = JSON.parse(targetGroup.getAttribute("data-id") || "{}");
413
420
  isDragging.current = false;
414
421
  const svgSize = svg.getBoundingClientRect();
@@ -443,7 +450,18 @@ const LayerView = (props) => {
443
450
  clickTimerRef.current = null;
444
451
  }, DOUBLE_DELAY);
445
452
  }
446
- if (makeSelection && ((_a = dataElementSelectionGroupRef.current) === null || _a === void 0 ? void 0 : _a.length) > 0) {
453
+ if (hadSelection && targetSelectionGroup && e.button === 2) {
454
+ const svgSize = svg.getBoundingClientRect();
455
+ const relX = e.clientX - svgSize.left;
456
+ const relY = e.clientY - svgSize.top;
457
+ const centerX = svgSize.width / 2;
458
+ const centerY = svgSize.height / 2;
459
+ const newX = relX > centerX ? relX - widthTooltip : relX;
460
+ const newY = relY > centerY ? relY : relY;
461
+ const rightClick = e.button === 2 && allowTooltip;
462
+ setTooltip({ x: newX / scale, y: newY / scale, visible: rightClick });
463
+ }
464
+ if (makeSelection && ((_a = dataElementSelectionGroupRef.current) === null || _a === void 0 ? void 0 : _a.length) > 0 && e.button === 0) {
447
465
  const allTableInSelection = (_b = dataElementSelectionGroupRef.current) === null || _b === void 0 ? void 0 : _b.map((d) => d.id);
448
466
  const filterTableInSelection = componentProps === null || componentProps === void 0 ? void 0 : componentProps.filter((item) => {
449
467
  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,16 @@ 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]");
278
+ console.log({ targetGroup, targetSelectionGroup });
274
279
  const { clientX, clientY } = e;
275
280
  const hitPoint = document.elementFromPoint(clientX, clientY);
276
281
  const downOutTable = (hitPoint === null || hitPoint === void 0 ? void 0 : hitPoint.nodeName) === "svg";
277
282
  const makeSelection = (downOutTable || !targetGroup) && (actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.selection);
278
283
  const hadSelection = dataElementSelectionGroupRef.current.length > 0;
279
- const downInOutSelection = hadSelection && makeSelection;
284
+ const downInOutSelection = hadSelection && makeSelection && e.button !== 2;
285
+ console.log({ hadSelection, makeSelection, downInOutSelection });
286
+ const hasSelectionDownOutSelection = !targetSelectionGroup && targetGroup && hadSelection;
280
287
  if (downOutTable) {
281
288
  if (graph.connecting) {
282
289
  graph.cancelConnect();
@@ -294,7 +301,7 @@ const LayerView = (props) => {
294
301
  });
295
302
  (_a = svgRef.current) === null || _a === void 0 ? void 0 : _a.appendChild(boxSelection);
296
303
  }
297
- if (downInOutSelection) {
304
+ if (downInOutSelection || hasSelectionDownOutSelection) {
298
305
  handleUnSelectComponent();
299
306
  }
300
307
  setPanningGroup(true);
@@ -407,7 +414,7 @@ const LayerView = (props) => {
407
414
  pointerMoveGhost(e.nativeEvent);
408
415
  const pointerHandleUp = (e) => {
409
416
  var _a, _b, _c, _d, _e;
410
- if (targetGroup) {
417
+ if (targetGroup && !hadSelection) {
411
418
  const dataId = JSON.parse(targetGroup.getAttribute("data-id") || "{}");
412
419
  isDragging.current = false;
413
420
  const svgSize = svg.getBoundingClientRect();
@@ -442,7 +449,18 @@ const LayerView = (props) => {
442
449
  clickTimerRef.current = null;
443
450
  }, DOUBLE_DELAY);
444
451
  }
445
- 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) {
446
464
  const allTableInSelection = (_b = dataElementSelectionGroupRef.current) === null || _b === void 0 ? void 0 : _b.map((d) => d.id);
447
465
  const filterTableInSelection = componentProps === null || componentProps === void 0 ? void 0 : componentProps.filter((item) => {
448
466
  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.21",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",