seat-editor 3.2.3 → 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

@@ -2,15 +2,14 @@
 import { useEffect, useState } from "react";
 import SeatEditor from "../../features/package";
 import { data4 } from "../constant";
-import { dummyImage } from "../only-view/page";
 export default function NewBoard() {
     const [initialValue, setInitialValue] = useState([]);
     const [extraComponents, setExtraComponents] = useState([]);
     const [backgroundColor, setBackgroundColor] = useState("#000000");
-    const [viewOnly, setViewOnly] = useState(true);
+    const [viewOnly, setViewOnly] = useState(false);
     useEffect(() => {
         setInitialValue(data4);
-        setExtraComponents(dummyImage);
+        setExtraComponents([]);
     }, []);
     return (<>
       <div className="w-full h-screen flex flex-col relative justify-center">

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/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

@@ -156,14 +156,13 @@ const BoardTemplate = ({ refs }) => {
             minY = findBoundingBox.y;
         }
         if ((minX !== Infinity || minY !== Infinity) && !activeTool) {
-            console.log("minX", minX, "minY", minY, "maxX", maxX, "maxY", maxY, "Haduhhh");
             (_h = transformRef.current) === null || _h === void 0 ? void 0 : _h.setTransform(-minX, -minY, scale);
             setHasInitialzed(true);
         }
     }, [componentsProps, extraComponentsProps]);
     const queueUpdateComponents = (data) => {
         dispatch({
-            type: "board/setNewComponents",
+            type: "board/updateComponentsBulk",
             payload: data,
         });
     };
@@ -181,10 +180,6 @@ const BoardTemplate = ({ refs }) => {
     }, 1000));
     // Redux → Local
     useEffect(() => {
-        console.log({
-            flagChange,
-            updateBy
-        }, "haduuhhh");
         if (flagChange && updateBy === "global") {
             if (!isEqual(selectedComponentProps, selectedComponent)) {
                 isSyncingFromRedux.current = true;
@@ -213,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",
@@ -293,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)
@@ -344,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]");
@@ -357,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);
@@ -367,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 &&
@@ -404,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
@@ -417,16 +459,22 @@ const BoardTemplate = ({ refs }) => {
             !downOutSelectionBox &&
             isInSelectionTarget &&
             !isSingleSelection &&
-            !isInTargetElement && !isInitialCreateBoundingBox;
-        const downAtResizePositionAndHasSelectionBox = downAtResizePosition && hadSelectionBox && !isRotateSelectionBox && !isInitialCreateBoundingBox;
+            !isInTargetElement &&
+            !isInitialCreateBoundingBox;
+        const downAtResizePositionAndHasSelectionBox = downAtResizePosition &&
+            hadSelectionBox &&
+            !isRotateSelectionBox &&
+            !isInitialCreateBoundingBox;
         const isMightResizeElement = !isEmpty(selectedComponent) &&
             downAtResizePosition &&
             downAtResizePosition &&
-            !hadSelectionBox && !isInitialCreateBoundingBox;
+            !hadSelectionBox &&
+            !isInitialCreateBoundingBox;
         const isMightMove = activeId &&
             !targetPointPolygon &&
             isInTargetElement &&
-            !isMightResizeElement && !isInitialCreateBoundingBox;
+            !isMightResizeElement &&
+            !isInitialCreateBoundingBox;
         const isMightMoveOneElementSelection = isSingleSelection && !isMightResizeElement && !isInitialCreateBoundingBox;
         if (downOutResizePositionAndInSelectionBox) {
             onMoveSelectionBoxRef.current = true;

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/package.json

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