seat-editor 3.4.7 → 3.5.0

package/dist/features/panel/index.jsx

@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { useEffect, useRef, useState } from "react";
+import { useEffect, createContext, useRef, useState, useContext } from "react";
 import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
 import { Form, Input } from "antd";
 import SelectToolForm from "./select-tool";
@@ -25,6 +25,7 @@ import { SEAT_SHAPES } from "../../utils/constant";
 import { adjustHeightWidthForSeatShape, getSeatCount, getSeatPosition, isSeatShape, } from "./utils";
 import SeatSquare from "./table-seat-square";
 import _ from "lodash";
+const FormPlaceholderContext = createContext(null);
 const ControlPanels = (props) => {
     const { action, transform } = props;
     const dispatch = useAppDispatch();
@@ -36,29 +37,67 @@ const ControlPanels = (props) => {
     const components = useAppSelector((state) => state.board.components);
     const extraComponents = useAppSelector((state) => state.board.extraComponents);
     const svgRef = useRef(null);
+    const [bufferValueForm, setBufferValueForm] = useState(null);
     useEffect(() => {
         svgRef.current = document.querySelectorAll("#workspace");
     }, []);
     const { show } = useAppSelector((state) => state.panel);
     const [open, setOpen] = useState(false);
     const [form] = Form.useForm();
+    const [placeholders, setPlaceholders] = useState({});
+    const [groupBufferSelected, setGroupBufferSelected] = useState([]);
     let values = Form.useWatch([], form);
+    const setPlaceholder = (name, placeholder) => {
+        setPlaceholders((prev) => (Object.assign(Object.assign({}, prev), { [name]: placeholder })));
+    };
+    const unsetPlaceholder = (name) => {
+        setPlaceholders((prev) => {
+            const next = Object.assign({}, prev);
+            delete next[name];
+            return next;
+        });
+    };
+    const setPlaceholderBulk = (bulk) => {
+        setPlaceholders((prev) => (Object.assign(Object.assign({}, prev), bulk)));
+    };
+    const resetPlaceholders = () => setPlaceholders({});
+    useEffect(() => {
+        if (tool.active === "background" || tool.active === "image-table") {
+            setOpen(true);
+        }
+        else {
+            setOpen(false);
+        }
+    }, [tool, show]);
     useEffect(() => {
         if (selectedComponent) {
-            form.resetFields();
+            const id = values === null || values === void 0 ? void 0 : values.id;
+            if (id !== selectedComponent.id) {
+                form.resetFields();
+            }
             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);
             const isSameIdAndSameDimensions = (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) === (values === null || values === void 0 ? void 0 : values.id) &&
                 (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.height) === (values === null || values === void 0 ? void 0 : values.height) &&
                 (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.width) === (values === null || values === void 0 ? void 0 : values.width) &&
                 (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.x) === (values === null || values === void 0 ? void 0 : values.x) &&
                 (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.y) === (values === null || values === void 0 ? void 0 : values.y);
-            if (show && (isDifferentId || isSameIdAndSameDimensions)) {
+            const isPolygon = (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) === "polygon";
+            if (show && (isDifferentId || isSameIdAndSameDimensions || isPolygon)) {
                 setOpen(true);
             }
             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 }));
         }
         else if (selectedGroup) {
-            form.resetFields();
+            // form.resetFields();
+            if (selectedGroup.length === 0) {
+                form.resetFields();
+                return;
+            }
+            const notSameGroup = (selectedGroup === null || selectedGroup === void 0 ? void 0 : selectedGroup.length) !== (groupBufferSelected === null || groupBufferSelected === void 0 ? void 0 : groupBufferSelected.length);
+            if (notSameGroup) {
+                form.resetFields();
+                setBufferValueForm(null);
+            }
             if (show)
                 setOpen(true);
             if (!show)
@@ -67,53 +106,100 @@ const ControlPanels = (props) => {
                 if (!arr || arr.length === 0)
                     return false;
                 const firstValue = arr[0][key];
-                return arr.every((item) => item[key] === firstValue);
+                return arr.every((item) => (item === null || item === void 0 ? void 0 : item[key]) === firstValue);
             }
             function getValueIfSame(arr, key) {
+                var _a;
                 if (key === "opacity") {
                     return isSameAllByKey(arr, key)
                         ? 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]
+                    const test = arr === null || arr === void 0 ? void 0 : arr.every((item) => { var _a; return _.isEqual(item === null || item === void 0 ? void 0 : item[key], (_a = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _a === void 0 ? void 0 : _a[key]); });
+                    return (arr === null || arr === void 0 ? void 0 : arr.every((item) => { var _a; return _.isEqual(item === null || item === void 0 ? void 0 : item[key], (_a = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _a === void 0 ? void 0 : _a[key]); }))
+                        ? (_a = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _a === void 0 ? void 0 : _a[key]
                         : [];
                 }
                 return isSameAllByKey(arr, key) ? arr[0][key] : undefined;
             }
-            form.setFieldsValue({
-                width: getValueIfSame(selectedGroup, "width"),
-                height: getValueIfSame(selectedGroup, "height"),
-                x: getValueIfSame(selectedGroup, "x"),
-                y: getValueIfSame(selectedGroup, "y"),
-                fill: getValueIfSame(selectedGroup, "fill"),
-                stroke: getValueIfSame(selectedGroup, "stroke"),
-                opacity: getValueIfSame(selectedGroup, "opacity"),
-                rotation: getValueIfSame(selectedGroup, "rotation"),
-                strokeWidth: getValueIfSame(selectedGroup, "strokeWidth"),
-                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 {
-            setOpen(false);
-        }
-    }, [selectedComponent, selectedGroup, show]);
-    useEffect(() => {
-        if (tool.active === "background" || tool.active === "image-table") {
-            setOpen(true);
+            function getAllValuesKey(arr, key) {
+                return arr
+                    .map((item) => item === null || item === void 0 ? void 0 : item[key])
+                    .filter((value) => value !== undefined)
+                    .sort((a, b) => {
+                    if (typeof a === "number" && typeof b === "number")
+                        return a - b;
+                    return String(a).localeCompare(String(b));
+                })
+                    .filter((value, index, self) => self.indexOf(value) === index);
+            }
+            function showAllValueNotSame(arr, key) {
+                if (key === "opacity") {
+                    return !isSameAllByKey(arr, key)
+                        ? `${getAllValuesKey(arr, key)
+                            .map((value) => Number(value) * 100)
+                            .join(", ")}`
+                        : `${Number(arr[0][key]) * 100}`;
+                }
+                return !isSameAllByKey(arr, key)
+                    ? `${getAllValuesKey(arr, key)}`
+                    : `${arr[0][key]}`;
+            }
+            const fields = [
+                "width",
+                "height",
+                "x",
+                "y",
+                "opacity",
+                "rotation",
+                "radius",
+                "fill",
+                "stroke",
+                "strokeWidth",
+                "shape",
+                "labels",
+                "seatCount",
+                "seatPositions",
+                "seatFill",
+                "openSpace",
+            ];
+            // placeholder (khusus field tertentu saja)
+            const placeholderFields = [
+                "width",
+                "height",
+                "x",
+                "y",
+                "opacity",
+                "rotation",
+                "radius",
+                "strokeWidth",
+            ];
+            // build placeholder
+            const placeholder = Object.fromEntries(placeholderFields.map((key) => [
+                key,
+                showAllValueNotSame(selectedGroup, key),
+            ]));
+            // build values
+            const values = Object.fromEntries(fields.map((key) => [
+                key,
+                (bufferValueForm === null || bufferValueForm === void 0 ? void 0 : bufferValueForm.key) === key
+                    ? bufferValueForm.value
+                    : getValueIfSame(selectedGroup, key),
+            ]));
+            // apply
+            setPlaceholderBulk(placeholder);
+            form.setFieldsValue(values);
+            setGroupBufferSelected(selectedGroup);
+            if (notSameGroup) {
+                form.setFieldValue(`${bufferValueForm === null || bufferValueForm === void 0 ? void 0 : bufferValueForm.key}`, getValueIfSame(selectedGroup, bufferValueForm === null || bufferValueForm === void 0 ? void 0 : bufferValueForm.key));
+            }
         }
         else {
-            setOpen(false);
+            if (tool.active !== "background")
+                setOpen(false);
         }
-    }, [tool, show]);
+    }, [selectedComponent, selectedGroup, show, groupBufferSelected, tool]);
     const createShape = (shape, props = {}, selectedComponent) => {
         var _a, _b, _c, _d, _e, _f, _g, _h;
         const defaults = (_a = SEAT_SHAPES[shape]) !== null && _a !== void 0 ? _a : {};
@@ -249,6 +335,7 @@ const ControlPanels = (props) => {
         switch (tool.active) {
             case "select":
             case "text":
+            case "polygon":
                 return <SelectToolForm action={action} tranform={transform}/>;
             case "square":
             case "circle":
@@ -273,16 +360,56 @@ const ControlPanels = (props) => {
             payload: false,
         });
     };
-    // if(!show) return null
-    return (<div className={clsx("w-[300px] h-full absolute top-0  z-50 transition-all duration-300 overflow-y-scroll ", open ? "right-0" : "right-[-300px]")}>
-      <div className="bg-white h-full max-h-screen w-full p-2 overflow-y-auto border-l border-gray-300">
-        <Form layout="vertical" form={form} name="table" onValuesChange={handleChangeComponent} initialValues={{ labels: [{}] }}>
-          <Form.Item name="id" hidden>
-            <Input />
-          </Form.Item>
-          {renderFormPanel()}
-        </Form>
+    return (<FormPlaceholderContext.Provider value={{
+            placeholders,
+            setPlaceholder,
+            unsetPlaceholder,
+            setPlaceholderBulk,
+            resetPlaceholders,
+        }}>
+      <div className={clsx("w-[300px] h-full absolute top-0 z-50 transition-all duration-300 overflow-y-scroll mt-[78px]", open ? "right-0" : "right-[-1000px]")}>
+        <div className="bg-white h-full max-h-screen w-full p-2 overflow-y-auto border-l border-gray-300">
+          <Form layout="vertical" form={form} name="table" colon={false} onValuesChange={handleChangeComponent} onFocus={(e) => {
+            var _a, _b, _c;
+            e.stopPropagation();
+            const name = e.target.name;
+            const placeholder = (_c = (_b = (_a = placeholders === null || placeholders === void 0 ? void 0 : placeholders[name]) === null || _a === void 0 ? void 0 : _a.split(",")) === null || _b === void 0 ? void 0 : _b.map(Number)) === null || _c === void 0 ? void 0 : _c.filter((item) => !_.isNaN(item));
+            const averageValuePlaceHolder = (placeholder === null || placeholder === void 0 ? void 0 : placeholder.reduce((a, b) => a + b, 0)) / (placeholder === null || placeholder === void 0 ? void 0 : placeholder.length);
+            const value = Math.round(averageValuePlaceHolder);
+            if (placeholder && placeholder.length > 0) {
+                setBufferValueForm({
+                    key: name,
+                    value: value,
+                });
+                form.setFieldsValue({
+                    [name]: value,
+                });
+            }
+        }} onBlur={(e) => {
+            e.stopPropagation();
+            setBufferValueForm(null);
+            const name = e.target.name;
+            const value = e.target.value;
+            if (value) {
+                handleChangeComponent({ [name]: value }, form.getFieldsValue());
+            }
+        }} initialValues={{ labels: [{}] }}>
+            <Form.Item name="id" hidden>
+              <Input />
+            </Form.Item>
+            <Form.Item name="shape" hidden>
+              <Input />
+            </Form.Item>
+            {renderFormPanel()}
+          </Form>
+        </div>
       </div>
-    </div>);
+    </FormPlaceholderContext.Provider>);
 };
 export default ControlPanels;
+export const useFormPlaceholder = () => {
+    const ctx = useContext(FormPlaceholderContext);
+    if (!ctx)
+        throw new Error("useFormPlaceholder must be used within FormPlaceholderProvider");
+    return ctx;
+};

package/dist/features/panel/polygon.d.ts

@@ -0,0 +1,2 @@
+declare const PolygonTool: () => import("react/jsx-runtime").JSX.Element;
+export default PolygonTool;

package/dist/features/panel/polygon.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAppDispatch, useAppSelector } from "@/hooks/use-redux";
+import { Button, ColorPicker, Flex, Form, InputNumber } from "antd";
+const PolygonTool = () => {
+    const dispatch = useAppDispatch();
+    const selectedComponent = useAppSelector((state) => state.panel.selectedComponent);
+    const deleteText = () => {
+        dispatch({
+            type: "board/removeExtraComponent",
+            payload: selectedComponent,
+        });
+        dispatch({ type: "board/setFlagChange", payload: true });
+        dispatch({ type: "board/setUpdateBy", payload: "global" });
+        dispatch({ type: "panel/setSelectedComponent", payload: null });
+        dispatch({ type: "panel/setSelectedGroup", payload: null });
+        dispatch({ type: "panel/setShow", payload: false });
+        dispatch({ type: "tool/setActiveTool", payload: "select" });
+    };
+    return (_jsxs("div", { className: "py-2", children: [_jsx("h1", { className: "heading-s", children: "Shape Polygon" }), _jsxs(Flex, { gap: 2, children: [_jsx(Form.Item, { label: "Fill", name: "fill", getValueFromEvent: (color) => color.toHexString(), className: "w-full ", children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) }), _jsx(Form.Item, { label: "Stroke Fill", name: "stroke", getValueFromEvent: (color) => color.toHexString(), className: "w-full ", children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) }), _jsx(Form.Item, { label: "Stroke Size", name: "strokeWidth", className: "w-full", children: _jsx(InputNumber, {}) })] }), _jsxs(Flex, { gap: 2, children: [_jsx(Form.Item, { label: "Rotation", name: "rotation", className: "w-full", children: _jsx(InputNumber, { suffix: "\u00B0", min: 0, max: 360, parser: (value) => {
+                                if (!value)
+                                    return 0;
+                                const num = Number(value.replace(/\D/g, ""));
+                                if (Number.isNaN(num))
+                                    return 0;
+                                return Math.min(360, Math.max(0, num));
+                            } }) }), _jsx(Form.Item, { label: "opacity", name: "opacity", className: "w-full", children: _jsx(InputNumber, { step: 10, max: 100, min: 0, name: "opacity", parser: (value) => {
+                                if (value === undefined || value === null || value === "")
+                                    return null;
+                                const cleaned = value.replace(/[^0-9.]/g, "");
+                                const num = Number(cleaned);
+                                if (Number.isNaN(num))
+                                    return null;
+                                return Math.min(100, Math.max(0, num));
+                            }, suffix: "%" }) }), _jsx(Form.Item, { label: "Rotation", name: "rotation", className: "w-full", children: _jsx(InputNumber, { suffix: "\u00B0", min: 0, step: 1, max: 360, name: "rotation", parser: (value) => {
+                                if (!value)
+                                    return 0;
+                                const num = Number(value.replace(/\D/g, ""));
+                                if (Number.isNaN(num))
+                                    return 0;
+                                return Math.min(360, Math.max(0, num));
+                            } }) })] }), _jsx(Button, { type: "default", onClick: deleteText, className: "w-full", children: "Delete" })] }));
+};
+export default PolygonTool;

package/dist/features/panel/polygon.jsx

@@ -0,0 +1,70 @@
+"use client";
+import { useAppDispatch, useAppSelector } from "@/hooks/use-redux";
+import { Button, ColorPicker, Flex, Form, InputNumber } from "antd";
+const PolygonTool = () => {
+    const dispatch = useAppDispatch();
+    const selectedComponent = useAppSelector((state) => state.panel.selectedComponent);
+    const deleteText = () => {
+        dispatch({
+            type: "board/removeExtraComponent",
+            payload: selectedComponent,
+        });
+        dispatch({ type: "board/setFlagChange", payload: true });
+        dispatch({ type: "board/setUpdateBy", payload: "global" });
+        dispatch({ type: "panel/setSelectedComponent", payload: null });
+        dispatch({ type: "panel/setSelectedGroup", payload: null });
+        dispatch({ type: "panel/setShow", payload: false });
+        dispatch({ type: "tool/setActiveTool", payload: "select" });
+    };
+    return (<div className="py-2">
+      <h1 className="heading-s">Shape Polygon</h1>
+      <Flex gap={2}>
+        <Form.Item label="Fill" name={"fill"} getValueFromEvent={(color) => color.toHexString()} className="w-full ">
+          <ColorPicker allowClear format="hex" defaultFormat="hex"/>
+        </Form.Item>
+        <Form.Item label="Stroke Fill" name={"stroke"} getValueFromEvent={(color) => color.toHexString()} className="w-full ">
+          <ColorPicker allowClear format="hex" defaultFormat="hex"/>
+        </Form.Item>
+        <Form.Item label="Stroke Size" name={"strokeWidth"} className="w-full">
+          <InputNumber />
+        </Form.Item>
+      </Flex>
+      <Flex gap={2}>
+        <Form.Item label="Rotation" name="rotation" className="w-full">
+          <InputNumber suffix="°" min={0} max={360} parser={(value) => {
+            if (!value)
+                return 0;
+            const num = Number(value.replace(/\D/g, ""));
+            if (Number.isNaN(num))
+                return 0;
+            return Math.min(360, Math.max(0, num));
+        }}/>
+        </Form.Item>
+        <Form.Item label="opacity" name={"opacity"} className="w-full">
+          <InputNumber step={10} max={100} min={0} name="opacity" parser={(value) => {
+            if (value === undefined || value === null || value === "")
+                return null;
+            const cleaned = value.replace(/[^0-9.]/g, "");
+            const num = Number(cleaned);
+            if (Number.isNaN(num))
+                return null;
+            return Math.min(100, Math.max(0, num));
+        }} suffix="%"/>
+        </Form.Item>
+        <Form.Item label="Rotation" name="rotation" className="w-full">
+          <InputNumber suffix="°" min={0} step={1} max={360} name="rotation" parser={(value) => {
+            if (!value)
+                return 0;
+            const num = Number(value.replace(/\D/g, ""));
+            if (Number.isNaN(num))
+                return 0;
+            return Math.min(360, Math.max(0, num));
+        }}/>
+        </Form.Item>
+      </Flex>
+      <Button type="default" onClick={deleteText} className="w-full">
+        Delete
+      </Button>
+    </div>);
+};
+export default PolygonTool;

package/dist/features/panel/select-tool.js

@@ -7,6 +7,7 @@ import SeatSquare from "./table-seat-square";
 import UploadTool from "./upload-tool";
 import TextTool from "./text-tool";
 import SelectedGroup from "./selected-group";
+import PolygonTool from "./polygon";
 const SelectToolForm = ({ title = "Title", action, tranform }) => {
     const components = useAppSelector((state) => state.board.components);
     const selectedComponent = useAppSelector((state) => state.panel.selectedComponent);
@@ -60,6 +61,8 @@ const SelectToolForm = ({ title = "Title", action, tranform }) => {
                         : "component", transform: tranform }));
             case "text":
                 return _jsx(TextTool, {});
+            case "polygon":
+                return _jsx(PolygonTool, {});
             default:
                 return null;
         }

package/dist/features/panel/select-tool.jsx

@@ -6,6 +6,7 @@ import SeatSquare from "./table-seat-square";
 import UploadTool from "./upload-tool";
 import TextTool from "./text-tool";
 import SelectedGroup from "./selected-group";
+import PolygonTool from "./polygon";
 const SelectToolForm = ({ title = "Title", action, tranform }) => {
     const components = useAppSelector((state) => state.board.components);
     const selectedComponent = useAppSelector((state) => state.panel.selectedComponent);
@@ -59,6 +60,8 @@ const SelectToolForm = ({ title = "Title", action, tranform }) => {
                         : "component"} transform={tranform}/>);
             case "text":
                 return <TextTool />;
+            case "polygon":
+                return <PolygonTool />;
             default:
                 return null;
         }

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

@@ -1,17 +1,19 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { optionsShape } from "../../components/form-tools/shape";
 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";
+import { useFormPlaceholder } from ".";
 const { Option } = Select;
 const SelectedGroup = () => {
     var _a;
+    const { placeholders, setPlaceholder, unsetPlaceholder, setPlaceholderBulk, resetPlaceholders, } = useFormPlaceholder();
     const shape = Form.useWatch("shape");
     const selectedGroup = useAppSelector((state) => state.panel.selectedGroup);
     const allShapeSelected = selectedGroup.map((item) => item.shape);
+    const hasExtraComponent = allShapeSelected.some((shape) => ["text", "background", "polygon"].includes(shape));
+    console.log({ hasExtraComponent });
     const sameShape = [
         "table-seat-circle",
         "table-seat-rect-circle",
@@ -27,29 +29,25 @@ const SelectedGroup = () => {
         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) => {
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "py-2", children: [_jsx("h1", { className: "heading-s", children: " Group Selection" }), _jsxs("div", { className: "py-2", children: [!hasExtraComponent && (_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",
-                                    "table-seat-half-square",
-                                ].includes(shape) && _jsx(SeatSquare, {})] }), !sameShape && (_jsxs(_Fragment, { children: [_jsxs(Flex, { gap: 2, className: "w-full", children: [!shapeAllIncludePolygon && (_jsxs(_Fragment, { children: [_jsx(Form.Item, { label: "Width", name: "width", className: "w-full", children: _jsx(InputNumber, { suffix: "px" }) }), _jsx(Form.Item, { label: "Height", name: "height", className: "w-full", children: _jsx(InputNumber, { suffix: "px" }) })] })), !(shape === null || shape === void 0 ? void 0 : shape.includes("circle")) && !shapeAllIncludePolygon && (_jsx(Form.Item, { label: "Radius", name: "radius", className: "w-full", children: _jsx(InputNumber, { suffix: "px", parser: (value) => {
-                                                    var _a;
-                                                    const onlyNumber = (_a = value === null || value === void 0 ? void 0 : value.replace(/\D/g, "")) !== null && _a !== void 0 ? _a : "";
-                                                    return onlyNumber === ""
-                                                        ? 1
-                                                        : Math.max(1, Number(onlyNumber));
-                                                } }) }))] }), !shapeAllIncludePolygon && (_jsx(_Fragment, { children: _jsxs(Flex, { gap: 2, children: [_jsx(Form.Item, { label: "Position X", name: "x", className: "w-full", children: _jsx(InputNumber, {}) }), _jsx(Form.Item, { label: "Position Y", name: "y", className: "w-full", children: _jsx(InputNumber, {}) }), _jsx(Form.Item, { label: "Rotation", name: "rotation", className: "w-full", children: _jsx(InputNumber, { max: 360, min: 0 }) })] }) })), _jsxs(Flex, { gap: 2, children: [_jsx(Form.Item, { label: "Fill", name: "fill", getValueFromEvent: (color) => color.toHexString(), className: "w-full ", children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) }), _jsx(Form.Item, { label: "Stroke", name: "stroke", getValueFromEvent: (color) => color.toHexString(), className: "w-full ", children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) })] }), _jsxs(Flex, { children: [_jsx(Form.Item, { label: "Stroke Width", name: "strokeWidth", className: "w-full", children: _jsx(InputNumber, {}) }), _jsx(Form.Item, { label: "opacity", name: "opacity", className: "w-full", children: _jsx(InputNumber, { step: 10, max: 100, min: 0, parser: (value) => {
-                                                    if (value === undefined || value === null || value === "")
-                                                        return null;
-                                                    const cleaned = value.replace(/[^0-9.]/g, "");
-                                                    const num = Number(cleaned);
-                                                    if (Number.isNaN(num))
-                                                        return null;
-                                                    return Math.min(100, Math.max(0, num));
-                                                }, suffix: "%" }) })] }), _jsx(SectionLabel, {})] }))] })] }) }));
+                                        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", vertical: true, children: [!shapeAllIncludePolygon && (_jsxs(_Fragment, { children: [_jsx(Form.Item, { label: "Width", name: "width", className: "w-full", layout: "horizontal", labelCol: { style: { width: 100, textAlign: "left" } }, wrapperCol: { style: { flex: 1 } }, children: _jsx(InputNumber, { suffix: "px", name: "width", placeholder: placeholders["width"], style: { width: "100%" } }) }), _jsx(Form.Item, { label: "Height", name: "height", className: "w-full", layout: "horizontal", labelCol: { style: { width: 100, textAlign: "left" } }, wrapperCol: { style: { flex: 1 } }, children: _jsx(InputNumber, { suffix: "px", name: "height", placeholder: placeholders["height"], style: { width: "100%" } }) })] })), !(shape === null || shape === void 0 ? void 0 : shape.includes("circle")) && !shapeAllIncludePolygon && (_jsx(Form.Item, { label: "Radius", name: "radius", className: "w-full", layout: "horizontal", labelCol: { style: { width: 100, textAlign: "left" } }, wrapperCol: { style: { flex: 1 } }, children: _jsx(InputNumber, { name: "radius", suffix: "px", style: { width: "100%" }, placeholder: placeholders["radius"], parser: (value) => {
+                                            var _a;
+                                            const onlyNumber = (_a = value === null || value === void 0 ? void 0 : value.replace(/\D/g, "")) !== null && _a !== void 0 ? _a : "";
+                                            return onlyNumber === ""
+                                                ? 1
+                                                : Math.max(1, Number(onlyNumber));
+                                        } }) }))] }), !shapeAllIncludePolygon && (_jsx(_Fragment, { children: _jsxs(Flex, { gap: 2, vertical: true, children: [_jsx(Form.Item, { label: "Position X", name: "x", className: "w-full", layout: "horizontal", labelCol: { style: { width: 100, textAlign: "left" } }, wrapperCol: { style: { flex: 1 } }, children: _jsx(InputNumber, { placeholder: placeholders["x"], style: { width: "100%" }, suffix: "px", name: "x" }) }), _jsx(Form.Item, { label: "Position Y", name: "y", className: "w-full", layout: "horizontal", labelCol: { style: { width: 100, textAlign: "left" } }, wrapperCol: { style: { flex: 1 } }, children: _jsx(InputNumber, { suffix: "px", name: "y", placeholder: placeholders["y"], style: { width: "100%" } }) }), _jsx(Form.Item, { label: "Rotation", name: "rotation", className: "w-full", layout: "horizontal", labelCol: { style: { width: 100, textAlign: "left" } }, wrapperCol: { style: { flex: 1 } }, children: _jsx(InputNumber, { name: "rotation", suffix: "\u00B0", max: 360, min: 0, style: { width: "100%" }, placeholder: placeholders["rotation"] }) })] }) })), _jsxs(Flex, { gap: 2, children: [_jsx(Form.Item, { label: "Fill", name: "fill", getValueFromEvent: (color) => color.toHexString(), className: "w-full ", children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) }), _jsx(Form.Item, { label: "Stroke", name: "stroke", getValueFromEvent: (color) => color.toHexString(), className: "w-full ", children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) })] }), _jsxs(Flex, { vertical: true, children: [_jsx(Form.Item, { label: "Stroke Size", name: "strokeWidth", className: "w-full", layout: "horizontal", labelCol: { style: { width: 100, textAlign: "left" } }, wrapperCol: { style: { flex: 1 } }, children: _jsx(InputNumber, { name: "strokeWidth", suffix: "px", style: { width: "100%" }, placeholder: placeholders["strokeWidth"] }) }), _jsx(Form.Item, { label: "opacity", name: "opacity", className: "w-full", layout: "horizontal", labelCol: { style: { width: 100, textAlign: "left" } }, wrapperCol: { style: { flex: 1 } }, children: _jsx(InputNumber, { style: { width: "100%" }, step: 10, max: 100, min: 0, placeholder: placeholders["opacity"], parser: (value) => {
+                                            if (value === undefined || value === null || value === "")
+                                                return null;
+                                            const cleaned = value.replace(/[^0-9.]/g, "");
+                                            const num = Number(cleaned);
+                                            if (Number.isNaN(num))
+                                                return null;
+                                            return Math.min(100, Math.max(0, num));
+                                        }, suffix: "%" }) })] }), _jsx(SectionLabel, {})] })] }) }));
 };
 export default SelectedGroup;