seat-editor 3.5.66 → 3.6.1

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

@@ -14,3 +14,6 @@ export const RsvpIcons = {
     walk: (props) => (_jsx("svg", Object.assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: _jsx("path", { d: "M13.0233 5.09302C14.1489 5.09302 15.0698 4.17209 15.0698 3.04651C15.0698 1.92093 14.1489 1 13.0233 1C11.8977 1 10.9768 1.92093 10.9768 3.04651C10.9768 4.17209 11.8977 5.09302 13.0233 5.09302ZM9.23725 8.57209L6.61771 21.7823C6.48469 22.4065 6.97585 23 7.62051 23H7.70237C8.1833 23 8.5926 22.6726 8.70516 22.2019L10.3628 14.814L12.5117 16.8605V21.9767C12.5117 22.5395 12.9721 23 13.5349 23C14.0977 23 14.5582 22.5395 14.5582 21.9767V16.2056C14.5582 15.6428 14.3331 15.1107 13.9238 14.7219L12.4093 13.2791L13.0233 10.2093C14.1764 11.5276 15.755 12.4002 17.4847 12.6753C18.0986 12.7674 18.6512 12.2763 18.6512 11.6521C18.6512 11.1507 18.2828 10.7312 17.7814 10.6493C16.2261 10.3935 14.9368 9.47256 14.2512 8.26512L13.2279 6.62791C12.9516 6.18602 12.527 5.85689 12.0302 5.69941C11.5334 5.54193 10.9968 5.56638 10.5163 5.76837L6.59725 7.42605C6.22654 7.5845 5.91057 7.84841 5.68862 8.18498C5.46667 8.52154 5.34853 8.91591 5.34888 9.31907V11.7442C5.34888 12.307 5.80934 12.7674 6.37213 12.7674C6.93492 12.7674 7.39539 12.307 7.39539 11.7442V9.28837L9.23725 8.57209Z", fill: "currentColor" }) }))),
     people: (props) => (_jsxs("svg", Object.assign({ width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [_jsx("path", { d: "M8.40752 11.6627C9.79514 11.6627 10.92 10.5378 10.92 9.15019C10.92 7.76258 9.79514 6.6377 8.40752 6.6377C7.0199 6.6377 5.89502 7.76258 5.89502 9.15019C5.89502 10.5378 7.0199 11.6627 8.40752 11.6627Z", fill: "#5E6278" }), _jsx("path", { d: "M8.4076 16.5002C10.1307 16.5002 11.5276 15.6171 11.5276 14.5277C11.5276 13.4383 10.1307 12.5552 8.4076 12.5552C6.68447 12.5552 5.2876 13.4383 5.2876 14.5277C5.2876 15.6171 6.68447 16.5002 8.4076 16.5002Z", fill: "#5E6278" }), _jsx("path", { opacity: "0.3", d: "M12.3826 5.73C13.5507 5.73 14.4976 4.78308 14.4976 3.615C14.4976 2.44692 13.5507 1.5 12.3826 1.5C11.2145 1.5 10.2676 2.44692 10.2676 3.615C10.2676 4.78308 11.2145 5.73 12.3826 5.73Z", fill: "#5E6278" }), _jsx("path", { opacity: "0.3", d: "M4.41017 5.73C5.57825 5.73 6.52517 4.78308 6.52517 3.615C6.52517 2.44692 5.57825 1.5 4.41017 1.5C3.24208 1.5 2.29517 2.44692 2.29517 3.615C2.29517 4.78308 3.24208 5.73 4.41017 5.73Z", fill: "#5E6278" }), _jsxs("g", { opacity: "0.3", children: [_jsx("path", { d: "M12.2625 7.37256C12.0225 7.37256 11.79 7.37256 11.5575 7.41006C11.9105 8.02313 12.0701 8.72856 12.0152 9.43388C11.9603 10.1392 11.6936 10.8115 11.25 11.3626C11.586 11.4291 11.9275 11.4642 12.27 11.4676C14.175 11.4676 15.7125 10.5451 15.7125 9.42006C15.7125 8.29506 14.1675 7.37256 12.2625 7.37256Z", fill: "#5E6278" }), _jsx("path", { d: "M4.2375 7.5C4.4775 7.5 4.71 7.5 4.9425 7.5375C4.58947 8.15057 4.42993 8.856 4.4848 9.56132C4.53968 10.2666 4.8064 10.9389 5.25 11.49C4.91399 11.5565 4.57252 11.5917 4.23 11.595C2.325 11.595 0.7875 10.6725 0.7875 9.5475C0.7875 8.4225 2.3325 7.5 4.2375 7.5Z", fill: "#5E6278" })] })] }))),
 };
+export const WarningIcon = () => {
+    return (_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { opacity: "0.3", d: "M9.99935 18.3346C14.6017 18.3346 18.3327 14.6037 18.3327 10.0013C18.3327 5.39893 14.6017 1.66797 9.99935 1.66797C5.39698 1.66797 1.66602 5.39893 1.66602 10.0013C1.66602 14.6037 5.39698 18.3346 9.99935 18.3346Z", fill: "#5E6278" }), _jsx("path", { d: "M9.99935 8.83594C10.2204 8.83594 10.4323 8.92373 10.5886 9.08001C10.7449 9.23629 10.8327 9.44826 10.8327 9.66927V13.5526C10.8327 13.7736 10.7449 13.9856 10.5886 14.1419C10.4323 14.2981 10.2204 14.3859 9.99935 14.3859C9.77834 14.3859 9.56637 14.2981 9.41009 14.1419C9.25381 13.9856 9.16602 13.7736 9.16602 13.5526V9.66927C9.16602 9.44826 9.25381 9.23629 9.41009 9.08001C9.56637 8.92373 9.77834 8.83594 9.99935 8.83594Z", fill: "#5E6278" }), _jsx("path", { d: "M9.9987 7.70052C10.574 7.70052 11.0404 7.23415 11.0404 6.65885C11.0404 6.08356 10.574 5.61719 9.9987 5.61719C9.4234 5.61719 8.95703 6.08356 8.95703 6.65885C8.95703 7.23415 9.4234 7.70052 9.9987 7.70052Z", fill: "#5E6278" })] }));
+};

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

@@ -98,3 +98,10 @@ export const RsvpIcons = {
       </g>
     </svg>),
 };
+export const WarningIcon = () => {
+    return (<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path opacity="0.3" d="M9.99935 18.3346C14.6017 18.3346 18.3327 14.6037 18.3327 10.0013C18.3327 5.39893 14.6017 1.66797 9.99935 1.66797C5.39698 1.66797 1.66602 5.39893 1.66602 10.0013C1.66602 14.6037 5.39698 18.3346 9.99935 18.3346Z" fill="#5E6278"/>
+      <path d="M9.99935 8.83594C10.2204 8.83594 10.4323 8.92373 10.5886 9.08001C10.7449 9.23629 10.8327 9.44826 10.8327 9.66927V13.5526C10.8327 13.7736 10.7449 13.9856 10.5886 14.1419C10.4323 14.2981 10.2204 14.3859 9.99935 14.3859C9.77834 14.3859 9.56637 14.2981 9.41009 14.1419C9.25381 13.9856 9.16602 13.7736 9.16602 13.5526V9.66927C9.16602 9.44826 9.25381 9.23629 9.41009 9.08001C9.56637 8.92373 9.77834 8.83594 9.99935 8.83594Z" fill="#5E6278"/>
+      <path d="M9.9987 7.70052C10.574 7.70052 11.0404 7.23415 11.0404 6.65885C11.0404 6.08356 10.574 5.61719 9.9987 5.61719C9.4234 5.61719 8.95703 6.08356 8.95703 6.65885C8.95703 7.23415 9.4234 7.70052 9.9987 7.70052Z" fill="#5E6278"/>
+    </svg>);
+};

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

@@ -1,5 +1,6 @@
 import React from "react";
 import { ReactZoomPanPinchRef } from "react-zoom-pan-pinch";
+import { ShowTagType } from "./board-slice";
 export type RefsType = {
     svgRef: SVGSVGElement | null;
     transformRef: ReactZoomPanPinchRef | null;
@@ -12,6 +13,10 @@ interface BoardTemplateProps {
         element: React.JSX.Element;
     };
     disabled?: boolean;
+    priviewActive?: {
+        type: ShowTagType;
+        label: string;
+    }[];
 }
-declare const BoardTemplate: ({ refs, loadingRender, disabled, }: BoardTemplateProps) => import("react/jsx-runtime").JSX.Element;
+declare const BoardTemplate: ({ refs, loadingRender, disabled, priviewActive, }: BoardTemplateProps) => import("react/jsx-runtime").JSX.Element;
 export default BoardTemplate;

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

@@ -13,11 +13,13 @@ import { Button, Flex, Radio, Slider, Tag, } from "antd";
 import { getAttributeElement, getAttributeElements } from "./resize-element";
 import { applyResizeToSvgElement, arrayToSvgPointsAttr, createTableGhost, getGlobalBBox, getRotation, getSvgElementSize, getTranslate, isClosingPolygon, normalizeAngle, pointsStringToArray, resizeBox, resizeSeatCircle, resizeSeatRectCircle, resizeSeatRectSquare, resizeSeatSide, resizeSeatSquare, stabilizeRotation, stabilizeTranslateOnRotate, updateManyComponents, updateSelectionBox, updateSelectionGuides, updateSingleComponent, } from "./utils";
 import { getOS } from "../../utils/agent";
-import { MIN_HEIGHT, MIN_WIDTH, ZOOM_STEP, ZOOM_MAX, ZOOM_MIN, } from "./constant";
+import { MIN_HEIGHT, MIN_WIDTH, ZOOM_STEP, ZOOM_MAX, ZOOM_MIN, FONT_SCALES, } from "./constant";
+import ButtonRadio from "../../components/button-radio";
+import { WarningIcon } from "./icons";
 const toolElement = ["square", "circle", "table-seat-circle"];
 const idSelectionBoxGhost = "selection-box-ghost";
 const nameShapeSelectionBoxGhost = "selection-box";
-const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
+const BoardTemplate = ({ refs, loadingRender, disabled = false, priviewActive = [], }) => {
     const os = getOS();
     const dispatch = useAppDispatch();
     const backgroundColor = useAppSelector((state) => state.board.backgroundColor);
@@ -74,6 +76,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
     //boundingbox
     const isInialBoundingBox = useRef(false);
     const { components: componentsProps, extraComponents: extraComponentsProps, boundingBox, flagChange, updateBy, isShowTagType, } = useAppSelector((state) => state.board);
+    console.log("isShowTagType", isShowTagType);
     const selectedGroup = useAppSelector((state) => state.panel.selectedGroup);
     const { selectionLines } = useAppSelector((state) => state.panel);
     const [selectedLines, setSelectedLines] = useState(null);
@@ -1398,7 +1401,14 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
                     polygonElementRef.current = [];
                     addComponents(Object.assign(Object.assign({}, newPoints), { x: 0, y: 0, width,
                         height, labels: [
-                            { label: "", x: 0, y: 0, fontSize: 12, fontColor: "#000000", rotation: 0 },
+                            {
+                                label: "",
+                                x: 0,
+                                y: 0,
+                                fontSize: 12,
+                                fontColor: "#000000",
+                                rotation: 0,
+                            },
                         ], opacity: 0.5, rotation: 0, strokeWidth: 0 }));
                     (_e = svg.querySelector("#selection-box-ghost")) === null || _e === void 0 ? void 0 : _e.remove();
                     (_f = svg.querySelector("#polyline-helper")) === null || _f === void 0 ? void 0 : _f.setAttribute("opacity", "0");
@@ -1840,26 +1850,11 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
             //lin helper from start to move
         }
     };
-    const handleCheckPreview = (e) => {
-        const type = e.target.value;
-        if (type === "type-1") {
-            dispatch({
-                type: "board/setTagType",
-                payload: type,
-            });
-        }
-        if (type === "type-2") {
-            dispatch({
-                type: "board/setTagType",
-                payload: type,
-            });
-        }
-        if (type === "default") {
-            dispatch({
-                type: "board/setTagType",
-                payload: type,
-            });
-        }
+    const handleCheckPreview = (v) => {
+        dispatch({
+            type: "board/setTagType",
+            payload: v,
+        });
     };
     const footerInfoList = useMemo(() => {
         return [
@@ -1953,32 +1948,51 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
             value: 1.5,
         },
     ];
-    // const handleClickButtonFontScaling = (value: number, type: string) => {
-    //   dispatch({
-    //     type: "board/setScalingFontSize",
-    //     payload: {
-    //       value,
-    //       type,
-    //     },
-    //   });
-    // };
-    // const valuesScalingFontSize = () => {
-    //   const pickOneSample = componentsState?.[0];
-    //   if (isShowTagType === "type-1") {
-    //     console.log({ pickOneSample });
-    //     return pickOneSample?.fontSizeType1;
-    //   }
-    //   if (isShowTagType === "type-2") {
-    //     return pickOneSample?.fontSizeType2;
-    //   }
-    // };
-    return (_jsxs(_Fragment, { children: [_jsxs(ModalPreview, { children: [_jsx(LayerView, { statusKey: "status", loadingRender: loadingRender, actionPrivileged: {
-                            select: false,
-                            move: false,
-                            switch: false,
-                            drop: false,
-                            rightClick: false,
-                        }, defaultBoundingBox: boundingBox }), _jsx("div", { className: "flex gap-2 mt-2", children: _jsxs(Radio.Group, { value: isShowTagType, onChange: handleCheckPreview, children: [_jsx(Radio, { value: "default", children: "Customer View" }), _jsx(Radio, { value: "type-1", children: "Layout View" }), _jsx(Radio, { value: "type-2", children: "Next 3 Reservation" })] }) })] }), _jsxs("div", { className: "relative w-full h-screen flex-1 overflow-hidden mt-[78px]", ref: containerRef, children: [_jsx("div", { style: {
+    const handleClickButtonFontScaling = (value, type) => {
+        dispatch({
+            type: "board/setScalingFontSize",
+            payload: {
+                value,
+                type,
+            },
+        });
+        dispatch({ type: "board/setFlagChange", payload: true });
+        dispatch({ type: "board/setUpdateBy", payload: "global" });
+    };
+    const valuesScalingFontSize = () => {
+        const pickOneSample = componentsState === null || componentsState === void 0 ? void 0 : componentsState[0];
+        if (isShowTagType === "type-1") {
+            return (pickOneSample === null || pickOneSample === void 0 ? void 0 : pickOneSample.fontSizeType1) || 1;
+        }
+        if (isShowTagType === "type-2") {
+            return (pickOneSample === null || pickOneSample === void 0 ? void 0 : pickOneSample.fontSizeType2) || 1;
+        }
+        if (isShowTagType === "type-3") {
+            return (pickOneSample === null || pickOneSample === void 0 ? void 0 : pickOneSample.fontSizeType3) || 1;
+        }
+        return 1;
+    };
+    const { typePreview } = useAppSelector((state) => state.tool);
+    const previewTabValue = typePreview === "setting"
+        ? priviewActive === null || priviewActive === void 0 ? void 0 : priviewActive.filter((item) => item.type !== "default")
+        : priviewActive;
+    return (_jsxs(_Fragment, { children: [_jsx(ModalPreview, { modalProps: {
+                    footer: typePreview === "setting" && isShowTagType !== "default" && (_jsx(_Fragment, { children: _jsxs("div", { className: "flex gap-2 p-[20px]", children: [_jsx("span", { className: "font-bold text-[14px]", children: "Select Font Size:" }), _jsx(Radio.Group, { value: valuesScalingFontSize(), onChange: (e) => {
+                                        handleClickButtonFontScaling(e.target.value, isShowTagType);
+                                    }, children: FONT_SCALES === null || FONT_SCALES === void 0 ? void 0 : FONT_SCALES.map((item) => (_jsx(Radio, { value: item.value, children: item.label }, item.value))) })] }) })),
+                    title: (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex flex-col gap-[20px] p-[20px]", children: _jsx("h1", { className: "text-[22px] font-semibold leading-[22px]", children: typePreview === "setting"
+                                        ? "Font Size Setting"
+                                        : "Preview Board" }) }), _jsx("div", { className: "w-full h-[1px] bg-[#E6E6E6]" }), _jsx("div", { className: "p-[10px]", children: _jsx(ButtonRadio, { onChange: (val) => handleCheckPreview(val), options: previewTabValue === null || previewTabValue === void 0 ? void 0 : previewTabValue.map((item) => ({
+                                        label: item.label,
+                                        value: item.type,
+                                    })), value: isShowTagType }) }), typePreview === "setting" && (_jsxs("div", { className: "py-2.5 px-3 bg-[#FFF8DD] border-[#FFC700] border text-[#181C32] flex gap-2.5 text-[12px] font-semibold items-center tracking-[0%]", children: [_jsx(WarningIcon, {}), " Font adjustments made here are scaled based on the original font sizes set in the main layout. Changes made here affect the operational layouts only, without changing your main editing canvas."] }))] })),
+                }, children: _jsx(LayerView, { statusKey: "status", loadingRender: loadingRender, actionPrivileged: {
+                        select: false,
+                        move: false,
+                        switch: false,
+                        drop: false,
+                        rightClick: false,
+                    }, defaultBoundingBox: boundingBox }) }), _jsxs("div", { className: "relative w-full h-screen flex-1 overflow-hidden mt-[78px]", ref: containerRef, children: [_jsx("div", { style: {
                             position: "absolute",
                             bottom: "118px",
                             left: "50%",

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

@@ -12,11 +12,13 @@ import { Button, Flex, Radio, Slider, Tag, } from "antd";
 import { getAttributeElement, getAttributeElements } from "./resize-element";
 import { applyResizeToSvgElement, arrayToSvgPointsAttr, createTableGhost, getGlobalBBox, getRotation, getSvgElementSize, getTranslate, isClosingPolygon, normalizeAngle, pointsStringToArray, resizeBox, resizeSeatCircle, resizeSeatRectCircle, resizeSeatRectSquare, resizeSeatSide, resizeSeatSquare, stabilizeRotation, stabilizeTranslateOnRotate, updateManyComponents, updateSelectionBox, updateSelectionGuides, updateSingleComponent, } from "./utils";
 import { getOS } from "../../utils/agent";
-import { MIN_HEIGHT, MIN_WIDTH, ZOOM_STEP, ZOOM_MAX, ZOOM_MIN, } from "./constant";
+import { MIN_HEIGHT, MIN_WIDTH, ZOOM_STEP, ZOOM_MAX, ZOOM_MIN, FONT_SCALES, } from "./constant";
+import ButtonRadio from "../../components/button-radio";
+import { WarningIcon } from "./icons";
 const toolElement = ["square", "circle", "table-seat-circle"];
 const idSelectionBoxGhost = "selection-box-ghost";
 const nameShapeSelectionBoxGhost = "selection-box";
-const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
+const BoardTemplate = ({ refs, loadingRender, disabled = false, priviewActive = [], }) => {
     const os = getOS();
     const dispatch = useAppDispatch();
     const backgroundColor = useAppSelector((state) => state.board.backgroundColor);
@@ -73,6 +75,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
     //boundingbox
     const isInialBoundingBox = useRef(false);
     const { components: componentsProps, extraComponents: extraComponentsProps, boundingBox, flagChange, updateBy, isShowTagType, } = useAppSelector((state) => state.board);
+    console.log("isShowTagType", isShowTagType);
     const selectedGroup = useAppSelector((state) => state.panel.selectedGroup);
     const { selectionLines } = useAppSelector((state) => state.panel);
     const [selectedLines, setSelectedLines] = useState(null);
@@ -1397,7 +1400,14 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
                     polygonElementRef.current = [];
                     addComponents(Object.assign(Object.assign({}, newPoints), { x: 0, y: 0, width,
                         height, labels: [
-                            { label: "", x: 0, y: 0, fontSize: 12, fontColor: "#000000", rotation: 0 },
+                            {
+                                label: "",
+                                x: 0,
+                                y: 0,
+                                fontSize: 12,
+                                fontColor: "#000000",
+                                rotation: 0,
+                            },
                         ], opacity: 0.5, rotation: 0, strokeWidth: 0 }));
                     (_e = svg.querySelector("#selection-box-ghost")) === null || _e === void 0 ? void 0 : _e.remove();
                     (_f = svg.querySelector("#polyline-helper")) === null || _f === void 0 ? void 0 : _f.setAttribute("opacity", "0");
@@ -1839,26 +1849,11 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
             //lin helper from start to move
         }
     };
-    const handleCheckPreview = (e) => {
-        const type = e.target.value;
-        if (type === "type-1") {
-            dispatch({
-                type: "board/setTagType",
-                payload: type,
-            });
-        }
-        if (type === "type-2") {
-            dispatch({
-                type: "board/setTagType",
-                payload: type,
-            });
-        }
-        if (type === "default") {
-            dispatch({
-                type: "board/setTagType",
-                payload: type,
-            });
-        }
+    const handleCheckPreview = (v) => {
+        dispatch({
+            type: "board/setTagType",
+            payload: v,
+        });
     };
     const footerInfoList = useMemo(() => {
         return [
@@ -1952,28 +1947,105 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
             value: 1.5,
         },
     ];
-    // const handleClickButtonFontScaling = (value: number, type: string) => {
-    //   dispatch({
-    //     type: "board/setScalingFontSize",
-    //     payload: {
-    //       value,
-    //       type,
-    //     },
-    //   });
-    // };
-    // const valuesScalingFontSize = () => {
-    //   const pickOneSample = componentsState?.[0];
-    //   if (isShowTagType === "type-1") {
-    //     console.log({ pickOneSample });
-    //     return pickOneSample?.fontSizeType1;
-    //   }
-    //   if (isShowTagType === "type-2") {
-    //     return pickOneSample?.fontSizeType2;
-    //   }
-    // };
+    const handleClickButtonFontScaling = (value, type) => {
+        dispatch({
+            type: "board/setScalingFontSize",
+            payload: {
+                value,
+                type,
+            },
+        });
+        dispatch({ type: "board/setFlagChange", payload: true });
+        dispatch({ type: "board/setUpdateBy", payload: "global" });
+    };
+    const valuesScalingFontSize = () => {
+        const pickOneSample = componentsState === null || componentsState === void 0 ? void 0 : componentsState[0];
+        if (isShowTagType === "type-1") {
+            return (pickOneSample === null || pickOneSample === void 0 ? void 0 : pickOneSample.fontSizeType1) || 1;
+        }
+        if (isShowTagType === "type-2") {
+            return (pickOneSample === null || pickOneSample === void 0 ? void 0 : pickOneSample.fontSizeType2) || 1;
+        }
+        if (isShowTagType === "type-3") {
+            return (pickOneSample === null || pickOneSample === void 0 ? void 0 : pickOneSample.fontSizeType3) || 1;
+        }
+        return 1;
+    };
+    const { typePreview } = useAppSelector((state) => state.tool);
+    const previewTabValue = typePreview === "setting"
+        ? priviewActive === null || priviewActive === void 0 ? void 0 : priviewActive.filter((item) => item.type !== "default")
+        : priviewActive;
     return (<>
-      <ModalPreview>
-       
+      <ModalPreview modalProps={{
+            footer: typePreview === "setting" && isShowTagType !== "default" && (<>
+              <div className="flex gap-2 p-[20px]">
+                <span className="font-bold text-[14px]">Select Font Size:</span>
+
+                <Radio.Group value={valuesScalingFontSize()} onChange={(e) => {
+                    handleClickButtonFontScaling(e.target.value, isShowTagType);
+                }}>
+                  {FONT_SCALES === null || FONT_SCALES === void 0 ? void 0 : FONT_SCALES.map((item) => (<Radio key={item.value} value={item.value}>
+                      {item.label}
+                    </Radio>))}
+                </Radio.Group>
+              </div>
+
+              {/* <div className="w-full h-[1px] bg-[#E6E6E6]" /> */}
+              {/* <div className="flex justify-between p-[20px]">
+                  <Button
+                    htmlType="button"
+                    style={{
+                      padding: "12px 23px",
+                      color: "black",
+                      border: "1px solid #E1E3EA",
+                      background: "white",
+                      fontSize: "13px",
+                      lineHeight: "14px",
+                      fontWeight: 600,
+                      height: 38,
+                    }}
+                  >
+                    Cancel
+                  </Button>
+                  <Button
+                    htmlType="button"
+                    style={{
+                      background: "#181E49",
+                      color: "white",
+                      padding: "12px 23px",
+                      fontSize: "13px",
+                      lineHeight: "14px",
+                      fontWeight: 600,
+                      height: 38,
+                    }}
+                  >
+                    Save
+                  </Button>
+                </div> */}
+            </>),
+            title: (<>
+              <div className="flex flex-col gap-[20px] p-[20px]">
+                <h1 className="text-[22px] font-semibold leading-[22px]">
+                  {typePreview === "setting"
+                    ? "Font Size Setting"
+                    : "Preview Board"}
+                </h1>
+              </div>
+              <div className="w-full h-[1px] bg-[#E6E6E6]"/>
+              <div className="p-[10px]">
+                <ButtonRadio onChange={(val) => handleCheckPreview(val)} options={previewTabValue === null || previewTabValue === void 0 ? void 0 : previewTabValue.map((item) => ({
+                    label: item.label,
+                    value: item.type,
+                }))} value={isShowTagType}/>
+              </div>
+              {typePreview === "setting" && (<div className="py-2.5 px-3 bg-[#FFF8DD] border-[#FFC700] border text-[#181C32] flex gap-2.5 text-[12px] font-semibold items-center tracking-[0%]">
+                <WarningIcon /> Font adjustments made here are scaled based on
+                the original font sizes set in the main layout. Changes made
+                here affect the operational layouts only, without changing your
+                main editing canvas.
+              </div>)}
+            </>),
+        }}>
         <LayerView statusKey="status" loadingRender={loadingRender} actionPrivileged={{
             select: false,
             move: false,
@@ -1981,30 +2053,6 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
             drop: false,
             rightClick: false,
         }} defaultBoundingBox={boundingBox}/>
-        {/* {isShowTagType !== "default" && (
-          <div className="flex gap-2 mt-2">
-            {scalingFontSize?.map((item) => (
-              <Button
-                type="default"
-                htmlType="button"
-                onClick={() =>
-                  handleClickButtonFontScaling(item.value, isShowTagType)
-                }
-              >
-                {item.label}
-              </Button>
-            ))}
-            <span>{valuesScalingFontSize()}</span>
-            <InputNumber prefix="x" value={valuesScalingFontSize()} />
-          </div>
-        )} */}
-         <div className="flex gap-2 mt-2">
-          <Radio.Group value={isShowTagType} onChange={handleCheckPreview}>
-            <Radio value="default">Customer View</Radio>
-            <Radio value="type-1">Layout View</Radio>
-            <Radio value="type-2">Next 3 Reservation</Radio>
-          </Radio.Group>
-        </div>
       </ModalPreview>
       <div className="relative w-full h-screen flex-1 overflow-hidden mt-[78px]" ref={containerRef}>
         <div style={{

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

@@ -226,7 +226,7 @@ export const resizeSeatSquare = ({ seatsPositions, r = 10, openSpace, newElement
         id: "left",
     }));
     const bottomXs = distributeWithSpacing({
-        start: 0,
+        start: newElement.x,
         length: newElement.width,
         count: bottomCount,
         radius: r,
@@ -305,7 +305,7 @@ export const resizeSeatSide = ({ seatsPositions, r = 10, openSpace, newElement,
     let left = [];
     let bottom = [];
     let right = [];
-    const seatRaidus = Math.max(newElement.width, newElement.height) * 0.15;
+    const seatRadius = Math.max(newElement.width, newElement.height) * 0.15;
     const topCount = seatsPositions.top;
     const rightCount = seatsPositions.right;
     const bottomCount = seatsPositions.bottom;
@@ -332,77 +332,77 @@ export const resizeSeatSide = ({ seatsPositions, r = 10, openSpace, newElement,
         }
     }
     const topXs = distributeWithSpacing({
-        start: newElement.x,
+        start: 0,
         length: newElement.width,
         count: topCount,
-        radius: seatRaidus,
+        radius: seatRadius,
         spacing: spacingWidth,
     });
     const topSeats = topXs.map((cx) => ({
         cx,
-        cy: newElement.y - seatRaidus,
+        cy: seatRadius,
         id: "top",
         d: arcByDirection({
             cx,
-            cy: newElement.y - seatRaidus * 0.1,
-            r: seatRaidus,
+            cy: seatRadius * 0.1,
+            r: seatRadius,
             direction: "top",
             fraction: 0.4,
         }),
     }));
     const leftYs = distributeWithSpacing({
-        start: newElement.y,
+        start: 0,
         length: newElement.height,
         count: leftCount,
-        radius: seatRaidus,
+        radius: seatRadius,
         spacing: spacingHeight,
     });
     const leftSeats = leftYs.map((cy) => ({
-        cx: newElement.x - seatRaidus * 0.1,
+        cx: seatRadius * 0.1,
         cy,
         id: "left",
         d: arcByDirection({
-            cx: newElement.x - seatRaidus * 0.1,
+            cx: seatRadius * 0.1,
             cy,
-            r: seatRaidus,
+            r: seatRadius,
             direction: "left",
             fraction: 0.4,
         }),
     }));
     const bottomXs = distributeWithSpacing({
-        start: newElement.x,
+        start: 0,
         length: newElement.width,
         count: bottomCount,
-        radius: seatRaidus,
+        radius: seatRadius,
         spacing: spacingWidth,
     });
     const bottomSeats = bottomXs.map((cx) => ({
         cx,
-        cy: newElement.y + newElement.height + seatRaidus * 0.1,
+        cy: newElement.height + seatRadius * 0.1,
         id: "bottom",
         d: arcByDirection({
             cx,
-            cy: newElement.y + newElement.height + seatRaidus * 0.1,
-            r: seatRaidus,
+            cy: newElement.height + seatRadius * 0.1,
+            r: seatRadius,
             direction: "bottom",
             fraction: 0.4,
         }),
     }));
     const rightYs = distributeWithSpacing({
-        start: newElement.y,
+        start: 0,
         length: newElement.height,
         count: rightCount,
-        radius: seatRaidus,
+        radius: seatRadius,
         spacing: spacingHeight,
     });
     const rightSeats = rightYs.map((cy) => ({
-        cx: newElement.x + newElement.width + seatRaidus * 0.1,
+        cx: newElement.width + seatRadius * 0.1,
         cy,
         id: "right",
         d: arcByDirection({
-            cx: newElement.x + newElement.width + seatRaidus * 0.1,
+            cx: newElement.width + seatRadius * 0.1,
             cy,
-            r: seatRaidus,
+            r: seatRadius,
             direction: "right",
             fraction: 0.4,
         }),
@@ -423,7 +423,10 @@ export const resizeSeatSide = ({ seatsPositions, r = 10, openSpace, newElement,
         var _a;
         seat.setAttribute("d", (_a = rightSeats[i]) === null || _a === void 0 ? void 0 : _a.d);
     });
-    seatGroup === null || seatGroup === void 0 ? void 0 : seatGroup.setAttribute("transform", `translate(${-newElement.x}, ${-newElement.y})`);
+    // seatGroup?.setAttribute(
+    //   "transform",
+    //   `translate(${-newElement.x}, ${-newElement.y})`
+    // );
 };
 export const resizeSeatRectCircle = ({ seatsPositions, r = 10, openSpace, newElement, seats, seatGroup, }) => {
     let top = [];
@@ -1029,15 +1032,32 @@ const updateSvgAttrs = (el, attrs) => {
     }
 };
 export function applyResizeToSvgElement(element, group, resize, text, textRaw) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const horizontalAlign = (_c = (_b = (_a = resize === null || resize === void 0 ? void 0 : resize.labels) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.horizontalAlign) !== null && _c !== void 0 ? _c : "middle";
+    const verticalAlign = (_f = (_e = (_d = resize === null || resize === void 0 ? void 0 : resize.labels) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.verticalAlign) !== null && _f !== void 0 ? _f : "middle";
+    const PADDING = 0;
+    const getX = (labelX = 0, horizontalAlign = "middle") => {
+        if (horizontalAlign === "start")
+            return PADDING + labelX;
+        if (horizontalAlign === "end")
+            return resize.width - PADDING + labelX;
+        return resize.width / 2 + labelX;
+    };
+    const getY = (labelY = 0, verticalAlign = "middle") => {
+        if (verticalAlign === "hanging")
+            return PADDING + labelY;
+        if (verticalAlign === "auto")
+            return resize.height - PADDING + labelY;
+        return resize.height / 2 + labelY;
+    };
     const tagName = element.tagName.toLowerCase();
     switch (tagName) {
         case "rect":
         case "image": {
             const width = resize.width < MIN_WIDTH ? MIN_WIDTH : Math.round(resize.width);
             const height = resize.height < MIN_HEIGHT ? MIN_HEIGHT : Math.round(resize.height);
-            const rotation = (_a = resize.rotation) !== null && _a !== void 0 ? _a : 0;
-            const labelsDefault = (_b = resize === null || resize === void 0 ? void 0 : resize.labels) !== null && _b !== void 0 ? _b : [];
+            const rotation = (_g = resize.rotation) !== null && _g !== void 0 ? _g : 0;
+            const labelsDefault = (_h = resize === null || resize === void 0 ? void 0 : resize.labels) !== null && _h !== void 0 ? _h : [];
             updateSvgAttrs(element, {
                 width,
                 height,
@@ -1051,8 +1071,8 @@ export function applyResizeToSvgElement(element, group, resize, text, textRaw) {
             textRaw === null || textRaw === void 0 ? void 0 : textRaw.setAttribute("y", String(height / 2));
             const origintext = text === null || text === void 0 ? void 0 : text.querySelector("text");
             if (origintext) {
-                origintext.setAttribute("x", String((width / 2) + ((_c = labelsDefault === null || labelsDefault === void 0 ? void 0 : labelsDefault[0]) === null || _c === void 0 ? void 0 : _c.x)));
-                origintext.setAttribute("y", String((height / 2) + ((_d = labelsDefault === null || labelsDefault === void 0 ? void 0 : labelsDefault[0]) === null || _d === void 0 ? void 0 : _d.y)));
+                origintext.setAttribute("x", String(getX((_j = labelsDefault === null || labelsDefault === void 0 ? void 0 : labelsDefault[0]) === null || _j === void 0 ? void 0 : _j.x, horizontalAlign)));
+                origintext.setAttribute("y", String(getY((_k = labelsDefault === null || labelsDefault === void 0 ? void 0 : labelsDefault[0]) === null || _k === void 0 ? void 0 : _k.y, verticalAlign)));
             }
             break;
         }

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

@@ -3,6 +3,7 @@ import { RefsType } from "../board-v3";
 import { OnCurrentStateChange } from "../view-only-3";
 import { PropertiesProps } from "../../dto/table";
 import { ComponentProps } from "../view-only-3/index";
+import { ShowTagType } from "../board-v3/board-slice";
 export interface TableEditorProps<TMeta = undefined> {
     componentProps: ComponentProps<TMeta>[];
     extraComponentProps: PropertiesProps[];
@@ -48,6 +49,10 @@ export interface TableEditorProps<TMeta = undefined> {
         key: string;
         value: number;
     };
+    priviewActive: {
+        type: ShowTagType;
+        label: string;
+    }[];
 }
 declare const TableEditor: <TMeta>(props: TableEditorProps<TMeta>) => import("react/jsx-runtime").JSX.Element;
 export default TableEditor;

package/dist/features/package/index.js

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