seat-editor 3.5.32 → 3.5.34

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.
@@ -174,7 +174,9 @@ const TouchScrollDetect = () => {
174
174
  key: "rsvp_time",
175
175
  items: ["text", "icon"],
176
176
  },
177
- ], defaultBackground: "#000000", mappingKey: "properties", componentProps: [], onDoubleClick: (data) => console.log(data), onDrop: (e, data) => handleDrop(e, data), onSwitch: (e, data) => handleSwitch(e, data), extraComponentProps: [], onSelectComponent: (component) => {
177
+ ],
178
+ // defaultBackground="#000000"
179
+ mappingKey: "properties", componentProps: [], onDoubleClick: (data) => console.log(data), onDrop: (e, data) => handleDrop(e, data), onSwitch: (e, data) => handleSwitch(e, data), extraComponentProps: [], onSelectComponent: (component) => {
178
180
  handleSelectTable(component);
179
181
  }, dragTableBlockKey: [
180
182
  {
@@ -198,7 +198,9 @@ const TouchScrollDetect = () => {
198
198
  key: "rsvp_time",
199
199
  items: ["text", "icon"],
200
200
  },
201
- ]} defaultBackground="#000000" mappingKey="properties" componentProps={[]} onDoubleClick={(data) => console.log(data)} onDrop={(e, data) => handleDrop(e, data)} onSwitch={(e, data) => handleSwitch(e, data)} extraComponentProps={[]} onSelectComponent={(component) => {
201
+ ]}
202
+ // defaultBackground="#000000"
203
+ mappingKey="properties" componentProps={[]} onDoubleClick={(data) => console.log(data)} onDrop={(e, data) => handleDrop(e, data)} onSwitch={(e, data) => handleSwitch(e, data)} extraComponentProps={[]} onSelectComponent={(component) => {
202
204
  handleSelectTable(component);
203
205
  }} dragTableBlockKey={[
204
206
  {
@@ -55,7 +55,7 @@ const SectionShape = ({ allowChangeShape = true, }) => {
55
55
  const selectedComponent = useAppSelector((state) => state.panel.selectedComponent);
56
56
  const maxSeat = (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent[seatKey]) || 0;
57
57
  return (_jsxs("div", { className: "py-2", children: [_jsxs("h1", { className: "heading-s", children: ["Shape ", (_a = optionsShape === null || optionsShape === void 0 ? void 0 : optionsShape.find((item) => item.value === shape)) === null || _a === void 0 ? void 0 : _a.label] }), allowChangeShape && (_jsx(Flex, { gap: 2, className: "w-full", children: _jsx(Form.Item, { label: "Name", name: "shape", className: "w-full", children: _jsx(Select, { className: "w-full", children: optionsShape === null || optionsShape === void 0 ? void 0 : optionsShape.map((item) => {
58
- const disabled = item.value === "table-seat-rect-circle" && maxSeat > 4;
58
+ const disabled = item.value === "table-seat-rect-circle" && (maxSeat > 4 || maxSeat < 4);
59
59
  return (_jsx(Option, { value: item.value, disabled: disabled, className: "flex w-full items-center", children: _jsxs(Flex, { gap: 5, align: "center", justify: "between", children: [item.icon, _jsx("span", { children: item.value === "table-seat-rect-circle"
60
60
  ? `Circle Type 2 (only for 4 ${seatKey})`
61
61
  : item.label })] }) }, item.value));
@@ -59,7 +59,7 @@ const SectionShape = ({ allowChangeShape = true, }) => {
59
59
  <Form.Item label="Name" name="shape" className="w-full">
60
60
  <Select className="w-full">
61
61
  {optionsShape === null || optionsShape === void 0 ? void 0 : optionsShape.map((item) => {
62
- const disabled = item.value === "table-seat-rect-circle" && maxSeat > 4;
62
+ const disabled = item.value === "table-seat-rect-circle" && (maxSeat > 4 || maxSeat < 4);
63
63
  return (<Option key={item.value} value={item.value} disabled={disabled} className="flex w-full items-center">
64
64
  <Flex gap={5} align="center" justify="between">
65
65
  {item.icon}
@@ -30,6 +30,10 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
30
30
  commonProps.stroke = "#ffa39e";
31
31
  commonProps.strokeWidth = 4;
32
32
  }
33
+ if (["image-table", "background"].includes(shape) && !src) {
34
+ commonProps.stroke = "#ffa39e";
35
+ commonProps.strokeWidth = 4;
36
+ }
33
37
  switch (shape) {
34
38
  case "square":
35
39
  return (_jsx("g", { "data-id": id, id: `${id}`, transform: `translate(${x}, ${y})`, children: _jsxs("g", { transform: `rotate(${rotation}, 0, 0)`, children: [_createElement("rect", Object.assign({}, commonProps, { key: id, width: width, height: height, rx: radius })), _jsx("g", { "data-text": `${id}-text`, transform: `rotate(${-rotation}, ${width / 2}, ${height / 2})`, children: labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
@@ -28,6 +28,10 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
28
28
  commonProps.stroke = "#ffa39e";
29
29
  commonProps.strokeWidth = 4;
30
30
  }
31
+ if (["image-table", "background"].includes(shape) && !src) {
32
+ commonProps.stroke = "#ffa39e";
33
+ commonProps.strokeWidth = 4;
34
+ }
31
35
  switch (shape) {
32
36
  case "square":
33
37
  return (<g key={id} data-id={id} id={`${id}`} transform={`translate(${x}, ${y})`}>
@@ -382,6 +382,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
382
382
  const handleUnSelectComponent = () => {
383
383
  dispatch({ type: "panel/setSelectedComponent", payload: null });
384
384
  dispatch({ type: "panel/setSelectedGroup", payload: null });
385
+ dispatch({ type: "panel/setSelectionLines", payload: null });
385
386
  setSelectedComponent(null);
386
387
  setSelectedLines(null);
387
388
  dispatch({ type: "panel/setShow", payload: false });
@@ -667,6 +668,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
667
668
  type: "panel/setSelectedGroup",
668
669
  payload: null,
669
670
  });
671
+ dispatch({ type: "panel/setSelectionLines", payload: null });
670
672
  polygonElementRef.current = null;
671
673
  }
672
674
  // const selectionLines = svgRef.current?.querySelector(
@@ -1525,6 +1527,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
1525
1527
  type: "panel/setSelectedComponent",
1526
1528
  payload: null,
1527
1529
  });
1530
+ dispatch({ type: "panel/setSelectionLines", payload: null });
1528
1531
  }
1529
1532
  else {
1530
1533
  dataElementSelectionGroupRef.current = [];
@@ -1653,6 +1656,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
1653
1656
  if (isInitialCreateText) {
1654
1657
  const ghost = svg.querySelector("#ghost-element-create");
1655
1658
  const getBBox = getGlobalBBox(svg, ghost);
1659
+ const selectionLines = Object.assign(Object.assign({}, getBBox), { shape: "selection-box" });
1656
1660
  const text = Object.assign(Object.assign({}, getBBox), { id: `${Date.now()}`, shape: "text", fontColor: "#000000", text: "Text", fontSize: 14, rotation: 0 });
1657
1661
  addComponents(text);
1658
1662
  dispatch({
@@ -1668,6 +1672,9 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
1668
1672
  type: "tool/setActiveTool",
1669
1673
  payload: "select",
1670
1674
  });
1675
+ console.log({ selectionLines });
1676
+ dispatch({ type: "panel/setSelectionLines", payload: selectionLines });
1677
+ setSelectedLines(selectionLines);
1671
1678
  (_p = (_o = svgRef.current) === null || _o === void 0 ? void 0 : _o.querySelectorAll("#ghost-element-create")) === null || _p === void 0 ? void 0 : _p.forEach((el) => el.remove());
1672
1679
  isCreateElementRef.current = false;
1673
1680
  }
@@ -381,6 +381,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
381
381
  const handleUnSelectComponent = () => {
382
382
  dispatch({ type: "panel/setSelectedComponent", payload: null });
383
383
  dispatch({ type: "panel/setSelectedGroup", payload: null });
384
+ dispatch({ type: "panel/setSelectionLines", payload: null });
384
385
  setSelectedComponent(null);
385
386
  setSelectedLines(null);
386
387
  dispatch({ type: "panel/setShow", payload: false });
@@ -666,6 +667,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
666
667
  type: "panel/setSelectedGroup",
667
668
  payload: null,
668
669
  });
670
+ dispatch({ type: "panel/setSelectionLines", payload: null });
669
671
  polygonElementRef.current = null;
670
672
  }
671
673
  // const selectionLines = svgRef.current?.querySelector(
@@ -1524,6 +1526,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
1524
1526
  type: "panel/setSelectedComponent",
1525
1527
  payload: null,
1526
1528
  });
1529
+ dispatch({ type: "panel/setSelectionLines", payload: null });
1527
1530
  }
1528
1531
  else {
1529
1532
  dataElementSelectionGroupRef.current = [];
@@ -1652,6 +1655,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
1652
1655
  if (isInitialCreateText) {
1653
1656
  const ghost = svg.querySelector("#ghost-element-create");
1654
1657
  const getBBox = getGlobalBBox(svg, ghost);
1658
+ const selectionLines = Object.assign(Object.assign({}, getBBox), { shape: "selection-box" });
1655
1659
  const text = Object.assign(Object.assign({}, getBBox), { id: `${Date.now()}`, shape: "text", fontColor: "#000000", text: "Text", fontSize: 14, rotation: 0 });
1656
1660
  addComponents(text);
1657
1661
  dispatch({
@@ -1667,6 +1671,9 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
1667
1671
  type: "tool/setActiveTool",
1668
1672
  payload: "select",
1669
1673
  });
1674
+ console.log({ selectionLines });
1675
+ dispatch({ type: "panel/setSelectionLines", payload: selectionLines });
1676
+ setSelectedLines(selectionLines);
1670
1677
  (_p = (_o = svgRef.current) === null || _o === void 0 ? void 0 : _o.querySelectorAll("#ghost-element-create")) === null || _p === void 0 ? void 0 : _p.forEach((el) => el.remove());
1671
1678
  isCreateElementRef.current = false;
1672
1679
  }
@@ -1,4 +1,5 @@
1
1
  import { createSlice } from "@reduxjs/toolkit";
2
+ import { isEmpty } from "lodash";
2
3
  const initialState = {
3
4
  selectedComponent: null,
4
5
  history: [],
@@ -41,7 +42,12 @@ export const panelSlice = createSlice({
41
42
  state.selectedGroup = action.payload;
42
43
  },
43
44
  setSelectionLines: (state, action) => {
44
- state.selectionLines = action.payload;
45
+ if (isEmpty(state.selectedComponent)) {
46
+ state.selectionLines = {};
47
+ }
48
+ else {
49
+ state.selectionLines = action.payload;
50
+ }
45
51
  }
46
52
  },
47
53
  });
@@ -14,6 +14,7 @@ const PolygonTool = () => {
14
14
  dispatch({ type: "board/setFlagChange", payload: true });
15
15
  dispatch({ type: "board/setUpdateBy", payload: "global" });
16
16
  dispatch({ type: "panel/setSelectedComponent", payload: null });
17
+ dispatch({ type: "panel/setSelectionLines", payload: null });
17
18
  dispatch({ type: "panel/setSelectedGroup", payload: null });
18
19
  dispatch({ type: "panel/setShow", payload: false });
19
20
  dispatch({ type: "tool/setActiveTool", payload: "select" });
@@ -13,6 +13,7 @@ const PolygonTool = () => {
13
13
  dispatch({ type: "board/setFlagChange", payload: true });
14
14
  dispatch({ type: "board/setUpdateBy", payload: "global" });
15
15
  dispatch({ type: "panel/setSelectedComponent", payload: null });
16
+ dispatch({ type: "panel/setSelectionLines", payload: null });
16
17
  dispatch({ type: "panel/setSelectedGroup", payload: null });
17
18
  dispatch({ type: "panel/setShow", payload: false });
18
19
  dispatch({ type: "tool/setActiveTool", payload: "select" });
@@ -14,6 +14,7 @@ const TextTool = () => {
14
14
  dispatch({ type: "board/setFlagChange", payload: true });
15
15
  dispatch({ type: "board/setUpdateBy", payload: "global" });
16
16
  dispatch({ type: "panel/setSelectedComponent", payload: null });
17
+ dispatch({ type: "panel/setSelectionLines", payload: null });
17
18
  dispatch({ type: "panel/setSelectedGroup", payload: null });
18
19
  dispatch({ type: "panel/setShow", payload: false });
19
20
  dispatch({ type: "tool/setActiveTool", payload: "select" });
@@ -13,6 +13,7 @@ const TextTool = () => {
13
13
  dispatch({ type: "board/setFlagChange", payload: true });
14
14
  dispatch({ type: "board/setUpdateBy", payload: "global" });
15
15
  dispatch({ type: "panel/setSelectedComponent", payload: null });
16
+ dispatch({ type: "panel/setSelectionLines", payload: null });
16
17
  dispatch({ type: "panel/setSelectedGroup", payload: null });
17
18
  dispatch({ type: "panel/setShow", payload: false });
18
19
  dispatch({ type: "tool/setActiveTool", payload: "select" });
@@ -174,6 +174,7 @@ const UploadTool = ({ name, type, action, defaultValue, transform, }) => {
174
174
  dispatch({ type: "board/setFlagChange", payload: true });
175
175
  dispatch({ type: "board/setUpdateBy", payload: "global" });
176
176
  dispatch({ type: "panel/setSelectedComponent", payload: null });
177
+ dispatch({ type: "panel/setSelectionLines", payload: null });
177
178
  dispatch({ type: "panel/setSelectedGroup", payload: null });
178
179
  dispatch({ type: "panel/setShow", payload: false });
179
180
  dispatch({ type: "tool/setActiveTool", payload: "select" });
@@ -190,7 +191,7 @@ const UploadToolForm = (props) => {
190
191
  const isExtraComponent = extraComponents.some((item) => item.id === (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id));
191
192
  const maxSeat = (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent[seatKey]) || 0;
192
193
  return (_jsxs("div", { className: "py-2", children: [_jsxs("h1", { className: "heading-s", children: ["Shape ", (_b = (_a = optionsShape === null || optionsShape === void 0 ? void 0 : optionsShape.find((item) => item.value === shape)) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : "Image"] }), (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) && !isExtraComponent && (_jsx(Flex, { gap: 2, className: "w-full", children: _jsx(Form.Item, { label: "Name", name: "shape", className: "w-full", children: _jsx(Select, { className: "w-full", children: optionsShape === null || optionsShape === void 0 ? void 0 : optionsShape.map((item) => {
193
- const disabled = item.value === "table-seat-rect-circle" && maxSeat > 4;
194
+ const disabled = item.value === "table-seat-rect-circle" && (maxSeat > 4 || maxSeat < 4);
194
195
  return (_jsx(Option, { value: item.value, disabled: disabled, className: "flex w-full items-center", children: _jsxs(Flex, { gap: 5, align: "center", justify: "between", children: [item.icon, _jsx("span", { children: item.value === "table-seat-rect-circle"
195
196
  ? `Circle Type 2 (only for 4 ${seatKey})`
196
197
  : item.label })] }) }, item.value));
@@ -173,6 +173,7 @@ const UploadTool = ({ name, type, action, defaultValue, transform, }) => {
173
173
  dispatch({ type: "board/setFlagChange", payload: true });
174
174
  dispatch({ type: "board/setUpdateBy", payload: "global" });
175
175
  dispatch({ type: "panel/setSelectedComponent", payload: null });
176
+ dispatch({ type: "panel/setSelectionLines", payload: null });
176
177
  dispatch({ type: "panel/setSelectedGroup", payload: null });
177
178
  dispatch({ type: "panel/setShow", payload: false });
178
179
  dispatch({ type: "tool/setActiveTool", payload: "select" });
@@ -223,7 +224,7 @@ const UploadToolForm = (props) => {
223
224
  <Form.Item label="Name" name="shape" className="w-full">
224
225
  <Select className="w-full">
225
226
  {optionsShape === null || optionsShape === void 0 ? void 0 : optionsShape.map((item) => {
226
- const disabled = item.value === "table-seat-rect-circle" && maxSeat > 4;
227
+ const disabled = item.value === "table-seat-rect-circle" && (maxSeat > 4 || maxSeat < 4);
227
228
  return (<Option key={item.value} value={item.value} disabled={disabled} className="flex w-full items-center">
228
229
  <Flex gap={5} align="center" justify="between">
229
230
  {item.icon}
@@ -121,6 +121,7 @@ const SideTool = ({ dragOnly, deleteAutorized, }) => {
121
121
  type: "panel/setSelectedComponent",
122
122
  payload: null,
123
123
  });
124
+ dispatch({ type: "panel/setSelectionLines", payload: null });
124
125
  dispatch({ type: "board/setFlagChange", payload: true });
125
126
  };
126
127
  const toggleGrid = () => {
@@ -120,6 +120,7 @@ const SideTool = ({ dragOnly, deleteAutorized, }) => {
120
120
  type: "panel/setSelectedComponent",
121
121
  payload: null,
122
122
  });
123
+ dispatch({ type: "panel/setSelectionLines", payload: null });
123
124
  dispatch({ type: "board/setFlagChange", payload: true });
124
125
  };
125
126
  const toggleGrid = () => {
@@ -383,7 +383,7 @@ const LayerView = (props) => {
383
383
  y: y - startBox.y,
384
384
  };
385
385
  const pointerMoveGhost = (ev) => {
386
- var _a;
386
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
387
387
  if (allowedDrag) {
388
388
  isDragging.current = true;
389
389
  const p = svg.createSVGPoint();
@@ -406,10 +406,21 @@ const LayerView = (props) => {
406
406
  const hoveredGroup = elemUnderPointer === null || elemUnderPointer === void 0 ? void 0 : elemUnderPointer.closest("g[data-id]");
407
407
  const dataHoveredGhostId = JSON.parse((hoveredGroup === null || hoveredGroup === void 0 ? void 0 : hoveredGroup.getAttribute("data-id")) || "{}");
408
408
  const dataGhostId = JSON.parse(ghost.getAttribute("data-id") || "{}");
409
+ if (dataHoveredGhostId === hoverUnderghostId.current) {
410
+ (_c = (_b = (_a = hoveredGroup === null || hoveredGroup === void 0 ? void 0 : hoveredGroup.firstChild) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.setAttribute("opacity", "1");
411
+ }
412
+ if (dataHoveredGhostId !== hoverUnderghostId.current) {
413
+ const dataPreview = hoverUnderghostId.current;
414
+ const hoveredBefore = svg.querySelector(`g[data-id="${dataPreview}"]`);
415
+ if (hoveredBefore) {
416
+ (_f = (_e = (_d = hoveredBefore.firstChild) === null || _d === void 0 ? void 0 : _d.children) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.setAttribute("opacity", "0.5");
417
+ }
418
+ }
419
+ (_j = (_h = (_g = targetGroup === null || targetGroup === void 0 ? void 0 : targetGroup.firstChild) === null || _g === void 0 ? void 0 : _g.children) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.setAttribute("opacity", "1");
409
420
  if (dataHoveredGhostId !== dataGhostId) {
410
421
  hoverUnderghostId.current = dataHoveredGhostId;
411
422
  }
412
- const posSVG = p.matrixTransform((_a = svg.getScreenCTM()) === null || _a === void 0 ? void 0 : _a.inverse());
423
+ const posSVG = p.matrixTransform((_k = svg.getScreenCTM()) === null || _k === void 0 ? void 0 : _k.inverse());
413
424
  // posisi awal ghost di bawah kursor tanpa matrix dulu
414
425
  const newX = posSVG.x - offset.x;
415
426
  const newY = posSVG.y - offset.y;
@@ -382,7 +382,7 @@ const LayerView = (props) => {
382
382
  y: y - startBox.y,
383
383
  };
384
384
  const pointerMoveGhost = (ev) => {
385
- var _a;
385
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
386
386
  if (allowedDrag) {
387
387
  isDragging.current = true;
388
388
  const p = svg.createSVGPoint();
@@ -405,10 +405,21 @@ const LayerView = (props) => {
405
405
  const hoveredGroup = elemUnderPointer === null || elemUnderPointer === void 0 ? void 0 : elemUnderPointer.closest("g[data-id]");
406
406
  const dataHoveredGhostId = JSON.parse((hoveredGroup === null || hoveredGroup === void 0 ? void 0 : hoveredGroup.getAttribute("data-id")) || "{}");
407
407
  const dataGhostId = JSON.parse(ghost.getAttribute("data-id") || "{}");
408
+ if (dataHoveredGhostId === hoverUnderghostId.current) {
409
+ (_c = (_b = (_a = hoveredGroup === null || hoveredGroup === void 0 ? void 0 : hoveredGroup.firstChild) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.setAttribute("opacity", "1");
410
+ }
411
+ if (dataHoveredGhostId !== hoverUnderghostId.current) {
412
+ const dataPreview = hoverUnderghostId.current;
413
+ const hoveredBefore = svg.querySelector(`g[data-id="${dataPreview}"]`);
414
+ if (hoveredBefore) {
415
+ (_f = (_e = (_d = hoveredBefore.firstChild) === null || _d === void 0 ? void 0 : _d.children) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.setAttribute("opacity", "0.5");
416
+ }
417
+ }
418
+ (_j = (_h = (_g = targetGroup === null || targetGroup === void 0 ? void 0 : targetGroup.firstChild) === null || _g === void 0 ? void 0 : _g.children) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.setAttribute("opacity", "1");
408
419
  if (dataHoveredGhostId !== dataGhostId) {
409
420
  hoverUnderghostId.current = dataHoveredGhostId;
410
421
  }
411
- const posSVG = p.matrixTransform((_a = svg.getScreenCTM()) === null || _a === void 0 ? void 0 : _a.inverse());
422
+ const posSVG = p.matrixTransform((_k = svg.getScreenCTM()) === null || _k === void 0 ? void 0 : _k.inverse());
412
423
  // posisi awal ghost di bawah kursor tanpa matrix dulu
413
424
  const newX = posSVG.x - offset.x;
414
425
  const newY = posSVG.y - offset.y;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "seat-editor",
3
- "version": "3.5.32",
3
+ "version": "3.5.34",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",