seat-editor 3.4.7 → 3.5.0

package/dist/app/graph-view-new/page.d.ts

@@ -0,0 +1 @@
+export default function GraphView(): import("react/jsx-runtime").JSX.Element;

package/dist/app/graph-view-new/page.js

@@ -0,0 +1,71 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import LayerView from "../../features/view-only-5";
+import { data } from "./constant";
+import { Button } from "antd";
+import { useMemo, useState } from "react";
+export default function GraphView() {
+    const [isConnecting, setIsConnecting] = useState(false);
+    const [isSelectNode, setIsSelectNode] = useState(false);
+    const [sections, setSections] = useState([
+        {
+            id: 1,
+            name: "Section 1",
+            color: "#1e2d4a",
+            items: [],
+        },
+        {
+            id: 2,
+            name: "Section 2",
+            color: "#F6F6F6",
+            items: [],
+        }
+    ]);
+    const [sectionActive, setSectionActive] = useState(null);
+    const componentSection = useMemo(() => data === null || data === void 0 ? void 0 : data.map((data) => {
+        var _a;
+        return (Object.assign(Object.assign({}, data), { section: (_a = sections.find((section) => section.items.some((item) => item.uuid_table === data.uuid_table))) === null || _a === void 0 ? void 0 : _a.id }));
+    }), [data, sections]);
+    const onMakeSelection = (datas) => {
+        setSections((prev) => {
+            const uuidSet = new Set(datas.map((d) => d.uuid_table));
+            return prev.map((section) => {
+                // remove item dari section lain
+                if (section.id !== sectionActive) {
+                    return Object.assign(Object.assign({}, section), { items: section.items.filter((item) => !uuidSet.has(item.uuid_table)) });
+                }
+                // section active
+                const filteredItems = section.items.filter((item) => !uuidSet.has(item.uuid_table));
+                const newItems = datas.filter((d) => !section.items.some((item) => item.uuid_table === d.uuid_table));
+                return Object.assign(Object.assign({}, section), { items: [...filteredItems, ...newItems] });
+            });
+        });
+    };
+    const handleSelectItem = (data) => {
+        setSections((prev) => prev.map((section) => {
+            if (section.id !== sectionActive)
+                return section;
+            const isExist = section.items.some((item) => item.uuid_table === data.uuid_table);
+            return Object.assign(Object.assign({}, section), { items: isExist
+                    ? section.items.filter((item) => item.uuid_table !== data.uuid_table)
+                    : [...section.items, data] });
+        }));
+    };
+    return (_jsx("div", { className: "w-full h-screen flex relative", children: _jsxs("div", { className: "flex", children: [_jsxs("div", { className: "absolute top-0 left-0 z-10 flex gap-2", children: [_jsx(Button, { type: "primary", onClick: () => setIsConnecting(!isConnecting), children: isConnecting ? "Disconnect" : "Connect" }), _jsx(Button, { type: "primary", onClick: () => setIsSelectNode(!isSelectNode), children: isSelectNode ? "Deselect" : "Select" })] }), _jsx(LayerView, { componentProps: componentSection, statusKey: "section", defaultBackground: "#1e2d4a", mappingKey: "properties", keyNode: "nodes", onEdgesChange: (table, edges) => console.log({ edges, table }), isConnectEdge: isConnecting, isSelectNode: isSelectNode, onSelectComponent: handleSelectItem, actionPrivileged: {
+                        select: true,
+                    }, onMakeSelection: onMakeSelection, tableMatchKey: [
+                        {
+                            key: 1,
+                            properties: {
+                                fill: "#1e2d4a",
+                            },
+                        },
+                        {
+                            key: 2,
+                            properties: {
+                                fill: "#F6F6F6",
+                            },
+                        },
+                    ] }), _jsx("div", { className: "w-1/5 p-4", children: _jsxs("div", { className: "rounded-lg bg-white p-4", children: [_jsx("h1", { className: "text-2xl font-bold", children: "Section" }), sections.map((section) => (_jsxs("div", { className: clsx("font-bold text-white rounded-md p-2 cursor-pointer", sectionActive === section.id && "!bg-blue-500"), style: { backgroundColor: section.color }, onClick: () => setSectionActive(section.id), children: [_jsx("h2", { className: "text-lg", children: section.name }), section.items.length > 0 && (_jsx("ul", { className: "list-disc pl-5 bg-opacity-50 bg-white p-2 rounded ", children: section.items.map((item) => (_jsx("li", { children: item.name }, item.id))) }))] }, section.id)))] }) }), _jsx("div", { className: "w-1/5 p-4", children: _jsx("div", { className: "rounded-lg bg-white p-4", children: _jsx("h1", { className: "text-2xl font-bold", children: "Nodes" }) }) })] }) }));
+}

package/dist/app/graph-view-new/page.jsx

@@ -0,0 +1,98 @@
+"use client";
+import clsx from "clsx";
+import LayerView from "../../features/view-only-5";
+import { data } from "./constant";
+import { Button } from "antd";
+import { useMemo, useState } from "react";
+export default function GraphView() {
+    const [isConnecting, setIsConnecting] = useState(false);
+    const [isSelectNode, setIsSelectNode] = useState(false);
+    const [sections, setSections] = useState([
+        {
+            id: 1,
+            name: "Section 1",
+            color: "#1e2d4a",
+            items: [],
+        },
+        {
+            id: 2,
+            name: "Section 2",
+            color: "#F6F6F6",
+            items: [],
+        }
+    ]);
+    const [sectionActive, setSectionActive] = useState(null);
+    const componentSection = useMemo(() => data === null || data === void 0 ? void 0 : data.map((data) => {
+        var _a;
+        return (Object.assign(Object.assign({}, data), { section: (_a = sections.find((section) => section.items.some((item) => item.uuid_table === data.uuid_table))) === null || _a === void 0 ? void 0 : _a.id }));
+    }), [data, sections]);
+    const onMakeSelection = (datas) => {
+        setSections((prev) => {
+            const uuidSet = new Set(datas.map((d) => d.uuid_table));
+            return prev.map((section) => {
+                // remove item dari section lain
+                if (section.id !== sectionActive) {
+                    return Object.assign(Object.assign({}, section), { items: section.items.filter((item) => !uuidSet.has(item.uuid_table)) });
+                }
+                // section active
+                const filteredItems = section.items.filter((item) => !uuidSet.has(item.uuid_table));
+                const newItems = datas.filter((d) => !section.items.some((item) => item.uuid_table === d.uuid_table));
+                return Object.assign(Object.assign({}, section), { items: [...filteredItems, ...newItems] });
+            });
+        });
+    };
+    const handleSelectItem = (data) => {
+        setSections((prev) => prev.map((section) => {
+            if (section.id !== sectionActive)
+                return section;
+            const isExist = section.items.some((item) => item.uuid_table === data.uuid_table);
+            return Object.assign(Object.assign({}, section), { items: isExist
+                    ? section.items.filter((item) => item.uuid_table !== data.uuid_table)
+                    : [...section.items, data] });
+        }));
+    };
+    return (<div className="w-full h-screen flex relative">
+      <div className="flex">
+        <div className="absolute top-0 left-0 z-10 flex gap-2">
+          <Button type="primary" onClick={() => setIsConnecting(!isConnecting)}>
+            {isConnecting ? "Disconnect" : "Connect"}
+          </Button>
+          <Button type="primary" onClick={() => setIsSelectNode(!isSelectNode)}>
+            {isSelectNode ? "Deselect" : "Select"}
+          </Button>
+        </div>
+        <LayerView componentProps={componentSection} statusKey="section" defaultBackground="#1e2d4a" mappingKey="properties" keyNode="nodes" onEdgesChange={(table, edges) => console.log({ edges, table })} isConnectEdge={isConnecting} isSelectNode={isSelectNode} onSelectComponent={handleSelectItem} actionPrivileged={{
+            select: true,
+        }} onMakeSelection={onMakeSelection} tableMatchKey={[
+            {
+                key: 1,
+                properties: {
+                    fill: "#1e2d4a",
+                },
+            },
+            {
+                key: 2,
+                properties: {
+                    fill: "#F6F6F6",
+                },
+            },
+        ]}/>
+        <div className="w-1/5 p-4">
+          <div className="rounded-lg bg-white p-4">
+            <h1 className="text-2xl font-bold">Section</h1>
+            {sections.map((section) => (<div key={section.id} className={clsx("font-bold text-white rounded-md p-2 cursor-pointer", sectionActive === section.id && "!bg-blue-500")} style={{ backgroundColor: section.color }} onClick={() => setSectionActive(section.id)}>
+                <h2 className="text-lg">{section.name}</h2>
+                {section.items.length > 0 && (<ul className="list-disc pl-5 bg-opacity-50 bg-white p-2 rounded ">
+                    {section.items.map((item) => (<li key={item.id}>{item.name}</li>))}
+                  </ul>)}
+              </div>))}
+          </div>
+        </div>
+        <div className="w-1/5 p-4">
+          <div className="rounded-lg bg-white p-4">
+            <h1 className="text-2xl font-bold">Nodes</h1>
+          </div>
+        </div>
+      </div>
+    </div>);
+}

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

@@ -6,6 +6,40 @@ import SeatEditor from "../../features/package";
 // import LayerView from "@/features/view-only-2";
 // import SeatEdit from "@/features/package";
 import { data4 } from "../constant";
+const background = [
+    {
+        id: "1776070944676",
+        shape: "polygon",
+        fill: "#ef0606",
+        points: [
+            {
+                x: 100,
+                y: 500,
+            },
+            {
+                x: 400,
+                y: 500,
+            },
+            {
+                x: 400,
+                y: 400,
+            },
+            {
+                x: 100,
+                y: 400,
+            },
+            {
+                x: 100,
+                y: 500,
+            },
+        ],
+        rotation: 0,
+        x: 0,
+        y: 0,
+        width: 340,
+        height: 179,
+    },
+];
 export default function NewBoard() {
     const [initialValue, setInitialValue] = useState([]);
     const [extraComponents, setExtraComponents] = useState([]);
@@ -24,7 +58,8 @@ export default function NewBoard() {
         });
         return test;
     };
-    const test = [{
+    const test = [
+        {
             test: "test",
             properties: {
                 shape: "image-table",
@@ -34,8 +69,9 @@ export default function NewBoard() {
                 y: 100,
                 backgroundColor: "#ffffff",
                 src: "dummyImage",
-            }
-        }];
+            },
+        },
+    ];
     // const ayo =test?.map((item) => {
     //   return {
     //     properties: item?.properties?.
@@ -45,15 +81,15 @@ export default function NewBoard() {
                             component: true,
                             extraComponent: true,
                         }, action: handleUploadImage, mappingKey: "properties", onCurrentStateChange: (setState) => {
-                            var _a, _b, _c, _d;
+                            var _a, _b, _c;
                             if (((_a = setState === null || setState === void 0 ? void 0 : setState.components) === null || _a === void 0 ? void 0 : _a.length) > 0) {
                                 setInitialValue((_b = setState.components) !== null && _b !== void 0 ? _b : []);
                             }
                             if (setState === null || setState === void 0 ? void 0 : setState.background) {
-                                setBackgroundColor(setState.background);
+                                // setBackgroundColor(setState.background);
                             }
-                            if (((_c = setState === null || setState === void 0 ? void 0 : setState.extraComponents) === null || _c === void 0 ? void 0 : _c.length) > 0) {
-                                setExtraComponents((_d = setState.extraComponents) !== null && _d !== void 0 ? _d : []);
+                            if (setState === null || setState === void 0 ? void 0 : setState.extraComponents) {
+                                setExtraComponents((_c = setState.extraComponents) !== null && _c !== void 0 ? _c : []);
                             }
                         }, extraComponentProps: extraComponents, defaultBackground: backgroundColor, 
                         // dragOnly={true}

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

@@ -5,6 +5,40 @@ import SeatEditor from "../../features/package";
 // import LayerView from "@/features/view-only-2";
 // import SeatEdit from "@/features/package";
 import { data4 } from "../constant";
+const background = [
+    {
+        id: "1776070944676",
+        shape: "polygon",
+        fill: "#ef0606",
+        points: [
+            {
+                x: 100,
+                y: 500,
+            },
+            {
+                x: 400,
+                y: 500,
+            },
+            {
+                x: 400,
+                y: 400,
+            },
+            {
+                x: 100,
+                y: 400,
+            },
+            {
+                x: 100,
+                y: 500,
+            },
+        ],
+        rotation: 0,
+        x: 0,
+        y: 0,
+        width: 340,
+        height: 179,
+    },
+];
 export default function NewBoard() {
     const [initialValue, setInitialValue] = useState([]);
     const [extraComponents, setExtraComponents] = useState([]);
@@ -23,7 +57,8 @@ export default function NewBoard() {
         });
         return test;
     };
-    const test = [{
+    const test = [
+        {
             test: "test",
             properties: {
                 shape: "image-table",
@@ -33,8 +68,9 @@ export default function NewBoard() {
                 y: 100,
                 backgroundColor: "#ffffff",
                 src: "dummyImage",
-            }
-        }];
+            },
+        },
+    ];
     // const ayo =test?.map((item) => {
     //   return {
     //     properties: item?.properties?.
@@ -42,9 +78,7 @@ export default function NewBoard() {
     // })
     return (<>
       <div className="w-full h-screen flex flex-col relative justify-center">
-        <div className="w-full h-[1000px] bg-white border-r border-gray-200">
-     
-        </div>
+        <div className="w-full h-[1000px] bg-white border-r border-gray-200"></div>
         {/* <button className="bg-blue-500 text-white px-4 py-2 rounded"
           onClick={() => setViewOnly(!viewOnly)}
         >
@@ -55,15 +89,15 @@ export default function NewBoard() {
             component: true,
             extraComponent: true,
         }} action={handleUploadImage} mappingKey="properties" onCurrentStateChange={(setState) => {
-            var _a, _b, _c, _d;
+            var _a, _b, _c;
             if (((_a = setState === null || setState === void 0 ? void 0 : setState.components) === null || _a === void 0 ? void 0 : _a.length) > 0) {
                 setInitialValue((_b = setState.components) !== null && _b !== void 0 ? _b : []);
             }
             if (setState === null || setState === void 0 ? void 0 : setState.background) {
-                setBackgroundColor(setState.background);
+                // setBackgroundColor(setState.background);
             }
-            if (((_c = setState === null || setState === void 0 ? void 0 : setState.extraComponents) === null || _c === void 0 ? void 0 : _c.length) > 0) {
-                setExtraComponents((_d = setState.extraComponents) !== null && _d !== void 0 ? _d : []);
+            if (setState === null || setState === void 0 ? void 0 : setState.extraComponents) {
+                setExtraComponents((_c = setState.extraComponents) !== null && _c !== void 0 ? _c : []);
             }
         }} extraComponentProps={extraComponents} defaultBackground={backgroundColor} 
     // dragOnly={true}
@@ -73,8 +107,7 @@ export default function NewBoard() {
     //   return null
     // }}
     defaultSeatCountKey="capacity"/>
-          </div>
-
+        </div>
       </div>
     </>);
 }

package/dist/components/button-tools/index.js

@@ -1,11 +1,13 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Button, Popover } from "antd";
 const ButtonTools = (props) => {
     const { buttonProps, items, popoverProps } = props;
-    if (items.length === 0) {
-        return (_jsx(Popover, Object.assign({ trigger: "hover" }, popoverProps, { children: _jsx(Button, Object.assign({}, buttonProps)) })));
-    }
-    return (_jsx(Popover, { content: _jsxs("div", { children: [_jsx(Button, { children: "Button 1" }), _jsx(Button, { children: "Button 2" })] }), trigger: "click", children: _jsx(Button, Object.assign({}, buttonProps)) }));
+    const content = (_jsx("div", { children: items.map((item, i) => (_jsx(Button, { type: "text", onClick: item.onClick, children: item.label }, i))) }));
+    return (_jsx(Popover, Object.assign({ content: items.length > 0 ? content : null, trigger: "click", placement: "right", styles: {
+            body: {
+                maxWidth: "fit-content",
+            },
+        } }, popoverProps, { children: _jsx(Button, Object.assign({}, buttonProps)) })));
 };
 export default ButtonTools;

package/dist/components/button-tools/index.jsx

@@ -2,16 +2,28 @@
 import { Button, Popover } from "antd";
 const ButtonTools = (props) => {
     const { buttonProps, items, popoverProps } = props;
-    if (items.length === 0) {
-        return (<Popover trigger="hover" {...popoverProps}>
+    const content = (<div>
+      {items.map((item, i) => (<Button key={i} type="text" onClick={item.onClick}>
+          {item.label}
+        </Button>))}
+    </div>);
+    return (<Popover content={items.length > 0 ? content : null} trigger="click" placement="right" styles={{
+            body: {
+                maxWidth: "fit-content",
+            },
+        }} {...popoverProps}>
+      {/* <Popover
+          title={buttonProps?.name}
+          trigger={"hover"}
+          placement="right"
+          styles={{
+            body: {
+              minWidth: "max-content",
+            },
+          }}
+        > */}
         <Button {...buttonProps}/>
-      </Popover>);
-    }
-    return (<Popover content={<div>
-          <Button>Button 1</Button>
-          <Button>Button 2</Button>
-        </div>} trigger="click">
-      <Button {...buttonProps}/>
+      {/* </Popover> */}
     </Popover>);
 };
 export default ButtonTools;

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

@@ -1,25 +1,14 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button, ColorPicker, Flex, Form, Input, InputNumber, Divider, } from "antd";
+import { 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(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 flex-col mb-2", 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));
-                                                    } }) })] }), _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" }) })] }), fields.length > 1 && (_jsx(Flex, { gap: 2, className: "w-full", children: _jsx(Button
-                                        // type="dashed"
-                                        , { 
-                                            // type="dashed"
-                                            onClick: () => remove(fields.indexOf(field)), className: "w-full", children: "Remove" }) }))] }, field.key))), _jsx(Flex, { gap: 2, className: "w-full mt-2", children: _jsx(Button, { type: "primary", onClick: () => add({
-                                        label: "",
-                                        fontColor: "#000000",
-                                        x: 0,
-                                        y: 0,
-                                        fontSize: 12,
-                                        rotation: 0,
-                                    }), className: "w-full", children: "Add" }) })] })) }) }), _jsx("div", { className: "divider-dashed" })] }));
+    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", 0, "label"], className: "w-full", children: _jsx(Form.List, { name: "labels", children: (fields, { add, remove }) => (_jsx(_Fragment, { children: fields.map((field) => (_jsxs("div", { className: "w-full flex-col mb-2", 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));
+                                                } }) })] }), _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))) })) }) }), _jsx("div", { className: "divider-dashed" })] }));
 };
 export default SectionLabel;

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

@@ -1,11 +1,11 @@
 "use client";
-import { Button, ColorPicker, Flex, Form, Input, InputNumber, Divider, } from "antd";
+import { ColorPicker, Flex, Form, Input, InputNumber, Divider } from "antd";
 const SectionLabel = () => {
     return (<div className="py-2">
       <h1 className="heading-s">Section Labeling</h1>
       <Divider style={{ margin: 4 }}/>
 
-      <Form.Item label="Labels in table" name={"labels"} className="w-full">
+      <Form.Item label="Labels in table" name={["labels", 0, "label"]} className="w-full">
         <Form.List name="labels">
           {(fields, { add, remove }) => (<>
               {fields.map((field) => (<div key={field.key} className="w-full flex-col mb-2">
@@ -40,33 +40,43 @@ const SectionLabel = () => {
                       <ColorPicker allowClear format="hex" defaultFormat="hex"/>
                     </Form.Item>
                   </Flex>
-                  {fields.length > 1 && (<Flex gap={2} className="w-full">
-                      <Button 
-                // type="dashed"
-                onClick={() => remove(fields.indexOf(field))} className="w-full">
-                        Remove
-                      </Button>
-                    </Flex>)}
+                  {/* {fields.length > 1 && (
+                  <Flex gap={2} className="w-full">
+                    <Button
+                      // type="dashed"
+                      onClick={() => remove(fields.indexOf(field))}
+                      className="w-full"
+                    >
+                      Remove
+                    </Button>
+                  </Flex>
+                )} */}
                 </div>))}
-              <Flex gap={2} className="w-full mt-2">
-                {/* <Button
-              // type="dashed"
-              onClick={() => remove(fields.length - 1)}
-              className="w-full"
-            >
-              Remove
-            </Button> */}
-                <Button type="primary" onClick={() => add({
-                label: "",
-                fontColor: "#000000",
-                x: 0,
-                y: 0,
-                fontSize: 12,
-                rotation: 0,
-            })} className="w-full">
-                  Add
-                </Button>
-              </Flex>
+              {/* <Flex gap={2} className="w-full mt-2">
+              <Button
+                // type="dashed"
+                onClick={() => remove(fields.length - 1)}
+                className="w-full"
+              >
+                Remove
+              </Button>
+              <Button
+                type="primary"
+                onClick={() =>
+                  add({
+                    label: "",
+                    fontColor: "#000000",
+                    x: 0,
+                    y: 0,
+                    fontSize: 12,
+                    rotation: 0,
+                  })
+                }
+                className="w-full"
+              >
+                Add
+              </Button>
+            </Flex> */}
             </>)}
         </Form.List>
       </Form.Item>

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

@@ -46,26 +46,26 @@ const SectionShape = ({ allowChangeShape = true, }) => {
                             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) => {
+                        }) }) }) })), _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, name: "width", step: 1, 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: "Height", name: "height", className: "w-full", children: _jsx(InputNumber, { suffix: "px", parser: (value) => {
+                            } }) }), _jsx(Form.Item, { label: "Height", name: "height", className: "w-full", children: _jsx(InputNumber, { suffix: "px", controls: true, step: 1, name: "height", 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));
-                            } }) }), !(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) => {
+                            } }) }), !(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", name: "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));
-                            } }) }))] }), _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) => {
+                            } }) }))] }), _jsxs(Flex, { gap: 2, children: [_jsx(Form.Item, { label: "Position X", name: "x", className: "w-full", children: _jsx(InputNumber, { name: "x", step: 1 }) }), _jsx(Form.Item, { label: "Position Y", name: "y", className: "w-full", children: _jsx(InputNumber, { name: "y", step: 1 }) }), _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));
-                            } }) })] }), _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) => {
+                            } }) })] }), _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, {}) })] }), _jsx(Flex, { children: _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, "");

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

@@ -58,21 +58,21 @@ const SectionShape = ({ allowChangeShape = true, }) => {
         </Flex>)}
       <Flex gap={2} className="w-full">
         <Form.Item label="Width" name="width" className="w-full">
-          <InputNumber suffix="px" controls parser={(value) => {
+          <InputNumber suffix="px" controls name="width" step={1} 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>
         <Form.Item label="Height" name="height" className="w-full">
-          <InputNumber suffix="px" parser={(value) => {
+          <InputNumber suffix="px" controls step={1} name="height" 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>
         {!(shape === null || shape === void 0 ? void 0 : shape.includes("circle")) && (<Form.Item label="Radius" name="radius" className="w-full">
-            <InputNumber suffix="px" parser={(value) => {
+            <InputNumber suffix="px" name="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));
@@ -81,13 +81,13 @@ const SectionShape = ({ allowChangeShape = true, }) => {
       </Flex>
       <Flex gap={2}>
         <Form.Item label="Position X" name="x" className="w-full">
-          <InputNumber />
+          <InputNumber name="x" step={1}/>
         </Form.Item>
         <Form.Item label="Position Y" name="y" className="w-full">
-          <InputNumber />
+          <InputNumber name="y" step={1}/>
         </Form.Item>
         <Form.Item label="Rotation" name="rotation" className="w-full">
-          <InputNumber suffix="°" min={0} max={360} parser={(value) => {
+          <InputNumber suffix="°" min={0} step={1} max={360} name="rotation" parser={(value) => {
             if (!value)
                 return 0;
             const num = Number(value.replace(/\D/g, ""));
@@ -104,13 +104,13 @@ const SectionShape = ({ allowChangeShape = true, }) => {
         <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" name={"strokeWidth"} className="w-full">
+        <Form.Item label="Stroke Size" name={"strokeWidth"} className="w-full">
           <InputNumber />
         </Form.Item>
       </Flex>
       <Flex>
         <Form.Item label="opacity" name={"opacity"} className="w-full">
-          <InputNumber step={10} max={100} min={0} parser={(value) => {
+          <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, "");