seat-editor 3.5.33 → 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})`}>
@@ -668,6 +668,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
668
668
  type: "panel/setSelectedGroup",
669
669
  payload: null,
670
670
  });
671
+ dispatch({ type: "panel/setSelectionLines", payload: null });
671
672
  polygonElementRef.current = null;
672
673
  }
673
674
  // const selectionLines = svgRef.current?.querySelector(
@@ -1526,6 +1527,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
1526
1527
  type: "panel/setSelectedComponent",
1527
1528
  payload: null,
1528
1529
  });
1530
+ dispatch({ type: "panel/setSelectionLines", payload: null });
1529
1531
  }
1530
1532
  else {
1531
1533
  dataElementSelectionGroupRef.current = [];
@@ -1654,6 +1656,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
1654
1656
  if (isInitialCreateText) {
1655
1657
  const ghost = svg.querySelector("#ghost-element-create");
1656
1658
  const getBBox = getGlobalBBox(svg, ghost);
1659
+ const selectionLines = Object.assign(Object.assign({}, getBBox), { shape: "selection-box" });
1657
1660
  const text = Object.assign(Object.assign({}, getBBox), { id: `${Date.now()}`, shape: "text", fontColor: "#000000", text: "Text", fontSize: 14, rotation: 0 });
1658
1661
  addComponents(text);
1659
1662
  dispatch({
@@ -1669,6 +1672,9 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
1669
1672
  type: "tool/setActiveTool",
1670
1673
  payload: "select",
1671
1674
  });
1675
+ console.log({ selectionLines });
1676
+ dispatch({ type: "panel/setSelectionLines", payload: selectionLines });
1677
+ setSelectedLines(selectionLines);
1672
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());
1673
1679
  isCreateElementRef.current = false;
1674
1680
  }
@@ -667,6 +667,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
667
667
  type: "panel/setSelectedGroup",
668
668
  payload: null,
669
669
  });
670
+ dispatch({ type: "panel/setSelectionLines", payload: null });
670
671
  polygonElementRef.current = null;
671
672
  }
672
673
  // const selectionLines = svgRef.current?.querySelector(
@@ -1525,6 +1526,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
1525
1526
  type: "panel/setSelectedComponent",
1526
1527
  payload: null,
1527
1528
  });
1529
+ dispatch({ type: "panel/setSelectionLines", payload: null });
1528
1530
  }
1529
1531
  else {
1530
1532
  dataElementSelectionGroupRef.current = [];
@@ -1653,6 +1655,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
1653
1655
  if (isInitialCreateText) {
1654
1656
  const ghost = svg.querySelector("#ghost-element-create");
1655
1657
  const getBBox = getGlobalBBox(svg, ghost);
1658
+ const selectionLines = Object.assign(Object.assign({}, getBBox), { shape: "selection-box" });
1656
1659
  const text = Object.assign(Object.assign({}, getBBox), { id: `${Date.now()}`, shape: "text", fontColor: "#000000", text: "Text", fontSize: 14, rotation: 0 });
1657
1660
  addComponents(text);
1658
1661
  dispatch({
@@ -1668,6 +1671,9 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
1668
1671
  type: "tool/setActiveTool",
1669
1672
  payload: "select",
1670
1673
  });
1674
+ console.log({ selectionLines });
1675
+ dispatch({ type: "panel/setSelectionLines", payload: selectionLines });
1676
+ setSelectedLines(selectionLines);
1671
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());
1672
1678
  isCreateElementRef.current = false;
1673
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.33",
3
+ "version": "3.5.34",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",