seat-editor 3.5.66 → 3.6.0

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";
 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 = [], }) => {
+    var _a;
     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,47 @@ 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: (_a = previewTabValue === null || previewTabValue === void 0 ? void 0 : previewTabValue[0]) === null || _a === void 0 ? void 0 : _a.type }) })] }))
+                }, 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";
 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 = [], }) => {
+    var _a;
     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,94 @@ 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={(_a = previewTabValue === null || previewTabValue === void 0 ? void 0 : previewTabValue[0]) === null || _a === void 0 ? void 0 : _a.type}/>
+                
+              </div>
+          </>)
+        }}>
         <LayerView statusKey="status" loadingRender={loadingRender} actionPrivileged={{
             select: false,
             move: false,
@@ -1981,30 +2042,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;

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.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();