seat-editor 3.4.4 → 3.4.5

package/dist/features/panel/index.js

@@ -25,6 +25,7 @@ import { applyResizeToSvgElement, getGlobalBBox, updateSelectionBox, } from "../
 import { SEAT_SHAPES } from "../../utils/constant";
 import { adjustHeightWidthForSeatShape, getSeatCount, getSeatPosition, isSeatShape, } from "./utils";
 import SeatSquare from "./table-seat-square";
+import _ from "lodash";
 const ControlPanels = (props) => {
     const { action, transform } = props;
     const dispatch = useAppDispatch();
@@ -75,6 +76,12 @@ const ControlPanels = (props) => {
                         ? Number(arr[0][key]) * 100
                         : undefined;
                 }
+                if (key === "labels") {
+                    const test = arr === null || arr === void 0 ? void 0 : arr.every((item) => _.isEqual(item[key], arr[0][key]));
+                    return (arr === null || arr === void 0 ? void 0 : arr.every((item) => _.isEqual(item[key], arr[0][key])))
+                        ? arr[0][key]
+                        : [];
+                }
                 return isSameAllByKey(arr, key) ? arr[0][key] : undefined;
             }
             form.setFieldsValue({
@@ -90,6 +97,10 @@ const ControlPanels = (props) => {
                 radius: getValueIfSame(selectedGroup, "radius"),
                 shape: getValueIfSame(selectedGroup, "shape"),
                 labels: getValueIfSame(selectedGroup, "labels"),
+                seatCount: getValueIfSame(selectedGroup, "seatCount"),
+                seatPositions: getValueIfSame(selectedGroup, "seatPositions"),
+                seatFill: getValueIfSame(selectedGroup, "seatFill"),
+                openSpace: getValueIfSame(selectedGroup, "openSpace"),
             });
         }
         else {
@@ -110,7 +121,9 @@ const ControlPanels = (props) => {
         const seatDefault = selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent[seatKey];
         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)
                 ? (_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) ? (_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 });
+                : 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 });
     };
     const debouncedSyncComponents = useRef(debounce((data) => {
         dispatch({ type: "board/setFlagChange", payload: true });
@@ -179,7 +192,7 @@ const ControlPanels = (props) => {
         updateSelectionBox(svg, getBBox);
     };
     const handleChangeComponent = (values, allValues) => {
-        var _a, _b;
+        var _a, _b, _c;
         const { shape } = allValues, restProps = __rest(allValues, ["shape"]);
         const newValues = createShape(shape, restProps, selectedComponent);
         if (selectedComponent) {
@@ -187,8 +200,19 @@ const ControlPanels = (props) => {
             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 }));
         }
         if ((selectedGroup === null || selectedGroup === void 0 ? void 0 : selectedGroup.length) > 0) {
-            const { width, height, x, y, fill, stroke, opacity, rotation, strokeWidth, radius, shape, seatCount, seatFill, seatPositions, labels, } = newValues;
-            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 } : {}))));
+            const { width, height, x, y, fill, stroke, opacity, rotation, strokeWidth, radius, shape, seatCount, seatFill, seatPositions, labels, openSpace, } = newValues;
+            const seatPositionsNew = (_c = Object.values(seatPositions)) === null || _c === void 0 ? void 0 : _c.some((item) => _.isNaN(item));
+            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(Object.assign({}, comp), (width !== undefined ? { width } : {})), (height !== undefined ? { height } : {})), (x !== undefined ? { x } : {})), (y !== undefined ? { y } : {})), (fill !== undefined ? { fill } : {})), (stroke !== undefined ? { stroke } : {})), (opacity !== undefined ? { opacity: Number(opacity) / 100 } : {})), (rotation !== undefined ? { rotation } : {})), (strokeWidth !== undefined ? { strokeWidth } : {})), (radius !== undefined ? { radius } : {})), (shape !== undefined ? { shape } : {})), (seatFill !== undefined ? { seatFill } : {})), (labels !== undefined ? { labels } : {})), (seatPositions !== undefined
+                ? {
+                    seatPositions: seatPositionsNew
+                        ? getSeatPosition(shape, comp, comp === null || comp === void 0 ? void 0 : comp[seatKey])
+                        : seatPositions,
+                }
+                : {})), (seatCount !== undefined
+                ? {
+                    seatCount: seatCount !== null && seatCount !== void 0 ? seatCount : getSeatCount(shape, comp, comp === null || comp === void 0 ? void 0 : comp[seatKey]),
+                }
+                : {})), (openSpace !== undefined ? { openSpace } : {}))));
             let minX = Infinity;
             let minY = Infinity;
             let maxX = -Infinity;

package/dist/features/panel/index.jsx

@@ -24,6 +24,7 @@ import { applyResizeToSvgElement, getGlobalBBox, updateSelectionBox, } from "../
 import { SEAT_SHAPES } from "../../utils/constant";
 import { adjustHeightWidthForSeatShape, getSeatCount, getSeatPosition, isSeatShape, } from "./utils";
 import SeatSquare from "./table-seat-square";
+import _ from "lodash";
 const ControlPanels = (props) => {
     const { action, transform } = props;
     const dispatch = useAppDispatch();
@@ -74,6 +75,12 @@ const ControlPanels = (props) => {
                         ? Number(arr[0][key]) * 100
                         : undefined;
                 }
+                if (key === "labels") {
+                    const test = arr === null || arr === void 0 ? void 0 : arr.every((item) => _.isEqual(item[key], arr[0][key]));
+                    return (arr === null || arr === void 0 ? void 0 : arr.every((item) => _.isEqual(item[key], arr[0][key])))
+                        ? arr[0][key]
+                        : [];
+                }
                 return isSameAllByKey(arr, key) ? arr[0][key] : undefined;
             }
             form.setFieldsValue({
@@ -89,6 +96,10 @@ const ControlPanels = (props) => {
                 radius: getValueIfSame(selectedGroup, "radius"),
                 shape: getValueIfSame(selectedGroup, "shape"),
                 labels: getValueIfSame(selectedGroup, "labels"),
+                seatCount: getValueIfSame(selectedGroup, "seatCount"),
+                seatPositions: getValueIfSame(selectedGroup, "seatPositions"),
+                seatFill: getValueIfSame(selectedGroup, "seatFill"),
+                openSpace: getValueIfSame(selectedGroup, "openSpace"),
             });
         }
         else {
@@ -109,7 +120,9 @@ const ControlPanels = (props) => {
         const seatDefault = selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent[seatKey];
         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)
                 ? (_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) ? (_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 });
+                : 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 });
     };
     const debouncedSyncComponents = useRef(debounce((data) => {
         dispatch({ type: "board/setFlagChange", payload: true });
@@ -178,7 +191,7 @@ const ControlPanels = (props) => {
         updateSelectionBox(svg, getBBox);
     };
     const handleChangeComponent = (values, allValues) => {
-        var _a, _b;
+        var _a, _b, _c;
         const { shape } = allValues, restProps = __rest(allValues, ["shape"]);
         const newValues = createShape(shape, restProps, selectedComponent);
         if (selectedComponent) {
@@ -186,8 +199,19 @@ const ControlPanels = (props) => {
             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 }));
         }
         if ((selectedGroup === null || selectedGroup === void 0 ? void 0 : selectedGroup.length) > 0) {
-            const { width, height, x, y, fill, stroke, opacity, rotation, strokeWidth, radius, shape, seatCount, seatFill, seatPositions, labels, } = newValues;
-            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 } : {}))));
+            const { width, height, x, y, fill, stroke, opacity, rotation, strokeWidth, radius, shape, seatCount, seatFill, seatPositions, labels, openSpace, } = newValues;
+            const seatPositionsNew = (_c = Object.values(seatPositions)) === null || _c === void 0 ? void 0 : _c.some((item) => _.isNaN(item));
+            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(Object.assign({}, comp), (width !== undefined ? { width } : {})), (height !== undefined ? { height } : {})), (x !== undefined ? { x } : {})), (y !== undefined ? { y } : {})), (fill !== undefined ? { fill } : {})), (stroke !== undefined ? { stroke } : {})), (opacity !== undefined ? { opacity: Number(opacity) / 100 } : {})), (rotation !== undefined ? { rotation } : {})), (strokeWidth !== undefined ? { strokeWidth } : {})), (radius !== undefined ? { radius } : {})), (shape !== undefined ? { shape } : {})), (seatFill !== undefined ? { seatFill } : {})), (labels !== undefined ? { labels } : {})), (seatPositions !== undefined
+                ? {
+                    seatPositions: seatPositionsNew
+                        ? getSeatPosition(shape, comp, comp === null || comp === void 0 ? void 0 : comp[seatKey])
+                        : seatPositions,
+                }
+                : {})), (seatCount !== undefined
+                ? {
+                    seatCount: seatCount !== null && seatCount !== void 0 ? seatCount : getSeatCount(shape, comp, comp === null || comp === void 0 ? void 0 : comp[seatKey]),
+                }
+                : {})), (openSpace !== undefined ? { openSpace } : {}))));
             let minX = Infinity;
             let minY = Infinity;
             let maxX = -Infinity;

package/dist/features/panel/selected-group.js

@@ -5,9 +5,13 @@ import { ColorPicker, Flex, Form, InputNumber, Select } from "antd";
 import SeatCircle from "./table-seat-circle";
 import SeatSquare from "./table-seat-square";
 import { useAppSelector } from "../../hooks/use-redux";
+import SectionLabel from "@/components/form-tools/label";
+const { Option } = Select;
 const SelectedGroup = () => {
+    var _a;
     const shape = Form.useWatch("shape");
     const selectedGroup = useAppSelector((state) => state.panel.selectedGroup);
+    const allShapeSelected = selectedGroup.map((item) => item.shape);
     const sameShape = [
         "table-seat-circle",
         "table-seat-rect-circle",
@@ -16,10 +20,18 @@ const SelectedGroup = () => {
         "table-seat-rect-square",
         "table-seat-half-square",
     ].includes(shape);
-    const allShapeSelected = selectedGroup.map((item) => item.shape);
     const shapeIncludeImage = ["background", "image-table", "polygon"].some((shape) => allShapeSelected.includes(shape));
+    const seatKey = useAppSelector((state) => state.panel.seatDefaultKey);
     const shapeAllIncludePolygon = allShapeSelected.includes("polygon");
-    return (_jsx(_Fragment, { children: _jsxs("div", { className: "py-2", children: [_jsx("h1", { className: "heading-s", children: " Group Selection" }), _jsxs("div", { className: "py-2", children: [!shapeIncludeImage && (_jsx(Flex, { gap: 2, className: "w-full", children: _jsx(Form.Item, { label: "Name", name: "shape", className: "w-full", children: _jsx(Select, { options: optionsShape, className: "w-full" }) }) })), _jsxs(Flex, { gap: 2, className: "w-full", children: [["table-seat-circle", "table-seat-rect-circle"].includes(shape) && _jsx(SeatCircle, {}), [
+    const optionsSelect = (_a = optionsShape === null || optionsShape === void 0 ? void 0 : optionsShape.slice(0, -1)) === null || _a === void 0 ? void 0 : _a.map((item) => {
+        return Object.assign(Object.assign({}, item), { disabled: allShapeSelected.includes(item.value) });
+    });
+    const maxSeat = selectedGroup === null || selectedGroup === void 0 ? void 0 : selectedGroup.some((item) => (item === null || item === void 0 ? void 0 : item[seatKey]) > 4);
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "py-2", children: [_jsx("h1", { className: "heading-s", children: " Group Selection" }), _jsxs("div", { className: "py-2", children: [_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: optionsSelect === null || optionsSelect === void 0 ? void 0 : optionsSelect.map((item) => {
+                                        const disabled = item.value === "table-seat-rect-circle" && maxSeat;
+                                        return (_jsx(Option, { value: item.value, disabled: disabled, children: item.value === "table-seat-rect-circle" ?
+                                                `Type 5 (only for 4 ${seatKey})` : item.label }, item.value));
+                                    }) }) }) }), _jsxs(Flex, { gap: 2, className: "w-full", children: [["table-seat-circle", "table-seat-rect-circle"].includes(shape) && _jsx(SeatCircle, {}), [
                                     "table-seat-square",
                                     "table-seat-square",
                                     "table-seat-rect-square",
@@ -37,7 +49,7 @@ const SelectedGroup = () => {
                                                     const num = Number(cleaned);
                                                     if (Number.isNaN(num))
                                                         return null;
-                                                    return Math.min(0, Math.max(0, num));
-                                                }, suffix: "%" }) })] })] }))] })] }) }));
+                                                    return Math.min(100, Math.max(0, num));
+                                                }, suffix: "%" }) })] }), _jsx(SectionLabel, {})] }))] })] }) }));
 };
 export default SelectedGroup;

package/dist/features/panel/selected-group.jsx

@@ -4,9 +4,13 @@ import { ColorPicker, Flex, Form, InputNumber, Select } from "antd";
 import SeatCircle from "./table-seat-circle";
 import SeatSquare from "./table-seat-square";
 import { useAppSelector } from "../../hooks/use-redux";
+import SectionLabel from "@/components/form-tools/label";
+const { Option } = Select;
 const SelectedGroup = () => {
+    var _a;
     const shape = Form.useWatch("shape");
     const selectedGroup = useAppSelector((state) => state.panel.selectedGroup);
+    const allShapeSelected = selectedGroup.map((item) => item.shape);
     const sameShape = [
         "table-seat-circle",
         "table-seat-rect-circle",
@@ -15,18 +19,32 @@ const SelectedGroup = () => {
         "table-seat-rect-square",
         "table-seat-half-square",
     ].includes(shape);
-    const allShapeSelected = selectedGroup.map((item) => item.shape);
     const shapeIncludeImage = ["background", "image-table", "polygon"].some((shape) => allShapeSelected.includes(shape));
+    const seatKey = useAppSelector((state) => state.panel.seatDefaultKey);
     const shapeAllIncludePolygon = allShapeSelected.includes("polygon");
+    const optionsSelect = (_a = optionsShape === null || optionsShape === void 0 ? void 0 : optionsShape.slice(0, -1)) === null || _a === void 0 ? void 0 : _a.map((item) => {
+        return Object.assign(Object.assign({}, item), { disabled: allShapeSelected.includes(item.value) });
+    });
+    const maxSeat = selectedGroup === null || selectedGroup === void 0 ? void 0 : selectedGroup.some((item) => (item === null || item === void 0 ? void 0 : item[seatKey]) > 4);
     return (<>
       <div className="py-2">
         <h1 className="heading-s"> Group Selection</h1>
         <div className="py-2">
-          {!shapeIncludeImage && (<Flex gap={2} className="w-full">
-              <Form.Item label="Name" name="shape" className="w-full">
-                <Select options={optionsShape} className="w-full"/>
-              </Form.Item>
-            </Flex>)}
+          {/* {!shapeIncludeImage && ( */}
+          <Flex gap={2} className="w-full">
+            <Form.Item label="Name" name="shape" className="w-full">
+              <Select className="w-full">
+                {optionsSelect === null || optionsSelect === void 0 ? void 0 : optionsSelect.map((item) => {
+            const disabled = item.value === "table-seat-rect-circle" && maxSeat;
+            return (<Option key={item.value} value={item.value} disabled={disabled}>
+                      {item.value === "table-seat-rect-circle" ?
+                    `Type 5 (only for 4 ${seatKey})` : item.label}
+                    </Option>);
+        })}
+              </Select>
+            </Form.Item>
+          </Flex>
+          {/* )} */}
           <Flex gap={2} className="w-full">
             {["table-seat-circle", "table-seat-rect-circle"].includes(shape) && <SeatCircle />}
             {[
@@ -89,10 +107,11 @@ const SelectedGroup = () => {
                 const num = Number(cleaned);
                 if (Number.isNaN(num))
                     return null;
-                return Math.min(0, Math.max(0, num));
+                return Math.min(100, Math.max(0, num));
             }} suffix="%"/>
                 </Form.Item>
               </Flex>
+              <SectionLabel />
             </>)}
         </div>
       </div>

package/dist/features/panel/table-seat-circle.js

@@ -4,11 +4,14 @@ import { ColorPicker, Flex, Form, Divider, InputNumber } from "antd";
 import SectionLabel from "../../components/form-tools/label";
 import SectionShape from "../../components/form-tools/shape";
 import { useAppSelector } from "../../hooks/use-redux";
+import { isEmpty } from "lodash";
 const SeatCircle = () => {
     const selectedComponent = useAppSelector((state) => state.panel.selectedComponent);
     const seatKey = useAppSelector((state) => state.panel.seatDefaultKey);
     const seatCountDefault = selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent[seatKey];
     const disabled = seatCountDefault > 0;
-    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: disabled }) }), _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, {})] }) }));
+    const selectedGroup = useAppSelector((state) => state.panel.selectedGroup);
+    const allShapeSelected = selectedGroup === null || selectedGroup === void 0 ? void 0 : selectedGroup.map((item) => item.shape);
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "py-2", children: [_jsx(SectionShape, { allowChangeShape: isEmpty(allShapeSelected) }), _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: disabled }) }), _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, {})] }) }));
 };
 export default SeatCircle;

package/dist/features/panel/table-seat-circle.jsx

@@ -3,14 +3,17 @@ import { ColorPicker, Flex, Form, Divider, InputNumber } from "antd";
 import SectionLabel from "../../components/form-tools/label";
 import SectionShape from "../../components/form-tools/shape";
 import { useAppSelector } from "../../hooks/use-redux";
+import { isEmpty } from "lodash";
 const SeatCircle = () => {
     const selectedComponent = useAppSelector((state) => state.panel.selectedComponent);
     const seatKey = useAppSelector((state) => state.panel.seatDefaultKey);
     const seatCountDefault = selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent[seatKey];
     const disabled = seatCountDefault > 0;
+    const selectedGroup = useAppSelector((state) => state.panel.selectedGroup);
+    const allShapeSelected = selectedGroup === null || selectedGroup === void 0 ? void 0 : selectedGroup.map((item) => item.shape);
     return (<>
       <div className="py-2">
-        <SectionShape />
+        <SectionShape allowChangeShape={isEmpty(allShapeSelected)}/>
         <h1 className="heading-s">Section Seating</h1>
         <Divider style={{ margin: 4 }}/>
         <Flex>

package/dist/features/panel/table-seat-square.js

@@ -4,12 +4,18 @@ import { Col, ColorPicker, Divider, Flex, Form, InputNumber, Row, } from "antd";
 import SectionLabel from "../../components/form-tools/label";
 import SectionShape from "../../components/form-tools/shape";
 import { useAppSelector } from "../../hooks/use-redux";
+import { isEmpty } from "lodash";
 const SeatSquare = () => {
     const selectedComponent = useAppSelector((state) => state.panel.selectedComponent);
+    const allGroups = useAppSelector((state) => state.panel.selectedGroup);
     const seatKey = useAppSelector((state) => state.panel.seatDefaultKey);
     const isSeatCustom = (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) === "table-seat-rect-circle";
+    const allGroupCustom = allGroups === null || allGroups === void 0 ? void 0 : allGroups.some((g) => g.shape === "table-seat-rect-circle");
+    const allGroupCount = allGroups === null || allGroups === void 0 ? void 0 : allGroups.some((g) => (g === null || g === void 0 ? void 0 : g[seatKey]) > 0);
     const seatCountDefault = selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent[seatKey];
-    const disabled = seatCountDefault > 0;
-    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 } }), _jsx(Flex, { className: "w-full", children: _jsx(Form.Item, { name: "openSpace", label: "Open Space", className: "w-full", children: _jsx(InputNumber, { max: 100, min: 0, step: 10, suffix: "%", disabled: isSeatCustom }) }) }), _jsxs(Row, { gutter: [16, 16], children: [_jsxs(Col, { span: 12, children: [_jsx(Form.Item, { name: ["seatPositions", "top"], label: "Top", className: "w-full", children: _jsx(InputNumber, { min: 0, step: 1, disabled: disabled }) }), _jsx(Form.Item, { name: ["seatPositions", "left"], label: "Left", className: "w-full", children: _jsx(InputNumber, { min: 0, step: 1, disabled: disabled }) })] }), _jsxs(Col, { span: 12, children: [_jsx(Form.Item, { name: ["seatPositions", "right"], label: "Right", className: "w-full", children: _jsx(InputNumber, { min: 0, step: 1, disabled: disabled }) }), _jsx(Form.Item, { name: ["seatPositions", "bottom"], label: "Bottom", className: "w-full", children: _jsx(InputNumber, { min: 0, step: 1, disabled: disabled }) })] })] }), _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, {})] }) }));
+    const disabled = seatCountDefault > 0 || allGroupCount;
+    const selectedGroup = useAppSelector((state) => state.panel.selectedGroup);
+    const allShapeSelected = selectedGroup === null || selectedGroup === void 0 ? void 0 : selectedGroup.map((item) => item.shape);
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "py-2", children: [_jsx(SectionShape, { allowChangeShape: isEmpty(allShapeSelected) }), _jsx("h1", { className: "heading-s", children: "Section Seating" }), _jsx(Divider, { style: { margin: 4 } }), _jsx(Flex, { className: "w-full", children: _jsx(Form.Item, { name: "openSpace", label: "Open Space", className: "w-full", children: _jsx(InputNumber, { max: 100, min: 0, step: 10, suffix: "%", disabled: isSeatCustom || allGroupCustom }) }) }), _jsxs(Row, { gutter: [16, 16], children: [_jsxs(Col, { span: 12, children: [_jsx(Form.Item, { name: ["seatPositions", "top"], label: "Top", className: "w-full", children: _jsx(InputNumber, { min: 0, step: 1, disabled: disabled }) }), _jsx(Form.Item, { name: ["seatPositions", "left"], label: "Left", className: "w-full", children: _jsx(InputNumber, { min: 0, step: 1, disabled: disabled }) })] }), _jsxs(Col, { span: 12, children: [_jsx(Form.Item, { name: ["seatPositions", "right"], label: "Right", className: "w-full", children: _jsx(InputNumber, { min: 0, step: 1, disabled: disabled }) }), _jsx(Form.Item, { name: ["seatPositions", "bottom"], label: "Bottom", className: "w-full", children: _jsx(InputNumber, { min: 0, step: 1, disabled: disabled }) })] })] }), _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, {})] }) }));
 };
 export default SeatSquare;

package/dist/features/panel/table-seat-square.jsx

@@ -3,20 +3,26 @@ import { Col, ColorPicker, Divider, Flex, Form, InputNumber, Row, } from "antd";
 import SectionLabel from "../../components/form-tools/label";
 import SectionShape from "../../components/form-tools/shape";
 import { useAppSelector } from "../../hooks/use-redux";
+import { isEmpty } from "lodash";
 const SeatSquare = () => {
     const selectedComponent = useAppSelector((state) => state.panel.selectedComponent);
+    const allGroups = useAppSelector((state) => state.panel.selectedGroup);
     const seatKey = useAppSelector((state) => state.panel.seatDefaultKey);
     const isSeatCustom = (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) === "table-seat-rect-circle";
+    const allGroupCustom = allGroups === null || allGroups === void 0 ? void 0 : allGroups.some((g) => g.shape === "table-seat-rect-circle");
+    const allGroupCount = allGroups === null || allGroups === void 0 ? void 0 : allGroups.some((g) => (g === null || g === void 0 ? void 0 : g[seatKey]) > 0);
     const seatCountDefault = selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent[seatKey];
-    const disabled = seatCountDefault > 0;
+    const disabled = seatCountDefault > 0 || allGroupCount;
+    const selectedGroup = useAppSelector((state) => state.panel.selectedGroup);
+    const allShapeSelected = selectedGroup === null || selectedGroup === void 0 ? void 0 : selectedGroup.map((item) => item.shape);
     return (<>
       <div className="py-2">
-        <SectionShape />
+        <SectionShape allowChangeShape={isEmpty(allShapeSelected)}/>
         <h1 className="heading-s">Section Seating</h1>
         <Divider style={{ margin: 4 }}/>
         <Flex className="w-full">
           <Form.Item name="openSpace" label="Open Space" className="w-full">
-            <InputNumber max={100} min={0} step={10} suffix="%" disabled={isSeatCustom}/>
+            <InputNumber max={100} min={0} step={10} suffix="%" disabled={isSeatCustom || allGroupCustom}/>
           </Form.Item>
         </Flex>
         <Row gutter={[16, 16]}>

package/dist/features/panel/utils.js

@@ -2,14 +2,6 @@ import { SEAT_SHAPES } from "../../utils/constant";
 import { MIN_HEIGHT, MIN_WIDTH } from "../board-v3/constant";
 export const isSeatShape = (shape) => SEAT_SHAPES.includes(shape);
 export const getSeatCount = (shape, props, defaultValue) => {
-    // if (shape === "table-seat-circle") {
-    //   if (props?.seatCount) {
-    //     return props.seatCount;
-    //   } else if (props?.seatPositions) {
-    //     const { top = 0, bottom = 0, left = 0, right = 0 } = props.seatPositions;
-    //     return top + bottom + left + right;
-    //   }
-    // }
     if (!defaultValue) {
         if (props === null || props === void 0 ? void 0 : props.seatCount) {
             return props.seatCount;
@@ -22,15 +14,16 @@ export const getSeatCount = (shape, props, defaultValue) => {
 };
 export const getSeatPosition = (shape, props, defaultValue) => {
     let seatCountDefault = defaultValue;
+    // console.log({ seatCountDefault})
     if (shape === "table-seat-rect-circle") {
         if (seatCountDefault > 4) {
             seatCountDefault = 4;
         }
-        console.log(props === null || props === void 0 ? void 0 : props.seatPositions);
+        // console.log(props?.seatPositions);
         if (getTotalSeats(props === null || props === void 0 ? void 0 : props.seatPositions) > 4) {
             return distributeSeats(4);
         }
-        console.log(getTotalSeats(props === null || props === void 0 ? void 0 : props.seatPositions));
+        // console.log(distributeSeats(seatCountDefault),"haduh");
         return (props === null || props === void 0 ? void 0 : props.seatPositions) &&
             getTotalSeats(props === null || props === void 0 ? void 0 : props.seatPositions) <= seatCountDefault
             ? normalizeSeatPosition(props === null || props === void 0 ? void 0 : props.seatPositions)

package/dist/features/view-only-3/index.d.ts

@@ -39,6 +39,7 @@ export interface LayerViewProps<TMeta = undefined> {
     extraComponentProps?: ComponentProps[];
     onCurrentStateChange?: OnCurrentStateChange;
     onSelectComponent?: (component: ComponentProps<TMeta>) => void;
+    onDoubleClick?: (component: ComponentProps<TMeta>) => void;
     mappingKey?: string;
     tableMatchKey?: TableMatchKey[];
     eventMatchTable?: TableMatchEvent[];
@@ -84,11 +85,12 @@ export interface LayerViewProps<TMeta = undefined> {
     defaultBoundingBox?: PropertiesProps;
     viewOnly?: boolean;
     actionPrivileged?: {
-        select: boolean;
-        move: boolean;
-        switch: boolean;
-        drop: boolean;
-        rightClick: boolean;
+        select?: boolean;
+        move?: boolean;
+        switch?: boolean;
+        drop?: boolean;
+        rightClick?: boolean;
+        double?: boolean;
     };
 }
 declare const LayerView: <TMeta>(props: LayerViewProps<TMeta>) => import("react/jsx-runtime").JSX.Element;

package/dist/features/view-only-3/index.js

@@ -7,13 +7,14 @@ import Layers from "../../components/layer-v4";
 import { getTranslate } from "../board-v3/utils";
 import { Spin } from "antd";
 const LayerView = (props) => {
-    const { componentProps, extraComponentProps, onSelectComponent, onCurrentStateChange, mappingKey, statusKey, defaultBackground, defaultBoundingBox, iconTags, tooltipProps, onRightClick, allowTooltip = true, tableMatchKey, eventMatchTable, ghostAttributes, onDrop, onSwitch, refs, privilegedTags, loadingRender, actionPrivileged = {
+    const { componentProps, extraComponentProps, onSelectComponent, onDoubleClick, onCurrentStateChange, mappingKey, statusKey, defaultBackground, defaultBoundingBox, iconTags, tooltipProps, onRightClick, allowTooltip = true, tableMatchKey, eventMatchTable, ghostAttributes, onDrop, onSwitch, refs, privilegedTags, loadingRender, actionPrivileged = {
         select: true,
         move: true,
         switch: true,
         drop: true,
-        rightClick: true
-    } } = props;
+        rightClick: true,
+        double: true,
+    }, } = props;
     const widthTooltip = (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.minWidth) || 168;
     const tableGhost = useRef(null);
     const hoverUnderghostId = useRef(null);
@@ -131,6 +132,18 @@ const LayerView = (props) => {
         }
         return data;
     };
+    const handleDoubleClick = (items, e) => {
+        const find = componentsEditor.find((item) => {
+            var _a;
+            if (mappingKey && (item === null || item === void 0 ? void 0 : item[mappingKey])) {
+                return item[mappingKey].id == ((_a = items[mappingKey]) === null || _a === void 0 ? void 0 : _a.id);
+            }
+            return (item === null || item === void 0 ? void 0 : item.id) == (items === null || items === void 0 ? void 0 : items.id);
+        });
+        onDoubleClick && (actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.double) && onDoubleClick(find);
+        const seletedTable = mappingKey ? find[mappingKey] : find;
+        setSelectedTable(seletedTable);
+    };
     const handleSelectComponent = (items, e) => {
         const find = componentsEditor.find((item) => {
             var _a;
@@ -140,9 +153,14 @@ const LayerView = (props) => {
             return (item === null || item === void 0 ? void 0 : item.id) == (items === null || items === void 0 ? void 0 : items.id);
         });
         const rightClick = e.button === 2;
-        const click = e.button === 0;
-        (onRightClick && rightClick && (actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.rightClick)) && onRightClick(e, find);
-        (onSelectComponent && !rightClick && (actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.select)) && onSelectComponent(find);
+        onRightClick &&
+            rightClick &&
+            (actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.rightClick) &&
+            onRightClick(e, find);
+        onSelectComponent &&
+            !rightClick &&
+            (actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.select) &&
+            onSelectComponent(find);
         const seletedTable = mappingKey ? find[mappingKey] : find;
         setSelectedTable(seletedTable);
     };
@@ -164,10 +182,15 @@ const LayerView = (props) => {
             }
             if (i === componentsEditor.length - 1 &&
                 (extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor.length) === 0) {
-                minX = minX > 10 ? minX - 10 : minX;
-                minY = minY > 10 ? minY - 10 : minY;
-                maxX = maxX + 10;
-                maxY = maxY + 10;
+                const centerX = (minX + maxX) / 2;
+                const centerY = (minY + maxY) / 2;
+                const padding = 20;
+                const width = maxX - minX + padding * 2;
+                const height = maxY - minY + padding * 2;
+                minX = centerX - width / 2;
+                minY = centerY - height / 2;
+                maxX = maxX - minX + padding * 2;
+                maxY = maxY - minY + padding * 2;
             }
         });
         extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor.forEach((values) => {
@@ -217,7 +240,7 @@ const LayerView = (props) => {
         //   width: maxX + paddingX * 2,
         //   height: maxY + paddingY + (maxY + paddingY) * 0.5,
         // };
-        // console.log(minX, minY, maxX, maxY,props?.viewStyles, "bounding box");
+        // console.log(minX, minY, maxX, maxY, props?.viewStyles, "bounding box");
         return {
             minX: minX - (((_l = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _l === void 0 ? void 0 : _l.paddingLeft) || 0),
             minY: minY - (((_m = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _m === void 0 ? void 0 : _m.paddingTop) || 0),
@@ -280,7 +303,7 @@ const LayerView = (props) => {
             };
             // drop from out layout editor
             if (type === "drop") {
-                (onDrop && (actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.drop)) && onDrop(event, data);
+                onDrop && (actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.drop) && onDrop(event, data);
             }
             // cari elemen bentuk (rect / circle / path)
             const shape = group.querySelector("rect") ||
@@ -302,6 +325,10 @@ const LayerView = (props) => {
         const transformed = point.matrixTransform((_a = svg.getScreenCTM()) === null || _a === void 0 ? void 0 : _a.inverse());
         return { x: transformed.x, y: transformed.y };
     };
+    const lastClickRef = useRef(0);
+    const clickTimerRef = useRef(null);
+    const ignoreNextRef = useRef(false);
+    const DOUBLE_DELAY = 250;
     const handlePointerDown = (e) => {
         var _a;
         const svg = svgRef.current;
@@ -328,7 +355,9 @@ const LayerView = (props) => {
             : !((_a = props === null || props === void 0 ? void 0 : props.dragTableBlockKey) === null || _a === void 0 ? void 0 : _a.some((_) => {
                 const dataRaw = originalData({ id: ghostId, type: "find" });
                 return _.value === (dataRaw === null || dataRaw === void 0 ? void 0 : dataRaw[_.key]);
-            }))) && ((actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.move) && (actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.switch));
+            }))) &&
+            (actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.move) &&
+            (actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.switch);
         if (ghostAttributes) {
             Object.keys(ghostAttributes).forEach((key) => {
                 ghost.setAttribute(key, ghostAttributes[key]);
@@ -431,7 +460,27 @@ const LayerView = (props) => {
                     visible: rightClick,
                 });
                 const findDayaById = originalData({ id: dataId, type: "find" });
-                handleSelectComponent(findDayaById, e);
+                const now = Date.now();
+                if (ignoreNextRef.current) {
+                    ignoreNextRef.current = false;
+                    return;
+                }
+                const diff = now - lastClickRef.current;
+                if (diff < DOUBLE_DELAY) {
+                    if (clickTimerRef.current) {
+                        handleDoubleClick(findDayaById, e);
+                        clearTimeout(clickTimerRef.current);
+                        clickTimerRef.current = null;
+                    }
+                    ignoreNextRef.current = true;
+                    lastClickRef.current = 0;
+                    return;
+                }
+                lastClickRef.current = now;
+                clickTimerRef.current = window.setTimeout(() => {
+                    handleSelectComponent(findDayaById, e);
+                    clickTimerRef.current = null;
+                }, DOUBLE_DELAY);
             }
             if (isDragging.current && hasMoved && allowedDrag) {
                 // drag between group
@@ -568,7 +617,11 @@ const LayerView = (props) => {
                     wheelPanning: true,
                 }, wheel: {
                     disabled: false,
-                }, onTransformed: ({ state: { scale } }) => setScale(scale), minScale: 1, maxScale: 1000, initialScale: 1, smooth: true, centerOnInit: true }, props.transformProps, { children: _jsxs(TransformComponent, { wrapperStyle: {
+                }, 
+                // doubleClick={{
+                //   disabled: true,
+                // }}
+                onTransformed: ({ state: { scale } }) => setScale(scale), minScale: 1, maxScale: 1000, initialScale: 1, smooth: true, centerOnInit: true }, props.transformProps, { children: _jsxs(TransformComponent, { wrapperStyle: {
                         width: "100%",
                         height: "100%",
                         // overflow: "visible",
@@ -577,7 +630,9 @@ const LayerView = (props) => {
                         width: "100%",
                         height: "100%",
                         // pointerEvents: disabled ? "none" : "auto",
-                    }, children: [_jsxs("svg", Object.assign({ id: "workspace", onContextMenu: (e) => e.preventDefault(), onDrop: (e) => handleTableEvent(e, "drop"), onPointerDown: handlePointerDown, onPointerUp: handleMouseUp, ref: svgRef, width: "100%", height: "100%", 
+                    }, children: [_jsxs("svg", Object.assign({ id: "workspace", onContextMenu: (e) => e.preventDefault(), onDrop: (e) => handleTableEvent(e, "drop"), onPointerDown: handlePointerDown, onPointerUp: handleMouseUp, 
+                            // onDoubleClick={handleDoubleClick}
+                            ref: svgRef, width: "100%", height: "100%", 
                             // scale={5}
                             overflow: "hidden", viewBox: viewBox, className: "h-full", xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "xMidYMid meet", style: {
                                 background: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : defaultBackground,