seat-editor 3.3.46 → 3.4.1

package/dist/app/constant.d.ts

@@ -342,6 +342,7 @@ export declare const test4: ({
 export declare const data4: ({
     uuid_table: string;
     status: number;
+    capacity: number;
     properties: {
         x: number;
         y: number;
@@ -523,6 +524,7 @@ export declare const data4: ({
         labels?: undefined;
     };
     uuid_table?: undefined;
+    capacity?: undefined;
 } | {
     properties: {
         x: number;
@@ -583,6 +585,7 @@ export declare const data4: ({
     };
     uuid_table?: undefined;
     status?: undefined;
+    capacity?: undefined;
 })[];
 export declare const extraComponent: any[];
 export declare const data5: {

package/dist/app/constant.js

@@ -3441,7 +3441,7 @@ export const test4 = [
     },
     {
         status: 1,
-        rsvp: 2,
+        rsvp: 1,
         properties: {
             x: 400,
             y: 20,
@@ -3527,6 +3527,7 @@ export const data4 = [
     {
         uuid_table: "axxxxx",
         status: 0,
+        capacity: 5,
         properties: {
             x: 500,
             y: 520,

package/dist/app/new-board/page.js

@@ -2,6 +2,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import SeatEditor from "../../features/package";
+// import { constantData, data2, data3, extraComponent } from "../constant";
+// import LayerView from "@/features/view-only-2";
+// import SeatEdit from "@/features/package";
 import { data4 } from "../constant";
 export default function NewBoard() {
     const [initialValue, setInitialValue] = useState([]);
@@ -54,5 +57,10 @@ export default function NewBoard() {
                             }
                         }, extraComponentProps: extraComponents, defaultBackground: backgroundColor, 
                         // dragOnly={true}
-                        statusKey: "status" }) })] }) }));
+                        statusKey: "status", 
+                        // action={async (action: any) => {
+                        //   console.log({ action });
+                        //   return null
+                        // }}
+                        defaultSeatCountKey: "capacity" }) })] }) }));
 }

package/dist/app/new-board/page.jsx

@@ -1,6 +1,9 @@
 "use client";
 import { useEffect, useState } from "react";
 import SeatEditor from "../../features/package";
+// import { constantData, data2, data3, extraComponent } from "../constant";
+// import LayerView from "@/features/view-only-2";
+// import SeatEdit from "@/features/package";
 import { data4 } from "../constant";
 export default function NewBoard() {
     const [initialValue, setInitialValue] = useState([]);
@@ -64,7 +67,12 @@ export default function NewBoard() {
             }
         }} extraComponentProps={extraComponents} defaultBackground={backgroundColor} 
     // dragOnly={true}
-    statusKey="status"/>
+    statusKey="status" 
+    // action={async (action: any) => {
+    //   console.log({ action });
+    //   return null
+    // }}
+    defaultSeatCountKey="capacity"/>
           </div>
 
       </div>

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/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.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/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: [

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

@@ -66,6 +66,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);
@@ -337,6 +339,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,
@@ -428,6 +431,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
             hadSelectionRef.current = true;
         }
         if (downOutSelectionBox) {
+            console.log("downOutSelectionBox");
             hadSelectionRef.current = false;
             onMoveSelectionBoxRef.current = false;
             handleUnSelectComponent();
@@ -1351,11 +1355,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");
@@ -1554,7 +1561,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
             switch: false,
             drop: false,
             rightClick: false,
-        }}/>
+        }} defaultBoundingBox={boundingBox}/>
         <div className="flex gap-2 mt-2">
           <Radio.Group value={isShowTagType} onChange={handleCheckPreview}>
             <Radio value="default">Default</Radio>

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

@@ -43,6 +43,7 @@ export interface TableEditorProps<TMeta = undefined> {
         element: React.JSX.Element;
     };
     disabledView?: boolean;
+    defaultSeatCountKey?: string;
 }
 declare const TableEditor: <TMeta>(props: TableEditorProps<TMeta>) => import("react").JSX.Element;
 export default TableEditor;