seat-editor 3.4.4 → 3.4.6

package/dist/features/board-v3/utils.js

@@ -43,7 +43,7 @@ export const resizeElementSelection = ({ selectionStart, currentSelection, rotat
         height,
     };
 };
-export function resizeBox({ box, dx, dy, rotate, handle }) {
+export function resizeBox({ box, dx, dy, rotate, handle, isZeroRotate = false, }) {
     // 1. mouse → local
     const local = toLocalDelta(dx, dy, rotate);
     // 2. scale
@@ -52,11 +52,37 @@ export function resizeBox({ box, dx, dy, rotate, handle }) {
     // 3. anchor
     const { ax, ay } = getAnchor(handle, box);
     // 4. ukuran baru
-    const newWidth = box.width * scale;
-    const newHeight = box.height * scale;
+    let newWidth = box.width * scale;
+    let newHeight = box.height * scale;
     // 5. posisi baru dari anchor
-    const newX = ax - newWidth * ((ax - box.x) / box.width);
-    const newY = ay - newHeight * ((ay - box.y) / box.height);
+    let newX = ax - newWidth * ((ax - box.x) / box.width);
+    let newY = ay - newHeight * ((ay - box.y) / box.height);
+    if (isZeroRotate) {
+        if (handle === "right") {
+            newWidth = box.width + local.x;
+            newHeight = box.height;
+            newX = box.x;
+            newY = box.y;
+        }
+        else if (handle === "left") {
+            newWidth = box.width - local.x;
+            newX = box.x + local.x;
+            newHeight = box.height;
+            newY = box.y;
+        }
+        else if (handle === "bottom") {
+            newHeight = box.height + local.y;
+            newWidth = box.width;
+            newX = box.x;
+            newY = box.y;
+        }
+        else if (handle === "top") {
+            newHeight = box.height - local.y;
+            newY = box.y + local.y;
+            newWidth = box.width;
+            newX = box.x;
+        }
+    }
     return {
         x: newX,
         y: newY,
@@ -366,17 +392,17 @@ export const resizeSeatSide = ({ seatsPositions, r = 10, openSpace, newElement,
         start: newElement.y,
         length: newElement.height,
         count: rightCount,
-        radius: r,
+        radius: seatRaidus,
         spacing: spacingHeight,
     });
     const rightSeats = rightYs.map((cy) => ({
-        cx: newElement.x + newElement.width + +seatRaidus * 0.1,
+        cx: newElement.x + newElement.width + seatRaidus * 0.1,
         cy,
         id: "right",
         d: arcByDirection({
-            cx: newElement.x + newElement.width + +seatRaidus * 0.1,
+            cx: newElement.x + newElement.width + seatRaidus * 0.1,
             cy,
-            r,
+            r: seatRaidus,
             direction: "right",
             fraction: 0.4,
         }),
@@ -466,7 +492,7 @@ export const resizeSeatRectCircle = ({ seatsPositions, r = 10, openSpace, newEle
         spacing: spacingHeight,
     });
     const leftSeats = leftYs.map((cy) => ({
-        x: -seatSizeLR.w,
+        x: x - seatSizeLR.w,
         y: cy - seatSizeLR.h / 2,
         width: seatSizeLR.w,
         height: seatSizeLR.h,
@@ -494,7 +520,7 @@ export const resizeSeatRectCircle = ({ seatsPositions, r = 10, openSpace, newEle
         spacing: spacingHeight,
     });
     const rightSeats = rightYs.map((cy) => ({
-        x: width,
+        x: x + width,
         y: cy - seatSizeLR.h / 2,
         width: seatSizeLR.w,
         height: seatSizeLR.h,
@@ -583,22 +609,22 @@ export const resizeSeatRectSquare = ({ seatsPositions, r = 10, openSpace, newEle
         spacing: spacingWidth,
     });
     const topSeats = topXs.map((cx) => ({
-        x: (cx) - seatSizeTB.w / 2,
+        x: cx - seatSizeTB.w / 2,
         y: y - seatSizeTB.h,
         width: seatSizeTB.w,
         height: seatSizeTB.h,
         id: "top",
     }));
     const leftYs = distributeWithSpacing({
-        start: newElement.y,
+        start: 0,
         length: height,
         count: leftCount,
         radius: seatRadius,
         spacing: spacingHeight,
     });
     const leftSeats = leftYs.map((cy) => ({
-        x: -seatSizeLR.w,
-        y: cy - seatSizeLR.h / 2,
+        x: x - seatSizeLR.w,
+        y: y + cy - seatSizeLR.h / 2,
         width: seatSizeLR.w,
         height: seatSizeLR.h,
         id: "left",
@@ -618,15 +644,15 @@ export const resizeSeatRectSquare = ({ seatsPositions, r = 10, openSpace, newEle
         id: "bottom",
     }));
     const rightYs = distributeWithSpacing({
-        start: newElement.y,
+        start: 0,
         length: newElement.height,
         count: rightCount,
         radius: seatRadius,
         spacing: spacingHeight,
     });
     const rightSeats = rightYs.map((cy) => ({
-        x: width,
-        y: cy - seatSizeLR.h / 2,
+        x: x + width,
+        y: y + cy - seatSizeLR.h / 2,
         width: seatSizeLR.w,
         height: seatSizeLR.h,
         id: "right",

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;