seat-editor 3.3.46 → 3.4.0

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

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

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

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

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

@@ -67,6 +67,8 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
     //polygon
     const polygonElementRef = useRef([]);
     const isOnMakePolygonRef = useRef(false);
+    //boundingbox
+    const isInialBoundingBox = useRef(false);
     const { components: componentsProps, extraComponents: extraComponentsProps, boundingBox, flagChange, updateBy, isShowTagType, } = useAppSelector((state) => state.board);
     const { selectionLines } = useAppSelector((state) => state.panel);
     const [selectedLines, setSelectedLines] = useState(null);
@@ -338,6 +340,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
         const isInitialCreateElemente = toolElement.includes(activeTool) && !isCreateElementRef.current;
         const isInitialCreateBoundingBox = activeTool === "bounding-box";
         const isInitialCreateText = activeTool === "text" && !isCreateElementRef.current;
+        console.log({ isInitialCreateText, }, isCreateElementRef.current);
         if (isInitialCreateElemente) {
             const tables = createTableGhost({
                 x,
@@ -429,6 +432,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
             hadSelectionRef.current = true;
         }
         if (downOutSelectionBox) {
+            console.log("downOutSelectionBox");
             hadSelectionRef.current = false;
             onMoveSelectionBoxRef.current = false;
             handleUnSelectComponent();
@@ -1352,11 +1356,14 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
             if (isInitialCreateBoundingBox) {
                 const ghost = svg.querySelector("#ghost-element-create");
                 const getBBox = getGlobalBBox(svg, ghost);
-                dispatch({
-                    type: "board/setBoundingBox",
-                    payload: Object.assign(Object.assign({}, getBBox), { id: `${Date.now()}`, shape: "bounding-box", fill: "transparent" }),
-                });
+                if (getBBox.width > 90 || getBBox.height > 90) {
+                    dispatch({
+                        type: "board/setBoundingBox",
+                        payload: Object.assign(Object.assign({}, getBBox), { id: `${Date.now()}`, shape: "bounding-box", fill: "transparent" }),
+                    });
+                }
                 (_m = (_l = svgRef.current) === null || _l === void 0 ? void 0 : _l.querySelectorAll("#ghost-element-create")) === null || _m === void 0 ? void 0 : _m.forEach((el) => el.remove());
+                isCreateElementRef.current = false;
             }
             if (isInitialCreateText) {
                 const ghost = svg.querySelector("#ghost-element-create");
@@ -1553,7 +1560,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
                             switch: false,
                             drop: false,
                             rightClick: false,
-                        } }), _jsx("div", { className: "flex gap-2 mt-2", children: _jsxs(Radio.Group, { value: isShowTagType, onChange: handleCheckPreview, children: [_jsx(Radio, { value: "default", children: "Default" }), _jsx(Radio, { value: "type-1", children: "Type 1" }), _jsx(Radio, { value: "type-2", children: "Type 2" })] }) })] }), _jsxs("div", { className: "relative w-full h-screen flex-1 overflow-hidden", ref: containerRef, children: [_jsx("div", { className: "absolute bottom-5 left-1/2 transform -translate-x-1/2 z-10", children: _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { icon: _jsx(ZoomIn, {}), onClick: handelZoomIn }), _jsx(Button, { icon: _jsx(ZoomOut, {}), onClick: handleZoomOut })] }) }), _jsx(TransformWrapper, { ref: transformRef, 
+                        }, defaultBoundingBox: boundingBox }), _jsx("div", { className: "flex gap-2 mt-2", children: _jsxs(Radio.Group, { value: isShowTagType, onChange: handleCheckPreview, children: [_jsx(Radio, { value: "default", children: "Default" }), _jsx(Radio, { value: "type-1", children: "Type 1" }), _jsx(Radio, { value: "type-2", children: "Type 2" })] }) })] }), _jsxs("div", { className: "relative w-full h-screen flex-1 overflow-hidden", ref: containerRef, children: [_jsx("div", { className: "absolute bottom-5 left-1/2 transform -translate-x-1/2 z-10", children: _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { icon: _jsx(ZoomIn, {}), onClick: handelZoomIn }), _jsx(Button, { icon: _jsx(ZoomOut, {}), onClick: handleZoomOut })] }) }), _jsx(TransformWrapper, { ref: transformRef, 
                         // limitToBounds={true}
                         panning: {
                             disabled: [

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

@@ -66,6 +66,8 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
     //polygon
     const polygonElementRef = useRef([]);
     const isOnMakePolygonRef = useRef(false);
+    //boundingbox
+    const isInialBoundingBox = useRef(false);
     const { components: componentsProps, extraComponents: extraComponentsProps, boundingBox, flagChange, updateBy, isShowTagType, } = useAppSelector((state) => state.board);
     const { selectionLines } = useAppSelector((state) => state.panel);
     const [selectedLines, setSelectedLines] = useState(null);
@@ -337,6 +339,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
         const isInitialCreateElemente = toolElement.includes(activeTool) && !isCreateElementRef.current;
         const isInitialCreateBoundingBox = activeTool === "bounding-box";
         const isInitialCreateText = activeTool === "text" && !isCreateElementRef.current;
+        console.log({ isInitialCreateText, }, isCreateElementRef.current);
         if (isInitialCreateElemente) {
             const tables = createTableGhost({
                 x,
@@ -428,6 +431,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
             hadSelectionRef.current = true;
         }
         if (downOutSelectionBox) {
+            console.log("downOutSelectionBox");
             hadSelectionRef.current = false;
             onMoveSelectionBoxRef.current = false;
             handleUnSelectComponent();
@@ -1351,11 +1355,14 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
             if (isInitialCreateBoundingBox) {
                 const ghost = svg.querySelector("#ghost-element-create");
                 const getBBox = getGlobalBBox(svg, ghost);
-                dispatch({
-                    type: "board/setBoundingBox",
-                    payload: Object.assign(Object.assign({}, getBBox), { id: `${Date.now()}`, shape: "bounding-box", fill: "transparent" }),
-                });
+                if (getBBox.width > 90 || getBBox.height > 90) {
+                    dispatch({
+                        type: "board/setBoundingBox",
+                        payload: Object.assign(Object.assign({}, getBBox), { id: `${Date.now()}`, shape: "bounding-box", fill: "transparent" }),
+                    });
+                }
                 (_m = (_l = svgRef.current) === null || _l === void 0 ? void 0 : _l.querySelectorAll("#ghost-element-create")) === null || _m === void 0 ? void 0 : _m.forEach((el) => el.remove());
+                isCreateElementRef.current = false;
             }
             if (isInitialCreateText) {
                 const ghost = svg.querySelector("#ghost-element-create");
@@ -1554,7 +1561,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
             switch: false,
             drop: false,
             rightClick: false,
-        }}/>
+        }} defaultBoundingBox={boundingBox}/>
         <div className="flex gap-2 mt-2">
           <Radio.Group value={isShowTagType} onChange={handleCheckPreview}>
             <Radio value="default">Default</Radio>

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

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

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

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

package/dist/features/package/index.js

@@ -5,7 +5,7 @@ import Board from "../board-v3";
 import SideTool from "../side-tool";
 import ControlPanels from "../panel";
 import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
-import { isEqual } from "lodash";
+import { isEqual, omit } from "lodash";
 import LayerView from "../view-only-3";
 import { Spin } from "antd";
 const TableEditor = (props) => {
@@ -48,7 +48,7 @@ const TableEditor = (props) => {
                 if (!findComponent)
                     return undefined;
                 if (findComponent) {
-                    return Object.assign(Object.assign({}, item), { [mappingKey]: Object.assign({}, findComponent) });
+                    return Object.assign(Object.assign({}, item), { [mappingKey]: Object.assign({}, omit(findComponent, `${props === null || props === void 0 ? void 0 : props.defaultSeatCountKey}`)) });
                 }
             }
             else {
@@ -83,10 +83,13 @@ const TableEditor = (props) => {
     const convertComponentProps = () => {
         let mappingData = componentProps === null || componentProps === void 0 ? void 0 : componentProps.map((item) => {
             if (item && mappingKey && (item === null || item === void 0 ? void 0 : item[mappingKey])) {
-                return Object.assign({}, (typeof (item === null || item === void 0 ? void 0 : item[mappingKey]) === "object" &&
-                    (item === null || item === void 0 ? void 0 : item[mappingKey]) !== null
+                const data = typeof (item === null || item === void 0 ? void 0 : item[mappingKey]) === "object" && (item === null || item === void 0 ? void 0 : item[mappingKey]) !== null
                     ? item === null || item === void 0 ? void 0 : item[mappingKey]
-                    : {}));
+                    : {};
+                if (props === null || props === void 0 ? void 0 : props.defaultSeatCountKey) {
+                    return Object.assign(Object.assign({}, data), { [props === null || props === void 0 ? void 0 : props.defaultSeatCountKey]: item === null || item === void 0 ? void 0 : item[props === null || props === void 0 ? void 0 : props.defaultSeatCountKey] });
+                }
+                return Object.assign({}, data);
             }
             return item;
         });
@@ -99,15 +102,7 @@ const TableEditor = (props) => {
         const initialComponent = !isEqual(components, convertComponentProps()) && componentProps;
         const initialExtraComponent = !isEqual(extraComponents, extraComponentProps) && extraComponentProps;
         if (initialComponent || initialExtraComponent) {
-            let mappingData = componentProps === null || componentProps === void 0 ? void 0 : componentProps.map((item) => {
-                if (item && mappingKey && (item === null || item === void 0 ? void 0 : item[props.mappingKey])) {
-                    return Object.assign({}, (typeof item[props.mappingKey] === "object" &&
-                        item[props.mappingKey] !== null
-                        ? item[props.mappingKey]
-                        : {}));
-                }
-                return item;
-            });
+            let mappingData = convertComponentProps();
             if (mappingKey) {
                 setInitialValue(componentProps);
             }
@@ -151,9 +146,11 @@ const TableEditor = (props) => {
         //     },
         //   })
         // }
-        setTimeout(() => {
-            dispatch({ type: "panel/setLoading", payload: false });
-        }, 1000);
+        if (loading) {
+            setTimeout(() => {
+                dispatch({ type: "panel/setLoading", payload: false });
+            }, 1000);
+        }
     }, [
         componentProps,
         extraComponentProps,
@@ -161,6 +158,14 @@ const TableEditor = (props) => {
         props === null || props === void 0 ? void 0 : props.defaultBoundingBox,
         loadingRender === null || loadingRender === void 0 ? void 0 : loadingRender.state,
     ]);
+    useEffect(() => {
+        if (props === null || props === void 0 ? void 0 : props.defaultSeatCountKey) {
+            dispatch({
+                type: "panel/setSeatDefaultKey",
+                payload: props === null || props === void 0 ? void 0 : props.defaultSeatCountKey,
+            });
+        }
+    }, [props === null || props === void 0 ? void 0 : props.defaultSeatCountKey, initialValue]);
     return (_jsx(_Fragment, { children: _jsx("div", { className: "w-full h-screen flex relative", children: viewOnly ? (_jsx("div", { className: "w-full h-full flex relative", children: _jsx(LayerView, { statusKey: "status", loadingRender: props === null || props === void 0 ? void 0 : props.loadingRender, actionPrivileged: {
                         select: false,
                         move: false,

package/dist/features/package/index.jsx

@@ -4,7 +4,7 @@ import Board from "../board-v3";
 import SideTool from "../side-tool";
 import ControlPanels from "../panel";
 import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
-import { isEqual } from "lodash";
+import { isEqual, omit } from "lodash";
 import LayerView from "../view-only-3";
 import { Spin } from "antd";
 const TableEditor = (props) => {
@@ -47,7 +47,7 @@ const TableEditor = (props) => {
                 if (!findComponent)
                     return undefined;
                 if (findComponent) {
-                    return Object.assign(Object.assign({}, item), { [mappingKey]: Object.assign({}, findComponent) });
+                    return Object.assign(Object.assign({}, item), { [mappingKey]: Object.assign({}, omit(findComponent, `${props === null || props === void 0 ? void 0 : props.defaultSeatCountKey}`)) });
                 }
             }
             else {
@@ -82,10 +82,13 @@ const TableEditor = (props) => {
     const convertComponentProps = () => {
         let mappingData = componentProps === null || componentProps === void 0 ? void 0 : componentProps.map((item) => {
             if (item && mappingKey && (item === null || item === void 0 ? void 0 : item[mappingKey])) {
-                return Object.assign({}, (typeof (item === null || item === void 0 ? void 0 : item[mappingKey]) === "object" &&
-                    (item === null || item === void 0 ? void 0 : item[mappingKey]) !== null
+                const data = typeof (item === null || item === void 0 ? void 0 : item[mappingKey]) === "object" && (item === null || item === void 0 ? void 0 : item[mappingKey]) !== null
                     ? item === null || item === void 0 ? void 0 : item[mappingKey]
-                    : {}));
+                    : {};
+                if (props === null || props === void 0 ? void 0 : props.defaultSeatCountKey) {
+                    return Object.assign(Object.assign({}, data), { [props === null || props === void 0 ? void 0 : props.defaultSeatCountKey]: item === null || item === void 0 ? void 0 : item[props === null || props === void 0 ? void 0 : props.defaultSeatCountKey] });
+                }
+                return Object.assign({}, data);
             }
             return item;
         });
@@ -98,15 +101,7 @@ const TableEditor = (props) => {
         const initialComponent = !isEqual(components, convertComponentProps()) && componentProps;
         const initialExtraComponent = !isEqual(extraComponents, extraComponentProps) && extraComponentProps;
         if (initialComponent || initialExtraComponent) {
-            let mappingData = componentProps === null || componentProps === void 0 ? void 0 : componentProps.map((item) => {
-                if (item && mappingKey && (item === null || item === void 0 ? void 0 : item[props.mappingKey])) {
-                    return Object.assign({}, (typeof item[props.mappingKey] === "object" &&
-                        item[props.mappingKey] !== null
-                        ? item[props.mappingKey]
-                        : {}));
-                }
-                return item;
-            });
+            let mappingData = convertComponentProps();
             if (mappingKey) {
                 setInitialValue(componentProps);
             }
@@ -150,9 +145,11 @@ const TableEditor = (props) => {
         //     },
         //   })
         // }
-        setTimeout(() => {
-            dispatch({ type: "panel/setLoading", payload: false });
-        }, 1000);
+        if (loading) {
+            setTimeout(() => {
+                dispatch({ type: "panel/setLoading", payload: false });
+            }, 1000);
+        }
     }, [
         componentProps,
         extraComponentProps,
@@ -160,6 +157,14 @@ const TableEditor = (props) => {
         props === null || props === void 0 ? void 0 : props.defaultBoundingBox,
         loadingRender === null || loadingRender === void 0 ? void 0 : loadingRender.state,
     ]);
+    useEffect(() => {
+        if (props === null || props === void 0 ? void 0 : props.defaultSeatCountKey) {
+            dispatch({
+                type: "panel/setSeatDefaultKey",
+                payload: props === null || props === void 0 ? void 0 : props.defaultSeatCountKey,
+            });
+        }
+    }, [props === null || props === void 0 ? void 0 : props.defaultSeatCountKey, initialValue]);
     return (<>
       <div className="w-full h-screen flex relative">
         {viewOnly ? (<div className="w-full h-full flex relative">

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

@@ -2,5 +2,5 @@ interface ControlPanelsProps {
     action?: (file: File) => Promise<string>;
     transform?: any;
 }
-declare const ControlPanels: (props: ControlPanelsProps) => import("react").JSX.Element;
+declare const ControlPanels: (props: ControlPanelsProps) => import("react/jsx-runtime").JSX.Element;
 export default ControlPanels;

package/dist/features/panel/index.js

@@ -31,6 +31,7 @@ const ControlPanels = (props) => {
     const theme = useAppSelector((state) => state.theme);
     const tool = useAppSelector((state) => state.tool);
     const selectedComponent = useAppSelector((state) => state.panel.selectedComponent);
+    const seatKey = useAppSelector((state) => state.panel.seatDefaultKey);
     const selectedGroup = useAppSelector((state) => state.panel.selectedGroup);
     const components = useAppSelector((state) => state.board.components);
     const extraComponents = useAppSelector((state) => state.board.extraComponents);
@@ -44,6 +45,7 @@ const ControlPanels = (props) => {
     let values = Form.useWatch([], form);
     useEffect(() => {
         if (selectedComponent) {
+            form.resetFields();
             const isDifferentId = (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) !== (values === null || values === void 0 ? void 0 : values.id) || !(values === null || values === void 0 ? void 0 : values.id);
             const isSameIdAndSameDimensions = (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) === (values === null || values === void 0 ? void 0 : values.id) &&
                 (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.height) === (values === null || values === void 0 ? void 0 : values.height) &&
@@ -53,9 +55,10 @@ const ControlPanels = (props) => {
             if (show && (isDifferentId || isSameIdAndSameDimensions)) {
                 setOpen(true);
             }
-            form.setFieldsValue(selectedComponent);
+            form.setFieldsValue(Object.assign(Object.assign({}, selectedComponent), { opacity: (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.opacity) * 100, openSpace: (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.openSpace) * 100 }));
         }
         else if (selectedGroup) {
+            form.resetFields();
             if (show)
                 setOpen(true);
             if (!show)
@@ -67,6 +70,11 @@ const ControlPanels = (props) => {
                 return arr.every((item) => item[key] === firstValue);
             }
             function getValueIfSame(arr, key) {
+                if (key === "opacity") {
+                    return isSameAllByKey(arr, key)
+                        ? Number(arr[0][key]) * 100
+                        : undefined;
+                }
                 return isSameAllByKey(arr, key) ? arr[0][key] : undefined;
             }
             form.setFieldsValue({
@@ -92,13 +100,17 @@ const ControlPanels = (props) => {
         if (tool.active === "background" || tool.active === "image-table") {
             setOpen(true);
         }
+        else {
+            setOpen(false);
+        }
     }, [tool, show]);
-    const createShape = (shape, props = {}) => {
-        var _a, _b, _c, _d, _e, _f, _g;
+    const createShape = (shape, props = {}, selectedComponent) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         const defaults = (_a = SEAT_SHAPES[shape]) !== null && _a !== void 0 ? _a : {};
-        return Object.assign(Object.assign(Object.assign({}, defaults), props), { shape: (_b = props.shape) !== null && _b !== void 0 ? _b : shape, height: (_c = adjustHeightWidthForSeatShape(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape, props)) === null || _c === void 0 ? void 0 : _c.height, width: (_d = adjustHeightWidthForSeatShape(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape, props)) === null || _d === void 0 ? void 0 : _d.width, fill: props.fill, seatCount: getSeatCount(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape, props), seatPositions: getSeatPosition(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape, props), openSpace: isSeatShape(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape) ? (_e = props.openSpace) !== null && _e !== void 0 ? _e : 0 : undefined, seatFill: isSeatShape(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape)
-                ? props.seatFill
-                : undefined, text: shape === "text" ? (_f = props.text) !== null && _f !== void 0 ? _f : defaults.text : undefined, fontColor: shape === "text" ? (_g = props.fontColor) !== null && _g !== void 0 ? _g : defaults.fontColor : undefined, radius: props.radius });
+        const seatDefault = selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent[seatKey];
+        return Object.assign(Object.assign(Object.assign({}, defaults), props), { shape: (_b = props.shape) !== null && _b !== void 0 ? _b : shape, height: (_c = adjustHeightWidthForSeatShape(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape, props)) === null || _c === void 0 ? void 0 : _c.height, width: (_d = adjustHeightWidthForSeatShape(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape, props)) === null || _d === void 0 ? void 0 : _d.width, fill: props.fill, seatCount: getSeatCount(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape, props, seatDefault), seatPositions: getSeatPosition(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape, props, seatDefault), openSpace: isSeatShape(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape)
+                ? (_e = props.openSpace) !== null && _e !== void 0 ? _e : 0
+                : undefined, seatFill: isSeatShape(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape) ? (_f = props.seatFill) !== null && _f !== void 0 ? _f : theme === null || theme === void 0 ? void 0 : theme.primaryColor : undefined, text: shape === "text" ? (_g = props.text) !== null && _g !== void 0 ? _g : defaults.text : undefined, fontColor: shape === "text" ? (_h = props.fontColor) !== null && _h !== void 0 ? _h : defaults.fontColor : undefined, radius: props.radius });
     };
     const debouncedSyncComponents = useRef(debounce((data) => {
         dispatch({ type: "board/setFlagChange", payload: true });
@@ -147,7 +159,7 @@ const ControlPanels = (props) => {
         dispatch({ type: "board/setUpdateBy", payload: "global" });
     }, 300));
     const updateElement = (id, values) => {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         let findElement = [...components, ...extraComponents].find((item) => item.id === id);
         const isAdjustSize = ["circle"].includes((findElement === null || findElement === void 0 ? void 0 : findElement.shape) || "");
         let forceSize = {
@@ -158,8 +170,8 @@ const ControlPanels = (props) => {
             return;
         const newElement = Object.assign(Object.assign(Object.assign({}, findElement), values), { x: (_a = values.x) !== null && _a !== void 0 ? _a : findElement.x, y: (_b = values.y) !== null && _b !== void 0 ? _b : findElement.y, width: isAdjustSize ? forceSize.width : (_c = values.width) !== null && _c !== void 0 ? _c : findElement.width, height: isAdjustSize
                 ? forceSize.height
-                : (_d = values.height) !== null && _d !== void 0 ? _d : findElement.height });
-        const svg = (_f = (_e = svgRef === null || svgRef === void 0 ? void 0 : svgRef.current) === null || _e === void 0 ? void 0 : _e[1]) !== null && _f !== void 0 ? _f : (_g = svgRef === null || svgRef === void 0 ? void 0 : svgRef.current) === null || _g === void 0 ? void 0 : _g[0];
+                : (_d = values.height) !== null && _d !== void 0 ? _d : findElement.height, opacity: ((_e = values === null || values === void 0 ? void 0 : values.opacity) !== null && _e !== void 0 ? _e : 100) / 100, openSpace: ((_f = values === null || values === void 0 ? void 0 : values.openSpace) !== null && _f !== void 0 ? _f : 0) / 100 });
+        const svg = (_h = (_g = svgRef === null || svgRef === void 0 ? void 0 : svgRef.current) === null || _g === void 0 ? void 0 : _g[1]) !== null && _h !== void 0 ? _h : (_j = svgRef === null || svgRef === void 0 ? void 0 : svgRef.current) === null || _j === void 0 ? void 0 : _j[0];
         const { g, element } = getAttributeElement(svg, id);
         applyResizeToSvgElement(element, g, newElement);
         const getBBox = getGlobalBBox(svg, g);
@@ -167,15 +179,16 @@ const ControlPanels = (props) => {
         updateSelectionBox(svg, getBBox);
     };
     const handleChangeComponent = (values, allValues) => {
+        var _a, _b;
         const { shape } = allValues, restProps = __rest(allValues, ["shape"]);
-        const newValues = createShape(shape, restProps);
+        const newValues = createShape(shape, restProps, selectedComponent);
         if (selectedComponent) {
             updateElement(allValues.id, values);
-            debouncedSyncComponents.current(Object.assign(Object.assign({}, (selectedComponent || {})), newValues));
+            debouncedSyncComponents.current(Object.assign(Object.assign(Object.assign({}, (selectedComponent || {})), newValues), { opacity: ((_a = newValues === null || newValues === void 0 ? void 0 : newValues.opacity) !== null && _a !== void 0 ? _a : 100) / 100, openSpace: ((_b = newValues === null || newValues === void 0 ? void 0 : newValues.openSpace) !== null && _b !== void 0 ? _b : 0) / 100 }));
         }
         if ((selectedGroup === null || selectedGroup === void 0 ? void 0 : selectedGroup.length) > 0) {
-            const { width, height, x, y, fill, stroke, opacity, rotation, strokeWidth, radius, shape, seatCount, seatFill, seatPositions, labels } = newValues;
-            const updatedGroup = selectedGroup.map((comp) => (Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, comp), (width !== undefined ? { width } : {})), (height !== undefined ? { height } : {})), (x !== undefined ? { x } : {})), (y !== undefined ? { y } : {})), (fill !== undefined ? { fill } : {})), (stroke !== undefined ? { stroke } : {})), (opacity !== undefined ? { opacity } : {})), (rotation !== undefined ? { rotation } : {})), (strokeWidth !== undefined ? { strokeWidth } : {})), (radius !== undefined ? { radius } : {})), (shape !== undefined ? { shape } : {})), (seatCount !== undefined ? { seatCount } : {})), (seatFill !== undefined ? { seatFill } : {})), (seatPositions !== undefined ? { seatPositions } : {})), (labels !== undefined ? { labels } : {}))));
+            const { width, height, x, y, fill, stroke, opacity, rotation, strokeWidth, radius, shape, seatCount, seatFill, seatPositions, labels, } = newValues;
+            const updatedGroup = selectedGroup.map((comp) => (Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, comp), (width !== undefined ? { width } : {})), (height !== undefined ? { height } : {})), (x !== undefined ? { x } : {})), (y !== undefined ? { y } : {})), (fill !== undefined ? { fill } : {})), (stroke !== undefined ? { stroke } : {})), (opacity !== undefined ? { opacity: opacity / 100 } : {})), (rotation !== undefined ? { rotation } : {})), (strokeWidth !== undefined ? { strokeWidth } : {})), (radius !== undefined ? { radius } : {})), (shape !== undefined ? { shape } : {})), (seatCount !== undefined ? { seatCount } : {})), (seatFill !== undefined ? { seatFill } : {})), (seatPositions !== undefined ? { seatPositions } : {})), (labels !== undefined ? { labels } : {}))));
             let minX = Infinity;
             let minY = Infinity;
             let maxX = -Infinity;

package/dist/features/panel/index.jsx

@@ -30,6 +30,7 @@ const ControlPanels = (props) => {
     const theme = useAppSelector((state) => state.theme);
     const tool = useAppSelector((state) => state.tool);
     const selectedComponent = useAppSelector((state) => state.panel.selectedComponent);
+    const seatKey = useAppSelector((state) => state.panel.seatDefaultKey);
     const selectedGroup = useAppSelector((state) => state.panel.selectedGroup);
     const components = useAppSelector((state) => state.board.components);
     const extraComponents = useAppSelector((state) => state.board.extraComponents);
@@ -43,6 +44,7 @@ const ControlPanels = (props) => {
     let values = Form.useWatch([], form);
     useEffect(() => {
         if (selectedComponent) {
+            form.resetFields();
             const isDifferentId = (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) !== (values === null || values === void 0 ? void 0 : values.id) || !(values === null || values === void 0 ? void 0 : values.id);
             const isSameIdAndSameDimensions = (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) === (values === null || values === void 0 ? void 0 : values.id) &&
                 (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.height) === (values === null || values === void 0 ? void 0 : values.height) &&
@@ -52,9 +54,10 @@ const ControlPanels = (props) => {
             if (show && (isDifferentId || isSameIdAndSameDimensions)) {
                 setOpen(true);
             }
-            form.setFieldsValue(selectedComponent);
+            form.setFieldsValue(Object.assign(Object.assign({}, selectedComponent), { opacity: (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.opacity) * 100, openSpace: (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.openSpace) * 100 }));
         }
         else if (selectedGroup) {
+            form.resetFields();
             if (show)
                 setOpen(true);
             if (!show)
@@ -66,6 +69,11 @@ const ControlPanels = (props) => {
                 return arr.every((item) => item[key] === firstValue);
             }
             function getValueIfSame(arr, key) {
+                if (key === "opacity") {
+                    return isSameAllByKey(arr, key)
+                        ? Number(arr[0][key]) * 100
+                        : undefined;
+                }
                 return isSameAllByKey(arr, key) ? arr[0][key] : undefined;
             }
             form.setFieldsValue({
@@ -91,13 +99,17 @@ const ControlPanels = (props) => {
         if (tool.active === "background" || tool.active === "image-table") {
             setOpen(true);
         }
+        else {
+            setOpen(false);
+        }
     }, [tool, show]);
-    const createShape = (shape, props = {}) => {
-        var _a, _b, _c, _d, _e, _f, _g;
+    const createShape = (shape, props = {}, selectedComponent) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         const defaults = (_a = SEAT_SHAPES[shape]) !== null && _a !== void 0 ? _a : {};
-        return Object.assign(Object.assign(Object.assign({}, defaults), props), { shape: (_b = props.shape) !== null && _b !== void 0 ? _b : shape, height: (_c = adjustHeightWidthForSeatShape(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape, props)) === null || _c === void 0 ? void 0 : _c.height, width: (_d = adjustHeightWidthForSeatShape(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape, props)) === null || _d === void 0 ? void 0 : _d.width, fill: props.fill, seatCount: getSeatCount(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape, props), seatPositions: getSeatPosition(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape, props), openSpace: isSeatShape(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape) ? (_e = props.openSpace) !== null && _e !== void 0 ? _e : 0 : undefined, seatFill: isSeatShape(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape)
-                ? props.seatFill
-                : undefined, text: shape === "text" ? (_f = props.text) !== null && _f !== void 0 ? _f : defaults.text : undefined, fontColor: shape === "text" ? (_g = props.fontColor) !== null && _g !== void 0 ? _g : defaults.fontColor : undefined, radius: props.radius });
+        const seatDefault = selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent[seatKey];
+        return Object.assign(Object.assign(Object.assign({}, defaults), props), { shape: (_b = props.shape) !== null && _b !== void 0 ? _b : shape, height: (_c = adjustHeightWidthForSeatShape(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape, props)) === null || _c === void 0 ? void 0 : _c.height, width: (_d = adjustHeightWidthForSeatShape(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape, props)) === null || _d === void 0 ? void 0 : _d.width, fill: props.fill, seatCount: getSeatCount(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape, props, seatDefault), seatPositions: getSeatPosition(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape, props, seatDefault), openSpace: isSeatShape(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape)
+                ? (_e = props.openSpace) !== null && _e !== void 0 ? _e : 0
+                : undefined, seatFill: isSeatShape(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape) ? (_f = props.seatFill) !== null && _f !== void 0 ? _f : theme === null || theme === void 0 ? void 0 : theme.primaryColor : undefined, text: shape === "text" ? (_g = props.text) !== null && _g !== void 0 ? _g : defaults.text : undefined, fontColor: shape === "text" ? (_h = props.fontColor) !== null && _h !== void 0 ? _h : defaults.fontColor : undefined, radius: props.radius });
     };
     const debouncedSyncComponents = useRef(debounce((data) => {
         dispatch({ type: "board/setFlagChange", payload: true });
@@ -146,7 +158,7 @@ const ControlPanels = (props) => {
         dispatch({ type: "board/setUpdateBy", payload: "global" });
     }, 300));
     const updateElement = (id, values) => {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         let findElement = [...components, ...extraComponents].find((item) => item.id === id);
         const isAdjustSize = ["circle"].includes((findElement === null || findElement === void 0 ? void 0 : findElement.shape) || "");
         let forceSize = {
@@ -157,8 +169,8 @@ const ControlPanels = (props) => {
             return;
         const newElement = Object.assign(Object.assign(Object.assign({}, findElement), values), { x: (_a = values.x) !== null && _a !== void 0 ? _a : findElement.x, y: (_b = values.y) !== null && _b !== void 0 ? _b : findElement.y, width: isAdjustSize ? forceSize.width : (_c = values.width) !== null && _c !== void 0 ? _c : findElement.width, height: isAdjustSize
                 ? forceSize.height
-                : (_d = values.height) !== null && _d !== void 0 ? _d : findElement.height });
-        const svg = (_f = (_e = svgRef === null || svgRef === void 0 ? void 0 : svgRef.current) === null || _e === void 0 ? void 0 : _e[1]) !== null && _f !== void 0 ? _f : (_g = svgRef === null || svgRef === void 0 ? void 0 : svgRef.current) === null || _g === void 0 ? void 0 : _g[0];
+                : (_d = values.height) !== null && _d !== void 0 ? _d : findElement.height, opacity: ((_e = values === null || values === void 0 ? void 0 : values.opacity) !== null && _e !== void 0 ? _e : 100) / 100, openSpace: ((_f = values === null || values === void 0 ? void 0 : values.openSpace) !== null && _f !== void 0 ? _f : 0) / 100 });
+        const svg = (_h = (_g = svgRef === null || svgRef === void 0 ? void 0 : svgRef.current) === null || _g === void 0 ? void 0 : _g[1]) !== null && _h !== void 0 ? _h : (_j = svgRef === null || svgRef === void 0 ? void 0 : svgRef.current) === null || _j === void 0 ? void 0 : _j[0];
         const { g, element } = getAttributeElement(svg, id);
         applyResizeToSvgElement(element, g, newElement);
         const getBBox = getGlobalBBox(svg, g);
@@ -166,15 +178,16 @@ const ControlPanels = (props) => {
         updateSelectionBox(svg, getBBox);
     };
     const handleChangeComponent = (values, allValues) => {
+        var _a, _b;
         const { shape } = allValues, restProps = __rest(allValues, ["shape"]);
-        const newValues = createShape(shape, restProps);
+        const newValues = createShape(shape, restProps, selectedComponent);
         if (selectedComponent) {
             updateElement(allValues.id, values);
-            debouncedSyncComponents.current(Object.assign(Object.assign({}, (selectedComponent || {})), newValues));
+            debouncedSyncComponents.current(Object.assign(Object.assign(Object.assign({}, (selectedComponent || {})), newValues), { opacity: ((_a = newValues === null || newValues === void 0 ? void 0 : newValues.opacity) !== null && _a !== void 0 ? _a : 100) / 100, openSpace: ((_b = newValues === null || newValues === void 0 ? void 0 : newValues.openSpace) !== null && _b !== void 0 ? _b : 0) / 100 }));
         }
         if ((selectedGroup === null || selectedGroup === void 0 ? void 0 : selectedGroup.length) > 0) {
-            const { width, height, x, y, fill, stroke, opacity, rotation, strokeWidth, radius, shape, seatCount, seatFill, seatPositions, labels } = newValues;
-            const updatedGroup = selectedGroup.map((comp) => (Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, comp), (width !== undefined ? { width } : {})), (height !== undefined ? { height } : {})), (x !== undefined ? { x } : {})), (y !== undefined ? { y } : {})), (fill !== undefined ? { fill } : {})), (stroke !== undefined ? { stroke } : {})), (opacity !== undefined ? { opacity } : {})), (rotation !== undefined ? { rotation } : {})), (strokeWidth !== undefined ? { strokeWidth } : {})), (radius !== undefined ? { radius } : {})), (shape !== undefined ? { shape } : {})), (seatCount !== undefined ? { seatCount } : {})), (seatFill !== undefined ? { seatFill } : {})), (seatPositions !== undefined ? { seatPositions } : {})), (labels !== undefined ? { labels } : {}))));
+            const { width, height, x, y, fill, stroke, opacity, rotation, strokeWidth, radius, shape, seatCount, seatFill, seatPositions, labels, } = newValues;
+            const updatedGroup = selectedGroup.map((comp) => (Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, comp), (width !== undefined ? { width } : {})), (height !== undefined ? { height } : {})), (x !== undefined ? { x } : {})), (y !== undefined ? { y } : {})), (fill !== undefined ? { fill } : {})), (stroke !== undefined ? { stroke } : {})), (opacity !== undefined ? { opacity: opacity / 100 } : {})), (rotation !== undefined ? { rotation } : {})), (strokeWidth !== undefined ? { strokeWidth } : {})), (radius !== undefined ? { radius } : {})), (shape !== undefined ? { shape } : {})), (seatCount !== undefined ? { seatCount } : {})), (seatFill !== undefined ? { seatFill } : {})), (seatPositions !== undefined ? { seatPositions } : {})), (labels !== undefined ? { labels } : {}))));
             let minX = Infinity;
             let minY = Infinity;
             let maxX = -Infinity;

package/dist/features/panel/panel-slice.d.ts

@@ -7,8 +7,10 @@ export interface PanelState {
     selectedGroup: any;
     selectionLines?: any;
     loading?: boolean;
+    seatDefaultKey?: string;
 }
 export declare const panelSlice: import("@reduxjs/toolkit").Slice<PanelState, {
+    setSeatDefaultKey: (state: import("immer").WritableDraft<PanelState>, action: PayloadAction<string>) => void;
     setLoading: (state: import("immer").WritableDraft<PanelState>, action: PayloadAction<boolean>) => void;
     setSelectedComponent: (state: import("immer").WritableDraft<PanelState>, action: PayloadAction<any>) => void;
     setUnSelectedComponent: (state: import("immer").WritableDraft<PanelState>) => void;

package/dist/features/panel/panel-slice.js

@@ -12,6 +12,9 @@ export const panelSlice = createSlice({
     name: "panel",
     initialState,
     reducers: {
+        setSeatDefaultKey: (state, action) => {
+            state.seatDefaultKey = action.payload;
+        },
         setLoading: (state, action) => {
             state.loading = action.payload;
         },

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

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