seat-editor 3.5.65 → 3.6.0

package/dist/features/package/index.jsx

@@ -249,8 +249,8 @@ const TableEditor = (props) => {
                   Logo Navbar
                 </div>)}
             </div>
-            <SideTool dragOnly={dragOnly} deleteAutorized={deleteAutorized}/>
-            <Board key={`${viewOnly}`} refs={refsBoard} loadingRender={props === null || props === void 0 ? void 0 : props.loadingRender} disabled={props === null || props === void 0 ? void 0 : props.disabledView}/>
+            <SideTool dragOnly={dragOnly} deleteAutorized={deleteAutorized} priviewActive={props === null || props === void 0 ? void 0 : props.priviewActive}/>
+            <Board key={`${viewOnly}`} refs={refsBoard} loadingRender={props === null || props === void 0 ? void 0 : props.loadingRender} disabled={props === null || props === void 0 ? void 0 : props.disabledView} priviewActive={props === null || props === void 0 ? void 0 : props.priviewActive}/>
             <ControlPanels action={props.action} transform={(_a = refsBoard === null || refsBoard === void 0 ? void 0 : refsBoard.current) === null || _a === void 0 ? void 0 : _a.transformRef}/>
           </div>)}
       </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.Element;
+declare const ControlPanels: (props: ControlPanelsProps) => import("react/jsx-runtime").JSX.Element;
 export default ControlPanels;
 export declare const useFormPlaceholder: () => FormPlaceholderContextType;

package/dist/features/panel/index.js

@@ -343,12 +343,12 @@ const ControlPanels = (props) => {
             unsetPlaceholder,
             setPlaceholderBulk,
             resetPlaceholders,
-        }, children: _jsx("div", { className: clsx("w-[300px] h-full absolute top-0 z-50 transition-all duration-300 overflow-y-scroll mt-[78px]", open ? "right-0" : "right-[-1000px]"), onTransitionEnd: () => {
+        }, children: _jsx("div", { className: clsx("w-[300px] h-full absolute top-0 z-50 transition-all duration-300 mt-[78px]", open ? "right-0" : "right-[-1000px]"), onTransitionEnd: () => {
                 if (open && !hasFocusedRef.current) {
                     form.focusField("text");
                     hasFocusedRef.current = true;
                 }
-            }, children: _jsx("div", { className: "bg-white h-full max-h-screen w-full p-2 overflow-y-auto border-l border-gray-300", children: _jsxs(Form, { layout: "vertical", form: form, name: "table", colon: false, onValuesChange: handleChangeComponent, onFocus: (e) => {
+            }, children: _jsx("div", { className: "bg-white w-full p-2 border-l border-gray-300 overflow-y-auto", style: { height: "calc(100vh - 78px)" }, children: _jsxs(Form, { layout: "vertical", form: form, name: "table", colon: false, onValuesChange: handleChangeComponent, onFocus: (e) => {
                         var _a, _b, _c;
                         e.stopPropagation();
                         const name = e.target.name;

package/dist/features/panel/index.jsx

@@ -343,13 +343,13 @@ const ControlPanels = (props) => {
             setPlaceholderBulk,
             resetPlaceholders,
         }}>
-      <div className={clsx("w-[300px] h-full absolute top-0 z-50 transition-all duration-300 overflow-y-scroll mt-[78px]", open ? "right-0" : "right-[-1000px]")} onTransitionEnd={() => {
+      <div className={clsx("w-[300px] h-full absolute top-0 z-50 transition-all duration-300 mt-[78px]", open ? "right-0" : "right-[-1000px]")} onTransitionEnd={() => {
             if (open && !hasFocusedRef.current) {
                 form.focusField("text");
                 hasFocusedRef.current = true;
             }
         }}>
-        <div className="bg-white h-full max-h-screen w-full p-2 overflow-y-auto border-l border-gray-300">
+        <div className="bg-white w-full p-2 border-l border-gray-300 overflow-y-auto" style={{ height: "calc(100vh - 78px)" }}>
           <Form layout="vertical" form={form} name="table" colon={false} onValuesChange={handleChangeComponent} onFocus={(e) => {
             var _a, _b, _c;
             e.stopPropagation();

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

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

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

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

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

@@ -1,4 +1,4 @@
 declare const SelectedGroup: ({ action, }: {
     action?: (file: File) => Promise<string>;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default SelectedGroup;

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

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { optionsShape } from "../../components/form-tools/shape";
-import { ColorPicker, Flex, Form, InputNumber, Select } from "antd";
+import { ColorPicker, Divider, Flex, Form, InputNumber, Select } from "antd";
 import { useAppSelector } from "../../hooks/use-redux";
 import { useFormPlaceholder } from ".";
 import { MIN_HEIGHT, MIN_WIDTH, MIN_X, MIN_Y } from "../board-v3/constant";
@@ -44,6 +44,6 @@ const SelectedGroup = ({ action, }) => {
                                             if (Number.isNaN(num))
                                                 return null;
                                             return Math.min(100, Math.max(0, num));
-                                        }, suffix: "%" }) }), _jsx(Form.Item, { label: "Font Size", name: "fontSizeLabel", className: "w-full", layout: "horizontal", labelCol: { style: { width: 100, textAlign: "left" } }, wrapperCol: { style: { flex: 1 } }, children: _jsx(InputNumber, { name: "fontSizeLabel", suffix: "px", style: { width: "100%" }, placeholder: placeholders["fontSizeLabel"] }) })] })] })] }) }));
+                                        }, suffix: "%" }) }), _jsx("h1", { className: "heading-s", children: "Section Labeling" }), _jsx(Divider, { style: { margin: 4, marginBottom: 12 } }), _jsx(Form.Item, { label: "Font Size", name: "fontSizeLabel", className: "w-full mt-2", layout: "horizontal", labelCol: { style: { width: 100, textAlign: "left", marginTop: 4 } }, wrapperCol: { style: { flex: 1 } }, children: _jsx(InputNumber, { name: "fontSizeLabel", suffix: "px", style: { width: "100%" }, placeholder: placeholders["fontSizeLabel"] }) })] })] })] }) }));
 };
 export default SelectedGroup;

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

@@ -1,6 +1,6 @@
 "use client";
 import { optionsShape } from "../../components/form-tools/shape";
-import { ColorPicker, Flex, Form, InputNumber, Select } from "antd";
+import { ColorPicker, Divider, Flex, Form, InputNumber, Select } from "antd";
 import { useAppSelector } from "../../hooks/use-redux";
 import { useFormPlaceholder } from ".";
 import { MIN_HEIGHT, MIN_WIDTH, MIN_X, MIN_Y } from "../board-v3/constant";
@@ -122,7 +122,9 @@ const SelectedGroup = ({ action, }) => {
             return Math.min(100, Math.max(0, num));
         }} suffix="%"/>
             </Form.Item>
-            <Form.Item label="Font Size" name={"fontSizeLabel"} className="w-full" layout="horizontal" labelCol={{ style: { width: 100, textAlign: "left" } }} wrapperCol={{ style: { flex: 1 } }}>
+            <h1 className="heading-s">Section Labeling</h1>
+            <Divider style={{ margin: 4, marginBottom: 12 }}/>
+            <Form.Item label="Font Size" name={"fontSizeLabel"} className="w-full mt-2" layout="horizontal" labelCol={{ style: { width: 100, textAlign: "left", marginTop: 4 } }} wrapperCol={{ style: { flex: 1 } }}>
               <InputNumber name={"fontSizeLabel"} suffix="px" style={{ width: "100%" }} placeholder={placeholders["fontSizeLabel"]}/>
             </Form.Item>
           </Flex>

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-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/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-group-tool.d.ts

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

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

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

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

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

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

@@ -0,0 +1,2 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const FontSizeIcon = () => (_jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M7.47998 10.2217C7.86406 10.2217 8.17529 10.5339 8.17529 10.918V12.1357C8.1751 12.5197 7.86394 12.831 7.47998 12.8311C7.09598 12.8311 6.78486 12.5197 6.78467 12.1357V11.6133H5.73975V15.0938H6.26221C6.64625 15.0938 6.95752 15.405 6.95752 15.7891C6.95747 16.1731 6.64622 16.4843 6.26221 16.4844H3.82666C3.44257 16.4844 3.13042 16.1731 3.13037 15.7891C3.13037 15.4049 3.44254 15.0938 3.82666 15.0938H4.34814V11.6133H3.3042V12.1357C3.30401 12.5196 2.99269 12.8308 2.60889 12.8311C2.22488 12.8311 1.91279 12.5197 1.9126 12.1357V10.918C1.9126 10.5338 2.22476 10.2217 2.60889 10.2217H7.47998Z", fill: "black", stroke: "black", strokeWidth: "0.173207" }), _jsx("path", { d: "M14.8271 6.56738C15.2113 6.56738 15.5225 6.87955 15.5225 7.26367V8.48145C15.5223 8.8654 15.2112 9.17676 14.8271 9.17676C14.4431 9.17676 14.132 8.8654 14.1318 8.48145V7.95898H12.4775V15.0928H13C13.3841 15.0928 13.6962 15.404 13.6963 15.7881C13.6963 16.1722 13.3841 16.4834 13 16.4834H10.5645C10.1804 16.4833 9.86914 16.1721 9.86914 15.7881C9.86924 15.4041 10.1805 15.0929 10.5645 15.0928H11.0869V7.95898H9.43359V8.48145C9.4334 8.86526 9.12208 9.17652 8.73828 9.17676C8.35428 9.17676 8.04218 8.8654 8.04199 8.48145V7.26367C8.04199 6.87955 8.35416 6.56738 8.73828 6.56738H14.8271Z", fill: "black", stroke: "black", strokeWidth: "0.173207" }), _jsx("path", { d: "M22.1748 2.91309C22.5589 2.91309 22.8701 3.22525 22.8701 3.60938V4.82715C22.8699 5.21111 22.5588 5.52246 22.1748 5.52246C21.7908 5.52241 21.4797 5.21108 21.4795 4.82715V4.30469H19.2168V15.0918H19.7393C20.1232 15.0918 20.4343 15.4032 20.4346 15.7871C20.4346 16.1712 20.1233 16.4834 19.7393 16.4834H17.3037C16.9196 16.4834 16.6074 16.1712 16.6074 15.7871C16.6077 15.4032 16.9197 15.0918 17.3037 15.0918H17.8262V4.30469H15.5635V4.82715C15.5633 5.21096 15.252 5.52222 14.8682 5.52246C14.4842 5.52246 14.1721 5.21111 14.1719 4.82715V3.60938C14.1719 3.22525 14.484 2.91309 14.8682 2.91309H22.1748Z", fill: "black", stroke: "black", strokeWidth: "0.173207" }), _jsx("path", { d: "M22.1753 17.5283C22.5594 17.5283 22.8706 17.8405 22.8706 18.2246V20.6602C22.8705 21.0442 22.5593 21.3555 22.1753 21.3555C21.7913 21.3554 21.4801 21.0441 21.48 20.6602V20.1377H3.3042V20.6602C3.30406 21.044 2.99272 21.3552 2.60889 21.3555C2.22485 21.3555 1.91274 21.0442 1.9126 20.6602V18.2246C1.9126 17.8405 2.22476 17.5283 2.60889 17.5283C2.9928 17.5286 3.3042 17.8406 3.3042 18.2246V18.7461H21.48V18.2246C21.48 17.8405 21.7912 17.5284 22.1753 17.5283Z", fill: "black", stroke: "black", strokeWidth: "0.173207" })] }));

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

@@ -0,0 +1,6 @@
+export const FontSizeIcon = () => (<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M7.47998 10.2217C7.86406 10.2217 8.17529 10.5339 8.17529 10.918V12.1357C8.1751 12.5197 7.86394 12.831 7.47998 12.8311C7.09598 12.8311 6.78486 12.5197 6.78467 12.1357V11.6133H5.73975V15.0938H6.26221C6.64625 15.0938 6.95752 15.405 6.95752 15.7891C6.95747 16.1731 6.64622 16.4843 6.26221 16.4844H3.82666C3.44257 16.4844 3.13042 16.1731 3.13037 15.7891C3.13037 15.4049 3.44254 15.0938 3.82666 15.0938H4.34814V11.6133H3.3042V12.1357C3.30401 12.5196 2.99269 12.8308 2.60889 12.8311C2.22488 12.8311 1.91279 12.5197 1.9126 12.1357V10.918C1.9126 10.5338 2.22476 10.2217 2.60889 10.2217H7.47998Z" fill="black" stroke="black" strokeWidth="0.173207"/>
+    <path d="M14.8271 6.56738C15.2113 6.56738 15.5225 6.87955 15.5225 7.26367V8.48145C15.5223 8.8654 15.2112 9.17676 14.8271 9.17676C14.4431 9.17676 14.132 8.8654 14.1318 8.48145V7.95898H12.4775V15.0928H13C13.3841 15.0928 13.6962 15.404 13.6963 15.7881C13.6963 16.1722 13.3841 16.4834 13 16.4834H10.5645C10.1804 16.4833 9.86914 16.1721 9.86914 15.7881C9.86924 15.4041 10.1805 15.0929 10.5645 15.0928H11.0869V7.95898H9.43359V8.48145C9.4334 8.86526 9.12208 9.17652 8.73828 9.17676C8.35428 9.17676 8.04218 8.8654 8.04199 8.48145V7.26367C8.04199 6.87955 8.35416 6.56738 8.73828 6.56738H14.8271Z" fill="black" stroke="black" strokeWidth="0.173207"/>
+    <path d="M22.1748 2.91309C22.5589 2.91309 22.8701 3.22525 22.8701 3.60938V4.82715C22.8699 5.21111 22.5588 5.52246 22.1748 5.52246C21.7908 5.52241 21.4797 5.21108 21.4795 4.82715V4.30469H19.2168V15.0918H19.7393C20.1232 15.0918 20.4343 15.4032 20.4346 15.7871C20.4346 16.1712 20.1233 16.4834 19.7393 16.4834H17.3037C16.9196 16.4834 16.6074 16.1712 16.6074 15.7871C16.6077 15.4032 16.9197 15.0918 17.3037 15.0918H17.8262V4.30469H15.5635V4.82715C15.5633 5.21096 15.252 5.52222 14.8682 5.52246C14.4842 5.52246 14.1721 5.21111 14.1719 4.82715V3.60938C14.1719 3.22525 14.484 2.91309 14.8682 2.91309H22.1748Z" fill="black" stroke="black" strokeWidth="0.173207"/>
+    <path d="M22.1753 17.5283C22.5594 17.5283 22.8706 17.8405 22.8706 18.2246V20.6602C22.8705 21.0442 22.5593 21.3555 22.1753 21.3555C21.7913 21.3554 21.4801 21.0441 21.48 20.6602V20.1377H3.3042V20.6602C3.30406 21.044 2.99272 21.3552 2.60889 21.3555C2.22485 21.3555 1.91274 21.0442 1.9126 20.6602V18.2246C1.9126 17.8405 2.22476 17.5283 2.60889 17.5283C2.9928 17.5286 3.3042 17.8406 3.3042 18.2246V18.7461H21.48V18.2246C21.48 17.8405 21.7912 17.5284 22.1753 17.5283Z" fill="black" stroke="black" strokeWidth="0.173207"/>
+  </svg>);

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

@@ -1,8 +1,13 @@
-declare const SideTool: ({ dragOnly, deleteAutorized, }: {
+import { ShowTagType } from "../board-v3/board-slice";
+declare const SideTool: ({ dragOnly, deleteAutorized, priviewActive }: {
     dragOnly?: boolean;
     deleteAutorized?: {
         component: boolean;
         extraComponent: boolean;
     };
-}) => import("react").JSX.Element;
+    priviewActive?: {
+        type: ShowTagType;
+        label: string;
+    }[];
+}) => import("react/jsx-runtime").JSX.Element;
 export default SideTool;

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

@@ -6,7 +6,8 @@ import { Divider, ColorPicker, message, Popover, Flex, } from "antd";
 import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
 import { useState } from "react";
 import clsx from "clsx";
-const SideTool = ({ dragOnly, deleteAutorized, }) => {
+import { FontSizeIcon } from "./icons";
+const SideTool = ({ dragOnly, deleteAutorized, priviewActive }) => {
     const [color, setColor] = useState("#000000");
     const dispatch = useAppDispatch();
     const { active, grid, lockBackground } = useAppSelector((state) => state.tool);
@@ -159,17 +160,34 @@ const SideTool = ({ dragOnly, deleteAutorized, }) => {
         });
         dispatch({ type: "board/setFlagChange", payload: true });
     };
-    const handleOpenModalPreview = () => {
+    const handleOpenModalPreview = (type) => {
+        var _a, _b;
         setOpenPreview(false);
         hanldeSelectTool("select");
         dispatch({
             type: "tool/setTooglePreview",
             payload: true,
         });
+        dispatch({
+            type: "tool/setTooglePreviewType",
+            payload: type,
+        });
         dispatch({
             type: "panel/setSelectedComponent",
             payload: null,
         });
+        if (type === "setting") {
+            dispatch({
+                type: "board/setTagType",
+                payload: (_b = (_a = priviewActive === null || priviewActive === void 0 ? void 0 : priviewActive.filter((f) => f.type !== "default")) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.type,
+            });
+        }
+        else {
+            dispatch({
+                type: "board/setTagType",
+                payload: "default",
+            });
+        }
         dispatch({ type: "board/setFlagChange", payload: true });
     };
     const handleRemoveComponent = () => {
@@ -365,7 +383,7 @@ const SideTool = ({ dragOnly, deleteAutorized, }) => {
                                 icon: preview ? _jsx(EyeOff, {}) : _jsx(Eye, {}),
                                 type: "text",
                                 name: "Preview",
-                                onClick: handleOpenModalPreview,
+                                onClick: () => handleOpenModalPreview("preview"),
                                 style: active === "preview" ? { color: "red" } : {},
                             }, items: [], popoverProps: {
                                 content: _jsx("div", { children: "Preview Tool" }),
@@ -387,6 +405,16 @@ const SideTool = ({ dragOnly, deleteAutorized, }) => {
                             } }), _jsx("span", { className: clsx("absolute right-[-5px] top-[2px]", {
                                 "text-red-500": active === "bounding-box" || active === "preview",
                             }), children: ">" })] }) }), _jsx(ButtonTools, { buttonProps: {
+                    icon: _jsx(FontSizeIcon, {}),
+                    onClick: () => handleOpenModalPreview("setting"),
+                    type: "text",
+                    name: "setfont",
+                    style: active === "setfont" ? { color: "red" } : {},
+                }, items: [], popoverProps: {
+                    content: _jsx("div", { children: "Font Size Setting" }),
+                    trigger: "hover",
+                    placement: "right",
+                } }), _jsx(ButtonTools, { buttonProps: {
                     icon: _jsx(Grid, {}),
                     onClick: () => toggleGrid(),
                     type: "text",

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

@@ -5,7 +5,8 @@ import { Divider, ColorPicker, message, Popover, Flex, } from "antd";
 import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
 import { useState } from "react";
 import clsx from "clsx";
-const SideTool = ({ dragOnly, deleteAutorized, }) => {
+import { FontSizeIcon } from "./icons";
+const SideTool = ({ dragOnly, deleteAutorized, priviewActive }) => {
     const [color, setColor] = useState("#000000");
     const dispatch = useAppDispatch();
     const { active, grid, lockBackground } = useAppSelector((state) => state.tool);
@@ -158,17 +159,34 @@ const SideTool = ({ dragOnly, deleteAutorized, }) => {
         });
         dispatch({ type: "board/setFlagChange", payload: true });
     };
-    const handleOpenModalPreview = () => {
+    const handleOpenModalPreview = (type) => {
+        var _a, _b;
         setOpenPreview(false);
         hanldeSelectTool("select");
         dispatch({
             type: "tool/setTooglePreview",
             payload: true,
         });
+        dispatch({
+            type: "tool/setTooglePreviewType",
+            payload: type,
+        });
         dispatch({
             type: "panel/setSelectedComponent",
             payload: null,
         });
+        if (type === "setting") {
+            dispatch({
+                type: "board/setTagType",
+                payload: (_b = (_a = priviewActive === null || priviewActive === void 0 ? void 0 : priviewActive.filter((f) => f.type !== "default")) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.type,
+            });
+        }
+        else {
+            dispatch({
+                type: "board/setTagType",
+                payload: "default",
+            });
+        }
         dispatch({ type: "board/setFlagChange", payload: true });
     };
     const handleRemoveComponent = () => {
@@ -380,30 +398,18 @@ const SideTool = ({ dragOnly, deleteAutorized, }) => {
                 trigger: "hover",
                 placement: "right",
             }}/>
-            {/* icon={<Scan />}
-              type="text"
-              name="Bounding Box"
-              onClick={() => hanldeSelectTool("bounding-box")}
-              style={active === "bounding-box" ? { color: "red" } : {}}
-            /> */}
 
             <ButtonTools buttonProps={{
                 icon: preview ? <EyeOff /> : <Eye />,
                 type: "text",
                 name: "Preview",
-                onClick: handleOpenModalPreview,
+                onClick: () => handleOpenModalPreview("preview"),
                 style: active === "preview" ? { color: "red" } : {},
             }} items={[]} popoverProps={{
                 content: <div>Preview Tool</div>,
                 trigger: "hover",
                 placement: "right",
             }}/>
-            {/* icon={preview ? <EyeOff /> : <Eye />}
-              type="text"
-              name="Preview"
-              onClick={handleOpenModalPreview}
-              style={active === "preview" ? { color: "red" } : {}}
-            /> */}
           </Flex>}>
         <Flex className="relative">
           <ButtonTools buttonProps={{
@@ -427,7 +433,17 @@ const SideTool = ({ dragOnly, deleteAutorized, }) => {
           </span>
         </Flex>
       </Popover>
-
+      <ButtonTools buttonProps={{
+            icon: <FontSizeIcon />,
+            onClick: () => handleOpenModalPreview("setting"),
+            type: "text",
+            name: "setfont",
+            style: active === "setfont" ? { color: "red" } : {},
+        }} items={[]} popoverProps={{
+            content: <div>Font Size Setting</div>,
+            trigger: "hover",
+            placement: "right",
+        }}/>
       <ButtonTools buttonProps={{
             icon: <Grid />,
             onClick: () => toggleGrid(),

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

@@ -4,12 +4,14 @@ export interface ToolState {
     isPreview: boolean;
     grid: boolean;
     lockBackground: boolean;
+    typePreview: "setting" | "preview" | "none";
 }
 export declare const sideToolSlice: import("@reduxjs/toolkit").Slice<ToolState, {
     setActiveTool: (state: import("immer").WritableDraft<ToolState>, action: PayloadAction<string>) => void;
     setTooglePreview: (state: import("immer").WritableDraft<ToolState>, action: PayloadAction<boolean>) => void;
     setToogleGrid: (state: import("immer").WritableDraft<ToolState>, action: PayloadAction<boolean>) => void;
     setToogleBackground: (state: import("immer").WritableDraft<ToolState>, action: PayloadAction<boolean>) => void;
+    setTooglePreviewType: (state: import("immer").WritableDraft<ToolState>, action: PayloadAction<"setting" | "preview" | "none">) => void;
 }, "tool", "tool", import("@reduxjs/toolkit").SliceSelectors<ToolState>>;
 export declare const setActiveTool: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<string, "tool/setActiveTool">, setTooglePreview: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<boolean, "tool/setTooglePreview">, setToogleGrid: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<boolean, "tool/setToogleGrid">, setToogleBackground: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<boolean, "tool/setToogleBackground">;
 declare const _default: import("redux").Reducer<ToolState>;

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

@@ -4,7 +4,8 @@ const initialState = {
     active: "",
     isPreview: false,
     grid: false,
-    lockBackground: false
+    lockBackground: false,
+    typePreview: "none"
 };
 export const sideToolSlice = createSlice({
     name: "tool",
@@ -15,6 +16,9 @@ export const sideToolSlice = createSlice({
         },
         setTooglePreview: (state, action) => {
             state.isPreview = action.payload;
+            if (!action.payload) {
+                state.typePreview = "none";
+            }
         },
         setToogleGrid: (state, action) => {
             state.grid = action.payload;
@@ -22,6 +26,9 @@ export const sideToolSlice = createSlice({
         setToogleBackground: (state, action) => {
             state.lockBackground = action.payload;
         },
+        setTooglePreviewType: (state, action) => {
+            state.typePreview = action.payload;
+        },
     },
 });
 export const { setActiveTool, setTooglePreview, setToogleGrid, setToogleBackground } = sideToolSlice.actions;

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

@@ -93,5 +93,5 @@ export interface LayerViewProps<TMeta = undefined> {
         double?: 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-3/index.js

@@ -109,7 +109,7 @@ const LayerView = (props) => {
     ]);
     useEffect(() => {
         setTooltip(Object.assign(Object.assign({}, tooltip), { visible: false }));
-    }, [privilegedTags]);
+    }, [privilegedTags, getScaleTransform]);
     useEffect(() => {
         onCurrentStateChange &&
             onCurrentStateChange({
@@ -264,27 +264,6 @@ const LayerView = (props) => {
             return finalProps;
         });
     };
-    const [fingerCount, setFingerCount] = useState(0);
-    useEffect(() => {
-        const container = document.getElementById("workspace");
-        const handleTouchStart = (e) => {
-            const count = e.touches.length;
-            setFingerCount(count);
-        };
-        const handleTouchEnd = () => {
-            setFingerCount(0);
-        };
-        if (container) {
-            container.addEventListener("touchstart", handleTouchStart);
-            container.addEventListener("touchend", handleTouchEnd);
-        }
-        return () => {
-            if (container) {
-                container.removeEventListener("touchstart", handleTouchStart);
-                container.removeEventListener("touchend", handleTouchEnd);
-            }
-        };
-    }, []);
     const handleTableEvent = (event, type) => {
         var _a;
         event.preventDefault();

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

@@ -108,7 +108,7 @@ const LayerView = (props) => {
     ]);
     useEffect(() => {
         setTooltip(Object.assign(Object.assign({}, tooltip), { visible: false }));
-    }, [privilegedTags]);
+    }, [privilegedTags, getScaleTransform]);
     useEffect(() => {
         onCurrentStateChange &&
             onCurrentStateChange({
@@ -263,27 +263,6 @@ const LayerView = (props) => {
             return finalProps;
         });
     };
-    const [fingerCount, setFingerCount] = useState(0);
-    useEffect(() => {
-        const container = document.getElementById("workspace");
-        const handleTouchStart = (e) => {
-            const count = e.touches.length;
-            setFingerCount(count);
-        };
-        const handleTouchEnd = () => {
-            setFingerCount(0);
-        };
-        if (container) {
-            container.addEventListener("touchstart", handleTouchStart);
-            container.addEventListener("touchend", handleTouchEnd);
-        }
-        return () => {
-            if (container) {
-                container.removeEventListener("touchstart", handleTouchStart);
-                container.removeEventListener("touchend", handleTouchEnd);
-            }
-        };
-    }, []);
     const handleTableEvent = (event, type) => {
         var _a;
         event.preventDefault();

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

package/dist/provider/antd-provider.js

@@ -41,8 +41,11 @@ export const AntdProvider = ({ children, themeColor }) => {
                     Select: {
                         optionHeight: 40,
                     },
-                    Segmented: {
-                        itemSelectedBg: "#000000"
+                    Radio: {
+                        colorPrimary: "#3E97FF",
+                        radioSize: 24,
+                        dotSize: 12,
+                        colorText: "#5E6278"
                     }
                 },
             }, children: children }) }));

package/dist/provider/antd-provider.jsx

@@ -41,8 +41,11 @@ export const AntdProvider = ({ children, themeColor }) => {
                 Select: {
                     optionHeight: 40,
                 },
-                Segmented: {
-                    itemSelectedBg: "#000000"
+                Radio: {
+                    colorPrimary: "#3E97FF",
+                    radioSize: 24,
+                    dotSize: 12,
+                    colorText: "#5E6278"
                 }
             },
         }}>

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

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

package/package.json

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