seat-editor 3.3.45 → 3.4.0

package/dist/app/only-view/page.d.ts

@@ -17,5 +17,5 @@ export declare const dummyImage: {
         y: number;
     }[];
 }[];
-declare const TouchScrollDetect: () => import("react").JSX.Element;
+declare const TouchScrollDetect: () => import("react/jsx-runtime").JSX.Element;
 export default TouchScrollDetect;

package/dist/app/only-view/page.js

@@ -165,7 +165,7 @@ const TouchScrollDetect = () => {
         return (_jsx(Modal, { open: open, onCancel: () => setOpen(false), width: 700, title: "Preview Board", centered: true, footer: null, children: _jsx("div", { className: "flex flex-col p-4 h-[500px] overflow-auto", children: _jsx(JsonView, { value: table }) }) }));
     };
     const testData = [];
-    return (_jsxs("div", { className: "w-full h-screen border-2 border-black overflow-auto", id: "scroll-container", children: [renderModal(), _jsxs("div", { className: "flex", children: [_jsx("div", { className: "h-screen bg-gray-500 w-1/3", children: _jsx("div", { className: "p-4", children: data4.map((item, index) => (_jsx(Card, Object.assign({}, item), index))) }) }), _jsxs("div", { className: "h-screen w-2/3 relative", children: [_jsxs("div", { className: "absolute top-1 right-1  flex gap-4 z-[10]", children: [_jsx("button", { className: "p-4 bg-gray-400", onClick: () => handleZoomIn(), children: "+" }), _jsx("button", { className: "p-4 bg-gray-400", onClick: () => handleZoomOut(), children: "-" })] }), _jsx(LayerView, { refs: refLayer, statusKey: "is_hold", privilegedTags: [
+    return (_jsxs("div", { className: "w-full h-screen border-2 border-black overflow-auto", id: "scroll-container", children: [renderModal(), _jsxs("div", { className: "flex", children: [_jsx("div", { className: "h-screen bg-gray-500 w-1/3", children: _jsx("div", { className: "p-4", children: data4.map((item, index) => (_jsx(Card, Object.assign({}, item), index))) }) }), _jsxs("div", { className: "h-screen w-2/3 relative", children: [_jsxs("div", { className: "absolute top-1 right-1  flex gap-4 z-[10]", children: [_jsx("button", { className: "p-4 bg-gray-400", onClick: () => handleZoomIn(), children: "+" }), _jsx("button", { className: "p-4 bg-gray-400", onClick: () => handleZoomOut(), children: "-" })] }), _jsx(LayerView, { refs: refLayer, statusKey: "is_late", privilegedTags: [
                                     {
                                         key: "table",
                                         items: ["text", "icon"],
@@ -178,13 +178,13 @@ const TouchScrollDetect = () => {
                                     handleSelectTable(component);
                                 }, dragTableBlockKey: [
                                     {
-                                        key: "status",
-                                        value: null,
+                                        key: "code",
+                                        value: "V1",
                                     },
-                                    {
-                                        key: "rsvp",
-                                        value: 1
-                                    }
+                                    // {
+                                    //   key: "rsvp",
+                                    //   value: 1
+                                    // }
                                 ], tableMatchKey: [
                                     {
                                         key: 0,

package/dist/app/only-view/page.jsx

@@ -189,7 +189,7 @@ const TouchScrollDetect = () => {
               -
             </button>
           </div>
-          <LayerView refs={refLayer} statusKey="is_hold" privilegedTags={[
+          <LayerView refs={refLayer} statusKey="is_late" privilegedTags={[
             {
                 key: "table",
                 items: ["text", "icon"],
@@ -202,13 +202,13 @@ const TouchScrollDetect = () => {
             handleSelectTable(component);
         }} dragTableBlockKey={[
             {
-                key: "status",
-                value: null,
+                key: "code",
+                value: "V1",
             },
-            {
-                key: "rsvp",
-                value: 1
-            }
+            // {
+            //   key: "rsvp",
+            //   value: 1
+            // }
         ]} tableMatchKey={[
             {
                 key: 0,

package/dist/app/only-view/user.d.ts

@@ -1 +1 @@
-export function UserIcon(): import("react").JSX.Element;
+export function UserIcon(): import("react/jsx-runtime").JSX.Element;

package/dist/app/only-view/user.js

@@ -1,12 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const UserIcon = () => {
-    return (<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M7.61992 10.1625C9.00754 10.1625 10.1324 9.03757 10.1324 7.64995C10.1324 6.26234 9.00754 5.13745 7.61992 5.13745C6.23231 5.13745 5.10742 6.26234 5.10742 7.64995C5.10742 9.03757 6.23231 10.1625 7.61992 10.1625Z" fill="#5E6278"/>
-      <path d="M7.62 14.9999C9.34313 14.9999 10.74 14.1168 10.74 13.0274C10.74 11.9381 9.34313 11.0549 7.62 11.0549C5.89687 11.0549 4.5 11.9381 4.5 13.0274C4.5 14.1168 5.89687 14.9999 7.62 14.9999Z" fill="#5E6278"/>
-      <path opacity="0.3" d="M11.595 4.23C12.7631 4.23 13.71 3.28308 13.71 2.115C13.71 0.946918 12.7631 0 11.595 0C10.4269 0 9.47998 0.946918 9.47998 2.115C9.47998 3.28308 10.4269 4.23 11.595 4.23Z" fill="#5E6278"/>
-      <path opacity="0.3" d="M3.62257 4.23C4.79065 4.23 5.73757 3.28308 5.73757 2.115C5.73757 0.946918 4.79065 0 3.62257 0C2.45449 0 1.50757 0.946918 1.50757 2.115C1.50757 3.28308 2.45449 4.23 3.62257 4.23Z" fill="#5E6278"/>
-      <g opacity="0.3">
-        <path d="M11.4749 5.87256C11.2349 5.87256 11.0024 5.87256 10.7699 5.91006C11.1229 6.52313 11.2825 7.22856 11.2276 7.93388C11.1727 8.63919 10.906 9.31147 10.4624 9.86256C10.7984 9.92909 11.1399 9.96424 11.4824 9.96756C13.3874 9.96756 14.9249 9.04506 14.9249 7.92006C14.9249 6.79506 13.3799 5.87256 11.4749 5.87256Z" fill="#5E6278"/>
-        <path d="M3.4499 6C3.6899 6 3.9224 6 4.1549 6.0375C3.80187 6.65057 3.64233 7.356 3.6972 8.06132C3.75208 8.76664 4.0188 9.43891 4.4624 9.99C4.12639 10.0565 3.78492 10.0917 3.4424 10.095C1.5374 10.095 -9.77516e-05 9.1725 -9.77516e-05 8.0475C-9.77516e-05 6.9225 1.5449 6 3.4499 6Z" fill="#5E6278"/>
-      </g>
-    </svg>);
+    return (_jsxs("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M7.61992 10.1625C9.00754 10.1625 10.1324 9.03757 10.1324 7.64995C10.1324 6.26234 9.00754 5.13745 7.61992 5.13745C6.23231 5.13745 5.10742 6.26234 5.10742 7.64995C5.10742 9.03757 6.23231 10.1625 7.61992 10.1625Z", fill: "#5E6278" }), _jsx("path", { d: "M7.62 14.9999C9.34313 14.9999 10.74 14.1168 10.74 13.0274C10.74 11.9381 9.34313 11.0549 7.62 11.0549C5.89687 11.0549 4.5 11.9381 4.5 13.0274C4.5 14.1168 5.89687 14.9999 7.62 14.9999Z", fill: "#5E6278" }), _jsx("path", { opacity: "0.3", d: "M11.595 4.23C12.7631 4.23 13.71 3.28308 13.71 2.115C13.71 0.946918 12.7631 0 11.595 0C10.4269 0 9.47998 0.946918 9.47998 2.115C9.47998 3.28308 10.4269 4.23 11.595 4.23Z", fill: "#5E6278" }), _jsx("path", { opacity: "0.3", d: "M3.62257 4.23C4.79065 4.23 5.73757 3.28308 5.73757 2.115C5.73757 0.946918 4.79065 0 3.62257 0C2.45449 0 1.50757 0.946918 1.50757 2.115C1.50757 3.28308 2.45449 4.23 3.62257 4.23Z", fill: "#5E6278" }), _jsxs("g", { opacity: "0.3", children: [_jsx("path", { d: "M11.4749 5.87256C11.2349 5.87256 11.0024 5.87256 10.7699 5.91006C11.1229 6.52313 11.2825 7.22856 11.2276 7.93388C11.1727 8.63919 10.906 9.31147 10.4624 9.86256C10.7984 9.92909 11.1399 9.96424 11.4824 9.96756C13.3874 9.96756 14.9249 9.04506 14.9249 7.92006C14.9249 6.79506 13.3799 5.87256 11.4749 5.87256Z", fill: "#5E6278" }), _jsx("path", { d: "M3.4499 6C3.6899 6 3.9224 6 4.1549 6.0375C3.80187 6.65057 3.64233 7.356 3.6972 8.06132C3.75208 8.76664 4.0188 9.43891 4.4624 9.99C4.12639 10.0565 3.78492 10.0917 3.4424 10.095C1.5374 10.095 -9.77516e-05 9.1725 -9.77516e-05 8.0475C-9.77516e-05 6.9225 1.5449 6 3.4499 6Z", fill: "#5E6278" })] })] }));
 };

package/dist/app/page.d.ts

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

package/dist/app/test/page.d.ts

@@ -1,2 +1 @@
-import React from "react";
-export default function DraggableRect(): React.JSX.Element;
+export default function DraggableRect(): import("react/jsx-runtime").JSX.Element;

package/dist/app/v2/page.d.ts

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

package/dist/components/button-tools/index.d.ts

@@ -7,5 +7,5 @@ interface ButtonToolsProps {
     }>;
     popoverProps?: PopoverProps;
 }
-declare const ButtonTools: (props: ButtonToolsProps) => import("react").JSX.Element;
+declare const ButtonTools: (props: ButtonToolsProps) => import("react/jsx-runtime").JSX.Element;
 export default ButtonTools;

package/dist/components/form-tools/label.d.ts

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

package/dist/components/form-tools/label.js

@@ -1,21 +1,25 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button, ColorPicker, Flex, Form, Input, InputNumber } from "antd";
+import { Button, ColorPicker, Flex, Form, Input, InputNumber, Divider } from "antd";
 const SectionLabel = () => {
-    return (_jsxs("div", { className: "py-2", children: [_jsx("h1", { className: "heading-s", children: "Section Labeling" }), _jsx(Form.Item, { label: "Labels in square", name: "labels", children: _jsx(Form.List, { name: "labels", children: (fields, { add, remove }) => (_jsxs(_Fragment, { children: [fields.map((field) => (_jsxs("div", { children: [_jsxs(Flex, { gap: 2, children: [_jsx(Form.Item, { name: [field.name, "label"], label: "Text", children: _jsx(Input, {}) }), _jsx(Form.Item, { name: [field.name, "fontColor"], label: "Color", getValueFromEvent: (color) => color.toHexString(), children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) })] }), _jsxs(Flex, { gap: 2, children: [_jsx(Form.Item, { name: [field.name, "x"], label: "X", children: _jsx(InputNumber, {}) }), _jsx(Form.Item, { name: [field.name, "y"], label: "Y", children: _jsx(InputNumber, {}) })] }), _jsxs(Flex, { gap: 2, children: [_jsx(Form.Item, { name: [field.name, "fontSize"], label: "Size", children: _jsx(InputNumber, { suffix: "px" }) }), _jsx(Form.Item, { name: [field.name, "rotation"], label: "Rotation", children: _jsx(InputNumber, { suffix: "\u00B0", min: 0, max: 360, parser: (value) => {
+    return (_jsxs("div", { className: "py-2", children: [_jsx("h1", { className: "heading-s", children: "Section Labeling" }), _jsx(Divider, { style: { margin: 4 } }), _jsx(Form.Item, { label: "Labels in table", name: "labels", className: "w-full", children: _jsx(Form.List, { name: "labels", children: (fields, { add, remove }) => (_jsxs(_Fragment, { children: [fields.map((field) => (_jsxs("div", { className: "w-full", children: [_jsx(Flex, { gap: 5, className: "w-full flex justify-between", children: _jsx(Form.Item, { name: [field.name, "label"], label: "Text", className: "w-full", children: _jsx(Input, {}) }) }), _jsxs(Flex, { gap: 5, className: "w-full flex justify-between", children: [_jsx(Form.Item, { name: [field.name, "x"], label: "Position X", children: _jsx(InputNumber, {}) }), _jsx(Form.Item, { name: [field.name, "y"], label: "Position Y", children: _jsx(InputNumber, {}) }), _jsx(Form.Item, { name: [field.name, "rotation"], label: "Rotation", 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));
-                                                    } }) })] })] }, field.key))), _jsxs(Flex, { gap: 2, children: [_jsx(Button, { type: "primary", onClick: () => add({
+                                                    } }) })] }), _jsxs(Flex, { gap: 5, children: [_jsx(Form.Item, { name: [field.name, "fontSize"], label: "Size", children: _jsx(InputNumber, { suffix: "px" }) }), _jsx(Form.Item, { name: [field.name, "fontColor"], label: "Color", getValueFromEvent: (color) => color.toHexString(), children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) })] })] }, field.key))), _jsxs(Flex, { gap: 2, className: "w-full", children: [_jsx(Button
+                                    // type="dashed"
+                                    , { 
+                                        // type="dashed"
+                                        onClick: () => remove(fields.length - 1), className: "w-full", children: "Remove" }), _jsx(Button, { type: "primary", onClick: () => add({
                                             label: "",
                                             fontColor: "#000000",
                                             x: 0,
                                             y: 0,
                                             fontSize: 12,
                                             rotation: 0
-                                        }), className: "btn btn-primary", children: "Add" }), _jsx(Button, { type: "primary", onClick: () => remove(fields.length - 1), className: "btn btn-primary", children: "Remove" })] })] })) }) }), _jsx("div", { className: "divider-dashed" })] }));
+                                        }), className: "w-full", children: "Add" })] })] })) }) }), _jsx("div", { className: "divider-dashed" })] }));
 };
 export default SectionLabel;

package/dist/components/form-tools/label.jsx

@@ -1,32 +1,27 @@
 "use client";
-import { Button, ColorPicker, Flex, Form, Input, InputNumber } from "antd";
+import { Button, ColorPicker, Flex, Form, Input, InputNumber, Divider } from "antd";
 const SectionLabel = () => {
     return (<div className="py-2">
       <h1 className="heading-s">Section Labeling</h1>
-      <Form.Item label="Labels in square" name={"labels"}>
+      <Divider style={{ margin: 4 }}/>
+
+      <Form.Item label="Labels in table" name={"labels"} className="w-full">
         <Form.List name="labels">
           {(fields, { add, remove }) => (<>
-              {fields.map((field) => (<div key={field.key}>
-                  <Flex gap={2}>
-                    <Form.Item name={[field.name, "label"]} label="Text">
+              {fields.map((field) => (<div key={field.key} className="w-full">
+                  <Flex gap={5} className="w-full flex justify-between">
+                    <Form.Item name={[field.name, "label"]} label="Text" className="w-full">
                       <Input />
                     </Form.Item>
-                    <Form.Item name={[field.name, "fontColor"]} label="Color" getValueFromEvent={(color) => color.toHexString()}>
-                      <ColorPicker allowClear format="hex" defaultFormat="hex"/>
-                    </Form.Item>
+                   
                   </Flex>
-                  <Flex gap={2}>
-                    <Form.Item name={[field.name, "x"]} label="X">
+                  <Flex gap={5} className="w-full flex justify-between">
+                    <Form.Item name={[field.name, "x"]} label="Position X">
                       <InputNumber />
                     </Form.Item>
-                    <Form.Item name={[field.name, "y"]} label="Y">
+                    <Form.Item name={[field.name, "y"]} label="Position Y">
                       <InputNumber />
                     </Form.Item>
-                  </Flex>
-                  <Flex gap={2}>
-                    <Form.Item name={[field.name, "fontSize"]} label="Size">
-                      <InputNumber suffix="px"/>
-                    </Form.Item>
                     <Form.Item name={[field.name, "rotation"]} label="Rotation">
                       <InputNumber suffix="°" min={0} max={360} parser={(value) => {
                     if (!value)
@@ -38,8 +33,22 @@ const SectionLabel = () => {
                 }}/>
                     </Form.Item>
                   </Flex>
+                  <Flex gap={5}>
+                    <Form.Item name={[field.name, "fontSize"]} label="Size">
+                      <InputNumber suffix="px"/>
+                    </Form.Item>
+                    <Form.Item name={[field.name, "fontColor"]} label="Color" getValueFromEvent={(color) => color.toHexString()}>
+                      <ColorPicker allowClear format="hex" defaultFormat="hex"/>
+                    </Form.Item>
+                  </Flex>
                 </div>))}
-              <Flex gap={2}>
+              <Flex gap={2} className="w-full">
+               
+                <Button 
+        // type="dashed"
+        onClick={() => remove(fields.length - 1)} className="w-full">
+                  Remove
+                </Button>
                 <Button type="primary" onClick={() => add({
                 label: "",
                 fontColor: "#000000",
@@ -47,12 +56,9 @@ const SectionLabel = () => {
                 y: 0,
                 fontSize: 12,
                 rotation: 0
-            })} className="btn btn-primary">
+            })} className="w-full">
                   Add
                 </Button>
-                <Button type="primary" onClick={() => remove(fields.length - 1)} className="btn btn-primary">
-                  Remove
-                </Button>
               </Flex>
             </>)}
         </Form.List>

package/dist/components/form-tools/shape.d.ts

@@ -4,5 +4,5 @@ export declare const optionsShape: {
 }[];
 declare const SectionShape: ({ allowChangeShape, }: {
     allowChangeShape?: boolean;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default SectionShape;

package/dist/components/form-tools/shape.js

@@ -1,6 +1,8 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAppSelector } from "@/hooks/use-redux";
 import { ColorPicker, Flex, Form, InputNumber, Select } from "antd";
+const { Option } = Select;
 export const optionsShape = [
     {
         value: "circle",
@@ -28,7 +30,7 @@ export const optionsShape = [
     },
     {
         value: "table-seat-rect-circle",
-        label: "Type 5",
+        label: "Type 5 ",
     },
     {
         label: "Image Table",
@@ -37,7 +39,30 @@ export const optionsShape = [
 ];
 const SectionShape = ({ allowChangeShape = true, }) => {
     const shape = Form.useWatch("shape");
-    return (_jsxs("div", { className: "py-2", children: [_jsx("h1", { className: "heading-s", children: "Shape" }), allowChangeShape && (_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: [_jsx(Form.Item, { label: "Width", name: "width", className: "w-full", children: _jsx(InputNumber, { suffix: "px", controls: true, parser: (value) => {
+    const seatKey = useAppSelector((state) => state.panel.seatDefaultKey);
+    const selectedComponent = useAppSelector((state) => state.panel.selectedComponent);
+    const maxSeat = (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent[seatKey]) || 0;
+    return (_jsxs("div", { className: "py-2", children: [_jsx("h1", { className: "heading-s", children: "Shape" }), allowChangeShape && (_jsx(Flex, { gap: 2, className: "w-full", children: _jsx(Form.Item, { label: "Name", name: "shape", className: "w-full", children: _jsx(Select
+                    // options={optionsShape.map((item) => ({
+                    //   ...item,
+                    //   label:
+                    //     item.value === "table-seat-rect-circle"
+                    //       ? `Type 5 (only for 4 ${seatKey})`
+                    //       : item.label,
+                    // }))}
+                    , { 
+                        // options={optionsShape.map((item) => ({
+                        //   ...item,
+                        //   label:
+                        //     item.value === "table-seat-rect-circle"
+                        //       ? `Type 5 (only for 4 ${seatKey})`
+                        //       : item.label,
+                        // }))}
+                        className: "w-full", children: optionsShape === null || optionsShape === void 0 ? void 0 : optionsShape.map((item) => {
+                            const disabled = item.value === "table-seat-rect-circle" && maxSeat > 4;
+                            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: [_jsx(Form.Item, { label: "Width", name: "width", className: "w-full", children: _jsx(InputNumber, { suffix: "px", controls: true, 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));
@@ -45,25 +70,25 @@ const SectionShape = ({ allowChangeShape = true, }) => {
                                 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));
-                            } }) })] }), _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, { suffix: "\u00B0", min: 0, max: 360, parser: (value) => {
+                            } }) }), !(shape === null || shape === void 0 ? void 0 : shape.includes("circle")) && (_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));
+                            } }) }))] }), _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, { 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));
-                            } }) })] }), _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", name: "strokeWidth", className: "w-full", children: _jsx(InputNumber, {}) }), !(shape === null || shape === void 0 ? void 0 : shape.includes("circle")) && (_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));
-                            } }) })), _jsx(Form.Item, { label: "opacity", name: "opacity", className: "w-full", children: _jsx(InputNumber, { step: 0.1, max: 1, 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(1, Math.max(0, num));
-                            } }) })] })] }));
+                            } }) })] }), _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", name: "strokeWidth", className: "w-full", children: _jsx(InputNumber, {}) })] }), _jsx(Flex, { children: _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(0, Math.max(0, num));
+                        } }) }) })] }));
 };
 export default SectionShape;

package/dist/components/form-tools/shape.jsx

@@ -1,5 +1,7 @@
 "use client";
+import { useAppSelector } from "@/hooks/use-redux";
 import { ColorPicker, Flex, Form, InputNumber, Select } from "antd";
+const { Option } = Select;
 export const optionsShape = [
     {
         value: "circle",
@@ -27,7 +29,7 @@ export const optionsShape = [
     },
     {
         value: "table-seat-rect-circle",
-        label: "Type 5",
+        label: "Type 5 ",
     },
     {
         label: "Image Table",
@@ -36,11 +38,30 @@ export const optionsShape = [
 ];
 const SectionShape = ({ allowChangeShape = true, }) => {
     const shape = Form.useWatch("shape");
+    const seatKey = useAppSelector((state) => state.panel.seatDefaultKey);
+    const selectedComponent = useAppSelector((state) => state.panel.selectedComponent);
+    const maxSeat = (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent[seatKey]) || 0;
     return (<div className="py-2">
       <h1 className="heading-s">Shape</h1>
       {allowChangeShape && (<Flex gap={2} className="w-full">
           <Form.Item label="Name" name="shape" className="w-full">
-            <Select options={optionsShape} className="w-full"/>
+            <Select 
+        // options={optionsShape.map((item) => ({
+        //   ...item,
+        //   label:
+        //     item.value === "table-seat-rect-circle"
+        //       ? `Type 5 (only for 4 ${seatKey})`
+        //       : item.label,
+        // }))}
+        className="w-full">
+              {optionsShape === null || optionsShape === void 0 ? void 0 : optionsShape.map((item) => {
+                const disabled = item.value === "table-seat-rect-circle" && maxSeat > 4;
+                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">
@@ -58,6 +79,13 @@ const SectionShape = ({ allowChangeShape = true, }) => {
             return onlyNumber === "" ? 1 : Math.max(1, Number(onlyNumber));
         }}/>
         </Form.Item>
+        {!(shape === null || shape === void 0 ? void 0 : shape.includes("circle")) && (<Form.Item label="Radius" name="radius" className="w-full">
+            <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));
+            }}/>
+          </Form.Item>)}
       </Flex>
       <Flex gap={2}>
         <Form.Item label="Position X" name="x" className="w-full">
@@ -81,30 +109,23 @@ const SectionShape = ({ allowChangeShape = true, }) => {
         <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" name={"stroke"} getValueFromEvent={(color) => color.toHexString()} className="w-full ">
+        <Form.Item label="Stroke Fill" name={"stroke"} getValueFromEvent={(color) => color.toHexString()} className="w-full ">
           <ColorPicker allowClear format="hex" defaultFormat="hex"/>
         </Form.Item>
-      </Flex>
-      <Flex>
         <Form.Item label="Stroke" name={"strokeWidth"} className="w-full">
           <InputNumber />
         </Form.Item>
-        {!(shape === null || shape === void 0 ? void 0 : shape.includes("circle")) && (<Form.Item label="Radius" name="radius" className="w-full">
-            <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));
-            }}/>
-          </Form.Item>)}
+      </Flex>
+      <Flex>
         <Form.Item label="opacity" name={"opacity"} className="w-full">
-          <InputNumber step={0.1} max={1} min={0} parser={(value) => {
+          <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(1, Math.max(0, num));
+            return Math.min(0, Math.max(0, num));
         }}/>
         </Form.Item>
       </Flex>

package/dist/components/input/number-indicator.d.ts

@@ -3,5 +3,5 @@ interface NumberIndicatorProps {
     defaultValue?: number;
     onChange: (value: number) => void;
 }
-declare const NumberIndicator: ({ name, defaultValue, onChange }: NumberIndicatorProps) => import("react").JSX.Element;
+declare const NumberIndicator: ({ name, defaultValue, onChange }: NumberIndicatorProps) => import("react/jsx-runtime").JSX.Element;
 export default NumberIndicator;

package/dist/components/joystick/index.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
 type JoystickPosition = {
     x: number;
     y: number;
@@ -8,5 +7,5 @@ type JoystickProps = {
     onMove?: (pos: JoystickPosition) => void;
     onEnd?: () => void;
 };
-export declare const Joystick: ({ size, onMove, onEnd, }: JoystickProps) => React.JSX.Element;
+export declare const Joystick: ({ size, onMove, onEnd, }: JoystickProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/layer/index.d.ts

@@ -15,5 +15,5 @@ interface LayersProps {
     onTouchMove?: (e: React.TouchEvent<SVGRectElement | SVGCircleElement | SVGTextElement | SVGImageElement>) => void;
     onTouchEnd?: (e: React.TouchEvent<SVGRectElement | SVGCircleElement | SVGTextElement | SVGImageElement>) => void;
 }
-declare const Layers: ({ shadowShape, components, onClick, selectedComponent, selectedTable, activeTool, onMouseDown, onMouseUp, onBlur, selectedTableColor, mode, style, onTouchEnd, onTouchMove, onTouchStart }: LayersProps) => import("react").JSX.Element;
+declare const Layers: ({ shadowShape, components, onClick, selectedComponent, selectedTable, activeTool, onMouseDown, onMouseUp, onBlur, selectedTableColor, mode, style, onTouchEnd, onTouchMove, onTouchStart }: LayersProps) => import("react/jsx-runtime").JSX.Element;
 export default Layers;

package/dist/components/layer-v2/index.d.ts

@@ -15,5 +15,5 @@ interface LayersProps {
     onTouchMove?: (e: React.TouchEvent<SVGRectElement | SVGCircleElement | SVGTextElement | SVGImageElement>) => void;
     onTouchEnd?: (e: React.TouchEvent<SVGRectElement | SVGCircleElement | SVGTextElement | SVGImageElement>) => void;
 }
-declare const Layers: ({ shadowShape, components, onClick, selectedComponent, selectedTable, activeTool, onMouseDown, onMouseUp, onBlur, selectedTableColor, mode, style, onTouchStart }: LayersProps) => import("react").JSX.Element;
+declare const Layers: ({ shadowShape, components, onClick, selectedComponent, selectedTable, activeTool, onMouseDown, onMouseUp, onBlur, selectedTableColor, mode, style, onTouchStart }: LayersProps) => import("react/jsx-runtime").JSX.Element;
 export default Layers;

package/dist/components/layer-v3/index.d.ts

@@ -9,5 +9,5 @@ interface LayersProps {
     activeTool?: string;
     selectionLines?: SelectionLines;
 }
-declare const Layers: ({ components, selectedComponent, activeTool, selectionLines, }: LayersProps) => import("react").JSX.Element;
+declare const Layers: ({ components, selectedComponent, activeTool, selectionLines, }: LayersProps) => import("react/jsx-runtime").JSX.Element;
 export default Layers;

package/dist/components/layer-v4/index.d.ts

@@ -20,5 +20,5 @@ interface LayersProps {
         items: string[];
     }[];
 }
-declare const Layers: ({ components, selectedTable, iconTags, eventMatchTable, onHighlightGroup, onForceRestoreGroup, selectedTableColor, privilegedTags, }: LayersProps) => import("react").JSX.Element;
+declare const Layers: ({ components, selectedTable, iconTags, eventMatchTable, onHighlightGroup, onForceRestoreGroup, selectedTableColor, privilegedTags, }: LayersProps) => import("react/jsx-runtime").JSX.Element;
 export default Layers;

package/dist/components/lib/index.d.ts

@@ -3,6 +3,6 @@ export interface LayerViewProps {
     componentProps: any[];
     extraComponentProps: any[];
 }
-declare const TableEditor: ({ componentProps, extraComponentProps, }: LayerViewProps) => import("react").JSX.Element;
+declare const TableEditor: ({ componentProps, extraComponentProps, }: LayerViewProps) => import("react/jsx-runtime").JSX.Element;
 export default TableEditor;
 export { LayerView };

package/dist/components/modal-preview/index.d.ts

@@ -1,4 +1,4 @@
 declare const ModalPreview: ({ children }: {
     children: React.ReactNode;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default ModalPreview;

package/dist/features/board/index.d.ts

@@ -2,5 +2,5 @@ interface BoardTemplateProps {
     onSelectComponent?: (items: any) => void;
     mappingKey?: string;
 }
-declare const BoardTemplate: ({ onSelectComponent }: BoardTemplateProps) => import("react").JSX.Element;
+declare const BoardTemplate: ({ onSelectComponent }: BoardTemplateProps) => import("react/jsx-runtime").JSX.Element;
 export default BoardTemplate;

package/dist/features/board-v2/index.d.ts

@@ -1,8 +1,7 @@
-import React from "react";
 interface BoardTemplateProps {
     onSelectComponent?: (items: any) => void;
     mappingKey?: string;
     viewOnly?: boolean;
 }
-declare const BoardTemplate: ({ onSelectComponent, viewOnly }: BoardTemplateProps) => React.JSX.Element;
+declare const BoardTemplate: ({ onSelectComponent, viewOnly }: BoardTemplateProps) => import("react/jsx-runtime").JSX.Element;
 export default BoardTemplate;

package/dist/features/board-v3/index.d.ts

@@ -13,5 +13,5 @@ interface BoardTemplateProps {
     };
     disabled?: boolean;
 }
-declare const BoardTemplate: ({ refs, loadingRender, disabled, }: BoardTemplateProps) => React.JSX.Element;
+declare const BoardTemplate: ({ refs, loadingRender, disabled, }: BoardTemplateProps) => import("react/jsx-runtime").JSX.Element;
 export default BoardTemplate;

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

@@ -67,6 +67,8 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
     //polygon
     const polygonElementRef = useRef([]);
     const isOnMakePolygonRef = useRef(false);
+    //boundingbox
+    const isInialBoundingBox = useRef(false);
     const { components: componentsProps, extraComponents: extraComponentsProps, boundingBox, flagChange, updateBy, isShowTagType, } = useAppSelector((state) => state.board);
     const { selectionLines } = useAppSelector((state) => state.panel);
     const [selectedLines, setSelectedLines] = useState(null);
@@ -338,6 +340,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
         const isInitialCreateElemente = toolElement.includes(activeTool) && !isCreateElementRef.current;
         const isInitialCreateBoundingBox = activeTool === "bounding-box";
         const isInitialCreateText = activeTool === "text" && !isCreateElementRef.current;
+        console.log({ isInitialCreateText, }, isCreateElementRef.current);
         if (isInitialCreateElemente) {
             const tables = createTableGhost({
                 x,
@@ -429,6 +432,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
             hadSelectionRef.current = true;
         }
         if (downOutSelectionBox) {
+            console.log("downOutSelectionBox");
             hadSelectionRef.current = false;
             onMoveSelectionBoxRef.current = false;
             handleUnSelectComponent();
@@ -1352,11 +1356,14 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
             if (isInitialCreateBoundingBox) {
                 const ghost = svg.querySelector("#ghost-element-create");
                 const getBBox = getGlobalBBox(svg, ghost);
-                dispatch({
-                    type: "board/setBoundingBox",
-                    payload: Object.assign(Object.assign({}, getBBox), { id: `${Date.now()}`, shape: "bounding-box", fill: "transparent" }),
-                });
+                if (getBBox.width > 90 || getBBox.height > 90) {
+                    dispatch({
+                        type: "board/setBoundingBox",
+                        payload: Object.assign(Object.assign({}, getBBox), { id: `${Date.now()}`, shape: "bounding-box", fill: "transparent" }),
+                    });
+                }
                 (_m = (_l = svgRef.current) === null || _l === void 0 ? void 0 : _l.querySelectorAll("#ghost-element-create")) === null || _m === void 0 ? void 0 : _m.forEach((el) => el.remove());
+                isCreateElementRef.current = false;
             }
             if (isInitialCreateText) {
                 const ghost = svg.querySelector("#ghost-element-create");
@@ -1553,7 +1560,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
                             switch: false,
                             drop: false,
                             rightClick: false,
-                        } }), _jsx("div", { className: "flex gap-2 mt-2", children: _jsxs(Radio.Group, { value: isShowTagType, onChange: handleCheckPreview, children: [_jsx(Radio, { value: "default", children: "Default" }), _jsx(Radio, { value: "type-1", children: "Type 1" }), _jsx(Radio, { value: "type-2", children: "Type 2" })] }) })] }), _jsxs("div", { className: "relative w-full h-screen flex-1 overflow-hidden", ref: containerRef, children: [_jsx("div", { className: "absolute bottom-5 left-1/2 transform -translate-x-1/2 z-10", children: _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { icon: _jsx(ZoomIn, {}), onClick: handelZoomIn }), _jsx(Button, { icon: _jsx(ZoomOut, {}), onClick: handleZoomOut })] }) }), _jsx(TransformWrapper, { ref: transformRef, 
+                        }, defaultBoundingBox: boundingBox }), _jsx("div", { className: "flex gap-2 mt-2", children: _jsxs(Radio.Group, { value: isShowTagType, onChange: handleCheckPreview, children: [_jsx(Radio, { value: "default", children: "Default" }), _jsx(Radio, { value: "type-1", children: "Type 1" }), _jsx(Radio, { value: "type-2", children: "Type 2" })] }) })] }), _jsxs("div", { className: "relative w-full h-screen flex-1 overflow-hidden", ref: containerRef, children: [_jsx("div", { className: "absolute bottom-5 left-1/2 transform -translate-x-1/2 z-10", children: _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { icon: _jsx(ZoomIn, {}), onClick: handelZoomIn }), _jsx(Button, { icon: _jsx(ZoomOut, {}), onClick: handleZoomOut })] }) }), _jsx(TransformWrapper, { ref: transformRef, 
                         // limitToBounds={true}
                         panning: {
                             disabled: [