seat-editor 3.3.46 → 3.4.0

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

@@ -12,26 +12,43 @@ const SelectToolForm = ({ title = "Title", 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 = components === null || components === void 0 ? void 0 : components.reduce((acc, item) => {
-            acc[item.shape] = (acc[item.shape] || 0) + 1;
-            return acc;
-        }, {});
-        const variableFormatToString = (variable) => {
-            return variable
-                .replace(/-/g, " ")
-                .replace(/\b\w/g, (char) => char.toUpperCase());
-        };
-        return (_jsxs("div", { className: "flex flex-col", children: [_jsx("h1", { className: "heading-s", children: title }), _jsx("div", { className: "flex flex-col gap-2 mt-5", children: Object.entries(countByShape).map(([shape, count]) => (_jsxs("div", { children: [_jsxs("span", { className: "font-bold", children: [variableFormatToString(shape), ":"] }), " ", count] }, shape))) })] }));
-    };
+    // 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":
             case "circle":
                 return _jsx(SquareToolForm, {});
             case "table-seat-circle":
-            case "table-seat-rect-circle":
                 return _jsx(SeatCircle, {});
+            case "table-seat-rect-circle":
             case "table-seat-square":
             case "table-seat-half-square":
             case "table-seat-rect-square":
@@ -52,6 +69,6 @@ const SelectToolForm = ({ title = "Title", action, tranform }) => {
             return _jsx(SelectedGroup, {});
         }
     };
-    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(SummaryComponents, {}), renderComponent(), renderSelectionComponent()] }));
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [renderComponent(), renderSelectionComponent()] }));
 };
 export default SelectToolForm;

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

@@ -11,36 +11,43 @@ const SelectToolForm = ({ title = "Title", 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 = components === null || components === void 0 ? void 0 : components.reduce((acc, item) => {
-            acc[item.shape] = (acc[item.shape] || 0) + 1;
-            return acc;
-        }, {});
-        const variableFormatToString = (variable) => {
-            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 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":
             case "circle":
                 return <SquareToolForm />;
             case "table-seat-circle":
-            case "table-seat-rect-circle":
                 return <SeatCircle />;
+            case "table-seat-rect-circle":
             case "table-seat-square":
             case "table-seat-half-square":
             case "table-seat-rect-square":
@@ -62,7 +69,7 @@ const SelectToolForm = ({ title = "Title", action, tranform }) => {
         }
     };
     return (<div className="flex flex-col gap-2">
-      <SummaryComponents />
+      {/* <SummaryComponents /> */}
       {renderComponent()}
       {renderSelectionComponent()}
     </div>);

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

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

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

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

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

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

package/dist/features/panel/table-seat-circle.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { ColorPicker, Flex, Form, InputNumber } from "antd";
+import { ColorPicker, Flex, Form, Divider, InputNumber } from "antd";
 import SectionLabel from "../../components/form-tools/label";
 import SectionShape from "../../components/form-tools/shape";
 const SeatCircle = () => {
-    return (_jsx(_Fragment, { children: _jsxs("div", { className: "py-2", children: [_jsx("h1", { className: "heading-s", children: " Round table" }), _jsxs(Flex, { children: [_jsx(Form.Item, { name: "seatCount", label: "Seat Count", className: "w-full", children: _jsx(InputNumber, {}) }), _jsx(Form.Item, { name: "openSpace", label: "Open Space", className: "w-full", children: _jsx(InputNumber, { max: 1, min: 0, step: 0.1 }) })] }), _jsx(Flex, { gap: 2, children: _jsx(Form.Item, { label: "Seat Fill", name: "seatFill", getValueFromEvent: (color) => color.toHexString(), className: "w-full ", children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) }) }), _jsx(SectionShape, {}), _jsx(SectionLabel, {})] }) }));
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "py-2", children: [_jsx(SectionShape, {}), _jsx("h1", { className: "heading-s", children: "Section Seating" }), _jsx(Divider, { style: { margin: 4 } }), _jsxs(Flex, { children: [_jsx(Form.Item, { name: "seatCount", label: "Seat Count", className: "w-full", children: _jsx(InputNumber, { min: 0, disabled: true }) }), _jsx(Form.Item, { name: "openSpace", label: "Open Space", className: "w-full", children: _jsx(InputNumber, { max: 100, min: 0, step: 10, suffix: "%" }) })] }), _jsx(Flex, { gap: 2, children: _jsx(Form.Item, { label: "Seat Fill", name: "seatFill", getValueFromEvent: (color) => color.toHexString(), className: "w-full ", children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) }) }), _jsx(SectionLabel, {})] }) }));
 };
 export default SeatCircle;

package/dist/features/panel/table-seat-circle.jsx

@@ -1,34 +1,26 @@
 "use client";
-import { ColorPicker, Flex, Form, InputNumber } from "antd";
+import { ColorPicker, Flex, Form, Divider, InputNumber } from "antd";
 import SectionLabel from "../../components/form-tools/label";
 import SectionShape from "../../components/form-tools/shape";
 const SeatCircle = () => {
     return (<>
       <div className="py-2">
-        <h1 className="heading-s"> Round table</h1>
+        <SectionShape />
+        <h1 className="heading-s">Section Seating</h1>
+        <Divider style={{ margin: 4 }}/>
         <Flex>
           <Form.Item name="seatCount" label="Seat Count" className="w-full">
-            <InputNumber />
+            <InputNumber min={0} disabled/>
           </Form.Item>
           <Form.Item name="openSpace" label="Open Space" className="w-full">
-            <InputNumber max={1} min={0} step={0.1}/>
+            <InputNumber max={100} min={0} step={10} suffix="%"/>
           </Form.Item>
-          
         </Flex>
         <Flex gap={2}>
           <Form.Item label="Seat Fill" name={"seatFill"} getValueFromEvent={(color) => color.toHexString()} className="w-full ">
             <ColorPicker allowClear format="hex" defaultFormat="hex"/>
           </Form.Item>
-          {/* <Form.Item
-          label="Table Fill"
-          name={"fill"}
-          getValueFromEvent={(color) => color.toHexString()}
-          className="w-full "
-        >
-          <ColorPicker allowClear format="hex" defaultFormat="hex" />
-        </Form.Item> */}
         </Flex>
-        <SectionShape />
         <SectionLabel />
       </div>
     </>);

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

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

package/dist/features/panel/table-seat-square.js

@@ -1,9 +1,15 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Col, ColorPicker, Flex, Form, InputNumber, Row, } from "antd";
+import { Col, ColorPicker, Divider, Flex, Form, InputNumber, Row, } from "antd";
 import SectionLabel from "../../components/form-tools/label";
 import SectionShape from "../../components/form-tools/shape";
+import { useAppSelector } from "@/hooks/use-redux";
 const SeatSquare = () => {
-    return (_jsx(_Fragment, { children: _jsxs("div", { className: "py-2", children: [_jsx("h1", { className: "heading-s", children: " Square table" }), _jsx(Flex, { className: "w-full", children: _jsx(Form.Item, { name: "openSpace", label: "Open Space", className: "w-full", children: _jsx(InputNumber, { max: 1, min: 0, step: 0.1 }) }) }), _jsxs(Row, { gutter: [16, 16], children: [_jsxs(Col, { span: 12, children: [_jsx(Form.Item, { name: ["seatPositions", "top"], label: "Top", className: "w-full", children: _jsx(InputNumber, { max: 100, min: 0, step: 1 }) }), _jsx(Form.Item, { name: ["seatPositions", "left"], label: "Left", className: "w-full", children: _jsx(InputNumber, { max: 100, min: 0, step: 1 }) })] }), _jsxs(Col, { span: 12, children: [_jsx(Form.Item, { name: ["seatPositions", "right"], label: "Right", className: "w-full", children: _jsx(InputNumber, { max: 100, min: 0, step: 1 }) }), _jsx(Form.Item, { name: ["seatPositions", "bottom"], label: "Bottom", className: "w-full", children: _jsx(InputNumber, { max: 100, min: 0, step: 1 }) })] })] }), _jsx(Flex, { gap: 2, children: _jsx(Form.Item, { label: "Seat Fill", name: "seatFill", getValueFromEvent: (color) => color.toHexString(), className: "w-full ", children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) }) }), _jsx(SectionShape, {}), _jsx(SectionLabel, {})] }) }));
+    const selectedComponent = useAppSelector((state) => state.panel.selectedComponent);
+    const seatKey = useAppSelector((state) => state.panel.seatDefaultKey);
+    const isSeatCustom = (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) === "table-seat-rect-circle";
+    const seatCountDefault = selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent[seatKey];
+    const disabled = seatCountDefault > 0;
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "py-2", children: [_jsx(SectionShape, {}), _jsx("h1", { className: "heading-s", children: "Section Seating" }), _jsx(Divider, { style: { margin: 4 } }), _jsx(Flex, { className: "w-full", children: _jsx(Form.Item, { name: "openSpace", label: "Open Space", className: "w-full", children: _jsx(InputNumber, { max: 100, min: 0, step: 10, suffix: "%", disabled: isSeatCustom }) }) }), _jsxs(Row, { gutter: [16, 16], children: [_jsxs(Col, { span: 12, children: [_jsx(Form.Item, { name: ["seatPositions", "top"], label: "Top", className: "w-full", children: _jsx(InputNumber, { min: 0, step: 1, disabled: disabled }) }), _jsx(Form.Item, { name: ["seatPositions", "left"], label: "Left", className: "w-full", children: _jsx(InputNumber, { min: 0, step: 1, disabled: disabled }) })] }), _jsxs(Col, { span: 12, children: [_jsx(Form.Item, { name: ["seatPositions", "right"], label: "Right", className: "w-full", children: _jsx(InputNumber, { min: 0, step: 1, disabled: disabled }) }), _jsx(Form.Item, { name: ["seatPositions", "bottom"], label: "Bottom", className: "w-full", children: _jsx(InputNumber, { min: 0, step: 1, disabled: disabled }) })] })] }), _jsx(Flex, { gap: 2, children: _jsx(Form.Item, { label: "Seat Fill", name: "seatFill", getValueFromEvent: (color) => color.toHexString(), className: "w-full ", children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) }) }), _jsx(SectionLabel, {})] }) }));
 };
 export default SeatSquare;

package/dist/features/panel/table-seat-square.jsx

@@ -1,31 +1,39 @@
 "use client";
-import { Col, ColorPicker, Flex, Form, InputNumber, Row, } from "antd";
+import { Col, ColorPicker, Divider, Flex, Form, InputNumber, Row, } from "antd";
 import SectionLabel from "../../components/form-tools/label";
 import SectionShape from "../../components/form-tools/shape";
+import { useAppSelector } from "@/hooks/use-redux";
 const SeatSquare = () => {
+    const selectedComponent = useAppSelector((state) => state.panel.selectedComponent);
+    const seatKey = useAppSelector((state) => state.panel.seatDefaultKey);
+    const isSeatCustom = (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) === "table-seat-rect-circle";
+    const seatCountDefault = selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent[seatKey];
+    const disabled = seatCountDefault > 0;
     return (<>
       <div className="py-2">
-        <h1 className="heading-s"> Square table</h1>
+        <SectionShape />
+        <h1 className="heading-s">Section Seating</h1>
+        <Divider style={{ margin: 4 }}/>
         <Flex className="w-full">
           <Form.Item name="openSpace" label="Open Space" className="w-full">
-            <InputNumber max={1} min={0} step={0.1}/>
+            <InputNumber max={100} min={0} step={10} suffix="%" disabled={isSeatCustom}/>
           </Form.Item>
         </Flex>
         <Row gutter={[16, 16]}>
           <Col span={12}>
             <Form.Item name={["seatPositions", "top"]} label="Top" className="w-full">
-               <InputNumber max={100} min={0} step={1}/>
+              <InputNumber min={0} step={1} disabled={disabled}/>
             </Form.Item>
             <Form.Item name={["seatPositions", "left"]} label="Left" className="w-full">
-               <InputNumber max={100} min={0} step={1}/>
+              <InputNumber min={0} step={1} disabled={disabled}/>
             </Form.Item>
           </Col>
           <Col span={12}>
             <Form.Item name={["seatPositions", "right"]} label="Right" className="w-full">
-               <InputNumber max={100} min={0} step={1}/>
+              <InputNumber min={0} step={1} disabled={disabled}/>
             </Form.Item>
             <Form.Item name={["seatPositions", "bottom"]} label="Bottom" className="w-full">
-               <InputNumber max={100} min={0} step={1}/>
+              <InputNumber min={0} step={1} disabled={disabled}/>
             </Form.Item>
           </Col>
         </Row>
@@ -43,7 +51,6 @@ const SeatSquare = () => {
           <ColorPicker allowClear format="hex" defaultFormat="hex" />
         </Form.Item> */}
         </Flex>
-        <SectionShape />
         <SectionLabel />
       </div>
     </>);

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

@@ -1,2 +1,2 @@
-declare const TextTool: () => import("react").JSX.Element;
+declare const TextTool: () => import("react/jsx-runtime").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.Element;
+declare const UploadTool: ({ name, type, action, defaultValue, transform, }: UploadToolProps) => import("react/jsx-runtime").JSX.Element;
 export default UploadTool;

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

@@ -96,6 +96,8 @@ const UploadTool = ({ name, type, action, defaultValue, transform, }) => {
                                 type: "panel/setSelectedComponent",
                                 payload: defaultValue,
                             });
+                            dispatch({ type: "board/setFlagChange", payload: true });
+                            dispatch({ type: "board/setUpdateBy", payload: "global" });
                         }
                     }
                     // ⬇️ IF local upload
@@ -145,6 +147,6 @@ const UploadTool = ({ name, type, action, defaultValue, transform, }) => {
     const handleDelete = () => {
         setDefaultSrc(null);
     };
-    return (_jsxs(Form.Item, { label: "", name: "src", className: "w-full", children: [defaultSrc ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "w-full flex flex-col items-center gap-2 max-h-[200px] overflow-y-auto", children: _jsx(Image, { src: defaultSrc }) }), _jsx(Button, { type: "primary", onClick: handleDelete, children: "Edit" })] })) : (_jsx(Dragger, Object.assign({ beforeUpload: () => false }, propsUpload, { children: loading ? (_jsx("div", { className: "w-full flex flex-col items-center gap-2 max-h-[200px]", children: _jsx(LoadingOutlined, {}) })) : (_jsxs(_Fragment, { children: [_jsx("p", { className: "ant-upload-drag-icon", children: _jsx(InboxOutlined, {}) }), _jsx("p", { className: "ant-upload-text", children: "Click or drag file to this area to upload" }), _jsx("p", { className: "ant-upload-hint", children: "Support for a single or bulk upload. Strictly prohibited from uploading company data or other banned files." })] })) }))), defaultSrc && (_jsxs(_Fragment, { children: [_jsx(SectionShape, { allowChangeShape: type === "component" }), _jsx(SectionLabel, {})] }))] }));
+    return (_jsxs(Form.Item, { label: "", name: "src", className: "w-full", children: [defaultSrc ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "w-full flex flex-col items-center gap-2 max-h-[200px] overflow-y-auto", children: _jsx(Image, { src: defaultSrc }) }), _jsx(Button, { type: "primary", onClick: handleDelete, className: "w-full mt-4", children: "Edit" })] })) : (_jsx(Dragger, Object.assign({ beforeUpload: () => false }, propsUpload, { children: loading ? (_jsx("div", { className: "w-full flex flex-col items-center gap-2 max-h-[200px]", children: _jsx(LoadingOutlined, {}) })) : (_jsxs(_Fragment, { children: [_jsx("p", { className: "ant-upload-drag-icon", children: _jsx(InboxOutlined, {}) }), _jsx("p", { className: "ant-upload-text", children: "Click or drag file to this area to upload" }), _jsx("p", { className: "ant-upload-hint", children: "Support for a single or bulk upload. Strictly prohibited from uploading company data or other banned files." })] })) }))), (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) && (_jsxs(_Fragment, { children: [_jsx(SectionShape, { allowChangeShape: type === "component" }), _jsx(SectionLabel, {})] }))] }));
 };
 export default UploadTool;

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

@@ -95,6 +95,8 @@ const UploadTool = ({ name, type, action, defaultValue, transform, }) => {
                                 type: "panel/setSelectedComponent",
                                 payload: defaultValue,
                             });
+                            dispatch({ type: "board/setFlagChange", payload: true });
+                            dispatch({ type: "board/setUpdateBy", payload: "global" });
                         }
                     }
                     // ⬇️ IF local upload
@@ -149,7 +151,7 @@ const UploadTool = ({ name, type, action, defaultValue, transform, }) => {
           <div className="w-full flex flex-col items-center gap-2 max-h-[200px] overflow-y-auto">
             <Image src={defaultSrc}/>
           </div>
-          <Button type="primary" onClick={handleDelete}>
+          <Button type="primary" onClick={handleDelete} className="w-full mt-4">
             Edit
           </Button>
         </>) : (<Dragger beforeUpload={() => false} {...propsUpload}>
@@ -168,7 +170,7 @@ const UploadTool = ({ name, type, action, defaultValue, transform, }) => {
               </p>
             </>)}
         </Dragger>)}
-      {defaultSrc && (<>
+      {(selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) && (<>
           <SectionShape allowChangeShape={type === "component"}/>
           <SectionLabel />
         </>)}

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

@@ -1,5 +1,11 @@
+import { PropertiesProps } from "@/dto/table";
 import { SeatShape } from "../../utils/constant";
 export declare const isSeatShape: (shape: string) => shape is SeatShape;
-export declare const getSeatCount: (shape: string, props: any) => any;
-export declare const getSeatPosition: (shape: string, props: any) => any;
+export declare const getSeatCount: (shape: string, props: PropertiesProps, defaultValue: number) => number;
+export declare const getSeatPosition: (shape: string, props: PropertiesProps, defaultValue: number) => {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};
 export declare const adjustHeightWidthForSeatShape: (shape: string, props: any) => any;

package/dist/features/panel/utils.js

@@ -1,7 +1,7 @@
 import { SEAT_SHAPES } from "../../utils/constant";
 import { MIN_HEIGHT, MIN_WIDTH } from "../board-v3/constant";
 export const isSeatShape = (shape) => SEAT_SHAPES.includes(shape);
-export const getSeatCount = (shape, props) => {
+export const getSeatCount = (shape, props, defaultValue) => {
     // if (shape === "table-seat-circle") {
     //   if (props?.seatCount) {
     //     return props.seatCount;
@@ -10,32 +10,33 @@ export const getSeatCount = (shape, props) => {
     //     return top + bottom + left + right;
     //   }
     // }
-    return (props === null || props === void 0 ? void 0 : props.seatCount) || 0;
+    return (props === null || props === void 0 ? void 0 : props.seatCount) || defaultValue || 0;
 };
-export const getSeatPosition = (shape, props) => {
-    // if (shape === "table-seat-square" || shape === "table-seat-rect-square") {
-    //   if (props?.seatPositions) {
-    //     return props.seatPositions;
-    //   } else if (props?.seatCount) {
-    //     const totalSeat = props.seatCount;
-    //     const seatPerSide = Math.floor(totalSeat / 4);
-    //     return {
-    //       top: seatPerSide,
-    //       bottom: seatPerSide,
-    //       left: seatPerSide,
-    //       right: seatPerSide,
-    //     };
-    //   }
-    // }
-    if (shape === "table-seat-rect-circle") {
+export const getSeatPosition = (shape, props, defaultValue) => {
+    let seatCountDefault = defaultValue;
+    if (seatCountDefault === 0) {
         return {
-            top: 1,
-            bottom: 1,
-            left: 1,
-            right: 1,
+            top: 0,
+            bottom: 0,
+            left: 0,
+            right: 0,
         };
     }
-    return (props === null || props === void 0 ? void 0 : props.seatPositions) || { top: 0, bottom: 0, left: 0, right: 0 };
+    if (shape === "table-seat-rect-circle") {
+        if (seatCountDefault > 4) {
+            seatCountDefault = 4;
+        }
+        return (props === null || props === void 0 ? void 0 : props.seatPositions) &&
+            getTotalSeats(props === null || props === void 0 ? void 0 : props.seatPositions) <= seatCountDefault
+            ? normalizeSeatPosition(props === null || props === void 0 ? void 0 : props.seatPositions)
+            : distributeSeats(seatCountDefault);
+    }
+    console.log("seatCountDefault", props === null || props === void 0 ? void 0 : props.seatPositions);
+    if (getTotalSeats(props === null || props === void 0 ? void 0 : props.seatPositions) <= seatCountDefault && (getTotalSeats(props === null || props === void 0 ? void 0 : props.seatPositions) !== 0)) {
+        return props === null || props === void 0 ? void 0 : props.seatPositions;
+    }
+    console.log("seatCountDefault", seatCountDefault);
+    return distributeSeats(seatCountDefault);
 };
 export const adjustHeightWidthForSeatShape = (shape, props) => {
     if (shape === null || shape === void 0 ? void 0 : shape.includes("circle")) {
@@ -45,3 +46,39 @@ export const adjustHeightWidthForSeatShape = (shape, props) => {
     }
     return props;
 };
+function distributeSeats(seatCount) {
+    const base = Math.floor(seatCount / 4);
+    let remainder = seatCount % 4;
+    const result = {
+        top: base,
+        right: base,
+        bottom: base,
+        left: base,
+    };
+    const positions = ["top", "right", "bottom", "left"];
+    let index = 0;
+    while (remainder > 0) {
+        result[positions[index]] += 1;
+        remainder--;
+        index++;
+    }
+    return result;
+}
+function normalizeSeatPosition(input) {
+    const clamp = (value) => Math.max(0, Math.min(1, value));
+    return {
+        top: clamp(input.top),
+        right: clamp(input.right),
+        bottom: clamp(input.bottom),
+        left: clamp(input.left),
+    };
+}
+function getTotalSeats(position) {
+    const { top, right, bottom, left } = position || {
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+    };
+    return top + right + bottom + left;
+}

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

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

package/dist/features/side-tool/index.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Circle, CopyPlus, Eye, EyeOff, Image, Layers2, MousePointer, PaintBucket, Ratio, SquareMousePointer, Trash, Type, Upload, Hand, Layers, Grid, Lock, LockOpen, Undo2, Redo2, PenTool, Scan, } from "lucide-react";
+import { Circle, CopyPlus, Eye, EyeOff, Image, Layers2, MousePointer, PaintBucket, Ratio, SquareMousePointer, Trash, Type, Upload, Hand, Layers, Grid, Lock, LockOpen, Undo2, Redo2, PenTool, Scan, ScanEye, } from "lucide-react";
 import ButtonTools from "../../components/button-tools";
-import { Divider, ColorPicker, Button, message, } from "antd";
+import { Divider, ColorPicker, Button, message, Popover, Flex, } from "antd";
 import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
 import { useState } from "react";
 const SideTool = ({ dragOnly, deleteAutorized, }) => {
@@ -134,6 +134,11 @@ const SideTool = ({ dragOnly, deleteAutorized, }) => {
         dispatch({ type: "board/setFlagChange", payload: true });
     };
     const toogleSetLockBackground = () => {
+        dispatch({
+            type: "panel/setSelectedComponent",
+            payload: null,
+        });
+        dispatch({ type: "board/setFlagChange", payload: true });
         dispatch({
             type: "tool/setToogleBackground",
             payload: !lockBackground,
@@ -197,6 +202,7 @@ const SideTool = ({ dragOnly, deleteAutorized, }) => {
             payload: null,
         });
         dispatch({ type: "board/setFlagChange", payload: true });
+        dispatch({ type: "board/setUpdateBy", payload: "global" });
     };
     const handleDuplicateComponent = () => {
         const newComponent = Object.assign(Object.assign({}, selectedComponent), { x: selectedComponent.x + 20, y: selectedComponent.y + 20, id: Date.now() });
@@ -324,7 +330,7 @@ const SideTool = ({ dragOnly, deleteAutorized, }) => {
                     content: _jsx("div", { children: tool.name }),
                     trigger: "hover",
                     placement: "right",
-                }, items: [] }, tool.id))), _jsx(ColorPicker, { value: color, onChange: handleChangeColorBackground, children: _jsx(Button, { icon: _jsx(PaintBucket, {}), type: "text", name: "Background Color", onClick: () => hanldeSelectTool("background-color"), style: active === "background-color" ? { color: "red" } : {} }) }), _jsx(Button, { icon: _jsx(Scan, {}), type: "text", name: "Bounding Box", onClick: () => hanldeSelectTool("bounding-box"), style: active === "bounding-box" ? { color: "red" } : {} }), _jsx(Button, { icon: preview ? _jsx(EyeOff, {}) : _jsx(Eye, {}), type: "text", name: "Preview", onClick: handleOpenModalPreview, style: active === "preview" ? { color: "red" } : {} }), _jsx(Button, { icon: _jsx(Grid, {}), type: "text", name: "Grid", onClick: () => toggleGrid() }), _jsx(ButtonTools, { buttonProps: {
+                }, items: [] }, tool.id))), _jsx(ColorPicker, { value: color, onChange: handleChangeColorBackground, children: _jsx(Button, { icon: _jsx(PaintBucket, {}), type: "text", name: "Background Color", onClick: () => hanldeSelectTool("background-color"), style: active === "background-color" ? { color: "red" } : {} }) }), _jsx(Popover, { trigger: "hover", placement: "right", content: _jsxs(Flex, { vertical: true, children: [_jsx(Button, { icon: _jsx(Scan, {}), type: "text", name: "Bounding Box", onClick: () => hanldeSelectTool("bounding-box"), style: active === "bounding-box" ? { color: "red" } : {} }), _jsx(Button, { icon: preview ? _jsx(EyeOff, {}) : _jsx(Eye, {}), type: "text", name: "Preview", onClick: handleOpenModalPreview, style: active === "preview" ? { color: "red" } : {} })] }), children: _jsx(Button, { icon: _jsx(ScanEye, {}), type: "text" }) }), _jsx(Button, { icon: _jsx(Grid, {}), type: "text", name: "Grid", onClick: () => toggleGrid() }), _jsx(ButtonTools, { buttonProps: {
                     onClick: () => handleRemoveComponent(),
                     icon: _jsx(Trash, {}),
                     type: "text",

package/dist/features/side-tool/index.jsx

@@ -1,7 +1,7 @@
 "use client";
-import { Circle, CopyPlus, Eye, EyeOff, Image, Layers2, MousePointer, PaintBucket, Ratio, SquareMousePointer, Trash, Type, Upload, Hand, Layers, Grid, Lock, LockOpen, Undo2, Redo2, PenTool, Scan, } from "lucide-react";
+import { Circle, CopyPlus, Eye, EyeOff, Image, Layers2, MousePointer, PaintBucket, Ratio, SquareMousePointer, Trash, Type, Upload, Hand, Layers, Grid, Lock, LockOpen, Undo2, Redo2, PenTool, Scan, ScanEye, } from "lucide-react";
 import ButtonTools from "../../components/button-tools";
-import { Divider, ColorPicker, Button, message, } from "antd";
+import { Divider, ColorPicker, Button, message, Popover, Flex, } from "antd";
 import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
 import { useState } from "react";
 const SideTool = ({ dragOnly, deleteAutorized, }) => {
@@ -133,6 +133,11 @@ const SideTool = ({ dragOnly, deleteAutorized, }) => {
         dispatch({ type: "board/setFlagChange", payload: true });
     };
     const toogleSetLockBackground = () => {
+        dispatch({
+            type: "panel/setSelectedComponent",
+            payload: null,
+        });
+        dispatch({ type: "board/setFlagChange", payload: true });
         dispatch({
             type: "tool/setToogleBackground",
             payload: !lockBackground,
@@ -196,6 +201,7 @@ const SideTool = ({ dragOnly, deleteAutorized, }) => {
             payload: null,
         });
         dispatch({ type: "board/setFlagChange", payload: true });
+        dispatch({ type: "board/setUpdateBy", payload: "global" });
     };
     const handleDuplicateComponent = () => {
         const newComponent = Object.assign(Object.assign({}, selectedComponent), { x: selectedComponent.x + 20, y: selectedComponent.y + 20, id: Date.now() });
@@ -340,8 +346,14 @@ const SideTool = ({ dragOnly, deleteAutorized, }) => {
       <ColorPicker value={color} onChange={handleChangeColorBackground}>
         <Button icon={<PaintBucket />} type="text" name="Background Color" onClick={() => hanldeSelectTool("background-color")} style={active === "background-color" ? { color: "red" } : {}}/>
       </ColorPicker>
-      <Button icon={<Scan />} type="text" name="Bounding Box" onClick={() => hanldeSelectTool("bounding-box")} style={active === "bounding-box" ? { color: "red" } : {}}/>
-      <Button icon={preview ? <EyeOff /> : <Eye />} type="text" name="Preview" onClick={handleOpenModalPreview} style={active === "preview" ? { color: "red" } : {}}/>
+
+      <Popover trigger={"hover"} placement="right" content={<Flex vertical>
+            <Button icon={<Scan />} type="text" name="Bounding Box" onClick={() => hanldeSelectTool("bounding-box")} style={active === "bounding-box" ? { color: "red" } : {}}/>
+            <Button icon={preview ? <EyeOff /> : <Eye />} type="text" name="Preview" onClick={handleOpenModalPreview} style={active === "preview" ? { color: "red" } : {}}/>
+          </Flex>}>
+        <Button icon={<ScanEye />} type="text"/>
+      </Popover>
+
       <Button icon={<Grid />} type="text" name="Grid" onClick={() => toggleGrid()}/>
       <ButtonTools buttonProps={{
             onClick: () => handleRemoveComponent(),

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.Element;
+declare const LayerView: (props: LayerViewProps) => import("react/jsx-runtime").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>) => React.JSX.Element;
+declare const LayerView: <TMeta>(props: LayerViewProps<TMeta>) => import("react/jsx-runtime").JSX.Element;
 export default LayerView;

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

@@ -89,9 +89,11 @@ const LayerView = (props) => {
             payload: defaultBoundingBox,
         });
         // }
-        setTimeout(() => {
-            dispatch({ type: "panel/setLoading", payload: false });
-        }, 1000);
+        if (loading) {
+            setTimeout(() => {
+                dispatch({ type: "panel/setLoading", payload: false });
+            }, 1000);
+        }
     }, [
         componentProps,
         extraComponentProps,
@@ -325,7 +327,7 @@ const LayerView = (props) => {
             : !((_a = props === null || props === void 0 ? void 0 : props.dragTableBlockKey) === null || _a === void 0 ? void 0 : _a.some((_) => {
                 const dataRaw = originalData({ id: ghostId, type: "find" });
                 return _.value === (dataRaw === null || dataRaw === void 0 ? void 0 : dataRaw[_.key]);
-            }))) && !(actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.switch);
+            }))) && ((actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.move) && (actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.switch));
         if (ghostAttributes) {
             Object.keys(ghostAttributes).forEach((key) => {
                 ghost.setAttribute(key, ghostAttributes[key]);