seat-editor 3.6.6 → 3.6.8

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

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

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

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

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

@@ -7,6 +7,17 @@ import { Button } from "antd";
 import { useMemo, useState } from "react";
 export default function GraphView() {
     const [isConnecting, setIsConnecting] = useState(false);
+    const [actionPrivileged, setActionPrivileged] = useState({
+        select: true,
+        move: false,
+        switch: false,
+        drop: false,
+        rightClick: false,
+        double: false,
+        selection: false,
+        selectNode: false,
+        connectingNode: false,
+    });
     const [isSelectNode, setIsSelectNode] = useState(false);
     const [sections, setSections] = useState([
         {
@@ -20,7 +31,7 @@ export default function GraphView() {
             name: "Section 2",
             color: "#F6F6F6",
             items: [],
-        }
+        },
     ]);
     const [sectionActive, setSectionActive] = useState(null);
     const componentSection = useMemo(() => data === null || data === void 0 ? void 0 : data.map((data) => {
@@ -52,20 +63,97 @@ export default function GraphView() {
                     : [...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",
-                            },
-                        },
+    const priviledged = [
+        {
+            key: "select",
+            name: "Select",
+        },
+        {
+            key: "move",
+            name: "Move",
+        },
+        {
+            key: "switch",
+            name: "Switch",
+        },
+        {
+            key: "drop",
+            name: "Drop",
+        },
+        {
+            key: "rightClick",
+            name: "Right Click",
+        },
+        {
+            key: "double",
+            name: "Double Click",
+        },
+        {
+            key: "selection",
+            name: "Selection",
+        },
+        {
+            key: "dragTable",
+            name: "Drag Table",
+        },
+        {
+            key: "selectNode",
+            name: "Select Node",
+        },
+        {
+            key: "connectingNode",
+            name: "Connecting Node",
+        },
+    ];
+    const [dataDrag, setDataDrag] = useState(null);
+    console.log({ dataDrag });
+    const handleMouseMove = (e) => {
+        if (dataDrag) {
+            const table = document.getElementById("table");
+            table.style.position = "absolute";
+            table.style.opacity = "1";
+            table.style.top = `${e.clientY}px`;
+            table.style.left = `${e.clientX}px`;
+            table.style.height = "30px";
+            table.style.width = "200px";
+            table.style.backgroundColor = "red";
+            // add text
+            const text = document.createElement("div");
+            text.textContent = dataDrag.name;
+            text.style.position = "absolute";
+            text.style.top = "0";
+            text.style.left = "0";
+            text.style.color = "white";
+            text.style.fontSize = "12px";
+            text.style.fontWeight = "bold";
+            table.appendChild(text);
+        }
+    };
+    const handleMouseLeave = () => {
+        if (dataDrag) {
+            const table = document.getElementById("table");
+            table.style.opacity = "0";
+            table.children[0].remove();
+            setDataDrag(null);
+        }
+    };
+    return (_jsx("div", { className: "w-full h-screen flex relative", children: _jsxs("div", { className: "flex", children: [_jsx("div", { className: "absolute top-0 left-0 z-10 flex gap-2", children: priviledged.map((item) => (_jsx(Button, { type: actionPrivileged[item.key] ? "primary" : "default", htmlType: "button", onClick: () => {
+                            setActionPrivileged((prev) => (Object.assign(Object.assign({}, prev), { [item.key]: !prev[item.key] })));
+                        }, children: item.name }, item.key))) }), _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: 2,
+                            key: "section",
+                            value: 1,
                             properties: {
                                 fill: "#F6F6F6",
                             },
+                            element: {
+                                icon: undefined,
+                                props: {},
+                            },
                         },
-                    ] }), _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" }) }) })] }) }));
+                    ], onDragTable: (_, data) => setDataDrag(data), actionPrivileged: actionPrivileged }), _jsxs("div", { className: "w-1/5 p-4", onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, children: [_jsx("div", { id: "table" }), _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

@@ -6,6 +6,17 @@ import { Button } from "antd";
 import { useMemo, useState } from "react";
 export default function GraphView() {
     const [isConnecting, setIsConnecting] = useState(false);
+    const [actionPrivileged, setActionPrivileged] = useState({
+        select: true,
+        move: false,
+        switch: false,
+        drop: false,
+        rightClick: false,
+        double: false,
+        selection: false,
+        selectNode: false,
+        connectingNode: false,
+    });
     const [isSelectNode, setIsSelectNode] = useState(false);
     const [sections, setSections] = useState([
         {
@@ -19,7 +30,7 @@ export default function GraphView() {
             name: "Section 2",
             color: "#F6F6F6",
             items: [],
-        }
+        },
     ]);
     const [sectionActive, setSectionActive] = useState(null);
     const componentSection = useMemo(() => data === null || data === void 0 ? void 0 : data.map((data) => {
@@ -51,33 +62,108 @@ export default function GraphView() {
                     : [...section.items, data] });
         }));
     };
+    const priviledged = [
+        {
+            key: "select",
+            name: "Select",
+        },
+        {
+            key: "move",
+            name: "Move",
+        },
+        {
+            key: "switch",
+            name: "Switch",
+        },
+        {
+            key: "drop",
+            name: "Drop",
+        },
+        {
+            key: "rightClick",
+            name: "Right Click",
+        },
+        {
+            key: "double",
+            name: "Double Click",
+        },
+        {
+            key: "selection",
+            name: "Selection",
+        },
+        {
+            key: "dragTable",
+            name: "Drag Table",
+        },
+        {
+            key: "selectNode",
+            name: "Select Node",
+        },
+        {
+            key: "connectingNode",
+            name: "Connecting Node",
+        },
+    ];
+    const [dataDrag, setDataDrag] = useState(null);
+    console.log({ dataDrag });
+    const handleMouseMove = (e) => {
+        if (dataDrag) {
+            const table = document.getElementById("table");
+            table.style.position = "absolute";
+            table.style.opacity = "1";
+            table.style.top = `${e.clientY}px`;
+            table.style.left = `${e.clientX}px`;
+            table.style.height = "30px";
+            table.style.width = "200px";
+            table.style.backgroundColor = "red";
+            // add text
+            const text = document.createElement("div");
+            text.textContent = dataDrag.name;
+            text.style.position = "absolute";
+            text.style.top = "0";
+            text.style.left = "0";
+            text.style.color = "white";
+            text.style.fontSize = "12px";
+            text.style.fontWeight = "bold";
+            table.appendChild(text);
+        }
+    };
+    const handleMouseLeave = () => {
+        if (dataDrag) {
+            const table = document.getElementById("table");
+            table.style.opacity = "0";
+            table.children[0].remove();
+            setDataDrag(null);
+        }
+    };
     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>
+          {priviledged.map((item) => (<Button key={item.key} type={actionPrivileged[item.key] ? "primary" : "default"} htmlType="button" onClick={() => {
+                setActionPrivileged((prev) => (Object.assign(Object.assign({}, prev), { [item.key]: !prev[item.key] })));
+            }}>
+              {item.name}
+            </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",
-                },
-            },
+        <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: 2,
+                key: "section",
+                value: 1,
                 properties: {
                     fill: "#F6F6F6",
                 },
+                element: {
+                    icon: undefined,
+                    props: {},
+                },
             },
-        ]}/>
-        <div className="w-1/5 p-4">
+        ]} onDragTable={(_, data) => setDataDrag(data)} actionPrivileged={actionPrivileged}/>
+        <div className="w-1/5 p-4" onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave}>
+          <div id="table"/>
           <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)}>

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

@@ -99,7 +99,7 @@ export default function NewBoard() {
                         defaultSeatCountKey: "capacity", hiddenStatusKey: {
                             key: "status",
                             value: 0,
-                        }, priviewActive: [
+                        }, previewActive: [
                             {
                                 type: "default",
                                 label: "Customer View",

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

@@ -107,7 +107,7 @@ export default function NewBoard() {
     defaultSeatCountKey="capacity" hiddenStatusKey={{
             key: "status",
             value: 0,
-        }} priviewActive={[
+        }} previewActive={[
             {
                 type: "default",
                 label: "Customer View",

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-radio/index.d.ts

@@ -7,5 +7,5 @@ type ButtonRadioProps<T extends string> = {
     value?: T;
     onChange?: (value: T) => void;
 };
-declare const ButtonRadio: <T extends string>({ options, value, onChange, }: ButtonRadioProps<T>) => import("react").JSX.Element;
+declare const ButtonRadio: <T extends string>({ options, value, onChange, }: ButtonRadioProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default ButtonRadio;

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

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

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

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

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

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

package/dist/components/icons/camera.d.ts

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

package/dist/components/icons/circle.d.ts

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

package/dist/components/icons/square.d.ts

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

package/dist/components/icons/type-1.d.ts

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

package/dist/components/icons/type-2.d.ts

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

package/dist/components/icons/type-3.d.ts

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

package/dist/components/icons/type-4.d.ts

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

package/dist/components/icons/type-5.d.ts

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

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

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

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

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

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

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

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

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

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

@@ -1,5 +1,4 @@
 import { PropertiesProps, BaseElement, Label, Point } from "../../dto/table";
-import React from "react";
 export interface SelectionLines extends BaseElement {
     points?: Point[];
     id?: string | number;
@@ -10,7 +9,7 @@ interface LayersProps {
     activeTool?: string;
     selectionLines?: SelectionLines;
 }
-declare const Layers: ({ components, selectedComponent, activeTool, selectionLines, }: LayersProps) => React.JSX.Element;
+declare const Layers: ({ components, selectedComponent, activeTool, selectionLines, }: LayersProps) => import("react/jsx-runtime").JSX.Element;
 export declare const LabelItem: ({ id, width, height, labels, commonProps, rotation, }: {
     id: string | number;
     width: number;
@@ -18,5 +17,5 @@ export declare const LabelItem: ({ id, width, height, labels, commonProps, rotat
     labels: Label[];
     commonProps: any;
     rotation?: number;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default Layers;

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

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

package/dist/components/layer-v5/icons.d.ts

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

package/dist/components/layer-v5/icons.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const IconCross = () => (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M9.99935 2.20964C11.5404 2.20964 13.0468 2.66661 14.3282 3.52277C15.6095 4.37893 16.6082 5.59582 17.1979 7.01956C17.7876 8.4433 17.9419 10.0099 17.6413 11.5214C17.3407 13.0328 16.5986 14.4212 15.5089 15.5108C14.4192 16.6005 13.0309 17.3426 11.5194 17.6433C10.008 17.9439 8.44135 17.7896 7.01761 17.1999C5.59387 16.6101 4.37698 15.6115 3.52082 14.3301C2.66466 13.0488 2.20769 11.5423 2.20769 10.0013C2.20769 7.93482 3.02859 5.95298 4.48981 4.49176C5.95103 3.03054 7.93287 2.20964 9.99935 2.20964ZM9.99935 8.8763L7.79935 6.66797C7.64526 6.52506 7.44285 6.44565 7.23269 6.44565C7.02252 6.44565 6.82012 6.52506 6.66602 6.66797C6.52311 6.82206 6.4437 7.02447 6.4437 7.23464C6.4437 7.4448 6.52311 7.64721 6.66602 7.8013L8.89935 10.0013L6.66602 12.2013C6.52311 12.3554 6.4437 12.5578 6.4437 12.768C6.4437 12.9781 6.52311 13.1805 6.66602 13.3346C6.81863 13.4705 7.01585 13.5456 7.22019 13.5456C7.42453 13.5456 7.62174 13.4705 7.77435 13.3346L9.99935 11.1013L12.1994 13.3346C12.3534 13.4775 12.5559 13.557 12.766 13.557C12.9762 13.557 13.1786 13.4775 13.3327 13.3346C13.4686 13.182 13.5437 12.9848 13.5437 12.7805C13.5437 12.5761 13.4686 12.3789 13.3327 12.2263L11.0994 10.0013L13.3327 7.8013C13.4756 7.64721 13.555 7.4448 13.555 7.23464C13.555 7.02447 13.4756 6.82206 13.3327 6.66797C13.1801 6.53208 12.9829 6.45701 12.7785 6.45701C12.5742 6.45701 12.377 6.53208 12.2244 6.66797L9.99935 8.9013M9.99935 1.04297C8.22756 1.04297 6.49556 1.56837 5.02237 2.55272C3.54918 3.53707 2.40097 4.93618 1.72293 6.5731C1.0449 8.21002 0.867492 10.0112 1.21315 11.749C1.55881 13.4867 2.41201 15.083 3.66485 16.3358C4.9177 17.5886 6.51392 18.4418 8.25167 18.7875C9.98942 19.1332 11.7906 18.9558 13.4276 18.2777C15.0645 17.5997 16.4636 16.4515 17.4479 14.9783C18.4323 13.5051 18.9577 11.7731 18.9577 10.0013C18.9555 7.62608 18.011 5.34878 16.3314 3.66924C14.6519 1.98971 12.3746 1.04518 9.99935 1.04297Z", fill: "#D9214E" }) }));

package/dist/components/layer-v5/icons.jsx

@@ -0,0 +1,3 @@
+export const IconCross = () => (<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M9.99935 2.20964C11.5404 2.20964 13.0468 2.66661 14.3282 3.52277C15.6095 4.37893 16.6082 5.59582 17.1979 7.01956C17.7876 8.4433 17.9419 10.0099 17.6413 11.5214C17.3407 13.0328 16.5986 14.4212 15.5089 15.5108C14.4192 16.6005 13.0309 17.3426 11.5194 17.6433C10.008 17.9439 8.44135 17.7896 7.01761 17.1999C5.59387 16.6101 4.37698 15.6115 3.52082 14.3301C2.66466 13.0488 2.20769 11.5423 2.20769 10.0013C2.20769 7.93482 3.02859 5.95298 4.48981 4.49176C5.95103 3.03054 7.93287 2.20964 9.99935 2.20964ZM9.99935 8.8763L7.79935 6.66797C7.64526 6.52506 7.44285 6.44565 7.23269 6.44565C7.02252 6.44565 6.82012 6.52506 6.66602 6.66797C6.52311 6.82206 6.4437 7.02447 6.4437 7.23464C6.4437 7.4448 6.52311 7.64721 6.66602 7.8013L8.89935 10.0013L6.66602 12.2013C6.52311 12.3554 6.4437 12.5578 6.4437 12.768C6.4437 12.9781 6.52311 13.1805 6.66602 13.3346C6.81863 13.4705 7.01585 13.5456 7.22019 13.5456C7.42453 13.5456 7.62174 13.4705 7.77435 13.3346L9.99935 11.1013L12.1994 13.3346C12.3534 13.4775 12.5559 13.557 12.766 13.557C12.9762 13.557 13.1786 13.4775 13.3327 13.3346C13.4686 13.182 13.5437 12.9848 13.5437 12.7805C13.5437 12.5761 13.4686 12.3789 13.3327 12.2263L11.0994 10.0013L13.3327 7.8013C13.4756 7.64721 13.555 7.4448 13.555 7.23464C13.555 7.02447 13.4756 6.82206 13.3327 6.66797C13.1801 6.53208 12.9829 6.45701 12.7785 6.45701C12.5742 6.45701 12.377 6.53208 12.2244 6.66797L9.99935 8.9013M9.99935 1.04297C8.22756 1.04297 6.49556 1.56837 5.02237 2.55272C3.54918 3.53707 2.40097 4.93618 1.72293 6.5731C1.0449 8.21002 0.867492 10.0112 1.21315 11.749C1.55881 13.4867 2.41201 15.083 3.66485 16.3358C4.9177 17.5886 6.51392 18.4418 8.25167 18.7875C9.98942 19.1332 11.7906 18.9558 13.4276 18.2777C15.0645 17.5997 16.4636 16.4515 17.4479 14.9783C18.4323 13.5051 18.9577 11.7731 18.9577 10.0013C18.9555 7.62608 18.011 5.34878 16.3314 3.66924C14.6519 1.98971 12.3746 1.04518 9.99935 1.04297Z" fill="#D9214E"/>
+  </svg>);

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

@@ -1,6 +1,8 @@
 import { EventHandleType } from "../../dto/event-handler";
 import { PropertiesProps } from "../../dto/table";
 import { TableMatchEvent } from "../../features/view-only-3";
+import { SelectionLines } from "../layer-v3";
+import React from "react";
 interface LayersProps {
     components?: PropertiesProps[];
     selectedComponent?: PropertiesProps;
@@ -19,6 +21,7 @@ interface LayersProps {
         key: string;
         items: string[];
     }[];
+    selectionLines?: SelectionLines;
 }
-declare const Layers: ({ components, selectedTable, iconTags, eventMatchTable, onHighlightGroup, onForceRestoreGroup, selectedTableColor, privilegedTags, }: LayersProps) => import("react").JSX.Element;
+declare const Layers: ({ components, selectedTable, iconTags, eventMatchTable, onHighlightGroup, onForceRestoreGroup, selectedTableColor, selectionLines, }: LayersProps) => import("react/jsx-runtime").JSX.Element;
 export default Layers;