seat-editor 3.5.1 → 3.5.3

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

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

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

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

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-runtime").JSX.Element;
+}>): import("react").JSX.Element;

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

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

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

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

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

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

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

@@ -1,4 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const ChairIcon = () => {
-    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)" }) }) })] }));
+    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>);
 };

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

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

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

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

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

@@ -1,4 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const UserIcon = () => {
-    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" })] })] }));
+    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>);
 };

package/dist/app/page.d.ts

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

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

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

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

@@ -1,2 +1,2 @@
-declare const TableEditor: () => import("react/jsx-runtime").JSX.Element;
+declare const TableEditor: () => import("react").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-runtime").JSX.Element;
+declare const ButtonTools: (props: ButtonToolsProps) => import("react").JSX.Element;
 export default ButtonTools;

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

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

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

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

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-runtime").JSX.Element;
+declare const NumberIndicator: ({ name, defaultValue, onChange }: NumberIndicatorProps) => import("react").JSX.Element;
 export default NumberIndicator;

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

@@ -1,3 +1,4 @@
+import React from "react";
 type JoystickPosition = {
     x: number;
     y: number;
@@ -7,5 +8,5 @@ type JoystickProps = {
     onMove?: (pos: JoystickPosition) => void;
     onEnd?: () => void;
 };
-export declare const Joystick: ({ size, onMove, onEnd, }: JoystickProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Joystick: ({ size, onMove, onEnd, }: JoystickProps) => React.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-runtime").JSX.Element;
+declare const Layers: ({ shadowShape, components, onClick, selectedComponent, selectedTable, activeTool, onMouseDown, onMouseUp, onBlur, selectedTableColor, mode, style, onTouchEnd, onTouchMove, onTouchStart }: LayersProps) => import("react").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-runtime").JSX.Element;
+declare const Layers: ({ shadowShape, components, onClick, selectedComponent, selectedTable, activeTool, onMouseDown, onMouseUp, onBlur, selectedTableColor, mode, style, onTouchStart }: LayersProps) => import("react").JSX.Element;
 export default Layers;

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

@@ -9,5 +9,5 @@ interface LayersProps {
     activeTool?: string;
     selectionLines?: SelectionLines;
 }
-declare const Layers: ({ components, selectedComponent, activeTool, selectionLines, }: LayersProps) => import("react/jsx-runtime").JSX.Element;
+declare const Layers: ({ components, selectedComponent, activeTool, selectionLines, }: LayersProps) => import("react").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-runtime").JSX.Element;
+declare const Layers: ({ components, selectedTable, iconTags, eventMatchTable, onHighlightGroup, onForceRestoreGroup, selectedTableColor, privilegedTags, }: LayersProps) => import("react").JSX.Element;
 export default Layers;

package/dist/components/layer-v5/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-runtime").JSX.Element;
+declare const Layers: ({ components, selectedTable, iconTags, eventMatchTable, onHighlightGroup, onForceRestoreGroup, selectedTableColor, privilegedTags, }: LayersProps) => import("react").JSX.Element;
 export default Layers;

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

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

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

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

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

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

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

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

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

@@ -164,17 +164,17 @@ const boardSlice = createSlice({
             if (currentPointer < totalHistory) {
                 state.historyChanges = state.historyChanges.slice(0, currentPointer + 1);
             }
+            if (state.historyChanges.length > MAX_HISTORY_CHANGES) {
+                state.historyChanges.shift();
+            }
+            state.pointer += 1;
+            state.extraComponents = action.payload.filter((item) => item.shape) || [];
             state.historyChanges.push({
                 components: [...state.components],
                 extraComponents: [...state.extraComponents],
                 boundingBox: state.boundingBox,
                 backgroundColor: state.backgroundColor,
             });
-            if (state.historyChanges.length > MAX_HISTORY_CHANGES) {
-                state.historyChanges.shift();
-            }
-            state.pointer += 1;
-            state.extraComponents = action.payload.filter((item) => item.shape) || [];
         },
         setExtraComponent: (state, action) => {
             const currentPointer = state.pointer;

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

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

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

@@ -9,7 +9,7 @@ import ModalPreview from "../../components/modal-preview";
 import LayerView from "../view-only-3";
 import { isEqual, debounce } from "lodash";
 import { Command, ZoomIn, ZoomOut } from "lucide-react";
-import { Button, Flex, Radio, Tag } from "antd";
+import { Button, Flex, Radio, Slider, Tag, } from "antd";
 import { getAttributeElement, getAttributeElements } from "./resize-element";
 import { applyResizeToSvgElement, arrayToSvgPointsAttr, createTableGhost, getGlobalBBox, getRotation, getSvgElementSize, getTranslate, isClosingPolygon, normalizeAngle, pointsStringToArray, resizeBox, resizeSeatCircle, resizeSeatRectCircle, resizeSeatRectSquare, resizeSeatSide, resizeSeatSquare, stabilizeRotation, stabilizeTranslateOnRotate, updateManyComponents, updateSelectionBox, updateSelectionGuides, updateSingleComponent, } from "./utils";
 const toolElement = ["square", "circle", "table-seat-circle"];
@@ -35,7 +35,8 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
     const heightBoardRef = useRef(20000);
     const widthBoard = widthBoardRef.current;
     const heightBoard = heightBoardRef.current;
-    const [scale, setScale] = useState(1);
+    const [scale] = useState(1);
+    const [zoom, setZoom] = useState(1);
     const boardSizeRef = useRef({ width: 20000, height: 20000 });
     const boardSize = boardSizeRef.current;
     const minCoordsRef = useRef({ x: 0, y: 0 });
@@ -327,24 +328,47 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
         }
     };
     const handelZoomIn = () => {
-        var _a;
+        var _a, _b, _c, _d;
         if (activeTool !== "grab") {
             dispatch({
                 type: "tool/setActiveTool",
                 payload: "grab",
             });
         }
-        (_a = transformRef.current) === null || _a === void 0 ? void 0 : _a.zoomIn();
+        const step = 0.2;
+        const maxScale = 2;
+        const currentScale = (_a = transformRef.current) === null || _a === void 0 ? void 0 : _a.instance.transformState.scale;
+        const nextScale = Math.round(currentScale / step) * step + step;
+        const finalScale = Number(Math.min(nextScale, maxScale).toFixed(2));
+        setZoom(finalScale);
+        (_b = transformRef.current) === null || _b === void 0 ? void 0 : _b.setTransform((_c = transformRef.current) === null || _c === void 0 ? void 0 : _c.instance.transformState.positionX, (_d = transformRef.current) === null || _d === void 0 ? void 0 : _d.instance.transformState.positionY, finalScale);
     };
     const handleZoomOut = () => {
-        var _a;
+        var _a, _b, _c, _d;
+        if (activeTool !== "grab") {
+            dispatch({
+                type: "tool/setActiveTool",
+                payload: "grab",
+            });
+        }
+        const step = 0.2;
+        const currentScale = ((_a = transformRef.current) === null || _a === void 0 ? void 0 : _a.instance.transformState.scale) || 1;
+        const nextScale = Math.floor((currentScale - step) / step) * step;
+        const finalStep = Number(Math.max(nextScale, step).toFixed(2));
+        setZoom(finalStep);
+        (_b = transformRef.current) === null || _b === void 0 ? void 0 : _b.setTransform((_c = transformRef.current) === null || _c === void 0 ? void 0 : _c.instance.transformState.positionX, (_d = transformRef.current) === null || _d === void 0 ? void 0 : _d.instance.transformState.positionY, finalStep);
+    };
+    const handleChageZoom = (value) => {
+        var _a, _b, _c;
         if (activeTool !== "grab") {
             dispatch({
                 type: "tool/setActiveTool",
                 payload: "grab",
             });
         }
-        (_a = transformRef.current) === null || _a === void 0 ? void 0 : _a.zoomOut();
+        const scale = Number(value.toFixed(2));
+        setZoom(scale);
+        (_a = transformRef.current) === null || _a === void 0 ? void 0 : _a.setTransform((_b = transformRef.current) === null || _b === void 0 ? void 0 : _b.instance.transformState.positionX, (_c = transformRef.current) === null || _c === void 0 ? void 0 : _c.instance.transformState.positionY, scale);
     };
     const handleUnSelectComponent = () => {
         dispatch({ type: "panel/setSelectedComponent", payload: null });
@@ -1337,7 +1361,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
                     (_f = svg.querySelector("#polyline-helper")) === null || _f === void 0 ? void 0 : _f.setAttribute("opacity", "0");
                 }
                 else {
-                    console.log("gak closing");
+                    // console.log("gak closing");
                     setSelectedComponent(newPoints);
                     dispatch({
                         type: "panel/setSelectedComponent",
@@ -1751,7 +1775,10 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
             const polylineHelper = svg === null || svg === void 0 ? void 0 : svg.querySelector("#polyline-helper");
             // const startPoint =
             if (selectedComponent) {
-                const newPoints = [...selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.points, { x: pos.x, y: pos.y }];
+                const newPoints = [
+                    ...selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.points,
+                    { x: pos.x, y: pos.y },
+                ];
                 const points = newPoints.map((item) => `${item.x},${item.y}`).join(" ");
                 polylineHelper === null || polylineHelper === void 0 ? void 0 : polylineHelper.setAttribute("points", points);
             }
@@ -1851,14 +1878,15 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
         };
     }, []);
     const hasSelectionBox = !isEmpty(selectedLines);
-    // console.log({ selectedComponent, polygonElementRef, componentsState,selectedComponent})
     return (_jsxs(_Fragment, { children: [_jsxs(ModalPreview, { children: [_jsx(LayerView, { statusKey: "status", loadingRender: loadingRender, actionPrivileged: {
                             select: false,
                             move: false,
                             switch: false,
                             drop: false,
                             rightClick: false,
-                        }, defaultBoundingBox: boundingBox }), _jsx("div", { className: "flex gap-2 mt-2", children: _jsxs(Radio.Group, { value: isShowTagType, onChange: handleCheckPreview, children: [_jsx(Radio, { value: "default", children: "Event Layout" }), _jsx(Radio, { value: "type-1", children: "Layout View" }), _jsx(Radio, { value: "type-2", children: "Next 3 Reservation" })] }) })] }), _jsxs("div", { className: "relative w-full h-screen flex-1 overflow-hidden", ref: containerRef, children: [_jsx("div", { className: "absolute bottom-10 left-1/2 transform -translate-x-1/2 z-10", children: _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { icon: _jsx(ZoomIn, {}), onClick: handelZoomIn }), _jsx(Button, { icon: _jsx(ZoomOut, {}), onClick: handleZoomOut })] }) }), _jsxs("div", { className: "w-full bg-white absolute bottom-0 left-1/2 transform -translate-x-1/2 z-10 p-1 flex justify-start items-center gap-2 border-t border-gray-300", children: ["Select", " ", _jsx(Tag, { color: isShiftPressed ? "red" : "lime", children: footerInfoList[hasSelectionBox ? 1 : 0]["title"] }), " ", footerInfoList[hasSelectionBox ? 1 : 0]["desc"], hasSelectionBox && (_jsxs(_Fragment, { children: [_jsx(Tag, { color: "lime", children: _jsxs(Flex, { children: [_jsx(Command, { size: 16 }), "D"] }) }), "to deselect"] })), " ", "| Table Total ", _jsx(Tag, { color: "volcano", children: componentsState === null || componentsState === void 0 ? void 0 : componentsState.length })] }), _jsx(TransformWrapper, { ref: transformRef, 
+                        }, defaultBoundingBox: boundingBox }), _jsx("div", { className: "flex gap-2 mt-2", children: _jsxs(Radio.Group, { value: isShowTagType, onChange: handleCheckPreview, children: [_jsx(Radio, { value: "default", children: "Event Layout" }), _jsx(Radio, { value: "type-1", children: "Layout View" }), _jsx(Radio, { value: "type-2", children: "Next 3 Reservation" })] }) })] }), _jsxs("div", { className: "relative w-full h-screen flex-1 overflow-hidden mt-[78px]", ref: containerRef, children: [_jsx("div", { className: "absolute bottom-[118px] left-1/2 transform -translate-x-1/2 z-10", children: _jsxs("div", { className: "flex gap-2 w-[500px] justify-between", children: [_jsx(Button, { icon: _jsx(ZoomOut, {}), onClick: handleZoomOut }), _jsx(Slider, { value: zoom, min: 0.2, max: 2, step: 0.2, className: "w-full", tooltip: {
+                                        open: false,
+                                    }, onChange: handleChageZoom }), _jsx(Button, { icon: _jsx(ZoomIn, {}), onClick: handelZoomIn })] }) }), _jsxs("div", { className: "w-full bg-white absolute bottom-[78px] left-1/2 transform -translate-x-1/2 z-10 p-1 flex justify-start items-center gap-2 border-t border-gray-300", children: ["Select", " ", _jsx(Tag, { color: isShiftPressed ? "red" : "lime", children: footerInfoList[hasSelectionBox ? 1 : 0]["title"] }), " ", footerInfoList[hasSelectionBox ? 1 : 0]["desc"], hasSelectionBox && (_jsxs(_Fragment, { children: [_jsx(Tag, { color: "lime", children: _jsxs(Flex, { children: [_jsx(Command, { size: 16 }), "D"] }) }), "to deselect"] })), " ", "| Table Total ", _jsx(Tag, { color: "volcano", children: componentsState === null || componentsState === void 0 ? void 0 : componentsState.length })] }), _jsx(TransformWrapper, { ref: transformRef, 
                         // limitToBounds={true}
                         panning: {
                             disabled: [
@@ -1874,7 +1902,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
                         }, 
                         // centerZoomedOut={true}
                         // onTransformed={handleTransformed}
-                        minScale: 0.1, maxScale: 2, initialScale: scale, pinch: { step: 1 }, wheel: { disabled: true }, smooth: true, doubleClick: { step: 1, disabled: activeTool === "select" }, disablePadding: true, centerOnInit: true, children: _jsx(TransformComponent, { wrapperStyle: {
+                        minScale: 0.2, maxScale: 2, initialScale: scale, pinch: { step: 1 }, wheel: { disabled: true }, smooth: true, doubleClick: { step: 1, disabled: activeTool === "select" }, disablePadding: true, centerOnInit: true, children: _jsx(TransformComponent, { wrapperStyle: {
                                 width: "100%",
                                 height: "100%",
                             }, contentStyle: { width: boardSize.width, height: boardSize.height }, children: _jsxs("svg", { id: "workspace", ref: svgRef, width: boardSize.width, height: boardSize.height, viewBox: `${minCoords.x} ${minCoords.y} ${boardSize.width} ${boardSize.height}`, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "xMidYMid meet", style: {

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

@@ -8,7 +8,7 @@ import ModalPreview from "../../components/modal-preview";
 import LayerView from "../view-only-3";
 import { isEqual, debounce } from "lodash";
 import { Command, ZoomIn, ZoomOut } from "lucide-react";
-import { Button, Flex, Radio, Tag } from "antd";
+import { Button, Flex, Radio, Slider, Tag, } from "antd";
 import { getAttributeElement, getAttributeElements } from "./resize-element";
 import { applyResizeToSvgElement, arrayToSvgPointsAttr, createTableGhost, getGlobalBBox, getRotation, getSvgElementSize, getTranslate, isClosingPolygon, normalizeAngle, pointsStringToArray, resizeBox, resizeSeatCircle, resizeSeatRectCircle, resizeSeatRectSquare, resizeSeatSide, resizeSeatSquare, stabilizeRotation, stabilizeTranslateOnRotate, updateManyComponents, updateSelectionBox, updateSelectionGuides, updateSingleComponent, } from "./utils";
 const toolElement = ["square", "circle", "table-seat-circle"];
@@ -34,7 +34,8 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
     const heightBoardRef = useRef(20000);
     const widthBoard = widthBoardRef.current;
     const heightBoard = heightBoardRef.current;
-    const [scale, setScale] = useState(1);
+    const [scale] = useState(1);
+    const [zoom, setZoom] = useState(1);
     const boardSizeRef = useRef({ width: 20000, height: 20000 });
     const boardSize = boardSizeRef.current;
     const minCoordsRef = useRef({ x: 0, y: 0 });
@@ -326,24 +327,47 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
         }
     };
     const handelZoomIn = () => {
-        var _a;
+        var _a, _b, _c, _d;
         if (activeTool !== "grab") {
             dispatch({
                 type: "tool/setActiveTool",
                 payload: "grab",
             });
         }
-        (_a = transformRef.current) === null || _a === void 0 ? void 0 : _a.zoomIn();
+        const step = 0.2;
+        const maxScale = 2;
+        const currentScale = (_a = transformRef.current) === null || _a === void 0 ? void 0 : _a.instance.transformState.scale;
+        const nextScale = Math.round(currentScale / step) * step + step;
+        const finalScale = Number(Math.min(nextScale, maxScale).toFixed(2));
+        setZoom(finalScale);
+        (_b = transformRef.current) === null || _b === void 0 ? void 0 : _b.setTransform((_c = transformRef.current) === null || _c === void 0 ? void 0 : _c.instance.transformState.positionX, (_d = transformRef.current) === null || _d === void 0 ? void 0 : _d.instance.transformState.positionY, finalScale);
     };
     const handleZoomOut = () => {
-        var _a;
+        var _a, _b, _c, _d;
+        if (activeTool !== "grab") {
+            dispatch({
+                type: "tool/setActiveTool",
+                payload: "grab",
+            });
+        }
+        const step = 0.2;
+        const currentScale = ((_a = transformRef.current) === null || _a === void 0 ? void 0 : _a.instance.transformState.scale) || 1;
+        const nextScale = Math.floor((currentScale - step) / step) * step;
+        const finalStep = Number(Math.max(nextScale, step).toFixed(2));
+        setZoom(finalStep);
+        (_b = transformRef.current) === null || _b === void 0 ? void 0 : _b.setTransform((_c = transformRef.current) === null || _c === void 0 ? void 0 : _c.instance.transformState.positionX, (_d = transformRef.current) === null || _d === void 0 ? void 0 : _d.instance.transformState.positionY, finalStep);
+    };
+    const handleChageZoom = (value) => {
+        var _a, _b, _c;
         if (activeTool !== "grab") {
             dispatch({
                 type: "tool/setActiveTool",
                 payload: "grab",
             });
         }
-        (_a = transformRef.current) === null || _a === void 0 ? void 0 : _a.zoomOut();
+        const scale = Number(value.toFixed(2));
+        setZoom(scale);
+        (_a = transformRef.current) === null || _a === void 0 ? void 0 : _a.setTransform((_b = transformRef.current) === null || _b === void 0 ? void 0 : _b.instance.transformState.positionX, (_c = transformRef.current) === null || _c === void 0 ? void 0 : _c.instance.transformState.positionY, scale);
     };
     const handleUnSelectComponent = () => {
         dispatch({ type: "panel/setSelectedComponent", payload: null });
@@ -1336,7 +1360,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
                     (_f = svg.querySelector("#polyline-helper")) === null || _f === void 0 ? void 0 : _f.setAttribute("opacity", "0");
                 }
                 else {
-                    console.log("gak closing");
+                    // console.log("gak closing");
                     setSelectedComponent(newPoints);
                     dispatch({
                         type: "panel/setSelectedComponent",
@@ -1750,7 +1774,10 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
             const polylineHelper = svg === null || svg === void 0 ? void 0 : svg.querySelector("#polyline-helper");
             // const startPoint =
             if (selectedComponent) {
-                const newPoints = [...selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.points, { x: pos.x, y: pos.y }];
+                const newPoints = [
+                    ...selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.points,
+                    { x: pos.x, y: pos.y },
+                ];
                 const points = newPoints.map((item) => `${item.x},${item.y}`).join(" ");
                 polylineHelper === null || polylineHelper === void 0 ? void 0 : polylineHelper.setAttribute("points", points);
             }
@@ -1850,7 +1877,6 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
         };
     }, []);
     const hasSelectionBox = !isEmpty(selectedLines);
-    // console.log({ selectedComponent, polygonElementRef, componentsState,selectedComponent})
     return (<>
       <ModalPreview>
         <LayerView statusKey="status" loadingRender={loadingRender} actionPrivileged={{
@@ -1868,14 +1894,18 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
           </Radio.Group>
         </div>
       </ModalPreview>
-      <div className="relative w-full h-screen flex-1 overflow-hidden" ref={containerRef}>
-        <div className="absolute bottom-10 left-1/2 transform -translate-x-1/2 z-10">
-          <div className="flex gap-2">
-            <Button icon={<ZoomIn />} onClick={handelZoomIn}/>
+      <div className="relative w-full h-screen flex-1 overflow-hidden mt-[78px]" ref={containerRef}>
+        <div className="absolute bottom-[118px] left-1/2 transform -translate-x-1/2 z-10">
+          <div className="flex gap-2 w-[500px] justify-between">
             <Button icon={<ZoomOut />} onClick={handleZoomOut}/>
+
+            <Slider value={zoom} min={0.2} max={2} step={0.2} className="w-full" tooltip={{
+            open: false,
+        }} onChange={handleChageZoom}/>
+            <Button icon={<ZoomIn />} onClick={handelZoomIn}/>
           </div>
         </div>
-        <div className="w-full bg-white absolute bottom-0 left-1/2 transform -translate-x-1/2 z-10 p-1 flex justify-start items-center gap-2 border-t border-gray-300">
+        <div className="w-full bg-white absolute bottom-[78px] left-1/2 transform -translate-x-1/2 z-10 p-1 flex justify-start items-center gap-2 border-t border-gray-300">
           Select{" "}
           <Tag color={isShiftPressed ? "red" : "lime"}>
             {footerInfoList[hasSelectionBox ? 1 : 0]["title"]}
@@ -1907,7 +1937,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
         }} 
     // centerZoomedOut={true}
     // onTransformed={handleTransformed}
-    minScale={0.1} // sangat kecil = bisa zoom out jauh
+    minScale={0.2} // sangat kecil = bisa zoom out jauh
      maxScale={2} initialScale={scale} pinch={{ step: 1 }} wheel={{ disabled: true }} smooth={true} doubleClick={{ step: 1, disabled: activeTool === "select" }} disablePadding centerOnInit>
           {/* {scale !== 1 && ( */}
           {/* <div className="absolute bottom-[60px] left-1/2 transform -translate-x-1/2 z-10"> */}

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

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

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

@@ -47,5 +47,5 @@ export interface TableEditorProps<TMeta = undefined> {
     defaultSeatCountKey?: string;
     header?: React.ReactNode;
 }
-declare const TableEditor: <TMeta>(props: TableEditorProps<TMeta>) => import("react/jsx-runtime").JSX.Element;
+declare const TableEditor: <TMeta>(props: TableEditorProps<TMeta>) => React.JSX.Element;
 export default TableEditor;

package/dist/features/package/index.js

@@ -172,6 +172,6 @@ const TableEditor = (props) => {
                         switch: false,
                         drop: false,
                         rightClick: false,
-                    } }, `${viewOnly}`) })) : (_jsxs("div", { className: "w-full h-full flex relative", children: [loading && !isPreview && (_jsx("div", { className: "absolute z-10 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-opacity-50 bg-white w-full h-full flex items-center justify-center", children: (loadingRender === null || loadingRender === void 0 ? void 0 : loadingRender.element) || _jsx(Spin, {}) })), _jsx("div", { className: "absolute top-0 left-0 w-full bg-white pointer-events-none p-[20px] z-[51] border-b border-gray-200", children: props.header ? (props.header) : (_jsx("div", { className: "text-xl font-bold h-[38px] leading-[38px] flex ", children: "Navbar" })) }), _jsx(SideTool, { dragOnly: dragOnly, deleteAutorized: deleteAutorized }), _jsx(Board, { refs: refsBoard, loadingRender: props === null || props === void 0 ? void 0 : props.loadingRender, disabled: props === null || props === void 0 ? void 0 : props.disabledView }, `${viewOnly}`), _jsx(ControlPanels, { action: props.action, transform: (_a = refsBoard === null || refsBoard === void 0 ? void 0 : refsBoard.current) === null || _a === void 0 ? void 0 : _a.transformRef })] }, `${viewOnly}`)) }) }));
+                    } }, `${viewOnly}`) })) : (_jsxs("div", { className: "w-full h-full flex relative", children: [loading && !isPreview && (_jsx("div", { className: "absolute z-10 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-opacity-50 bg-white w-full h-full flex items-center justify-center", children: (loadingRender === null || loadingRender === void 0 ? void 0 : loadingRender.element) || _jsx(Spin, {}) })), _jsx("div", { className: "absolute top-0 left-0 w-full bg-white p-[20px] z-[51] border-b border-gray-200", children: props.header ? (props.header) : (_jsx("div", { className: "text-xl font-bold h-[38px] leading-[38px] flex ", children: "Navbar" })) }), _jsx(SideTool, { dragOnly: dragOnly, deleteAutorized: deleteAutorized }), _jsx(Board, { refs: refsBoard, loadingRender: props === null || props === void 0 ? void 0 : props.loadingRender, disabled: props === null || props === void 0 ? void 0 : props.disabledView }, `${viewOnly}`), _jsx(ControlPanels, { action: props.action, transform: (_a = refsBoard === null || refsBoard === void 0 ? void 0 : refsBoard.current) === null || _a === void 0 ? void 0 : _a.transformRef })] }, `${viewOnly}`)) }) }));
 };
 export default TableEditor;

package/dist/features/package/index.jsx

@@ -179,7 +179,7 @@ const TableEditor = (props) => {
             {loading && !isPreview && (<div className="absolute z-10 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-opacity-50 bg-white w-full h-full flex items-center justify-center">
                 {(loadingRender === null || loadingRender === void 0 ? void 0 : loadingRender.element) || <Spin />}
               </div>)}
-            <div className="absolute top-0 left-0 w-full bg-white pointer-events-none p-[20px] z-[51] border-b border-gray-200">
+            <div className="absolute top-0 left-0 w-full bg-white p-[20px] z-[51] border-b border-gray-200">
               {props.header ? (props.header) : (<div className="text-xl font-bold h-[38px] leading-[38px] flex ">
                   Navbar
                 </div>)}

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

@@ -9,6 +9,6 @@ interface FormPlaceholderContextType {
     setPlaceholderBulk: (bulk: Record<string, string>) => void;
     resetPlaceholders: () => void;
 }
-declare const ControlPanels: (props: ControlPanelsProps) => import("react/jsx-runtime").JSX.Element;
+declare const ControlPanels: (props: ControlPanelsProps) => import("react").JSX.Element;
 export default ControlPanels;
 export declare const useFormPlaceholder: () => FormPlaceholderContextType;

package/dist/features/panel/polygon.d.ts

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

package/dist/features/panel/select-tool.d.ts

@@ -1,6 +1,5 @@
-declare const SelectToolForm: ({ title, action, tranform }: {
-    title?: string;
+declare const SelectToolForm: ({ action, tranform }: {
     action: any;
     tranform: any;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default SelectToolForm;

package/dist/features/panel/select-tool.js

@@ -8,40 +8,9 @@ import UploadTool from "./upload-tool";
 import TextTool from "./text-tool";
 import SelectedGroup from "./selected-group";
 import PolygonTool from "./polygon";
-const SelectToolForm = ({ title = "Title", action, tranform }) => {
-    const components = useAppSelector((state) => state.board.components);
+const SelectToolForm = ({ action, tranform }) => {
     const selectedComponent = useAppSelector((state) => state.panel.selectedComponent);
-    const extraComponents = useAppSelector((state) => state.board.extraComponents);
     const selectedGroup = useAppSelector((state) => state.panel.selectedGroup);
-    // const SummaryComponents = () => {
-    //   const countByShape: Record<string, number> = components?.reduce(
-    //     (acc: any, item: any) => {
-    //       acc[item.shape] = (acc[item.shape] || 0) + 1;
-    //       return acc;
-    //     },
-    //     {}
-    //   );
-    //   const variableFormatToString = (variable: string) => {
-    //     return variable
-    //       .replace(/-/g, " ")
-    //       .replace(/\b\w/g, (char) => char.toUpperCase());
-    //   };
-    //   return (
-    //     <div className="flex flex-col">
-    //       <h1 className="heading-s">{title}</h1>
-    //       <div className="flex flex-col gap-2 mt-5">
-    //         {Object.entries(countByShape).map(([shape, count]) => (
-    //           <div key={shape}>
-    //             <span className="font-bold">
-    //               {variableFormatToString(shape)}:
-    //             </span>{" "}
-    //             {count}
-    //           </div>
-    //         ))}
-    //       </div>
-    //     </div>
-    //   );
-    // };
     const renderComponent = () => {
         switch (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) {
             case "square":

package/dist/features/panel/select-tool.jsx

@@ -7,40 +7,9 @@ import UploadTool from "./upload-tool";
 import TextTool from "./text-tool";
 import SelectedGroup from "./selected-group";
 import PolygonTool from "./polygon";
-const SelectToolForm = ({ title = "Title", action, tranform }) => {
-    const components = useAppSelector((state) => state.board.components);
+const SelectToolForm = ({ action, tranform }) => {
     const selectedComponent = useAppSelector((state) => state.panel.selectedComponent);
-    const extraComponents = useAppSelector((state) => state.board.extraComponents);
     const selectedGroup = useAppSelector((state) => state.panel.selectedGroup);
-    // const SummaryComponents = () => {
-    //   const countByShape: Record<string, number> = components?.reduce(
-    //     (acc: any, item: any) => {
-    //       acc[item.shape] = (acc[item.shape] || 0) + 1;
-    //       return acc;
-    //     },
-    //     {}
-    //   );
-    //   const variableFormatToString = (variable: string) => {
-    //     return variable
-    //       .replace(/-/g, " ")
-    //       .replace(/\b\w/g, (char) => char.toUpperCase());
-    //   };
-    //   return (
-    //     <div className="flex flex-col">
-    //       <h1 className="heading-s">{title}</h1>
-    //       <div className="flex flex-col gap-2 mt-5">
-    //         {Object.entries(countByShape).map(([shape, count]) => (
-    //           <div key={shape}>
-    //             <span className="font-bold">
-    //               {variableFormatToString(shape)}:
-    //             </span>{" "}
-    //             {count}
-    //           </div>
-    //         ))}
-    //       </div>
-    //     </div>
-    //   );
-    // };
     const renderComponent = () => {
         switch (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) {
             case "square":

package/dist/features/panel/selected-group.d.ts

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

package/dist/features/panel/selected-group.js

@@ -13,22 +13,27 @@ const SelectedGroup = () => {
     const selectedGroup = useAppSelector((state) => state.panel.selectedGroup);
     const allShapeSelected = selectedGroup.map((item) => item.shape);
     const hasExtraComponent = allShapeSelected.some((shape) => ["text", "background", "polygon"].includes(shape));
-    console.log({ hasExtraComponent });
-    const sameShape = [
-        "table-seat-circle",
-        "table-seat-rect-circle",
-        "table-seat-square",
-        "table-seat-square",
-        "table-seat-rect-square",
-        "table-seat-half-square",
-    ].includes(shape);
-    const shapeIncludeImage = ["background", "image-table", "polygon"].some((shape) => allShapeSelected.includes(shape));
+    const allExtraComponent = allShapeSelected.every((shape) => ["text", "background", "polygon"].includes(shape));
+    // const sameShape = [
+    //   "table-seat-circle",
+    //   "table-seat-rect-circle",
+    //   "table-seat-square",
+    //   "table-seat-square",
+    //   "table-seat-rect-square",
+    //   "table-seat-half-square",
+    // ].includes(shape);
+    // const shapeIncludeImage = ["background", "image-table", "polygon"].some(
+    //   (shape) => allShapeSelected.includes(shape)
+    // );
     const seatKey = useAppSelector((state) => state.panel.seatDefaultKey);
     const shapeAllIncludePolygon = allShapeSelected.includes("polygon");
     const optionsSelect = (_a = optionsShape === null || optionsShape === void 0 ? void 0 : optionsShape.slice(0, -1)) === null || _a === void 0 ? void 0 : _a.map((item) => {
         return Object.assign(Object.assign({}, item), { disabled: allShapeSelected.includes(item.value) });
     });
     const maxSeat = selectedGroup === null || selectedGroup === void 0 ? void 0 : selectedGroup.some((item) => (item === null || item === void 0 ? void 0 : item[seatKey]) > 4);
+    if (!allExtraComponent && hasExtraComponent) {
+        return (_jsx(_Fragment, { children: _jsx("div", { className: "py-2 flex flex-col justify-center items-center gap-2 h-[100dvh]", children: _jsx("h1", { className: "heading-s text-center text-gray", children: "These objects have not configure" }) }) }));
+    }
     return (_jsx(_Fragment, { children: _jsxs("div", { className: "py-2", children: [_jsx("h1", { className: "heading-s", children: " Group Selection" }), _jsxs("div", { className: "py-2", children: [!hasExtraComponent && (_jsx(Flex, { gap: 2, className: "w-full", children: _jsx(Form.Item, { label: "Name", name: "shape", className: "w-full", children: _jsx(Select, { className: "w-full", children: optionsSelect === null || optionsSelect === void 0 ? void 0 : optionsSelect.map((item) => {
                                         const disabled = item.value === "table-seat-rect-circle" && maxSeat;
                                         return (_jsx(Option, { value: item.value, disabled: disabled, children: item.value === "table-seat-rect-circle"
@@ -48,6 +53,6 @@ const SelectedGroup = () => {
                                             if (Number.isNaN(num))
                                                 return null;
                                             return Math.min(100, Math.max(0, num));
-                                        }, suffix: "%" }) })] }), _jsx(SectionLabel, {})] })] }) }));
+                                        }, suffix: "%" }) })] }), !allExtraComponent && _jsx(SectionLabel, {})] })] }) }));
 };
 export default SelectedGroup;

package/dist/features/panel/selected-group.jsx

@@ -12,40 +12,51 @@ const SelectedGroup = () => {
     const selectedGroup = useAppSelector((state) => state.panel.selectedGroup);
     const allShapeSelected = selectedGroup.map((item) => item.shape);
     const hasExtraComponent = allShapeSelected.some((shape) => ["text", "background", "polygon"].includes(shape));
-    console.log({ hasExtraComponent });
-    const sameShape = [
-        "table-seat-circle",
-        "table-seat-rect-circle",
-        "table-seat-square",
-        "table-seat-square",
-        "table-seat-rect-square",
-        "table-seat-half-square",
-    ].includes(shape);
-    const shapeIncludeImage = ["background", "image-table", "polygon"].some((shape) => allShapeSelected.includes(shape));
+    const allExtraComponent = allShapeSelected.every((shape) => ["text", "background", "polygon"].includes(shape));
+    // const sameShape = [
+    //   "table-seat-circle",
+    //   "table-seat-rect-circle",
+    //   "table-seat-square",
+    //   "table-seat-square",
+    //   "table-seat-rect-square",
+    //   "table-seat-half-square",
+    // ].includes(shape);
+    // const shapeIncludeImage = ["background", "image-table", "polygon"].some(
+    //   (shape) => allShapeSelected.includes(shape)
+    // );
     const seatKey = useAppSelector((state) => state.panel.seatDefaultKey);
     const shapeAllIncludePolygon = allShapeSelected.includes("polygon");
     const optionsSelect = (_a = optionsShape === null || optionsShape === void 0 ? void 0 : optionsShape.slice(0, -1)) === null || _a === void 0 ? void 0 : _a.map((item) => {
         return Object.assign(Object.assign({}, item), { disabled: allShapeSelected.includes(item.value) });
     });
     const maxSeat = selectedGroup === null || selectedGroup === void 0 ? void 0 : selectedGroup.some((item) => (item === null || item === void 0 ? void 0 : item[seatKey]) > 4);
+    if (!allExtraComponent && hasExtraComponent) {
+        return (<>
+        <div className="py-2 flex flex-col justify-center items-center gap-2 h-[100dvh]">
+          <h1 className="heading-s text-center text-gray">
+            These objects have not configure
+          </h1>
+        </div>
+      </>);
+    }
     return (<>
       <div className="py-2">
         <h1 className="heading-s"> Group Selection</h1>
         <div className="py-2">
           {!hasExtraComponent && (<Flex gap={2} className="w-full">
-            <Form.Item label="Name" name="shape" className="w-full">
-              <Select className="w-full">
-                {optionsSelect === null || optionsSelect === void 0 ? void 0 : optionsSelect.map((item) => {
+              <Form.Item label="Name" name="shape" className="w-full">
+                <Select className="w-full">
+                  {optionsSelect === null || optionsSelect === void 0 ? void 0 : optionsSelect.map((item) => {
                 const disabled = item.value === "table-seat-rect-circle" && maxSeat;
                 return (<Option key={item.value} value={item.value} disabled={disabled}>
-                      {item.value === "table-seat-rect-circle"
+                        {item.value === "table-seat-rect-circle"
                         ? `Type 5 (only for 4 ${seatKey})`
                         : item.label}
-                    </Option>);
+                      </Option>);
             })}
-              </Select>
-            </Form.Item>
-          </Flex>)} 
+                </Select>
+              </Form.Item>
+            </Flex>)}
           {/* <Flex gap={2} className="w-full">
           {["table-seat-circle", "table-seat-rect-circle"].includes(
             shape
@@ -59,52 +70,52 @@ const SelectedGroup = () => {
         </Flex> */}
           {/* {!sameShape && (
           <> */}
-              <Flex gap={2} className="w-full" vertical>
-                {!shapeAllIncludePolygon && (<>
-                    <Form.Item label="Width" name="width" className="w-full" layout="horizontal" labelCol={{ style: { width: 100, textAlign: "left" } }} wrapperCol={{ style: { flex: 1 } }}>
-                      <InputNumber suffix="px" name="width" placeholder={placeholders["width"]} style={{ width: "100%" }}/>
-                    </Form.Item>
-                    <Form.Item label="Height" name="height" className="w-full" layout="horizontal" labelCol={{ style: { width: 100, textAlign: "left" } }} wrapperCol={{ style: { flex: 1 } }}>
-                      <InputNumber suffix="px" name="height" placeholder={placeholders["height"]} style={{ width: "100%" }}/>
-                    </Form.Item>
-                  </>)}
-                {!(shape === null || shape === void 0 ? void 0 : shape.includes("circle")) && !shapeAllIncludePolygon && (<Form.Item label="Radius" name={"radius"} className="w-full" layout="horizontal" labelCol={{ style: { width: 100, textAlign: "left" } }} wrapperCol={{ style: { flex: 1 } }}>
-                    <InputNumber name={"radius"} suffix="px" style={{ width: "100%" }} placeholder={placeholders["radius"]} parser={(value) => {
+          <Flex gap={2} className="w-full" vertical>
+            {!shapeAllIncludePolygon && (<>
+                <Form.Item label="Width" name="width" className="w-full" layout="horizontal" labelCol={{ style: { width: 100, textAlign: "left" } }} wrapperCol={{ style: { flex: 1 } }}>
+                  <InputNumber suffix="px" name="width" placeholder={placeholders["width"]} style={{ width: "100%" }}/>
+                </Form.Item>
+                <Form.Item label="Height" name="height" className="w-full" layout="horizontal" labelCol={{ style: { width: 100, textAlign: "left" } }} wrapperCol={{ style: { flex: 1 } }}>
+                  <InputNumber suffix="px" name="height" placeholder={placeholders["height"]} style={{ width: "100%" }}/>
+                </Form.Item>
+              </>)}
+            {!(shape === null || shape === void 0 ? void 0 : shape.includes("circle")) && !shapeAllIncludePolygon && (<Form.Item label="Radius" name={"radius"} className="w-full" layout="horizontal" labelCol={{ style: { width: 100, textAlign: "left" } }} wrapperCol={{ style: { flex: 1 } }}>
+                <InputNumber name={"radius"} suffix="px" style={{ width: "100%" }} placeholder={placeholders["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));
             }}/>
-                  </Form.Item>)}
-              </Flex>
-              {!shapeAllIncludePolygon && (<>
-                  <Flex gap={2} vertical>
-                    <Form.Item label="Position X" name="x" className="w-full" layout="horizontal" labelCol={{ style: { width: 100, textAlign: "left" } }} wrapperCol={{ style: { flex: 1 } }}>
-                      <InputNumber placeholder={placeholders["x"]} style={{ width: "100%" }} suffix="px" name="x"/>
-                    </Form.Item>
-                    <Form.Item label="Position Y" name="y" className="w-full" layout="horizontal" labelCol={{ style: { width: 100, textAlign: "left" } }} wrapperCol={{ style: { flex: 1 } }}>
-                      <InputNumber suffix="px" name="y" placeholder={placeholders["y"]} style={{ width: "100%" }}/>
-                    </Form.Item>
-                    <Form.Item label="Rotation" name="rotation" className="w-full" layout="horizontal" labelCol={{ style: { width: 100, textAlign: "left" } }} wrapperCol={{ style: { flex: 1 } }}>
-                      <InputNumber name="rotation" suffix="°" max={360} min={0} style={{ width: "100%" }} placeholder={placeholders["rotation"]}/>
-                    </Form.Item>
-                  </Flex>
-                </>)}
-              <Flex gap={2}>
-                <Form.Item label="Fill" name={"fill"} getValueFromEvent={(color) => color.toHexString()} className="w-full ">
-                  <ColorPicker allowClear format="hex" defaultFormat="hex"/>
+              </Form.Item>)}
+          </Flex>
+          {!shapeAllIncludePolygon && (<>
+              <Flex gap={2} vertical>
+                <Form.Item label="Position X" name="x" className="w-full" layout="horizontal" labelCol={{ style: { width: 100, textAlign: "left" } }} wrapperCol={{ style: { flex: 1 } }}>
+                  <InputNumber placeholder={placeholders["x"]} style={{ width: "100%" }} suffix="px" name="x"/>
                 </Form.Item>
-                <Form.Item label="Stroke" name={"stroke"} getValueFromEvent={(color) => color.toHexString()} className="w-full ">
-                  <ColorPicker allowClear format="hex" defaultFormat="hex"/>
+                <Form.Item label="Position Y" name="y" className="w-full" layout="horizontal" labelCol={{ style: { width: 100, textAlign: "left" } }} wrapperCol={{ style: { flex: 1 } }}>
+                  <InputNumber suffix="px" name="y" placeholder={placeholders["y"]} style={{ width: "100%" }}/>
                 </Form.Item>
-              </Flex>
-              <Flex vertical>
-                <Form.Item label="Stroke Size" name={"strokeWidth"} className="w-full" layout="horizontal" labelCol={{ style: { width: 100, textAlign: "left" } }} wrapperCol={{ style: { flex: 1 } }}>
-                  <InputNumber name={"strokeWidth"} suffix="px" style={{ width: "100%" }} placeholder={placeholders["strokeWidth"]}/>
+                <Form.Item label="Rotation" name="rotation" className="w-full" layout="horizontal" labelCol={{ style: { width: 100, textAlign: "left" } }} wrapperCol={{ style: { flex: 1 } }}>
+                  <InputNumber name="rotation" suffix="°" max={360} min={0} style={{ width: "100%" }} placeholder={placeholders["rotation"]}/>
                 </Form.Item>
-                <Form.Item label="opacity" name={"opacity"} className="w-full" layout="horizontal" labelCol={{ style: { width: 100, textAlign: "left" } }} wrapperCol={{ style: { flex: 1 } }}>
-                  <InputNumber style={{ width: "100%" }} step={10} max={100} min={0} placeholder={placeholders["opacity"]} parser={(value) => {
+              </Flex>
+            </>)}
+          <Flex gap={2}>
+            <Form.Item label="Fill" name={"fill"} getValueFromEvent={(color) => color.toHexString()} className="w-full ">
+              <ColorPicker allowClear format="hex" defaultFormat="hex"/>
+            </Form.Item>
+            <Form.Item label="Stroke" name={"stroke"} getValueFromEvent={(color) => color.toHexString()} className="w-full ">
+              <ColorPicker allowClear format="hex" defaultFormat="hex"/>
+            </Form.Item>
+          </Flex>
+          <Flex vertical>
+            <Form.Item label="Stroke Size" name={"strokeWidth"} className="w-full" layout="horizontal" labelCol={{ style: { width: 100, textAlign: "left" } }} wrapperCol={{ style: { flex: 1 } }}>
+              <InputNumber name={"strokeWidth"} suffix="px" style={{ width: "100%" }} placeholder={placeholders["strokeWidth"]}/>
+            </Form.Item>
+            <Form.Item label="opacity" name={"opacity"} className="w-full" layout="horizontal" labelCol={{ style: { width: 100, textAlign: "left" } }} wrapperCol={{ style: { flex: 1 } }}>
+              <InputNumber style={{ width: "100%" }} step={10} max={100} min={0} placeholder={placeholders["opacity"]} parser={(value) => {
             if (value === undefined || value === null || value === "")
                 return null;
             const cleaned = value.replace(/[^0-9.]/g, "");
@@ -113,11 +124,11 @@ const SelectedGroup = () => {
                 return null;
             return Math.min(100, Math.max(0, num));
         }} suffix="%"/>
-                </Form.Item>
-              </Flex>
-              <SectionLabel />
-            {/* </>
-      )} */}
+            </Form.Item>
+          </Flex>
+          {!allExtraComponent && <SectionLabel />}
+          {/* </>
+        )} */}
         </div>
       </div>
     </>);

package/dist/features/panel/square-circle-tool.d.ts

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

package/dist/features/panel/table-seat-circle.d.ts

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

package/dist/features/panel/table-seat-square.d.ts

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

package/dist/features/panel/text-tool.d.ts

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

package/dist/features/panel/upload-tool.d.ts

@@ -6,5 +6,5 @@ interface UploadToolProps {
     defaultValue?: PropertiesProps;
     transform?: any;
 }
-declare const UploadTool: ({ name, type, action, defaultValue, transform, }: UploadToolProps) => import("react/jsx-runtime").JSX.Element;
+declare const UploadTool: ({ name, type, action, defaultValue, transform, }: UploadToolProps) => import("react").JSX.Element;
 export default UploadTool;

package/dist/features/side-tool/index.d.ts

@@ -4,5 +4,5 @@ declare const SideTool: ({ dragOnly, deleteAutorized, }: {
         component: boolean;
         extraComponent: boolean;
     };
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default SideTool;

package/dist/features/view-only/index.d.ts

@@ -15,5 +15,5 @@ export interface LayerViewProps {
     containerProps?: any;
     svgProps?: any;
 }
-declare const LayerView: (props: LayerViewProps) => import("react/jsx-runtime").JSX.Element;
+declare const LayerView: (props: LayerViewProps) => import("react").JSX.Element;
 export default LayerView;

package/dist/features/view-only-2/index.d.ts

@@ -91,5 +91,5 @@ export interface LayerViewProps<TMeta = undefined> {
         rightClick: boolean;
     };
 }
-declare const LayerView: <TMeta>(props: LayerViewProps<TMeta>) => import("react/jsx-runtime").JSX.Element;
+declare const LayerView: <TMeta>(props: LayerViewProps<TMeta>) => React.JSX.Element;
 export default LayerView;

package/dist/features/view-only-3/index.d.ts

@@ -93,5 +93,5 @@ export interface LayerViewProps<TMeta = undefined> {
         double?: boolean;
     };
 }
-declare const LayerView: <TMeta>(props: LayerViewProps<TMeta>) => import("react/jsx-runtime").JSX.Element;
+declare const LayerView: <TMeta>(props: LayerViewProps<TMeta>) => React.JSX.Element;
 export default LayerView;

package/dist/features/view-only-3/index.js

@@ -88,7 +88,7 @@ const LayerView = (props) => {
         // if(boundingBoxProps) {
         dispatch({
             type: "board/setBoundingBox",
-            payload: defaultBoundingBox,
+            payload: defaultBoundingBox || boundingBoxProps,
         });
         // }
         // if (loading) {

package/dist/features/view-only-3/index.jsx

@@ -87,7 +87,7 @@ const LayerView = (props) => {
         // if(boundingBoxProps) {
         dispatch({
             type: "board/setBoundingBox",
-            payload: defaultBoundingBox,
+            payload: defaultBoundingBox || boundingBoxProps,
         });
         // }
         // if (loading) {

package/dist/features/view-only-4/index.d.ts

@@ -95,5 +95,5 @@ export interface LayerViewProps<TMeta = undefined> {
     onEdgesChange?: (edges: EdgeType[], table: PropertiesProps[]) => void;
     keyNode: string;
 }
-declare const LayerView: <TMeta>(props: LayerViewProps<TMeta>) => import("react/jsx-runtime").JSX.Element;
+declare const LayerView: <TMeta>(props: LayerViewProps<TMeta>) => React.JSX.Element;
 export default LayerView;

package/dist/features/view-only-5/index.d.ts

@@ -98,5 +98,5 @@ export interface LayerViewProps<TMeta = undefined> {
     isSelectNode?: boolean;
     onMakeSelection?: (component: ComponentProps<TMeta>[]) => void;
 }
-declare const LayerView: <TMeta>(props: LayerViewProps<TMeta>) => import("react/jsx-runtime").JSX.Element;
+declare const LayerView: <TMeta>(props: LayerViewProps<TMeta>) => React.JSX.Element;
 export default LayerView;

package/dist/features/view-only-6/index.d.ts

@@ -95,5 +95,5 @@ export interface LayerViewProps<TMeta = undefined> {
     onEdgesChange?: (edges: EdgeType[], table: PropertiesProps[]) => void;
     keyNode: string;
 }
-declare const LayerView: <TMeta>(props: LayerViewProps<TMeta>) => import("react/jsx-runtime").JSX.Element;
+declare const LayerView: <TMeta>(props: LayerViewProps<TMeta>) => React.JSX.Element;
 export default LayerView;

package/dist/features/view-only-7/index.d.ts

@@ -95,5 +95,5 @@ export interface LayerViewProps<TMeta = undefined> {
     onEdgesChange?: (edges: EdgeType[], table: PropertiesProps[]) => void;
     keyNode: string;
 }
-declare const LayerView: <TMeta>(props: LayerViewProps<TMeta>) => import("react/jsx-runtime").JSX.Element;
+declare const LayerView: <TMeta>(props: LayerViewProps<TMeta>) => React.JSX.Element;
 export default LayerView;

package/dist/provider/redux-provider.d.ts

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

package/dist/provider/store-provider.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "seat-editor",
-  "version": "3.5.1",
+  "version": "3.5.3",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",