seat-editor 3.3.46 → 3.4.1

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 (35) hide show
  1. package/dist/app/constant.d.ts +3 -0
  2. package/dist/app/constant.js +2 -1
  3. package/dist/app/new-board/page.js +9 -1
  4. package/dist/app/new-board/page.jsx +9 -1
  5. package/dist/app/only-view/page.js +7 -7
  6. package/dist/components/form-tools/label.js +8 -4
  7. package/dist/components/form-tools/label.jsx +27 -21
  8. package/dist/components/form-tools/shape.js +41 -16
  9. package/dist/components/form-tools/shape.jsx +35 -14
  10. package/dist/features/board-v3/index.js +12 -5
  11. package/dist/features/board-v3/index.jsx +12 -5
  12. package/dist/features/package/index.d.ts +1 -0
  13. package/dist/features/package/index.js +22 -17
  14. package/dist/features/package/index.jsx +22 -17
  15. package/dist/features/panel/index.js +26 -13
  16. package/dist/features/panel/index.jsx +26 -13
  17. package/dist/features/panel/panel-slice.d.ts +2 -0
  18. package/dist/features/panel/panel-slice.js +3 -0
  19. package/dist/features/panel/select-tool.js +31 -14
  20. package/dist/features/panel/select-tool.jsx +31 -24
  21. package/dist/features/panel/table-seat-circle.js +3 -2
  22. package/dist/features/panel/table-seat-circle.jsx +7 -14
  23. package/dist/features/panel/table-seat-square.js +8 -2
  24. package/dist/features/panel/table-seat-square.jsx +15 -8
  25. package/dist/features/panel/upload-tool.js +3 -1
  26. package/dist/features/panel/upload-tool.jsx +4 -2
  27. package/dist/features/panel/utils.d.ts +8 -2
  28. package/dist/features/panel/utils.js +60 -23
  29. package/dist/features/side-tool/index.js +9 -3
  30. package/dist/features/side-tool/index.jsx +16 -4
  31. package/dist/features/view-only-2/index.js +6 -4
  32. package/dist/features/view-only-2/index.jsx +5 -3
  33. package/dist/features/view-only-3/index.js +7 -5
  34. package/dist/features/view-only-3/index.jsx +7 -9
  35. package/package.json +1 -1
package/dist/features/package/index.js CHANGED
@@ -5,7 +5,7 @@ import Board from "../board-v3";
5
5
  import SideTool from "../side-tool";
6
6
  import ControlPanels from "../panel";
7
7
  import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
8
- import { isEqual } from "lodash";
8
+ import { isEqual, omit } from "lodash";
9
9
  import LayerView from "../view-only-3";
10
10
  import { Spin } from "antd";
11
11
  const TableEditor = (props) => {
@@ -48,7 +48,7 @@ const TableEditor = (props) => {
48
48
  if (!findComponent)
49
49
  return undefined;
50
50
  if (findComponent) {
51
- return Object.assign(Object.assign({}, item), { [mappingKey]: Object.assign({}, findComponent) });
51
+ return Object.assign(Object.assign({}, item), { [mappingKey]: Object.assign({}, omit(findComponent, `${props === null || props === void 0 ? void 0 : props.defaultSeatCountKey}`)) });
52
52
  }
53
53
  }
54
54
  else {
@@ -83,10 +83,13 @@ const TableEditor = (props) => {
83
83
  const convertComponentProps = () => {
84
84
  let mappingData = componentProps === null || componentProps === void 0 ? void 0 : componentProps.map((item) => {
85
85
  if (item && mappingKey && (item === null || item === void 0 ? void 0 : item[mappingKey])) {
86
- return Object.assign({}, (typeof (item === null || item === void 0 ? void 0 : item[mappingKey]) === "object" &&
87
- (item === null || item === void 0 ? void 0 : item[mappingKey]) !== null
86
+ const data = typeof (item === null || item === void 0 ? void 0 : item[mappingKey]) === "object" && (item === null || item === void 0 ? void 0 : item[mappingKey]) !== null
88
87
  ? item === null || item === void 0 ? void 0 : item[mappingKey]
89
- : {}));
88
+ : {};
89
+ if (props === null || props === void 0 ? void 0 : props.defaultSeatCountKey) {
90
+ return Object.assign(Object.assign({}, data), { [props === null || props === void 0 ? void 0 : props.defaultSeatCountKey]: item === null || item === void 0 ? void 0 : item[props === null || props === void 0 ? void 0 : props.defaultSeatCountKey] });
91
+ }
92
+ return Object.assign({}, data);
90
93
  }
91
94
  return item;
92
95
  });
@@ -99,15 +102,7 @@ const TableEditor = (props) => {
99
102
  const initialComponent = !isEqual(components, convertComponentProps()) && componentProps;
100
103
  const initialExtraComponent = !isEqual(extraComponents, extraComponentProps) && extraComponentProps;
101
104
  if (initialComponent || initialExtraComponent) {
102
- let mappingData = componentProps === null || componentProps === void 0 ? void 0 : componentProps.map((item) => {
103
- if (item && mappingKey && (item === null || item === void 0 ? void 0 : item[props.mappingKey])) {
104
- return Object.assign({}, (typeof item[props.mappingKey] === "object" &&
105
- item[props.mappingKey] !== null
106
- ? item[props.mappingKey]
107
- : {}));
108
- }
109
- return item;
110
- });
105
+ let mappingData = convertComponentProps();
111
106
  if (mappingKey) {
112
107
  setInitialValue(componentProps);
113
108
  }
@@ -151,9 +146,11 @@ const TableEditor = (props) => {
151
146
  // },
152
147
  // })
153
148
  // }
154
- setTimeout(() => {
155
- dispatch({ type: "panel/setLoading", payload: false });
156
- }, 1000);
149
+ if (loading) {
150
+ setTimeout(() => {
151
+ dispatch({ type: "panel/setLoading", payload: false });
152
+ }, 1000);
153
+ }
157
154
  }, [
158
155
  componentProps,
159
156
  extraComponentProps,
@@ -161,6 +158,14 @@ const TableEditor = (props) => {
161
158
  props === null || props === void 0 ? void 0 : props.defaultBoundingBox,
162
159
  loadingRender === null || loadingRender === void 0 ? void 0 : loadingRender.state,
163
160
  ]);
161
+ useEffect(() => {
162
+ if (props === null || props === void 0 ? void 0 : props.defaultSeatCountKey) {
163
+ dispatch({
164
+ type: "panel/setSeatDefaultKey",
165
+ payload: props === null || props === void 0 ? void 0 : props.defaultSeatCountKey,
166
+ });
167
+ }
168
+ }, [props === null || props === void 0 ? void 0 : props.defaultSeatCountKey, initialValue]);
164
169
  return (_jsx(_Fragment, { children: _jsx("div", { className: "w-full h-screen flex relative", children: viewOnly ? (_jsx("div", { className: "w-full h-full flex relative", children: _jsx(LayerView, { statusKey: "status", loadingRender: props === null || props === void 0 ? void 0 : props.loadingRender, actionPrivileged: {
165
170
  select: false,
166
171
  move: false,
package/dist/features/package/index.jsx CHANGED
@@ -4,7 +4,7 @@ import Board from "../board-v3";
4
4
  import SideTool from "../side-tool";
5
5
  import ControlPanels from "../panel";
6
6
  import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
7
- import { isEqual } from "lodash";
7
+ import { isEqual, omit } from "lodash";
8
8
  import LayerView from "../view-only-3";
9
9
  import { Spin } from "antd";
10
10
  const TableEditor = (props) => {
@@ -47,7 +47,7 @@ const TableEditor = (props) => {
47
47
  if (!findComponent)
48
48
  return undefined;
49
49
  if (findComponent) {
50
- return Object.assign(Object.assign({}, item), { [mappingKey]: Object.assign({}, findComponent) });
50
+ return Object.assign(Object.assign({}, item), { [mappingKey]: Object.assign({}, omit(findComponent, `${props === null || props === void 0 ? void 0 : props.defaultSeatCountKey}`)) });
51
51
  }
52
52
  }
53
53
  else {
@@ -82,10 +82,13 @@ const TableEditor = (props) => {
82
82
  const convertComponentProps = () => {
83
83
  let mappingData = componentProps === null || componentProps === void 0 ? void 0 : componentProps.map((item) => {
84
84
  if (item && mappingKey && (item === null || item === void 0 ? void 0 : item[mappingKey])) {
85
- return Object.assign({}, (typeof (item === null || item === void 0 ? void 0 : item[mappingKey]) === "object" &&
86
- (item === null || item === void 0 ? void 0 : item[mappingKey]) !== null
85
+ const data = typeof (item === null || item === void 0 ? void 0 : item[mappingKey]) === "object" && (item === null || item === void 0 ? void 0 : item[mappingKey]) !== null
87
86
  ? item === null || item === void 0 ? void 0 : item[mappingKey]
88
- : {}));
87
+ : {};
88
+ if (props === null || props === void 0 ? void 0 : props.defaultSeatCountKey) {
89
+ return Object.assign(Object.assign({}, data), { [props === null || props === void 0 ? void 0 : props.defaultSeatCountKey]: item === null || item === void 0 ? void 0 : item[props === null || props === void 0 ? void 0 : props.defaultSeatCountKey] });
90
+ }
91
+ return Object.assign({}, data);
89
92
  }
90
93
  return item;
91
94
  });
@@ -98,15 +101,7 @@ const TableEditor = (props) => {
98
101
  const initialComponent = !isEqual(components, convertComponentProps()) && componentProps;
99
102
  const initialExtraComponent = !isEqual(extraComponents, extraComponentProps) && extraComponentProps;
100
103
  if (initialComponent || initialExtraComponent) {
101
- let mappingData = componentProps === null || componentProps === void 0 ? void 0 : componentProps.map((item) => {
102
- if (item && mappingKey && (item === null || item === void 0 ? void 0 : item[props.mappingKey])) {
103
- return Object.assign({}, (typeof item[props.mappingKey] === "object" &&
104
- item[props.mappingKey] !== null
105
- ? item[props.mappingKey]
106
- : {}));
107
- }
108
- return item;
109
- });
104
+ let mappingData = convertComponentProps();
110
105
  if (mappingKey) {
111
106
  setInitialValue(componentProps);
112
107
  }
@@ -150,9 +145,11 @@ const TableEditor = (props) => {
150
145
  // },
151
146
  // })
152
147
  // }
153
- setTimeout(() => {
154
- dispatch({ type: "panel/setLoading", payload: false });
155
- }, 1000);
148
+ if (loading) {
149
+ setTimeout(() => {
150
+ dispatch({ type: "panel/setLoading", payload: false });
151
+ }, 1000);
152
+ }
156
153
  }, [
157
154
  componentProps,
158
155
  extraComponentProps,
@@ -160,6 +157,14 @@ const TableEditor = (props) => {
160
157
  props === null || props === void 0 ? void 0 : props.defaultBoundingBox,
161
158
  loadingRender === null || loadingRender === void 0 ? void 0 : loadingRender.state,
162
159
  ]);
160
+ useEffect(() => {
161
+ if (props === null || props === void 0 ? void 0 : props.defaultSeatCountKey) {
162
+ dispatch({
163
+ type: "panel/setSeatDefaultKey",
164
+ payload: props === null || props === void 0 ? void 0 : props.defaultSeatCountKey,
165
+ });
166
+ }
167
+ }, [props === null || props === void 0 ? void 0 : props.defaultSeatCountKey, initialValue]);
163
168
  return (<>
164
169
  <div className="w-full h-screen flex relative">
165
170
  {viewOnly ? (<div className="w-full h-full flex relative">
package/dist/features/panel/index.js CHANGED
@@ -31,6 +31,7 @@ const ControlPanels = (props) => {
31
31
  const theme = useAppSelector((state) => state.theme);
32
32
  const tool = useAppSelector((state) => state.tool);
33
33
  const selectedComponent = useAppSelector((state) => state.panel.selectedComponent);
34
+ const seatKey = useAppSelector((state) => state.panel.seatDefaultKey);
34
35
  const selectedGroup = useAppSelector((state) => state.panel.selectedGroup);
35
36
  const components = useAppSelector((state) => state.board.components);
36
37
  const extraComponents = useAppSelector((state) => state.board.extraComponents);
@@ -44,6 +45,7 @@ const ControlPanels = (props) => {
44
45
  let values = Form.useWatch([], form);
45
46
  useEffect(() => {
46
47
  if (selectedComponent) {
48
+ form.resetFields();
47
49
  const isDifferentId = (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) !== (values === null || values === void 0 ? void 0 : values.id) || !(values === null || values === void 0 ? void 0 : values.id);
48
50
  const isSameIdAndSameDimensions = (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) === (values === null || values === void 0 ? void 0 : values.id) &&
49
51
  (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.height) === (values === null || values === void 0 ? void 0 : values.height) &&
@@ -53,9 +55,10 @@ const ControlPanels = (props) => {
53
55
  if (show && (isDifferentId || isSameIdAndSameDimensions)) {
54
56
  setOpen(true);
55
57
  }
56
- form.setFieldsValue(selectedComponent);
58
+ form.setFieldsValue(Object.assign(Object.assign({}, selectedComponent), { opacity: (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.opacity) * 100, openSpace: (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.openSpace) * 100 }));
57
59
  }
58
60
  else if (selectedGroup) {
61
+ form.resetFields();
59
62
  if (show)
60
63
  setOpen(true);
61
64
  if (!show)
@@ -67,6 +70,11 @@ const ControlPanels = (props) => {
67
70
  return arr.every((item) => item[key] === firstValue);
68
71
  }
69
72
  function getValueIfSame(arr, key) {
73
+ if (key === "opacity") {
74
+ return isSameAllByKey(arr, key)
75
+ ? Number(arr[0][key]) * 100
76
+ : undefined;
77
+ }
70
78
  return isSameAllByKey(arr, key) ? arr[0][key] : undefined;
71
79
  }
72
80
  form.setFieldsValue({
@@ -92,13 +100,17 @@ const ControlPanels = (props) => {
92
100
  if (tool.active === "background" || tool.active === "image-table") {
93
101
  setOpen(true);
94
102
  }
103
+ else {
104
+ setOpen(false);
105
+ }
95
106
  }, [tool, show]);
96
- const createShape = (shape, props = {}) => {
97
- var _a, _b, _c, _d, _e, _f, _g;
107
+ const createShape = (shape, props = {}, selectedComponent) => {
108
+ var _a, _b, _c, _d, _e, _f, _g, _h;
98
109
  const defaults = (_a = SEAT_SHAPES[shape]) !== null && _a !== void 0 ? _a : {};
99
- return Object.assign(Object.assign(Object.assign({}, defaults), props), { shape: (_b = props.shape) !== null && _b !== void 0 ? _b : shape, height: (_c = adjustHeightWidthForSeatShape(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape, props)) === null || _c === void 0 ? void 0 : _c.height, width: (_d = adjustHeightWidthForSeatShape(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape, props)) === null || _d === void 0 ? void 0 : _d.width, fill: props.fill, seatCount: getSeatCount(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape, props), seatPositions: getSeatPosition(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape, props), openSpace: isSeatShape(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape) ? (_e = props.openSpace) !== null && _e !== void 0 ? _e : 0 : undefined, seatFill: isSeatShape(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape)
100
- ? props.seatFill
101
- : undefined, text: shape === "text" ? (_f = props.text) !== null && _f !== void 0 ? _f : defaults.text : undefined, fontColor: shape === "text" ? (_g = props.fontColor) !== null && _g !== void 0 ? _g : defaults.fontColor : undefined, radius: props.radius });
110
+ const seatDefault = selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent[seatKey];
111
+ return Object.assign(Object.assign(Object.assign({}, defaults), props), { shape: (_b = props.shape) !== null && _b !== void 0 ? _b : shape, height: (_c = adjustHeightWidthForSeatShape(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape, props)) === null || _c === void 0 ? void 0 : _c.height, width: (_d = adjustHeightWidthForSeatShape(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape, props)) === null || _d === void 0 ? void 0 : _d.width, fill: props.fill, seatCount: getSeatCount(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape, props, seatDefault), seatPositions: getSeatPosition(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape, props, seatDefault), openSpace: isSeatShape(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape)
112
+ ? (_e = props.openSpace) !== null && _e !== void 0 ? _e : 0
113
+ : undefined, seatFill: isSeatShape(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape) ? (_f = props.seatFill) !== null && _f !== void 0 ? _f : theme === null || theme === void 0 ? void 0 : theme.primaryColor : undefined, text: shape === "text" ? (_g = props.text) !== null && _g !== void 0 ? _g : defaults.text : undefined, fontColor: shape === "text" ? (_h = props.fontColor) !== null && _h !== void 0 ? _h : defaults.fontColor : undefined, radius: props.radius });
102
114
  };
103
115
  const debouncedSyncComponents = useRef(debounce((data) => {
104
116
  dispatch({ type: "board/setFlagChange", payload: true });
@@ -147,7 +159,7 @@ const ControlPanels = (props) => {
147
159
  dispatch({ type: "board/setUpdateBy", payload: "global" });
148
160
  }, 300));
149
161
  const updateElement = (id, values) => {
150
- var _a, _b, _c, _d, _e, _f, _g;
162
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
151
163
  let findElement = [...components, ...extraComponents].find((item) => item.id === id);
152
164
  const isAdjustSize = ["circle"].includes((findElement === null || findElement === void 0 ? void 0 : findElement.shape) || "");
153
165
  let forceSize = {
@@ -158,8 +170,8 @@ const ControlPanels = (props) => {
158
170
  return;
159
171
  const newElement = Object.assign(Object.assign(Object.assign({}, findElement), values), { x: (_a = values.x) !== null && _a !== void 0 ? _a : findElement.x, y: (_b = values.y) !== null && _b !== void 0 ? _b : findElement.y, width: isAdjustSize ? forceSize.width : (_c = values.width) !== null && _c !== void 0 ? _c : findElement.width, height: isAdjustSize
160
172
  ? forceSize.height
161
- : (_d = values.height) !== null && _d !== void 0 ? _d : findElement.height });
162
- const svg = (_f = (_e = svgRef === null || svgRef === void 0 ? void 0 : svgRef.current) === null || _e === void 0 ? void 0 : _e[1]) !== null && _f !== void 0 ? _f : (_g = svgRef === null || svgRef === void 0 ? void 0 : svgRef.current) === null || _g === void 0 ? void 0 : _g[0];
173
+ : (_d = values.height) !== null && _d !== void 0 ? _d : findElement.height, opacity: ((_e = values === null || values === void 0 ? void 0 : values.opacity) !== null && _e !== void 0 ? _e : 100) / 100, openSpace: ((_f = values === null || values === void 0 ? void 0 : values.openSpace) !== null && _f !== void 0 ? _f : 0) / 100 });
174
+ const svg = (_h = (_g = svgRef === null || svgRef === void 0 ? void 0 : svgRef.current) === null || _g === void 0 ? void 0 : _g[1]) !== null && _h !== void 0 ? _h : (_j = svgRef === null || svgRef === void 0 ? void 0 : svgRef.current) === null || _j === void 0 ? void 0 : _j[0];
163
175
  const { g, element } = getAttributeElement(svg, id);
164
176
  applyResizeToSvgElement(element, g, newElement);
165
177
  const getBBox = getGlobalBBox(svg, g);
@@ -167,15 +179,16 @@ const ControlPanels = (props) => {
167
179
  updateSelectionBox(svg, getBBox);
168
180
  };
169
181
  const handleChangeComponent = (values, allValues) => {
182
+ var _a, _b;
170
183
  const { shape } = allValues, restProps = __rest(allValues, ["shape"]);
171
- const newValues = createShape(shape, restProps);
184
+ const newValues = createShape(shape, restProps, selectedComponent);
172
185
  if (selectedComponent) {
173
186
  updateElement(allValues.id, values);
174
- debouncedSyncComponents.current(Object.assign(Object.assign({}, (selectedComponent || {})), newValues));
187
+ debouncedSyncComponents.current(Object.assign(Object.assign(Object.assign({}, (selectedComponent || {})), newValues), { opacity: ((_a = newValues === null || newValues === void 0 ? void 0 : newValues.opacity) !== null && _a !== void 0 ? _a : 100) / 100, openSpace: ((_b = newValues === null || newValues === void 0 ? void 0 : newValues.openSpace) !== null && _b !== void 0 ? _b : 0) / 100 }));
175
188
  }
176
189
  if ((selectedGroup === null || selectedGroup === void 0 ? void 0 : selectedGroup.length) > 0) {
177
- const { width, height, x, y, fill, stroke, opacity, rotation, strokeWidth, radius, shape, seatCount, seatFill, seatPositions, labels } = newValues;
178
- const updatedGroup = selectedGroup.map((comp) => (Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, comp), (width !== undefined ? { width } : {})), (height !== undefined ? { height } : {})), (x !== undefined ? { x } : {})), (y !== undefined ? { y } : {})), (fill !== undefined ? { fill } : {})), (stroke !== undefined ? { stroke } : {})), (opacity !== undefined ? { opacity } : {})), (rotation !== undefined ? { rotation } : {})), (strokeWidth !== undefined ? { strokeWidth } : {})), (radius !== undefined ? { radius } : {})), (shape !== undefined ? { shape } : {})), (seatCount !== undefined ? { seatCount } : {})), (seatFill !== undefined ? { seatFill } : {})), (seatPositions !== undefined ? { seatPositions } : {})), (labels !== undefined ? { labels } : {}))));
190
+ const { width, height, x, y, fill, stroke, opacity, rotation, strokeWidth, radius, shape, seatCount, seatFill, seatPositions, labels, } = newValues;
191
+ const updatedGroup = selectedGroup.map((comp) => (Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, comp), (width !== undefined ? { width } : {})), (height !== undefined ? { height } : {})), (x !== undefined ? { x } : {})), (y !== undefined ? { y } : {})), (fill !== undefined ? { fill } : {})), (stroke !== undefined ? { stroke } : {})), (opacity !== undefined ? { opacity: opacity / 100 } : {})), (rotation !== undefined ? { rotation } : {})), (strokeWidth !== undefined ? { strokeWidth } : {})), (radius !== undefined ? { radius } : {})), (shape !== undefined ? { shape } : {})), (seatCount !== undefined ? { seatCount } : {})), (seatFill !== undefined ? { seatFill } : {})), (seatPositions !== undefined ? { seatPositions } : {})), (labels !== undefined ? { labels } : {}))));
179
192
  let minX = Infinity;
180
193
  let minY = Infinity;
181
194
  let maxX = -Infinity;
package/dist/features/panel/index.jsx CHANGED
@@ -30,6 +30,7 @@ const ControlPanels = (props) => {
30
30
  const theme = useAppSelector((state) => state.theme);
31
31
  const tool = useAppSelector((state) => state.tool);
32
32
  const selectedComponent = useAppSelector((state) => state.panel.selectedComponent);
33
+ const seatKey = useAppSelector((state) => state.panel.seatDefaultKey);
33
34
  const selectedGroup = useAppSelector((state) => state.panel.selectedGroup);
34
35
  const components = useAppSelector((state) => state.board.components);
35
36
  const extraComponents = useAppSelector((state) => state.board.extraComponents);
@@ -43,6 +44,7 @@ const ControlPanels = (props) => {
43
44
  let values = Form.useWatch([], form);
44
45
  useEffect(() => {
45
46
  if (selectedComponent) {
47
+ form.resetFields();
46
48
  const isDifferentId = (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) !== (values === null || values === void 0 ? void 0 : values.id) || !(values === null || values === void 0 ? void 0 : values.id);
47
49
  const isSameIdAndSameDimensions = (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) === (values === null || values === void 0 ? void 0 : values.id) &&
48
50
  (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.height) === (values === null || values === void 0 ? void 0 : values.height) &&
@@ -52,9 +54,10 @@ const ControlPanels = (props) => {
52
54
  if (show && (isDifferentId || isSameIdAndSameDimensions)) {
53
55
  setOpen(true);
54
56
  }
55
- form.setFieldsValue(selectedComponent);
57
+ form.setFieldsValue(Object.assign(Object.assign({}, selectedComponent), { opacity: (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.opacity) * 100, openSpace: (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.openSpace) * 100 }));
56
58
  }
57
59
  else if (selectedGroup) {
60
+ form.resetFields();
58
61
  if (show)
59
62
  setOpen(true);
60
63
  if (!show)
@@ -66,6 +69,11 @@ const ControlPanels = (props) => {
66
69
  return arr.every((item) => item[key] === firstValue);
67
70
  }
68
71
  function getValueIfSame(arr, key) {
72
+ if (key === "opacity") {
73
+ return isSameAllByKey(arr, key)
74
+ ? Number(arr[0][key]) * 100
75
+ : undefined;
76
+ }
69
77
  return isSameAllByKey(arr, key) ? arr[0][key] : undefined;
70
78
  }
71
79
  form.setFieldsValue({
@@ -91,13 +99,17 @@ const ControlPanels = (props) => {
91
99
  if (tool.active === "background" || tool.active === "image-table") {
92
100
  setOpen(true);
93
101
  }
102
+ else {
103
+ setOpen(false);
104
+ }
94
105
  }, [tool, show]);
95
- const createShape = (shape, props = {}) => {
96
- var _a, _b, _c, _d, _e, _f, _g;
106
+ const createShape = (shape, props = {}, selectedComponent) => {
107
+ var _a, _b, _c, _d, _e, _f, _g, _h;
97
108
  const defaults = (_a = SEAT_SHAPES[shape]) !== null && _a !== void 0 ? _a : {};
98
- return Object.assign(Object.assign(Object.assign({}, defaults), props), { shape: (_b = props.shape) !== null && _b !== void 0 ? _b : shape, height: (_c = adjustHeightWidthForSeatShape(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape, props)) === null || _c === void 0 ? void 0 : _c.height, width: (_d = adjustHeightWidthForSeatShape(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape, props)) === null || _d === void 0 ? void 0 : _d.width, fill: props.fill, seatCount: getSeatCount(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape, props), seatPositions: getSeatPosition(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape, props), openSpace: isSeatShape(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape) ? (_e = props.openSpace) !== null && _e !== void 0 ? _e : 0 : undefined, seatFill: isSeatShape(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape)
99
- ? props.seatFill
100
- : undefined, text: shape === "text" ? (_f = props.text) !== null && _f !== void 0 ? _f : defaults.text : undefined, fontColor: shape === "text" ? (_g = props.fontColor) !== null && _g !== void 0 ? _g : defaults.fontColor : undefined, radius: props.radius });
109
+ const seatDefault = selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent[seatKey];
110
+ return Object.assign(Object.assign(Object.assign({}, defaults), props), { shape: (_b = props.shape) !== null && _b !== void 0 ? _b : shape, height: (_c = adjustHeightWidthForSeatShape(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape, props)) === null || _c === void 0 ? void 0 : _c.height, width: (_d = adjustHeightWidthForSeatShape(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape, props)) === null || _d === void 0 ? void 0 : _d.width, fill: props.fill, seatCount: getSeatCount(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape, props, seatDefault), seatPositions: getSeatPosition(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape, props, seatDefault), openSpace: isSeatShape(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape)
111
+ ? (_e = props.openSpace) !== null && _e !== void 0 ? _e : 0
112
+ : undefined, seatFill: isSeatShape(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape) ? (_f = props.seatFill) !== null && _f !== void 0 ? _f : theme === null || theme === void 0 ? void 0 : theme.primaryColor : undefined, text: shape === "text" ? (_g = props.text) !== null && _g !== void 0 ? _g : defaults.text : undefined, fontColor: shape === "text" ? (_h = props.fontColor) !== null && _h !== void 0 ? _h : defaults.fontColor : undefined, radius: props.radius });
101
113
  };
102
114
  const debouncedSyncComponents = useRef(debounce((data) => {
103
115
  dispatch({ type: "board/setFlagChange", payload: true });
@@ -146,7 +158,7 @@ const ControlPanels = (props) => {
146
158
  dispatch({ type: "board/setUpdateBy", payload: "global" });
147
159
  }, 300));
148
160
  const updateElement = (id, values) => {
149
- var _a, _b, _c, _d, _e, _f, _g;
161
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
150
162
  let findElement = [...components, ...extraComponents].find((item) => item.id === id);
151
163
  const isAdjustSize = ["circle"].includes((findElement === null || findElement === void 0 ? void 0 : findElement.shape) || "");
152
164
  let forceSize = {
@@ -157,8 +169,8 @@ const ControlPanels = (props) => {
157
169
  return;
158
170
  const newElement = Object.assign(Object.assign(Object.assign({}, findElement), values), { x: (_a = values.x) !== null && _a !== void 0 ? _a : findElement.x, y: (_b = values.y) !== null && _b !== void 0 ? _b : findElement.y, width: isAdjustSize ? forceSize.width : (_c = values.width) !== null && _c !== void 0 ? _c : findElement.width, height: isAdjustSize
159
171
  ? forceSize.height
160
- : (_d = values.height) !== null && _d !== void 0 ? _d : findElement.height });
161
- const svg = (_f = (_e = svgRef === null || svgRef === void 0 ? void 0 : svgRef.current) === null || _e === void 0 ? void 0 : _e[1]) !== null && _f !== void 0 ? _f : (_g = svgRef === null || svgRef === void 0 ? void 0 : svgRef.current) === null || _g === void 0 ? void 0 : _g[0];
172
+ : (_d = values.height) !== null && _d !== void 0 ? _d : findElement.height, opacity: ((_e = values === null || values === void 0 ? void 0 : values.opacity) !== null && _e !== void 0 ? _e : 100) / 100, openSpace: ((_f = values === null || values === void 0 ? void 0 : values.openSpace) !== null && _f !== void 0 ? _f : 0) / 100 });
173
+ const svg = (_h = (_g = svgRef === null || svgRef === void 0 ? void 0 : svgRef.current) === null || _g === void 0 ? void 0 : _g[1]) !== null && _h !== void 0 ? _h : (_j = svgRef === null || svgRef === void 0 ? void 0 : svgRef.current) === null || _j === void 0 ? void 0 : _j[0];
162
174
  const { g, element } = getAttributeElement(svg, id);
163
175
  applyResizeToSvgElement(element, g, newElement);
164
176
  const getBBox = getGlobalBBox(svg, g);
@@ -166,15 +178,16 @@ const ControlPanels = (props) => {
166
178
  updateSelectionBox(svg, getBBox);
167
179
  };
168
180
  const handleChangeComponent = (values, allValues) => {
181
+ var _a, _b;
169
182
  const { shape } = allValues, restProps = __rest(allValues, ["shape"]);
170
- const newValues = createShape(shape, restProps);
183
+ const newValues = createShape(shape, restProps, selectedComponent);
171
184
  if (selectedComponent) {
172
185
  updateElement(allValues.id, values);
173
- debouncedSyncComponents.current(Object.assign(Object.assign({}, (selectedComponent || {})), newValues));
186
+ debouncedSyncComponents.current(Object.assign(Object.assign(Object.assign({}, (selectedComponent || {})), newValues), { opacity: ((_a = newValues === null || newValues === void 0 ? void 0 : newValues.opacity) !== null && _a !== void 0 ? _a : 100) / 100, openSpace: ((_b = newValues === null || newValues === void 0 ? void 0 : newValues.openSpace) !== null && _b !== void 0 ? _b : 0) / 100 }));
174
187
  }
175
188
  if ((selectedGroup === null || selectedGroup === void 0 ? void 0 : selectedGroup.length) > 0) {
176
- const { width, height, x, y, fill, stroke, opacity, rotation, strokeWidth, radius, shape, seatCount, seatFill, seatPositions, labels } = newValues;
177
- const updatedGroup = selectedGroup.map((comp) => (Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, comp), (width !== undefined ? { width } : {})), (height !== undefined ? { height } : {})), (x !== undefined ? { x } : {})), (y !== undefined ? { y } : {})), (fill !== undefined ? { fill } : {})), (stroke !== undefined ? { stroke } : {})), (opacity !== undefined ? { opacity } : {})), (rotation !== undefined ? { rotation } : {})), (strokeWidth !== undefined ? { strokeWidth } : {})), (radius !== undefined ? { radius } : {})), (shape !== undefined ? { shape } : {})), (seatCount !== undefined ? { seatCount } : {})), (seatFill !== undefined ? { seatFill } : {})), (seatPositions !== undefined ? { seatPositions } : {})), (labels !== undefined ? { labels } : {}))));
189
+ const { width, height, x, y, fill, stroke, opacity, rotation, strokeWidth, radius, shape, seatCount, seatFill, seatPositions, labels, } = newValues;
190
+ const updatedGroup = selectedGroup.map((comp) => (Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, comp), (width !== undefined ? { width } : {})), (height !== undefined ? { height } : {})), (x !== undefined ? { x } : {})), (y !== undefined ? { y } : {})), (fill !== undefined ? { fill } : {})), (stroke !== undefined ? { stroke } : {})), (opacity !== undefined ? { opacity: opacity / 100 } : {})), (rotation !== undefined ? { rotation } : {})), (strokeWidth !== undefined ? { strokeWidth } : {})), (radius !== undefined ? { radius } : {})), (shape !== undefined ? { shape } : {})), (seatCount !== undefined ? { seatCount } : {})), (seatFill !== undefined ? { seatFill } : {})), (seatPositions !== undefined ? { seatPositions } : {})), (labels !== undefined ? { labels } : {}))));
178
191
  let minX = Infinity;
179
192
  let minY = Infinity;
180
193
  let maxX = -Infinity;
package/dist/features/panel/panel-slice.d.ts CHANGED
@@ -7,8 +7,10 @@ export interface PanelState {
7
7
  selectedGroup: any;
8
8
  selectionLines?: any;
9
9
  loading?: boolean;
10
+ seatDefaultKey?: string;
10
11
  }
11
12
  export declare const panelSlice: import("@reduxjs/toolkit").Slice<PanelState, {
13
+ setSeatDefaultKey: (state: import("immer").WritableDraft<PanelState>, action: PayloadAction<string>) => void;
12
14
  setLoading: (state: import("immer").WritableDraft<PanelState>, action: PayloadAction<boolean>) => void;
13
15
  setSelectedComponent: (state: import("immer").WritableDraft<PanelState>, action: PayloadAction<any>) => void;
14
16
  setUnSelectedComponent: (state: import("immer").WritableDraft<PanelState>) => void;
package/dist/features/panel/panel-slice.js CHANGED
@@ -12,6 +12,9 @@ export const panelSlice = createSlice({
12
12
  name: "panel",
13
13
  initialState,
14
14
  reducers: {
15
+ setSeatDefaultKey: (state, action) => {
16
+ state.seatDefaultKey = action.payload;
17
+ },
15
18
  setLoading: (state, action) => {
16
19
  state.loading = action.payload;
17
20
  },
package/dist/features/panel/select-tool.js CHANGED
@@ -12,26 +12,43 @@ const SelectToolForm = ({ title = "Title", action, tranform }) => {
12
12
  const selectedComponent = useAppSelector((state) => state.panel.selectedComponent);
13
13
  const extraComponents = useAppSelector((state) => state.board.extraComponents);
14
14
  const selectedGroup = useAppSelector((state) => state.panel.selectedGroup);
15
- const SummaryComponents = () => {
16
- const countByShape = components === null || components === void 0 ? void 0 : components.reduce((acc, item) => {
17
- acc[item.shape] = (acc[item.shape] || 0) + 1;
18
- return acc;
19
- }, {});
20
- const variableFormatToString = (variable) => {
21
- return variable
22
- .replace(/-/g, " ")
23
- .replace(/\b\w/g, (char) => char.toUpperCase());
24
- };
25
- return (_jsxs("div", { className: "flex flex-col", children: [_jsx("h1", { className: "heading-s", children: title }), _jsx("div", { className: "flex flex-col gap-2 mt-5", children: Object.entries(countByShape).map(([shape, count]) => (_jsxs("div", { children: [_jsxs("span", { className: "font-bold", children: [variableFormatToString(shape), ":"] }), " ", count] }, shape))) })] }));
26
- };
15
+ // const SummaryComponents = () => {
16
+ // const countByShape: Record<string, number> = components?.reduce(
17
+ // (acc: any, item: any) => {
18
+ // acc[item.shape] = (acc[item.shape] || 0) + 1;
19
+ // return acc;
20
+ // },
21
+ // {}
22
+ // );
23
+ // const variableFormatToString = (variable: string) => {
24
+ // return variable
25
+ // .replace(/-/g, " ")
26
+ // .replace(/\b\w/g, (char) => char.toUpperCase());
27
+ // };
28
+ // return (
29
+ // <div className="flex flex-col">
30
+ // <h1 className="heading-s">{title}</h1>
31
+ // <div className="flex flex-col gap-2 mt-5">
32
+ // {Object.entries(countByShape).map(([shape, count]) => (
33
+ // <div key={shape}>
34
+ // <span className="font-bold">
35
+ // {variableFormatToString(shape)}:
36
+ // </span>{" "}
37
+ // {count}
38
+ // </div>
39
+ // ))}
40
+ // </div>
41
+ // </div>
42
+ // );
43
+ // };
27
44
  const renderComponent = () => {
28
45
  switch (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) {
29
46
  case "square":
30
47
  case "circle":
31
48
  return _jsx(SquareToolForm, {});
32
49
  case "table-seat-circle":
33
- case "table-seat-rect-circle":
34
50
  return _jsx(SeatCircle, {});
51
+ case "table-seat-rect-circle":
35
52
  case "table-seat-square":
36
53
  case "table-seat-half-square":
37
54
  case "table-seat-rect-square":
@@ -52,6 +69,6 @@ const SelectToolForm = ({ title = "Title", action, tranform }) => {
52
69
  return _jsx(SelectedGroup, {});
53
70
  }
54
71
  };
55
- return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(SummaryComponents, {}), renderComponent(), renderSelectionComponent()] }));
72
+ return (_jsxs("div", { className: "flex flex-col gap-2", children: [renderComponent(), renderSelectionComponent()] }));
56
73
  };
57
74
  export default SelectToolForm;
package/dist/features/panel/select-tool.jsx CHANGED
@@ -11,36 +11,43 @@ const SelectToolForm = ({ title = "Title", action, tranform }) => {
11
11
  const selectedComponent = useAppSelector((state) => state.panel.selectedComponent);
12
12
  const extraComponents = useAppSelector((state) => state.board.extraComponents);
13
13
  const selectedGroup = useAppSelector((state) => state.panel.selectedGroup);
14
- const SummaryComponents = () => {
15
- const countByShape = components === null || components === void 0 ? void 0 : components.reduce((acc, item) => {
16
- acc[item.shape] = (acc[item.shape] || 0) + 1;
17
- return acc;
18
- }, {});
19
- const variableFormatToString = (variable) => {
20
- return variable
21
- .replace(/-/g, " ")
22
- .replace(/\b\w/g, (char) => char.toUpperCase());
23
- };
24
- return (<div className="flex flex-col">
25
- <h1 className="heading-s">{title}</h1>
26
- <div className="flex flex-col gap-2 mt-5">
27
- {Object.entries(countByShape).map(([shape, count]) => (<div key={shape}>
28
- <span className="font-bold">
29
- {variableFormatToString(shape)}:
30
- </span>{" "}
31
- {count}
32
- </div>))}
33
- </div>
34
- </div>);
35
- };
14
+ // const SummaryComponents = () => {
15
+ // const countByShape: Record<string, number> = components?.reduce(
16
+ // (acc: any, item: any) => {
17
+ // acc[item.shape] = (acc[item.shape] || 0) + 1;
18
+ // return acc;
19
+ // },
20
+ // {}
21
+ // );
22
+ // const variableFormatToString = (variable: string) => {
23
+ // return variable
24
+ // .replace(/-/g, " ")
25
+ // .replace(/\b\w/g, (char) => char.toUpperCase());
26
+ // };
27
+ // return (
28
+ // <div className="flex flex-col">
29
+ // <h1 className="heading-s">{title}</h1>
30
+ // <div className="flex flex-col gap-2 mt-5">
31
+ // {Object.entries(countByShape).map(([shape, count]) => (
32
+ // <div key={shape}>
33
+ // <span className="font-bold">
34
+ // {variableFormatToString(shape)}:
35
+ // </span>{" "}
36
+ // {count}
37
+ // </div>
38
+ // ))}
39
+ // </div>
40
+ // </div>
41
+ // );
42
+ // };
36
43
  const renderComponent = () => {
37
44
  switch (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) {
38
45
  case "square":
39
46
  case "circle":
40
47
  return <SquareToolForm />;
41
48
  case "table-seat-circle":
42
- case "table-seat-rect-circle":
43
49
  return <SeatCircle />;
50
+ case "table-seat-rect-circle":
44
51
  case "table-seat-square":
45
52
  case "table-seat-half-square":
46
53
  case "table-seat-rect-square":
@@ -62,7 +69,7 @@ const SelectToolForm = ({ title = "Title", action, tranform }) => {
62
69
  }
63
70
  };
64
71
  return (<div className="flex flex-col gap-2">
65
- <SummaryComponents />
72
+ {/* <SummaryComponents /> */}
66
73
  {renderComponent()}
67
74
  {renderSelectionComponent()}
68
75
  </div>);
package/dist/features/panel/table-seat-circle.js CHANGED
@@ -1,9 +1,10 @@
1
1
  "use client";
2
2
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
3
- import { ColorPicker, Flex, Form, InputNumber } from "antd";
3
+ import { ColorPicker, Flex, Form, Divider, InputNumber } from "antd";
4
4
  import SectionLabel from "../../components/form-tools/label";
5
5
  import SectionShape from "../../components/form-tools/shape";
6
+ // import { useAppSelector } from "@/hooks/use-redux";
6
7
  const SeatCircle = () => {
7
- return (_jsx(_Fragment, { children: _jsxs("div", { className: "py-2", children: [_jsx("h1", { className: "heading-s", children: " Round table" }), _jsxs(Flex, { children: [_jsx(Form.Item, { name: "seatCount", label: "Seat Count", className: "w-full", children: _jsx(InputNumber, {}) }), _jsx(Form.Item, { name: "openSpace", label: "Open Space", className: "w-full", children: _jsx(InputNumber, { max: 1, min: 0, step: 0.1 }) })] }), _jsx(Flex, { gap: 2, children: _jsx(Form.Item, { label: "Seat Fill", name: "seatFill", getValueFromEvent: (color) => color.toHexString(), className: "w-full ", children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) }) }), _jsx(SectionShape, {}), _jsx(SectionLabel, {})] }) }));
8
+ return (_jsx(_Fragment, { children: _jsxs("div", { className: "py-2", children: [_jsx(SectionShape, {}), _jsx("h1", { className: "heading-s", children: "Section Seating" }), _jsx(Divider, { style: { margin: 4 } }), _jsxs(Flex, { children: [_jsx(Form.Item, { name: "seatCount", label: "Seat Count", className: "w-full", children: _jsx(InputNumber, { min: 0, disabled: true }) }), _jsx(Form.Item, { name: "openSpace", label: "Open Space", className: "w-full", children: _jsx(InputNumber, { max: 100, min: 0, step: 10, suffix: "%" }) })] }), _jsx(Flex, { gap: 2, children: _jsx(Form.Item, { label: "Seat Fill", name: "seatFill", getValueFromEvent: (color) => color.toHexString(), className: "w-full ", children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) }) }), _jsx(SectionLabel, {})] }) }));
8
9
  };
9
10
  export default SeatCircle;
package/dist/features/panel/table-seat-circle.jsx CHANGED
@@ -1,34 +1,27 @@
1
1
  "use client";
2
- import { ColorPicker, Flex, Form, InputNumber } from "antd";
2
+ import { ColorPicker, Flex, Form, Divider, InputNumber } from "antd";
3
3
  import SectionLabel from "../../components/form-tools/label";
4
4
  import SectionShape from "../../components/form-tools/shape";
5
+ // import { useAppSelector } from "@/hooks/use-redux";
5
6
  const SeatCircle = () => {
6
7
  return (<>
7
8
  <div className="py-2">
8
- <h1 className="heading-s"> Round table</h1>
9
+ <SectionShape />
10
+ <h1 className="heading-s">Section Seating</h1>
11
+ <Divider style={{ margin: 4 }}/>
9
12
  <Flex>
10
13
  <Form.Item name="seatCount" label="Seat Count" className="w-full">
11
- <InputNumber />
14
+ <InputNumber min={0} disabled/>
12
15
  </Form.Item>
13
16
  <Form.Item name="openSpace" label="Open Space" className="w-full">
14
- <InputNumber max={1} min={0} step={0.1}/>
17
+ <InputNumber max={100} min={0} step={10} suffix="%"/>
15
18
  </Form.Item>
16
-
17
19
  </Flex>
18
20
  <Flex gap={2}>
19
21
  <Form.Item label="Seat Fill" name={"seatFill"} getValueFromEvent={(color) => color.toHexString()} className="w-full ">
20
22
  <ColorPicker allowClear format="hex" defaultFormat="hex"/>
21
23
  </Form.Item>
22
- {/* <Form.Item
23
- label="Table Fill"
24
- name={"fill"}
25
- getValueFromEvent={(color) => color.toHexString()}
26
- className="w-full "
27
- >
28
- <ColorPicker allowClear format="hex" defaultFormat="hex" />
29
- </Form.Item> */}
30
24
  </Flex>
31
- <SectionShape />
32
25
  <SectionLabel />
33
26
  </div>
34
27
  </>);