seat-editor 3.2.2 → 3.2.4

package/dist/app/constant.js

@@ -3372,7 +3372,7 @@ export const data4 = [
         uuid_table: "axxxxx",
         status: 0,
         properties: {
-            x: 100,
+            x: 500,
             y: 520,
             labels: [
                 {
@@ -3455,7 +3455,7 @@ export const data4 = [
                 },
             ],
             opacity: 1,
-            rotation: 90,
+            rotation: 0,
             seatCount: 10,
             openSpace: 0.3,
             seatFill: "#ed8989",
@@ -3725,7 +3725,7 @@ export const data4 = [
     {
         status: 2,
         properties: {
-            x: 0,
+            x: 100,
             y: 100,
             id: "234243242342434",
             stroke: "#347ADB", //warna border

package/dist/app/new-board/page.jsx

@@ -1,38 +1,26 @@
 "use client";
 import { useEffect, useState } from "react";
 import SeatEditor from "../../features/package";
-import { extraComponent } from "../constant";
 import { data4 } from "../constant";
-import { dummyImage } from "../only-view/page";
 export default function NewBoard() {
     const [initialValue, setInitialValue] = useState([]);
-    const [extraComponents, setExtraComponents] = useState(dummyImage);
+    const [extraComponents, setExtraComponents] = useState([]);
     const [backgroundColor, setBackgroundColor] = useState("#000000");
-    const [viewOnly, setViewOnly] = useState(true);
+    const [viewOnly, setViewOnly] = useState(false);
     useEffect(() => {
         setInitialValue(data4);
-        setExtraComponents(extraComponent);
+        setExtraComponents([]);
     }, []);
     return (<>
       <div className="w-full h-screen flex flex-col relative justify-center">
         <div className="w-full h-[1000px] bg-white border-r border-gray-200">
-        {/* <LayerView
-          componentProps={initialValue}
-          mappingKey="properties"
-          extraComponentProps={[]}
-          defaultBackground="#ffffff"
-          // dragOnly={true}
-          statusKey="status"
-          
-        /> */}
+     
         </div>
-        {/* <button className="bg-blue-500 text-white px-4 py-2 rounded"
-          onClick={() => setViewOnly(!viewOnly)}
-        >
-          {viewOnly ? "Edit Mode" : "View Mode"}
-        </button> */}
+        <button className="bg-blue-500 text-white px-4 py-2 rounded" onClick={() => setViewOnly(!viewOnly)}>
+          {viewOnly ? "Edit Mode ddd" : "View Mode"}
+        </button>
         <div className="flex-1 h-full">
-          <SeatEditor componentProps={initialValue} viewOnly={false} dragOnly={viewOnly} deleteAutorized={{
+          <SeatEditor componentProps={initialValue} viewOnly={viewOnly} dragOnly={true} deleteAutorized={{
             component: true,
             extraComponent: true,
         }} 

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

@@ -228,7 +228,9 @@ const TouchScrollDetect = () => {
                 icon: <UserIcon />,
                 key: "user",
             },
-        ]}/>
+        ]} viewStyles={{
+            paddingTop: 200,
+        }}/>
         </div>
       </div>
     </div>);

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

@@ -6,7 +6,7 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
     const hasPoints = selectionLines && !isEmpty(selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.points);
     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, } = item;
+        const { id, x, y, width, height, fill, opacity, rotation = 0, shape, text, stroke, strokeWidth, labels, fontSize, fontColor, label, seatFill, src, points, seatPositions, radius = 10, } = item;
         const commonProps = {
             fill,
             opacity,
@@ -440,7 +440,7 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
                 const spacingWidth = availableWidth / seatCountTopBottom;
                 const spacingHeight = availableHeight / seatCountLeftRight;
                 const topSeats = distributeWithSpacing({
-                    start: 0,
+                    start: x,
                     length: width,
                     count: top,
                     radius: seatRadius,
@@ -453,7 +453,7 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
                     id: "top",
                 }));
                 const bottomSeats = distributeWithSpacing({
-                    start: 0,
+                    start: x,
                     length: width,
                     count: bottom,
                     radius: seatRadius,
@@ -472,7 +472,7 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
                     radius: seatRadius,
                     spacing: spacingHeight,
                 }).map((cy) => ({
-                    x: -seatSizeLR.w,
+                    x: x - seatSizeLR.w,
                     y: y + cy - seatSizeLR.h / 2,
                     width: seatSizeLR.w,
                     height: seatSizeLR.h,
@@ -485,7 +485,7 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
                     radius: seatRadius,
                     spacing: spacingHeight,
                 }).map((cy) => ({
-                    x: width,
+                    x: x + width,
                     y: y + cy - seatSizeLR.h / 2,
                     width: seatSizeLR.w,
                     height: seatSizeLR.h,

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

@@ -111,7 +111,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
                     }
                     return null;
                 });
-                return <g key={`group-${tagIndex}`}>{elements}</g>;
+                return <g key={`group-${tagIndex}`} pointerEvents="none">{elements}</g>;
             });
         };
         let commonProps = {
@@ -243,12 +243,12 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
                 {...omit(item, ["x", "y", "label", "points"])} {...commonProps}/>
 
               {renderTags(tags)}
-              {!iconTags && (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
+              {!iconTags && (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`} pointerEvents="none">
                   {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
                             var _a, _b, _c, _d, _e, _f, _g;
                             const cx = width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0);
                             const cy = height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0);
-                            return (<text {...omit(commonProps, [
+                            return (<text pointerEvents="none" {...omit(commonProps, [
                                 "opacity",
                                 "stroke",
                                 "strokeWidth",

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

@@ -18,6 +18,21 @@ const boardSlice = createSlice({
             state.updateBy = action.payload;
         },
         addComponent: (state, action) => {
+            const currentPointer = state.pointer;
+            const totalHistory = state.historyChanges.length;
+            if (currentPointer < totalHistory) {
+                state.historyChanges = state.historyChanges.slice(0, currentPointer + 1);
+            }
+            const component = state.components;
+            const extraComponent = state.extraComponents;
+            state.historyChanges.push({
+                component,
+                extraComponent
+            });
+            if (state.historyChanges.length > MAX_HISTORY_CHANGES) {
+                state.historyChanges.shift();
+            }
+            state.pointer += 1;
             state.components.push(action.payload);
         },
         removeComponent: (state, action) => {
@@ -43,14 +58,47 @@ const boardSlice = createSlice({
                 state.extraComponents[indexExtra] = Object.assign(Object.assign({}, state.extraComponents[indexExtra]), action.payload);
             }
         },
-        updateAllComponents: (state, action) => {
-            [...state.components, ...state.extraComponents].forEach((component) => {
-                const updatedComponent = action.payload.find((comp) => comp.id === component.id);
-                if (updatedComponent) {
-                    Object.assign(component, Object.assign(Object.assign({}, component), updatedComponent));
+        updateComponentsBulk: (state, action) => {
+            const updates = action.payload; // array of components
+            // Simpan snapshot untuk undo (deep clone lebih aman)
+            state.historyChanges.push({
+                components: [...state.components],
+                extraComponents: [...state.extraComponents],
+            });
+            if (state.historyChanges.length > MAX_HISTORY_CHANGES) {
+                state.historyChanges.shift();
+            }
+            state.pointer += 1;
+            updates.forEach((update) => {
+                const index = state.components.findIndex((component) => component.id === update.id);
+                const indexExtra = state.extraComponents.findIndex((extra) => extra.id === update.id);
+                if (index !== -1) {
+                    state.components[index] = Object.assign(Object.assign({}, state.components[index]), update);
+                }
+                else if (indexExtra !== -1) {
+                    state.extraComponents[indexExtra] = Object.assign(Object.assign({}, state.extraComponents[indexExtra]), update);
                 }
             });
         },
+        // updateAllComponents: (state, action) => {
+        //   const allComponents = action.payload;
+        //   forEach(allComponents, (component) => {
+        //     const index = state.components.findIndex(
+        //       (c) => c.id === component.id
+        //     );
+        //     if (index !== -1) {
+        //       state.components[index] = {
+        //         ...state.components[index],
+        //         ...component,
+        //       };
+        //     }
+        //   });
+        //   state.historyChanges.push(state.components);
+        //   if (state.historyChanges.length > MAX_HISTORY_CHANGES) {
+        //     state.historyChanges.shift();
+        //   }
+        //   state.pointer += 1
+        // },
         setBackgroundColor: (state, action) => {
             state.backgroundColor = action.payload;
         },
@@ -61,7 +109,10 @@ const boardSlice = createSlice({
                 state.historyChanges = state.historyChanges.slice(0, currentPointer + 1);
             }
             state.components = action.payload;
-            state.historyChanges.push(state.components);
+            state.historyChanges.push({
+                components: [...state.components],
+                extraComponents: [...state.extraComponents],
+            });
             if (state.historyChanges.length > MAX_HISTORY_CHANGES) {
                 state.historyChanges.shift();
             }
@@ -71,12 +122,28 @@ const boardSlice = createSlice({
             state.extraComponents = action.payload;
         },
         setExtraComponent: (state, action) => {
+            const currentPointer = state.pointer;
+            const totalHistory = state.historyChanges.length;
+            if (currentPointer < totalHistory) {
+                state.historyChanges = state.historyChanges.slice(0, currentPointer + 1);
+            }
+            const component = state.components;
+            const extraComponent = state.extraComponents;
+            state.historyChanges.push({
+                components: [...component],
+                extraComponents: [...extraComponent],
+            });
+            if (state.historyChanges.length > MAX_HISTORY_CHANGES) {
+                state.historyChanges.shift();
+            }
+            state.pointer += 1;
             state.extraComponents.push(action.payload);
         },
         setFlagChange: (state, action) => {
             state.flagChange = action.payload;
         },
         undoHistory: (state) => {
+            var _a, _b, _c, _d;
             if (state.pointer > 1) {
                 const lengthHistory = state.historyChanges.length;
                 if (lengthHistory === state.pointer) {
@@ -86,17 +153,20 @@ const boardSlice = createSlice({
                     state.pointer -= 1;
                 }
                 const prev = state.historyChanges[state.pointer];
-                state.components = current(prev);
+                state.components = current(prev === null || prev === void 0 ? void 0 : prev.components);
+                state.extraComponents = current(prev === null || prev === void 0 ? void 0 : prev.extraComponents);
             }
             else if (state.pointer === 1) {
-                state.components = current(state.historyChanges[0]);
+                state.components = current((_b = (_a = state.historyChanges) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.components);
+                state.components = current((_d = (_c = state.historyChanges) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.extraComponents);
                 state.pointer = 0;
             }
         },
         redoHistory: (state) => {
             if (state.pointer < state.historyChanges.length - 1) {
                 const next = state.historyChanges[state.pointer + 1];
-                state.components = current(next);
+                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.pointer += 1;
             }
         },

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

@@ -146,8 +146,14 @@ const BoardTemplate = ({ refs }) => {
         }
         if ((extraComponentsProps === null || extraComponentsProps === void 0 ? void 0 : extraComponentsProps.length) < 1 &&
             ["background", "text"].includes((_g = componentsProps === null || componentsProps === void 0 ? void 0 : componentsProps[0]) === null || _g === void 0 ? void 0 : _g.shape)) {
-            minX = minX - minX * 0.5;
-            minY = minY - minY * 0.5;
+            minX = minX;
+            minY = minY;
+        }
+        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"); });
+        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;
         }
         if ((minX !== Infinity || minY !== Infinity) && !activeTool) {
             (_h = transformRef.current) === null || _h === void 0 ? void 0 : _h.setTransform(-minX, -minY, scale);
@@ -156,7 +162,7 @@ const BoardTemplate = ({ refs }) => {
     }, [componentsProps, extraComponentsProps]);
     const queueUpdateComponents = (data) => {
         dispatch({
-            type: "board/setNewComponents",
+            type: "board/updateComponentsBulk",
             payload: data,
         });
     };
@@ -202,29 +208,31 @@ const BoardTemplate = ({ refs }) => {
         const updatedExtra = updateSingleComponent(extraComponentsState, component, setExtraComponentsState);
         if (updatedExtra) {
             dispatch({ type: "board/setUpdateBy", payload: "local" });
-            queueUpdateExtraComponents(updatedExtra);
-            debouncedSyncExtraComponents.current(updatedExtra);
+            queueUpdateComponents(updatedComponents);
         }
     };
     const updateComponentsAttribute = (components) => {
         if (!components.length)
             return;
-        const isExtra = components === null || components === void 0 ? void 0 : components.filter((item) => (item === null || item === void 0 ? void 0 : item.shape) === "polygon");
-        if (isExtra) {
-            const nextExtra = updateManyComponents(extraComponentsState, components, setExtraComponentsState);
-            dispatch({ type: "board/setUpdateBy", payload: "local" });
-            queueUpdateComponents(nextExtra);
-        }
+        // const isExtra = components?.filter((item) => item?.shape === "polygon");
+        // if (isExtra) {
+        //   const nextExtra = updateManyComponents(
+        //     extraComponentsState,
+        //     components,
+        //     setExtraComponentsState
+        //   );
+        //   dispatch({ type: "board/setUpdateBy", payload: "local" });
+        //   queueUpdateComponents(nextExtra);
+        // }
         const nextComponents = updateManyComponents(componentsState, components, setComponentsState);
         dispatch({ type: "board/setUpdateBy", payload: "local" });
-        queueUpdateExtraComponents(nextComponents);
+        // queueUpdateExtraComponents(nextComponents);
     };
     const addComponents = (component) => {
         const index = extraComponentsState.findIndex((c) => (c === null || c === void 0 ? void 0 : c.shape) === "bounding-box");
         const nextExtraComponents = index !== -1
             ? extraComponentsState.map((item, i) => i === index ? component : item)
             : [...extraComponentsState, component];
-        console.log({ nextExtraComponents });
         setExtraComponentsState(nextExtraComponents);
         dispatch({
             type: "board/setNewExtraComponents",
@@ -282,8 +290,44 @@ const BoardTemplate = ({ refs }) => {
         dispatch({ type: "panel/setShow", payload: false });
         dataElementSelectionGroupRef.current = [];
     };
+    const stillHoldShift = useRef(false);
+    useEffect(() => {
+        var _a, _b;
+        if (stillHoldShift.current && dataElementSelectionGroupRef.current) {
+            const selectionLines = (_a = svgRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("#selection-lines");
+            selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.setAttribute("pointer-events", "none");
+        }
+        if (!stillHoldShift.current && dataElementSelectionGroupRef.current) {
+            const selectionLines = (_b = svgRef.current) === null || _b === void 0 ? void 0 : _b.querySelector("#selection-lines");
+            selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.setAttribute("pointer-events", "all");
+        }
+    }, [stillHoldShift.current, dataElementSelectionGroupRef.current]);
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            var _a, _b;
+            // setPressedKey(e.key);
+            const selectionLines = (_a = svgRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("#selection-lines");
+            (_b = svgRef.current) === null || _b === void 0 ? void 0 : _b.querySelector("#selection-lines");
+            if (e.key === "Shift") {
+                stillHoldShift.current = true;
+                selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.setAttribute("pointer-events", "none");
+            }
+        };
+        const handleKeyUp = () => {
+            var _a;
+            const selectionLines = (_a = svgRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("#selection-lines");
+            stillHoldShift.current = false;
+            selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.setAttribute("pointer-events", "all");
+        };
+        window.addEventListener("keydown", handleKeyDown);
+        window.addEventListener("keyup", handleKeyUp);
+        return () => {
+            window.removeEventListener("keydown", handleKeyDown);
+            window.removeEventListener("keyup", handleKeyUp);
+        };
+    }, [dataElementSelectionGroupRef.current]);
     const handlePointerDown = (e) => {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g;
         const shiftActive = e.shiftKey;
         const svg = svgRef.current;
         if (!e.isPrimary)
@@ -333,6 +377,7 @@ const BoardTemplate = ({ refs }) => {
         if (targetRotate) {
             isRotatingRef.current = true;
         }
+        const targetSelectionBox = e.target.closest("g[id='selection-lines']");
         // RESIZE
         const targetGroup = e.target.closest("g[data-id]");
         const targetPointPolygon = e.target.closest("circle[data-point]");
@@ -346,8 +391,16 @@ const BoardTemplate = ({ refs }) => {
         const { g } = getAttributeElement(svg, activeId);
         if (targetGroup && shiftActive) {
             const findById = [...componentsState, ...extraComponentsState].find((comp) => comp.id == activeId);
-            const dataSelection = [...dataElementSelectionGroupRef.current, findById];
-            dataElementSelectionGroupRef.current = dataSelection;
+            const currentSelection = (_e = dataElementSelectionGroupRef.current) !== null && _e !== void 0 ? _e : [];
+            const alreadySelected = currentSelection.some((comp) => comp.id == activeId);
+            let newSelection;
+            if (alreadySelected) {
+                newSelection = currentSelection.filter((comp) => comp.id != activeId);
+            }
+            else {
+                newSelection = [...currentSelection, findById];
+            }
+            dataElementSelectionGroupRef.current = newSelection;
         }
         const box = getGlobalBBox(svg, g);
         const { x: initialXG, y: initialYG } = getTranslate(g);
@@ -356,7 +409,7 @@ const BoardTemplate = ({ refs }) => {
         const hitPoint = document.elementFromPoint(clientX, clientY);
         // CHECK FOR HIT ON SVG FOR SELECTION BOX
         // MAKE AND UNMAKE SELECTION BOX START ------
-        const hadSelectionBox = ((_e = dataElementSelectionGroupRef.current) === null || _e === void 0 ? void 0 : _e.length) > 0 && !isSingleSelection;
+        const hadSelectionBox = ((_f = dataElementSelectionGroupRef.current) === null || _f === void 0 ? void 0 : _f.length) > 0 && !isSingleSelection;
         const downInSelectionBox = hadSelectionBox && (hitPoint === null || hitPoint === void 0 ? void 0 : hitPoint.nodeName) !== "svg";
         const downOutSelectionBox = hadSelectionBox && (hitPoint === null || hitPoint === void 0 ? void 0 : hitPoint.nodeName) === "svg";
         const downBeforeHasSelectionBox = !downInSelectionBox &&
@@ -369,7 +422,6 @@ const BoardTemplate = ({ refs }) => {
         }
         //move tanpa ada selection single element dan bisa move juga ketika ada selection box
         //JIKA PUNYA SELECTION TAPI DOWN DI ELEMENT LAIN
-        const downInMatchSelectionBox = downInSelectionBox && (hitPoint === null || hitPoint === void 0 ? void 0 : hitPoint.nodeName) !== "svg" && isInSelectionTarget;
         if (downInSelectionBox) {
             hadSelectionRef.current = true;
         }
@@ -394,7 +446,7 @@ const BoardTemplate = ({ refs }) => {
                 shape: nameShapeSelectionBoxGhost,
                 id: idSelectionBoxGhost,
             });
-            (_f = svgRef.current) === null || _f === void 0 ? void 0 : _f.appendChild(boxSelection);
+            (_g = svgRef.current) === null || _g === void 0 ? void 0 : _g.appendChild(boxSelection);
         }
         // MAKE AND UNMAKE SELECTION BOX END ------
         // RESIZE SELECTION BOX
@@ -407,17 +459,23 @@ const BoardTemplate = ({ refs }) => {
             !downOutSelectionBox &&
             isInSelectionTarget &&
             !isSingleSelection &&
-            !isInTargetElement;
-        const downAtResizePositionAndHasSelectionBox = downAtResizePosition && hadSelectionBox && !isRotateSelectionBox;
+            !isInTargetElement &&
+            !isInitialCreateBoundingBox;
+        const downAtResizePositionAndHasSelectionBox = downAtResizePosition &&
+            hadSelectionBox &&
+            !isRotateSelectionBox &&
+            !isInitialCreateBoundingBox;
         const isMightResizeElement = !isEmpty(selectedComponent) &&
             downAtResizePosition &&
             downAtResizePosition &&
-            !hadSelectionBox;
+            !hadSelectionBox &&
+            !isInitialCreateBoundingBox;
         const isMightMove = activeId &&
             !targetPointPolygon &&
             isInTargetElement &&
-            !isMightResizeElement;
-        const isMightMoveOneElementSelection = isSingleSelection && !isMightResizeElement;
+            !isMightResizeElement &&
+            !isInitialCreateBoundingBox;
+        const isMightMoveOneElementSelection = isSingleSelection && !isMightResizeElement && !isInitialCreateBoundingBox;
         if (downOutResizePositionAndInSelectionBox) {
             onMoveSelectionBoxRef.current = true;
         }

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

@@ -34,6 +34,12 @@ export interface TableEditorProps {
         extraComponent: boolean;
     };
     refs?: React.RefObject<RefsType>;
+    viewStyles?: {
+        paddingTop?: number;
+        paddingLeft?: number;
+        paddingRight?: number;
+        paddingBottom?: number;
+    };
 }
 declare const TableEditor: (props: TableEditorProps) => import("react").JSX.Element;
 export default TableEditor;

package/dist/features/package/index.jsx

@@ -8,7 +8,7 @@ import { isEqual } from "lodash";
 import LayerView from "../view-only";
 const TableEditor = (props) => {
     const [initialValue, setInitialValue] = useState(null);
-    const { componentProps, extraComponentProps, onCurrentStateChange, dragOnly, mappingKey, viewOnly, deleteAutorized, refs } = props;
+    const { componentProps, extraComponentProps, onCurrentStateChange, dragOnly, mappingKey, viewOnly, deleteAutorized, refs, } = props;
     const { components, extraComponents, backgroundColor } = useAppSelector((state) => state.board);
     const dispatch = useAppDispatch();
     const refsBoard = useRef(null);
@@ -17,7 +17,7 @@ const TableEditor = (props) => {
         return ({
             svgRef: (_a = refsBoard === null || refsBoard === void 0 ? void 0 : refsBoard.current) === null || _a === void 0 ? void 0 : _a.svgRef,
             transformRef: (_b = refsBoard === null || refsBoard === void 0 ? void 0 : refsBoard.current) === null || _b === void 0 ? void 0 : _b.transformRef,
-            containerRef: (_c = refsBoard === null || refsBoard === void 0 ? void 0 : refsBoard.current) === null || _c === void 0 ? void 0 : _c.containerRef
+            containerRef: (_c = refsBoard === null || refsBoard === void 0 ? void 0 : refsBoard.current) === null || _c === void 0 ? void 0 : _c.containerRef,
         });
     });
     useEffect(() => {
@@ -27,6 +27,13 @@ const TableEditor = (props) => {
                 payload: null,
             });
         }
+        dispatch({
+            type: "tool/setActiveTool",
+            payload: ""
+        });
+        if (viewOnly) {
+            dispatch({ type: "board/setFlagChange", payload: true });
+        }
     }, [viewOnly]);
     const onUpdateCurrentState = () => {
         let matchInitialValueWithComponents = initialValue === null || initialValue === void 0 ? void 0 : initialValue.map((item) => {
@@ -58,7 +65,8 @@ const TableEditor = (props) => {
     };
     useEffect(() => {
         if (!isEqual(components, convertComponentProps()) ||
-            !isEqual(extraComponents, extraComponentProps) || !isEqual(backgroundColor, props === null || props === void 0 ? void 0 : props.defaultBackground)) {
+            !isEqual(extraComponents, extraComponentProps) ||
+            !isEqual(backgroundColor, props === null || props === void 0 ? void 0 : props.defaultBackground)) {
             onCurrentStateChange && onUpdateCurrentState();
         }
     }, [components, extraComponents, backgroundColor]);
@@ -105,18 +113,13 @@ const TableEditor = (props) => {
     }, [componentProps, extraComponentProps, props === null || props === void 0 ? void 0 : props.defaultBackground]);
     return (<>
       <div className="w-full h-screen flex relative">
-        <div className="w-full h-full flex relative" style={{
-            display: !viewOnly ? "none" : "flex",
-        }}>
-          <LayerView statusKey="status"/>
-        </div>
-        <div className="w-full h-full flex relative" style={{
-            display: viewOnly ? "none" : "flex",
-        }}>
-          <SideTool dragOnly={dragOnly} deleteAutorized={deleteAutorized}/>
-          <Board refs={refsBoard}/>
-          <ControlPanels action={props.action} responseMapping={props.responseMapping}/>
-        </div>
+        {viewOnly ? (<div className="w-full h-full flex relative">
+            <LayerView statusKey="status"/>
+          </div>) : (<div key={`${viewOnly}`} className="w-full h-full flex relative">
+            <SideTool dragOnly={dragOnly} deleteAutorized={deleteAutorized}/>
+            <Board key={`${viewOnly}`} refs={refsBoard}/>
+            <ControlPanels action={props.action} responseMapping={props.responseMapping}/>
+          </div>)}
       </div>
     </>);
 };

package/dist/features/panel/index.jsx

@@ -43,6 +43,7 @@ const ControlPanels = (props) => {
     let values = Form.useWatch([], form);
     useEffect(() => {
         if (selectedComponent) {
+            console.log("selectedComponent", selectedComponent);
             const isDifferentId = (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) !== (values === null || values === void 0 ? void 0 : values.id) || !(values === null || values === void 0 ? void 0 : values.id);
             const isSameIdAndSameDimensions = (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) === (values === null || values === void 0 ? void 0 : values.id) &&
                 (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.height) === (values === null || values === void 0 ? void 0 : values.height) &&
@@ -55,6 +56,7 @@ const ControlPanels = (props) => {
             form.setFieldsValue(selectedComponent);
         }
         else if (selectedGroup) {
+            console.log("selectedGroup", selectedGroup);
             if (show)
                 setOpen(true);
             if (!show)
@@ -74,11 +76,23 @@ const ControlPanels = (props) => {
             const isSameOpacity = isSameAllByKey(selectedGroup, "opacity");
             const isSampeRotation = isSameAllByKey(selectedGroup, "rotation");
             const isSameStrokeWidth = isSameAllByKey(selectedGroup, "strokeWidth");
-            form.setFieldsValue(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (isSameAllWidth ? { width: selectedGroup[0].width } : {})), (isSameAllHeight ? { height: selectedGroup[0].height } : {})), (isSameX ? { x: selectedGroup[0].x } : {})), (isSameY ? { y: selectedGroup[0].y } : {})), (isSameFill ? { fill: selectedGroup[0].fill } : {})), (isSameStroke ? { stroke: selectedGroup[0].stroke } : {})), (isSameOpacity ? { opacity: selectedGroup[0].opacity } : {})), (isSampeRotation ? { rotation: selectedGroup[0].rotation } : {})), (isSameStrokeWidth
+            console.log({
+                isSameAllWidth,
+                isSameAllHeight,
+                isSameX,
+                isSameY,
+                isSameFill,
+                isSameStroke,
+                isSameOpacity,
+                isSampeRotation,
+                isSameStrokeWidth,
+            });
+            form.setFieldsValue(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (isSameAllWidth ? { width: selectedGroup[0].width } : undefined)), (isSameAllHeight ? { height: selectedGroup[0].height } : undefined)), (isSameX ? { x: selectedGroup[0].x } : undefined)), (isSameY ? { y: selectedGroup[0].y } : undefined)), (isSameFill ? { fill: selectedGroup[0].fill } : undefined)), (isSameStroke ? { stroke: selectedGroup[0].stroke } : undefined)), (isSameOpacity ? { opacity: selectedGroup[0].opacity } : undefined)), (isSampeRotation ? { rotation: selectedGroup[0].rotation } : undefined)), (isSameStrokeWidth
                 ? { strokeWidth: selectedGroup[0].strokeWidth }
                 : {})));
         }
         else {
+            console.log("selectedGroup", selectedGroup);
             setOpen(false);
         }
     }, [selectedComponent, selectedGroup, show]);
@@ -129,6 +143,8 @@ const ControlPanels = (props) => {
             type: "board/updateAllComponents",
             payload: data,
         });
+        dispatch({ type: "board/setFlagChange", payload: true });
+        dispatch({ type: "board/setUpdateBy", payload: "global" });
     }, 300));
     const debouncedSyncForm = useRef(debounce(() => {
         dispatch({ type: "board/setFlagChange", payload: true });
@@ -147,11 +163,12 @@ const ControlPanels = (props) => {
         const newElement = Object.assign(Object.assign(Object.assign({}, findElement), values), { x: (_a = values.x) !== null && _a !== void 0 ? _a : findElement.x, y: (_b = values.y) !== null && _b !== void 0 ? _b : findElement.y, width: isAdjustSize ? forceSize.width : (_c = values.width) !== null && _c !== void 0 ? _c : findElement.width, height: isAdjustSize
                 ? forceSize.height
                 : (_d = values.height) !== null && _d !== void 0 ? _d : findElement.height });
-        const { g, element } = getAttributeElement((_e = svgRef === null || svgRef === void 0 ? void 0 : svgRef.current) === null || _e === void 0 ? void 0 : _e[1], id);
+        const svg = (_f = (_e = svgRef === null || svgRef === void 0 ? void 0 : svgRef.current) === null || _e === void 0 ? void 0 : _e[1]) !== null && _f !== void 0 ? _f : (_g = svgRef === null || svgRef === void 0 ? void 0 : svgRef.current) === null || _g === void 0 ? void 0 : _g[0];
+        const { g, element } = getAttributeElement(svg, id);
         applyResizeToSvgElement(element, g, newElement);
-        const getBBox = getGlobalBBox((_f = svgRef === null || svgRef === void 0 ? void 0 : svgRef.current) === null || _f === void 0 ? void 0 : _f[1], g);
+        const getBBox = getGlobalBBox(svg, g);
         debouncedSyncSelectedSelectionLines.current(Object.assign({}, getBBox));
-        updateSelectionBox((_g = svgRef === null || svgRef === void 0 ? void 0 : svgRef.current) === null || _g === void 0 ? void 0 : _g[1], getBBox);
+        updateSelectionBox(svg, getBBox);
     };
     const handleChangeComponent = (values, allValues) => {
         const { shape } = allValues, restProps = __rest(allValues, ["shape"]);
@@ -159,10 +176,6 @@ const ControlPanels = (props) => {
         if (selectedComponent) {
             updateElement(allValues.id, values);
             debouncedSyncComponents.current(Object.assign(Object.assign({}, (selectedComponent || {})), newValues));
-            // debouncedSyncSelectedComponents.current({
-            //   ...(selectedComponent || {}),
-            //   ...newValues,
-            // });
         }
         if ((selectedGroup === null || selectedGroup === void 0 ? void 0 : selectedGroup.length) > 0) {
             const { width, height, x, y, fill, stroke, opacity, rotation, strokeWidth, } = newValues;

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

@@ -74,6 +74,8 @@ const UploadTool = ({ name, type, action, responseMapping, defaultValue, }) => {
                                     payload: Object.assign({}, defaultFormatValue(width, height, srcFromResponse, Number(defaultValue.id))),
                                 });
                                 setDefaultSrc(img.src);
+                                dispatch({ type: "board/setFlagChange", payload: true });
+                                dispatch({ type: "board/setUpdateBy", payload: "global" });
                             }
                             else {
                                 dispatch({
@@ -84,6 +86,7 @@ const UploadTool = ({ name, type, action, responseMapping, defaultValue, }) => {
                                 });
                             }
                             dispatch({ type: "board/setFlagChange", payload: true });
+                            dispatch({ type: "board/setUpdateBy", payload: "global" });
                             // message.success(`${info.file.name} uploaded successfully.`);
                         };
                         // Set img src AFTER onload

package/dist/features/panel/utils.js

@@ -37,7 +37,7 @@ export const getSeatPosition = (shape, props) => {
     return (props === null || props === void 0 ? void 0 : props.seatPositions) || { top: 0, bottom: 0, left: 0, right: 0 };
 };
 export const adjustHeightWidthForSeatShape = (shape, props) => {
-    if (shape.includes("circle")) {
+    if (shape === null || shape === void 0 ? void 0 : shape.includes("circle")) {
         const sizeDefault = Math.min(props.width, props.height);
         return Object.assign(Object.assign({}, props), { height: sizeDefault, width: sizeDefault });
     }

package/dist/features/view-only-3/index.d.ts

@@ -71,8 +71,10 @@ export interface LayerViewProps<TMeta = undefined> {
     onSwitch?: (e: MouseEvent, component: TypeActionProps<TMeta>) => void;
     refs?: React.ForwardedRef<RefLayerView>;
     viewStyles?: {
-        paddingX?: number;
-        paddingY?: number;
+        paddingTop?: number;
+        paddingLeft?: number;
+        paddingRight?: number;
+        paddingBottom?: number;
     };
 }
 declare const LayerView: <TMeta>(props: LayerViewProps<TMeta>) => React.JSX.Element;

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

@@ -163,10 +163,12 @@ const LayerView = (props) => {
             minY = minY;
         }
         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 paddingY = maxY * (((_h = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _h === void 0 ? void 0 : _h.paddingY) || 0) +
-            minY * (((_j = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _j === void 0 ? void 0 : _j.paddingY) || 0);
-        const paddingX = maxX * (((_k = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _k === void 0 ? void 0 : _k.paddingX) || 0) +
-            minX * (((_l = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _l === void 0 ? void 0 : _l.paddingX) || 0);
+        // const paddingY =
+        //   maxY * (props?.viewStyles?.paddingY || 0) +
+        //   minY * (props?.viewStyles?.paddingY || 0);
+        // const paddingX =
+        //   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;
@@ -177,11 +179,17 @@ const LayerView = (props) => {
                 height: findBoundingBox.height,
             };
         }
+        // return {
+        //   minX: minX - paddingX - (minX - paddingX) * 0.5,
+        //   minY: minY - paddingY * 2,
+        //   width: maxX + paddingX * 2,
+        //   height: maxY + paddingY + (maxY + paddingY) * 0.5,
+        // };
         return {
-            minX: minX - paddingX - (minX - paddingX) * 0.5,
-            minY: minY - paddingY * 2,
-            width: maxX + paddingX * 2,
-            height: maxY + paddingY + (maxY + paddingY) * 0.5,
+            minX: minX - ((_h = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _h === void 0 ? void 0 : _h.paddingTop),
+            minY: minY - ((_j = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _j === void 0 ? void 0 : _j.paddingLeft),
+            width: maxX + ((_k = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _k === void 0 ? void 0 : _k.paddingRight),
+            height: maxY + ((_l = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _l === void 0 ? void 0 : _l.paddingBottom),
         };
     }, [componentsEditor, extraComponentsEditor]);
     const renderElements = (elementEditor, mappingKey, tableMatchKey) => {
@@ -538,11 +546,11 @@ const LayerView = (props) => {
             touchAction: "none",
             userSelect: "none",
         }} {...props.svgProps}>
-            <defs>
-              <clipPath id="contentCrop">
-                <rect x={boundingBox.minX} y={boundingBox.minY} width={boundingBox.width} height={boundingBox.height}/>
-              </clipPath>
-            </defs>
+            {hasBoundingBox && (<defs>
+                <clipPath id="contentCrop">
+                  <rect x={boundingBox.minX} y={boundingBox.minY} width={boundingBox.width} height={boundingBox.height}/>
+                </clipPath>
+              </defs>)}
             <g id="main-layer" clip-path="url(#contentCrop)">
               <Layers components={[
             ...extraComponentsEditor,

package/package.json

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