seat-editor 3.4.8 → 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/layout.d.ts

@@ -3,4 +3,4 @@ import "./globals.css";
 export declare const metadata: Metadata;
 export default function RootLayout({ children, }: Readonly<{
     children: React.ReactNode;
-}>): import("react").JSX.Element;
+}>): import("react/jsx-runtime").JSX.Element;

package/dist/app/new-board/page.d.ts

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

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/app/old-board/page.d.ts

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

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

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

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

@@ -1,12 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const ChairIcon = () => {
-    return (<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <g clip-path="url(#clip0_3019_14165)">
-        <path d="M15.9717 7.5339V4.70339C15.9717 3.07627 14.7076 2.5 13.5189 2.5H6.46226C5.27359 2.5 4.00943 3.07627 4.00943 4.70339V7.5339C3.14151 7.73729 2.5 8.4322 2.5 9.27966V13.822C2.5 15.161 3.5 15.6864 4.48113 15.7373V16.8898C4.48113 17.2288 4.78302 17.5 5.16038 17.5H5.85849C6.23585 17.5 6.53774 17.2288 6.53774 16.8898V15.7373H13.4623V16.8898C13.4623 17.2288 13.7642 17.5 14.1415 17.5H14.8396C15.217 17.5 15.5189 17.2288 15.5189 16.8898V15.7373C16.9717 15.6695 17.5 14.7203 17.5 13.822V9.26271C17.4623 8.4322 16.8208 7.72034 15.9717 7.5339ZM4.68868 4.70339C4.68868 3.31356 5.80189 3.09322 6.46226 3.09322H13.5189C14.1792 3.09322 15.2925 3.29661 15.2925 4.68644V7.4661C14.2736 7.55085 13.4623 8.31356 13.4623 9.26271V9.68644H6.51887V9.26271C6.51887 8.31356 5.70755 7.55085 4.68868 7.4661V4.70339ZM13.4434 10.2966V12.3983H6.51887V10.2966H13.4434ZM5.85849 16.8898H5.16038V15.7373H5.85849V16.8898ZM14.8208 16.8898H14.1226V15.7373H14.8208V16.8898ZM16.8208 13.822H16.8019C16.8019 14.4153 16.5566 15.1441 15.3302 15.1441H14.8208H14.1226H5.85849H5.16038H4.65094C3.99057 15.1441 3.17925 14.9237 3.17925 13.822V9.26271C3.17925 8.6017 3.78302 8.05932 4.51887 8.05932C5.25472 8.05932 5.85849 8.6017 5.85849 9.26271V12.7034C5.85849 12.8729 6.00943 13.0085 6.19811 13.0085H13.8019C13.9906 13.0085 14.1415 12.8729 14.1415 12.7034V9.26271C14.1415 8.6017 14.7453 8.05932 15.4811 8.05932C16.217 8.05932 16.8208 8.6017 16.8208 9.26271V13.822Z" fill="#347ADB" stroke="#347ADB" stroke-width="0.8"/>
-      </g>
-      <defs>
-        <clipPath id="clip0_3019_14165">
-          <rect width="16.6667" height="16.6667" fill="white" transform="translate(1.66675 1.6665)"/>
-        </clipPath>
-      </defs>
-    </svg>);
+    return (_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("g", { "clip-path": "url(#clip0_3019_14165)", children: _jsx("path", { d: "M15.9717 7.5339V4.70339C15.9717 3.07627 14.7076 2.5 13.5189 2.5H6.46226C5.27359 2.5 4.00943 3.07627 4.00943 4.70339V7.5339C3.14151 7.73729 2.5 8.4322 2.5 9.27966V13.822C2.5 15.161 3.5 15.6864 4.48113 15.7373V16.8898C4.48113 17.2288 4.78302 17.5 5.16038 17.5H5.85849C6.23585 17.5 6.53774 17.2288 6.53774 16.8898V15.7373H13.4623V16.8898C13.4623 17.2288 13.7642 17.5 14.1415 17.5H14.8396C15.217 17.5 15.5189 17.2288 15.5189 16.8898V15.7373C16.9717 15.6695 17.5 14.7203 17.5 13.822V9.26271C17.4623 8.4322 16.8208 7.72034 15.9717 7.5339ZM4.68868 4.70339C4.68868 3.31356 5.80189 3.09322 6.46226 3.09322H13.5189C14.1792 3.09322 15.2925 3.29661 15.2925 4.68644V7.4661C14.2736 7.55085 13.4623 8.31356 13.4623 9.26271V9.68644H6.51887V9.26271C6.51887 8.31356 5.70755 7.55085 4.68868 7.4661V4.70339ZM13.4434 10.2966V12.3983H6.51887V10.2966H13.4434ZM5.85849 16.8898H5.16038V15.7373H5.85849V16.8898ZM14.8208 16.8898H14.1226V15.7373H14.8208V16.8898ZM16.8208 13.822H16.8019C16.8019 14.4153 16.5566 15.1441 15.3302 15.1441H14.8208H14.1226H5.85849H5.16038H4.65094C3.99057 15.1441 3.17925 14.9237 3.17925 13.822V9.26271C3.17925 8.6017 3.78302 8.05932 4.51887 8.05932C5.25472 8.05932 5.85849 8.6017 5.85849 9.26271V12.7034C5.85849 12.8729 6.00943 13.0085 6.19811 13.0085H13.8019C13.9906 13.0085 14.1415 12.8729 14.1415 12.7034V9.26271C14.1415 8.6017 14.7453 8.05932 15.4811 8.05932C16.217 8.05932 16.8208 8.6017 16.8208 9.26271V13.822Z", fill: "#347ADB", stroke: "#347ADB", "stroke-width": "0.8" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_3019_14165", children: _jsx("rect", { width: "16.6667", height: "16.6667", fill: "white", transform: "translate(1.66675 1.6665)" }) }) })] }));
 };

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/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/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.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,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;