seat-editor 3.2.27 → 3.3.0

package/dist/app/only-view/page.jsx

@@ -216,7 +216,10 @@ const TouchScrollDetect = () => {
         ]} eventMatchTable={[
             {
                 event: "mouseenter",
-                properties: { strokeWidth: 5, filter: "drop-shadow(0px 0px 5px red)" },
+                properties: {
+                    strokeWidth: 5,
+                    filter: "drop-shadow(0px 0px 5px red)",
+                },
             },
             {
                 event: "dragenter",

package/dist/components/layer-v3/index.jsx

@@ -1,9 +1,11 @@
 "use client";
 import { isEmpty, omit } from "lodash";
 import { arcByDirection, distributeWithSpacing, rectToPolygonNodes, rectToPolygonPoints, } from "./utils";
+import { useAppSelector } from "@/hooks/use-redux";
 const Layers = ({ components, selectedComponent, activeTool, selectionLines, }) => {
     var _a;
     const hasPoints = selectionLines && !isEmpty(selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.points);
+    const lockBackground = useAppSelector((state) => state.tool.lockBackground);
     const renderShape = (item) => {
         var _a, _b, _c, _d, _e, _f;
         const { id, x, y, width, height, fill, opacity, rotation = 0, shape, text, stroke, strokeWidth, labels, fontSize, fontColor, label, seatFill, src, points, seatPositions, radius = 0, } = item;
@@ -532,7 +534,9 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
           </g>);
             case "image-table":
             case "background":
-                return (<g key={id} id={id} data-id={id} transform={`translate(${x}, ${y})`}>
+                return (<g key={id} id={id} data-id={id} transform={`translate(${x}, ${y})`} style={{
+                        pointerEvents: lockBackground ? "none" : "auto",
+                    }}>
             <g transform={`rotate(${rotation}, 0, 0)`}>
               <image href={src} width={width} height={height} {...commonProps}/>
               <g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
@@ -552,7 +556,7 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
             </g>
           </g>);
             case "bounding-box": {
-                return (<g key={id} transform={`translate(${x}, ${y})`} data-id={id}>
+                return (<g key={id} transform={`translate(${x}, ${y})`} data-bounding-box={id}>
             <rect width={width} height={height} fill="none" stroke="#3b82f6" strokeWidth={1} strokeDasharray="6 4" pointerEvents="none"/>
           </g>);
             }

package/dist/components/layer-v4/constant.d.ts

@@ -1,4 +1,3 @@
-import { Position } from "@/dto/table";
 export declare const tagsDummy: (name: string, icon: string) => ({
     gap: string;
     key: string;
@@ -40,7 +39,7 @@ export declare const tagsDummy: (name: string, icon: string) => ({
         symbol: {
             value: string;
             gap: number;
-            position: Position;
+            position: string;
         };
         fontWeight?: undefined;
         textDecoration?: undefined;

package/dist/components/layer-v4/constant.js

@@ -51,9 +51,10 @@ export const tagsDummy = (name, icon) => [
                 symbol: {
                     value: "+1",
                     gap: 1,
-                    position: "right-top", // right | right-top | right-bottom | left | left-top | left-bottom | top | bottom
+                    position: "right-top"
                 },
             },
+            // as Position, // right | right-top | right-bottom | left | left-top | left-bottom | top | bottom
             // {
             //   type: "text",
             //   value: "23:00",

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

@@ -7,6 +7,7 @@ export interface InitialState {
     backgroundColor: string;
     themeColor: string;
     extraComponents: Component[];
+    boundingBox: Component | null;
     flagChange: boolean;
     historyChanges: any[];
     pointer: number;

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

@@ -5,6 +5,7 @@ const initialState = {
     backgroundColor: "#FFFFFF",
     themeColor: "#4A90E2",
     extraComponents: [],
+    boundingBox: null,
     flagChange: false,
     historyChanges: [],
     pointer: 0,
@@ -35,9 +36,13 @@ const boardSlice = createSlice({
             state.components.push(action.payload);
             const component = state.components;
             const extraComponent = state.extraComponents;
+            const boundingBox = state.boundingBox;
+            const backgroundColor = state.backgroundColor;
             state.historyChanges.push({
                 component,
                 extraComponent,
+                boundingBox,
+                backgroundColor,
             });
         },
         removeComponent: (state, action) => {
@@ -64,6 +69,8 @@ const boardSlice = createSlice({
             state.historyChanges.push({
                 components: [...state.components],
                 extraComponents: [...state.extraComponents],
+                boundingBox: state.boundingBox,
+                backgroundColor: state.backgroundColor,
             });
             if (state.historyChanges.length > MAX_HISTORY_CHANGES) {
                 state.historyChanges.shift();
@@ -88,6 +95,8 @@ const boardSlice = createSlice({
             state.historyChanges.push({
                 components: [...state.components],
                 extraComponents: [...state.extraComponents],
+                boundingBox: state.boundingBox,
+                backgroundColor: state.backgroundColor,
             });
             if (state.historyChanges.length > MAX_HISTORY_CHANGES) {
                 state.historyChanges.shift();
@@ -102,14 +111,34 @@ const boardSlice = createSlice({
                     state.components[index] = Object.assign(Object.assign({}, state.components[index]), component);
                 }
             });
-            state.historyChanges.push(state.components);
+            state.historyChanges.push({
+                components: [...state.components],
+                extraComponents: [...state.extraComponents],
+                boundingBox: state.boundingBox,
+                backgroundColor: state.backgroundColor,
+            });
             if (state.historyChanges.length > MAX_HISTORY_CHANGES) {
                 state.historyChanges.shift();
             }
             state.pointer += 1;
         },
         setBackgroundColor: (state, action) => {
+            const currentPointer = state.pointer;
+            const totalHistory = state.historyChanges.length;
+            if (currentPointer < totalHistory) {
+                state.historyChanges = state.historyChanges.slice(0, currentPointer + 1);
+            }
+            if (state.historyChanges.length > MAX_HISTORY_CHANGES) {
+                state.historyChanges.shift();
+            }
+            state.pointer += 1;
             state.backgroundColor = action.payload;
+            state.historyChanges.push({
+                components: [...state.components],
+                extraComponents: [...state.extraComponents],
+                boundingBox: state.boundingBox,
+                backgroundColor: state.backgroundColor,
+            });
         },
         setNewComponents: (state, action) => {
             const currentPointer = state.pointer;
@@ -121,6 +150,8 @@ const boardSlice = createSlice({
             state.historyChanges.push({
                 components: [...state.components],
                 extraComponents: [...state.extraComponents],
+                boundingBox: state.boundingBox,
+                backgroundColor: state.backgroundColor,
             });
             if (state.historyChanges.length > MAX_HISTORY_CHANGES) {
                 state.historyChanges.shift();
@@ -136,6 +167,8 @@ const boardSlice = createSlice({
             state.historyChanges.push({
                 components: [...state.components],
                 extraComponents: [...state.extraComponents],
+                boundingBox: state.boundingBox,
+                backgroundColor: state.backgroundColor,
             });
             if (state.historyChanges.length > MAX_HISTORY_CHANGES) {
                 state.historyChanges.shift();
@@ -159,13 +192,15 @@ const boardSlice = createSlice({
             state.historyChanges.push({
                 components: [...component],
                 extraComponents: [...extraComponent],
+                boundingBox: state.boundingBox,
+                backgroundColor: state.backgroundColor,
             });
         },
         setFlagChange: (state, action) => {
             state.flagChange = action.payload;
         },
         undoHistory: (state) => {
-            var _a, _b, _c, _d;
+            var _a, _b, _c, _d, _e, _f, _g, _h;
             if (state.pointer > 1) {
                 const lengthHistory = state.historyChanges.length;
                 if (lengthHistory === state.pointer) {
@@ -177,10 +212,14 @@ const boardSlice = createSlice({
                 const prev = state.historyChanges[state.pointer];
                 state.components = current(prev === null || prev === void 0 ? void 0 : prev.components);
                 state.extraComponents = current(prev === null || prev === void 0 ? void 0 : prev.extraComponents);
+                state.boundingBox = current(prev === null || prev === void 0 ? void 0 : prev.boundingBox);
+                state.backgroundColor = prev === null || prev === void 0 ? void 0 : prev.backgroundColor;
             }
             else if (state.pointer === 1) {
                 state.components = current((_b = (_a = state.historyChanges) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.components);
                 state.extraComponents = current((_d = (_c = state.historyChanges) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.extraComponents);
+                state.boundingBox = (_f = (_e = state.historyChanges) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.boundingBox;
+                state.backgroundColor = (_h = (_g = state.historyChanges) === null || _g === void 0 ? void 0 : _g[0]) === null || _h === void 0 ? void 0 : _h.backgroundColor;
                 state.pointer = 0;
             }
             state.updateBy = "global";
@@ -190,23 +229,45 @@ const boardSlice = createSlice({
                 const next = state.historyChanges[state.pointer + 1];
                 state.components = current(next === null || next === void 0 ? void 0 : next.components);
                 state.extraComponents = current(next === null || next === void 0 ? void 0 : next.extraComponents);
+                state.boundingBox = current(next === null || next === void 0 ? void 0 : next.boundingBox);
                 state.pointer += 1;
                 state.updateBy = "global";
             }
         },
         setInitialValue: (state, action) => {
-            const { components, extraComponents, backgroundColor } = action.payload;
+            const { components, extraComponents, backgroundColor, boundingBox } = action.payload;
             state.components = components;
             state.extraComponents = extraComponents;
             state.pointer = 0;
             state.backgroundColor = backgroundColor;
+            state.boundingBox = boundingBox;
             state.historyChanges = [
                 {
                     components,
                     extraComponents,
+                    boundingBox,
+                    backgroundColor,
                 },
             ];
         },
+        setBoundingBox: (state, action) => {
+            const currentPointer = state.pointer;
+            const totalHistory = state.historyChanges.length;
+            if (currentPointer < totalHistory) {
+                state.historyChanges = state.historyChanges.slice(0, currentPointer + 1);
+            }
+            if (state.historyChanges.length > MAX_HISTORY_CHANGES) {
+                state.historyChanges.shift();
+            }
+            state.pointer += 1;
+            state.boundingBox = action.payload;
+            state.historyChanges.push({
+                components: [...state.components],
+                extraComponents: [...state.extraComponents],
+                boundingBox: state.boundingBox,
+                backgroundColor: state.backgroundColor,
+            });
+        },
     },
 });
 export const { addComponent, removeComponent, updateComponent, setBackgroundColor, removeExtraComponent, } = boardSlice.actions;

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

@@ -66,7 +66,7 @@ const BoardTemplate = ({ refs, loadingRender }) => {
     //polygon
     const polygonElementRef = useRef([]);
     const isOnMakePolygonRef = useRef(false);
-    const { components: componentsProps, extraComponents: extraComponentsProps, flagChange, updateBy, isShowTagType } = useAppSelector((state) => state.board);
+    const { components: componentsProps, extraComponents: extraComponentsProps, boundingBox, flagChange, updateBy, isShowTagType, } = useAppSelector((state) => state.board);
     const { selectionLines } = useAppSelector((state) => state.panel);
     const [selectedLines, setSelectedLines] = useState(null);
     useEffect(() => {
@@ -148,12 +148,13 @@ const BoardTemplate = ({ refs, loadingRender }) => {
             ["background", "text"].includes((_g = componentsProps === null || componentsProps === void 0 ? void 0 : componentsProps[0]) === null || _g === void 0 ? void 0 : _g.shape)) {
             minX = minX;
             minY = minY;
+            maxX = maxX;
+            maxY = maxY;
         }
-        const hasBoundingBox = extraComponentsProps === null || extraComponentsProps === void 0 ? void 0 : extraComponentsProps.some((item) => { var _a; return (_a = item === null || item === void 0 ? void 0 : item.shape) === null || _a === void 0 ? void 0 : _a.includes("bounding-box"); });
+        const hasBoundingBox = !isEmpty(boundingBox);
         if (hasBoundingBox) {
-            const findBoundingBox = extraComponentsProps.find((item) => { var _a; return (_a = item === null || item === void 0 ? void 0 : item.shape) === null || _a === void 0 ? void 0 : _a.includes("bounding-box"); });
-            minX = findBoundingBox.x;
-            minY = findBoundingBox.y;
+            minX = boundingBox.x;
+            minY = boundingBox.y;
         }
         if ((minX !== Infinity || minY !== Infinity) && !activeTool) {
             (_h = transformRef.current) === null || _h === void 0 ? void 0 : _h.setTransform(-minX, -minY, scale);
@@ -478,11 +479,6 @@ const BoardTemplate = ({ refs, loadingRender }) => {
         if (downAtResizePosition) {
             onResizeSelectionRef.current = true;
         }
-        // targetGroup?.removeAttribute("transform");
-        const mousePositionInGroup = {
-            x: x - (box === null || box === void 0 ? void 0 : box.x),
-            y: y - (box === null || box === void 0 ? void 0 : box.y),
-        };
         const offset = {
             x: x - initialXG,
             y: y - initialYG,
@@ -504,6 +500,10 @@ const BoardTemplate = ({ refs, loadingRender }) => {
                 type: "panel/setSelectedComponent",
                 payload: newPolygon,
             });
+            dispatch({
+                type: "panel/setSelectedGroup",
+                payload: null
+            });
             isOnMakePolygonRef.current = true;
         }
         // const selectionLines = svgRef.current?.querySelector(
@@ -527,7 +527,7 @@ const BoardTemplate = ({ refs, loadingRender }) => {
                 var _a, _b;
                 const dx = pos.x - x;
                 const dy = pos.y - y;
-                const { g, inner, element } = getAttributeElement(svg, activeId);
+                const { inner, element } = getAttributeElement(svg, activeId);
                 const angleDeg = getRotation(inner.transform.baseVal); // 0–360
                 const angleRad = (angleDeg * Math.PI) / 180;
                 const cos = Math.cos(-angleRad);
@@ -636,7 +636,7 @@ const BoardTemplate = ({ refs, loadingRender }) => {
                 const allID = (_a = dataElementSelectionGroupRef.current) === null || _a === void 0 ? void 0 : _a.map((el) => el.id);
                 const allDataRealSelection = (_b = [
                     ...componentsState,
-                    ...extraComponentsState,
+                    ...(lockBackground ? [] : extraComponentsState),
                 ]) === null || _b === void 0 ? void 0 : _b.filter((el) => allID.includes(el.id));
                 const allGroupsAttribute = getAttributeElements(svg, allID);
                 const resultSelection = resizeBox({
@@ -644,12 +644,12 @@ const BoardTemplate = ({ refs, loadingRender }) => {
                     dx,
                     dy,
                     rotate: 0,
-                    handle: resizeSide,
+                    handle: resizeSide
                 });
                 updateSelectionBox(svg, resultSelection);
                 const scaleX = resultSelection.width / oldSel.width;
                 const scaleY = resultSelection.height / oldSel.height;
-                allGroupsAttribute.forEach(({ g, element, inner, seatGroup, seats }, i) => {
+                allGroupsAttribute.forEach(({ g, element, seatGroup, seats }, i) => {
                     var _a, _b;
                     const activeId = JSON.parse(g === null || g === void 0 ? void 0 : g.getAttribute("data-id"));
                     const elementOld = allDataRealSelection === null || allDataRealSelection === void 0 ? void 0 : allDataRealSelection.find((el) => el.id == activeId);
@@ -713,7 +713,7 @@ const BoardTemplate = ({ refs, loadingRender }) => {
                 const allID = (_a = dataElementSelectionGroupRef.current) === null || _a === void 0 ? void 0 : _a.map((el) => el.id);
                 const allDataRealSelection = (_b = [
                     ...componentsState,
-                    ...extraComponentsState,
+                    ...(lockBackground ? [] : extraComponentsState),
                 ]) === null || _b === void 0 ? void 0 : _b.filter((el) => allID.includes(el.id));
                 allDataRealSelection.forEach((item) => {
                     const { g } = getAttributeElement(svg, item.id);
@@ -770,10 +770,13 @@ const BoardTemplate = ({ refs, loadingRender }) => {
                     .map((d) => `${d}`);
                 if (selectedIds.length === 0)
                     return;
-                const selectedComps = (_b = [...componentsState, ...extraComponentsState]
+                const selectedComps = (_b = [
+                    ...componentsState,
+                    ...(lockBackground ? [] : extraComponentsState),
+                ]
                     .filter((c) => selectedIds.map(String).includes(String(c.id)))) === null || _b === void 0 ? void 0 : _b.map((item) => {
                     const { g } = getAttributeElement(svg, item.id);
-                    const { x, y } = getTranslate(g);
+                    // const { x, y } = getTranslate(g);
                     const box = getGlobalBBox(svg, g);
                     return Object.assign(Object.assign({}, item), { 
                         // x: box.x,
@@ -864,7 +867,7 @@ const BoardTemplate = ({ refs, loadingRender }) => {
                     dx,
                     dy,
                     rotate: 0,
-                    handle: resizeSide,
+                    handle: resizeSide
                 });
                 updateSelectionGuides(svg, resultSelection, {
                     vLeft: "v-left",
@@ -1104,6 +1107,10 @@ const BoardTemplate = ({ refs, loadingRender }) => {
                     type: "panel/setSelectedComponent",
                     payload: newDataComponent,
                 });
+                dispatch({
+                    type: "panel/setSelectedGroup",
+                    payload: null
+                });
             }
             //POLYGON
             const isInitialPolyGon = activeTool === "polygon" && (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) === "polygon";
@@ -1138,6 +1145,10 @@ const BoardTemplate = ({ refs, loadingRender }) => {
                         type: "panel/setSelectedComponent",
                         payload: newPoints,
                     });
+                    dispatch({
+                        type: "panel/setSelectedGroup",
+                        payload: null
+                    });
                     polygonElementRef.current = newPoints;
                 }
             }
@@ -1159,6 +1170,10 @@ const BoardTemplate = ({ refs, loadingRender }) => {
                     type: "panel/setSelectedComponent",
                     payload: newDataComponent,
                 });
+                dispatch({
+                    type: "panel/setSelectedGroup",
+                    payload: null
+                });
                 //LOGIC FOR SET SHOW
                 dispatch({ type: "panel/setShow", payload: false });
             }
@@ -1246,6 +1261,10 @@ const BoardTemplate = ({ refs, loadingRender }) => {
                             type: "panel/setSelectedComponent",
                             payload: findById,
                         });
+                        dispatch({
+                            type: "panel/setSelectedGroup",
+                            payload: null
+                        });
                     }
                 }
                 //LOGIC FOR SET SHOW
@@ -1268,6 +1287,10 @@ const BoardTemplate = ({ refs, loadingRender }) => {
                     type: "panel/setSelectedComponent",
                     payload: newSelectedComponent,
                 });
+                dispatch({
+                    type: "panel/setSelectedGroup",
+                    payload: null
+                });
                 updateComponentAttribute(newSelectedComponent);
                 //LOGIC FOR SET SHOW
                 dispatch({ type: "panel/setShow", payload: false });
@@ -1322,7 +1345,10 @@ const BoardTemplate = ({ refs, loadingRender }) => {
             if (isInitialCreateBoundingBox) {
                 const ghost = svg.querySelector("#ghost-element-create");
                 const getBBox = getGlobalBBox(svg, ghost);
-                addComponents(Object.assign(Object.assign({}, getBBox), { id: `${Date.now()}`, shape: "bounding-box", fill: "transparent" }));
+                dispatch({
+                    type: "board/setBoundingBox",
+                    payload: Object.assign(Object.assign({}, getBBox), { id: `${Date.now()}`, shape: "bounding-box", fill: "transparent" }),
+                });
                 (_m = (_l = svgRef.current) === null || _l === void 0 ? void 0 : _l.querySelectorAll("#ghost-element-create")) === null || _m === void 0 ? void 0 : _m.forEach((el) => el.remove());
             }
             //RESIZE SELECTION BOX UP
@@ -1555,6 +1581,7 @@ const BoardTemplate = ({ refs, loadingRender }) => {
             ...extraComponentsState,
             ...componentsState,
             polygonElementRef === null || polygonElementRef === void 0 ? void 0 : polygonElementRef.current,
+            ...(!isEmpty(boundingBox) ? [boundingBox] : []),
         ]} 
     // style={{
     //   cursor: getCursorStyle(),

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

@@ -9,7 +9,7 @@ export declare const resizeElementSelection: ({ selectionStart, currentSelection
     width: number;
     height: number;
 };
-export declare function resizeBox({ box, dx, dy, rotate, handle, }: {
+export declare function resizeBox({ box, dx, dy, rotate, handle }: {
     box: {
         x: number;
         y: number;

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

@@ -43,7 +43,7 @@ export const resizeElementSelection = ({ selectionStart, currentSelection, rotat
         height,
     };
 };
-export function resizeBox({ box, dx, dy, rotate, handle, }) {
+export function resizeBox({ box, dx, dy, rotate, handle }) {
     // 1. mouse → local
     const local = toLocalDelta(dx, dy, rotate);
     // 2. scale
@@ -144,6 +144,7 @@ export function getAnchorByHandle(handle, box) {
 }
 import { isEqual } from "lodash";
 import { arcByDirection, distributeWithSpacing, rectToPolygonNodes, } from "../../components/layer-v3/utils";
+import { MIN_HEIGHT, MIN_WIDTH } from "./constant";
 export const resizeSeatSquare = ({ seatsPositions, r = 10, openSpace, newElement, seats, seatGroup, }) => {
     let top = [];
     let left = [];
@@ -969,8 +970,8 @@ export function applyResizeToSvgElement(element, group, resize, component) {
         case "rect":
         case "image": {
             updateSvgAttrs(element, {
-                width: resize.width,
-                height: resize.height,
+                width: resize.width < 60 ? 60 : resize.width,
+                height: resize.height < MIN_HEIGHT ? MIN_HEIGHT : resize.height,
                 // fill: component.fill,
             });
             updateSvgAttrs(group, {
@@ -979,11 +980,13 @@ export function applyResizeToSvgElement(element, group, resize, component) {
             break;
         }
         case "circle": {
-            const r = Math.min(resize.width, resize.height) / 2;
+            const width = resize.width < MIN_WIDTH ? MIN_WIDTH : resize.width;
+            const height = resize.height < MIN_HEIGHT ? MIN_HEIGHT : resize.height;
+            const r = Math.min(width, height) / 2;
             updateSvgAttrs(element, {
                 r,
-                cx: resize.width / 2,
-                cy: resize.height / 2,
+                cx: width / 2,
+                cy: height / 2,
                 // fill: component.fill,
             });
             group.setAttribute("transform", `translate(${resize.x}, ${resize.y})`);

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

@@ -7,6 +7,7 @@ export interface TableEditorProps {
         components: PropertiesProps[];
         extraComponents: PropertiesProps[];
         background: string;
+        boundingBox: PropertiesProps | null;
     }) => void;
     onSelectComponent?: (component: PropertiesProps) => void;
     mappingKey?: string;
@@ -19,6 +20,7 @@ export interface TableEditorProps {
     ];
     statusKey: string;
     defaultBackground?: string;
+    defaultBoundingBox?: PropertiesProps;
     action?: (file: File) => Promise<string>;
     responseMapping?: {
         status: string;

package/dist/features/package/index.jsx

@@ -10,7 +10,7 @@ const TableEditor = (props) => {
     var _a;
     const [initialValue, setInitialValue] = useState(null);
     const { componentProps, extraComponentProps, onCurrentStateChange, dragOnly, mappingKey, viewOnly, deleteAutorized, refs, } = props;
-    const { components, extraComponents, backgroundColor } = useAppSelector((state) => state.board);
+    const { components, extraComponents, backgroundColor, boundingBox } = useAppSelector((state) => state.board);
     const dispatch = useAppDispatch();
     const refsBoard = useRef(null);
     useImperativeHandle(refs, () => {
@@ -61,6 +61,7 @@ const TableEditor = (props) => {
                 components: matchInitialValueWithComponents,
                 extraComponents,
                 background: backgroundColor,
+                boundingBox,
             });
         }
     };
@@ -99,6 +100,7 @@ const TableEditor = (props) => {
                     components: mappingData,
                     extraComponents: extraComponentProps,
                     backgroundColor: props === null || props === void 0 ? void 0 : props.defaultBackground,
+                    boundingBox: (props === null || props === void 0 ? void 0 : props.defaultBoundingBox) || null,
                 },
             });
             // dispatch({

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

@@ -11,12 +11,13 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { useState, useEffect } from "react";
 import { Upload, Image, Button } from "antd";
 import { InboxOutlined, LoadingOutlined } from "@ant-design/icons";
-import { useAppDispatch } from "../../hooks/use-redux";
+import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
 import SectionLabel from "../../components/form-tools/label";
 import SectionShape from "../../components/form-tools/shape";
 const { Dragger } = Upload;
 const UploadTool = ({ name, type, action, defaultValue, transform }) => {
     var _a, _b, _c;
+    const selectedComponent = useAppSelector((state) => state.panel.selectedComponent);
     const transformState = (_a = transform === null || transform === void 0 ? void 0 : transform.instance) === null || _a === void 0 ? void 0 : _a.transformState;
     const [defaultSrc, setDefaultSrc] = useState(null);
     const [isEdit, setIsEdit] = useState(false);
@@ -28,13 +29,20 @@ const UploadTool = ({ name, type, action, defaultValue, transform }) => {
             setLoading(false);
         }
     }, [defaultValue]);
+    useEffect(() => {
+        if (selectedComponent && selectedComponent.shape === name) {
+            setDefaultSrc(selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.src);
+            setIsEdit(true);
+            setLoading(false);
+        }
+    }, [selectedComponent]);
     const dispatch = useAppDispatch();
     const widthWorkspace = ((_b = document === null || document === void 0 ? void 0 : document.getElementById("workspace")) === null || _b === void 0 ? void 0 : _b.clientWidth) || 0;
     const heightWorkspace = ((_c = document === null || document === void 0 ? void 0 : document.getElementById("workspace")) === null || _c === void 0 ? void 0 : _c.clientHeight) || 0;
-    const defaultFormatValue = (width, height, src, id) => ({
+    const defaultFormatValue = (width, height, src, id, x, y) => ({
         id: id || new Date().getTime(),
-        x: Math.abs(transformState === null || transformState === void 0 ? void 0 : transformState.positionX),
-        y: Math.abs(transformState === null || transformState === void 0 ? void 0 : transformState.positionY),
+        x: x || Math.abs(transformState === null || transformState === void 0 ? void 0 : transformState.positionX),
+        y: y || Math.abs(transformState === null || transformState === void 0 ? void 0 : transformState.positionY),
         width: width < 1 ? 200 : width,
         height: height < 1 ? 200 : height,
         rotation: 0,
@@ -59,11 +67,11 @@ const UploadTool = ({ name, type, action, defaultValue, transform }) => {
                         if (isEdit) {
                             dispatch({
                                 type: "board/updateComponent",
-                                payload: Object.assign({}, defaultFormatValue(defaultValue.width, defaultValue.height, src, Number(defaultValue.id))),
+                                payload: Object.assign({}, defaultFormatValue(selectedComponent.width, selectedComponent.height, src, Number(selectedComponent.id), selectedComponent.x, selectedComponent.y)),
                             });
                             dispatch({
                                 type: "panel/setSelectedComponent",
-                                payload: Object.assign({}, defaultFormatValue(0, 0, src, Number(defaultValue.id))),
+                                payload: Object.assign({}, defaultFormatValue(selectedComponent.width, selectedComponent.height, src, Number(selectedComponent.id), selectedComponent.x, selectedComponent.y)),
                             });
                             setDefaultSrc(src);
                             dispatch({ type: "board/setFlagChange", payload: true });
@@ -94,11 +102,11 @@ const UploadTool = ({ name, type, action, defaultValue, transform }) => {
                             if (isEdit) {
                                 dispatch({
                                     type: "board/updateComponent",
-                                    payload: Object.assign({}, defaultFormatValue(width, height, img.src, Number(defaultValue.id))),
+                                    payload: Object.assign({}, defaultFormatValue(selectedComponent.width, selectedComponent.height, img.src, Number(selectedComponent.id), selectedComponent.x, selectedComponent.y)),
                                 });
                                 dispatch({
                                     type: "panel/setSelectedComponent",
-                                    payload: Object.assign({}, defaultFormatValue(width, height, srcFromResponse || img.src, Number(defaultValue.id))),
+                                    payload: Object.assign({}, defaultFormatValue(selectedComponent.width, selectedComponent.height, img.src, Number(selectedComponent.id), selectedComponent.x, selectedComponent.y)),
                                 });
                                 setDefaultSrc(img.src);
                                 dispatch({ type: "board/setFlagChange", payload: true });

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

@@ -23,7 +23,7 @@ const LayerView = (props) => {
     const [panningGroup, setPanningGroup] = useState(false);
     const [scale, setScale] = useState(1);
     const [selectedTable, setSelectedTable] = useState(null);
-    const { components: componentsEditor, extraComponents: extraComponentsEditor, } = useAppSelector((state) => state.board);
+    const { components: componentsEditor, extraComponents: extraComponentsEditor, boundingBox: boundingBoxProps } = useAppSelector((state) => state.board);
     const backgroundColor = useAppSelector((state) => state.board.backgroundColor);
     const { loading } = useAppSelector((state) => state.panel);
     useImperativeHandle(refs, () => ({
@@ -38,7 +38,7 @@ const LayerView = (props) => {
     }));
     const dispatch = useAppDispatch();
     useEffect(() => {
-        if ((!loading && !(loadingRender === null || loadingRender === void 0 ? void 0 : loadingRender.state))) {
+        if ((!loading && (loadingRender === null || loadingRender === void 0 ? void 0 : loadingRender.state))) {
             dispatch({ type: "panel/setLoading", payload: true });
         }
         if ((componentProps === null || componentProps === void 0 ? void 0 : componentProps.length) > 0) {
@@ -169,8 +169,10 @@ const LayerView = (props) => {
             ["background", "text"].includes((_g = componentsEditor === null || componentsEditor === void 0 ? void 0 : componentsEditor[0]) === null || _g === void 0 ? void 0 : _g.shape)) {
             minX = minX;
             minY = minY;
+            maxX = maxX;
+            maxY = maxY;
         }
-        const hasBoundingBox = extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor.some((item) => { var _a; return (_a = item === null || item === void 0 ? void 0 : item.shape) === null || _a === void 0 ? void 0 : _a.includes("bounding-box"); });
+        const hasBoundingBox = boundingBoxProps;
         // const paddingY =
         //   maxY * (props?.viewStyles?.paddingY || 0) +
         //   minY * (props?.viewStyles?.paddingY || 0);
@@ -178,13 +180,12 @@ const LayerView = (props) => {
         //   maxX * (props?.viewStyles?.paddingX || 0) +
         //   minX * (props?.viewStyles?.paddingX || 0);
         if (hasBoundingBox) {
-            const findBoundingBox = extraComponentsEditor.find((item) => { var _a; return (_a = item === null || item === void 0 ? void 0 : item.shape) === null || _a === void 0 ? void 0 : _a.includes("bounding-box"); });
             hasBoundingBoxRef.current = true;
             return {
-                minX: findBoundingBox.x,
-                minY: findBoundingBox.y,
-                width: findBoundingBox.width,
-                height: findBoundingBox.height,
+                minX: boundingBoxProps.x,
+                minY: boundingBoxProps.y,
+                width: boundingBoxProps.width,
+                height: boundingBoxProps.height,
             };
         }
         // return {

package/package.json

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