seat-editor 3.2.3 → 3.2.5

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

@@ -1,25 +1,26 @@
 "use client";
 import { useEffect, useState } from "react";
 import SeatEditor from "../../features/package";
-import { data4 } from "../constant";
-import { dummyImage } from "../only-view/page";
+import { data5, dummyExtra5 } from "../constant";
 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);
+        setInitialValue(data5);
+        setExtraComponents(dummyExtra5);
     }, []);
     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">
      
         </div>
-        <button className="bg-blue-500 text-white px-4 py-2 rounded" onClick={() => setViewOnly(!viewOnly)}>
+        {/* <button className="bg-blue-500 text-white px-4 py-2 rounded"
+          onClick={() => setViewOnly(!viewOnly)}
+        >
           {viewOnly ? "Edit Mode ddd" : "View Mode"}
-        </button>
+        </button> */}
         <div className="flex-1 h-full">
           <SeatEditor componentProps={initialValue} viewOnly={viewOnly} dragOnly={true} deleteAutorized={{
             component: true,

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;
+            // 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,22 +109,54 @@ 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();
             }
             state.pointer += 1;
         },
         setNewExtraComponents: (state, action) => {
+            const currentPointer = state.pointer;
+            const totalHistory = state.historyChanges.length;
+            if (currentPointer < totalHistory) {
+                state.historyChanges = state.historyChanges.slice(0, currentPointer + 1);
+            }
+            state.historyChanges.push({
+                components: [...state.components],
+                extraComponents: [...state.extraComponents],
+            });
+            if (state.historyChanges.length > MAX_HISTORY_CHANGES) {
+                state.historyChanges.shift();
+            }
+            state.pointer += 1;
             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,20 +166,37 @@ const boardSlice = createSlice({
                     state.pointer -= 1;
                 }
                 const prev = state.historyChanges[state.pointer];
-                state.components = current(prev);
+                console.log({ 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.extraComponents = current((_d = (_c = state.historyChanges) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.extraComponents);
                 state.pointer = 0;
             }
+            state.updateBy = "global";
         },
         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;
+                state.updateBy = "global";
             }
         },
+        setInitialValue: (state, action) => {
+            const { components, extraComponents, backgroundColor } = action.payload;
+            state.components = components;
+            state.extraComponents = extraComponents;
+            state.pointer = 0;
+            state.backgroundColor = backgroundColor;
+            state.historyChanges = [{
+                    components,
+                    extraComponents
+                }];
+        }
     },
 });
 export const { addComponent, removeComponent, updateComponent, setBackgroundColor, removeExtraComponent } = boardSlice.actions;

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(updatedExtra);
         }
     };
     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/package/index.d.ts

@@ -20,7 +20,7 @@ export interface TableEditorProps {
     ];
     statusKey: string;
     defaultBackground?: string;
-    action?: (file: UploadFile<File>, type: string, defaultValue: PropertiesProps) => Promise<PropertiesProps>;
+    action?: (file: UploadFile<File>, type: string, defaultValue: PropertiesProps) => Promise<string>;
     responseMapping?: {
         status: string;
         message: string;

package/dist/features/package/index.jsx

@@ -80,7 +80,9 @@ const TableEditor = (props) => {
         return mappingData;
     };
     useEffect(() => {
-        if (!isEqual(components, convertComponentProps()) && componentProps) {
+        const initialComponent = !isEqual(components, convertComponentProps()) && componentProps;
+        const initialExtraComponent = !isEqual(extraComponents, extraComponentProps) && extraComponentProps;
+        if (initialComponent || initialExtraComponent) {
             let mappingData = componentProps === null || componentProps === void 0 ? void 0 : componentProps.map((item) => {
                 if (mappingKey && (item === null || item === void 0 ? void 0 : item[props.mappingKey])) {
                     return Object.assign({}, item[props.mappingKey]);
@@ -91,25 +93,33 @@ const TableEditor = (props) => {
                 setInitialValue(componentProps);
             }
             dispatch({
-                type: "board/setNewComponents",
-                payload: mappingData,
-            });
-            dispatch({ type: "board/setFlagChange", payload: true });
-        }
-        if (!isEqual(extraComponents, extraComponentProps) && extraComponentProps) {
-            dispatch({
-                type: "board/setNewExtraComponents",
-                payload: extraComponentProps,
-            });
-            dispatch({ type: "board/setFlagChange", payload: true });
-        }
-        if (props === null || props === void 0 ? void 0 : props.defaultBackground) {
-            dispatch({
-                type: "board/setBackgroundColor",
-                payload: props === null || props === void 0 ? void 0 : props.defaultBackground,
+                type: "board/setInitialValue",
+                payload: {
+                    components: mappingData,
+                    extraComponents: extraComponentProps,
+                    backgroundColor: props === null || props === void 0 ? void 0 : props.defaultBackground,
+                },
             });
+            // dispatch({
+            //   type: "board/setNewComponents",
+            //   payload: mappingData,
+            // });
             dispatch({ type: "board/setFlagChange", payload: true });
         }
+        // if (!isEqual(extraComponents, extraComponentProps) && extraComponentProps) {
+        //   dispatch({
+        //     type: "board/setNewExtraComponents",
+        //     payload: extraComponentProps,
+        //   });
+        //   dispatch({ type: "board/setFlagChange", payload: true });
+        // }
+        // if (props?.defaultBackground) {
+        //   dispatch({
+        //     type: "board/setBackgroundColor",
+        //     payload: props?.defaultBackground,
+        //   });
+        //   dispatch({ type: "board/setFlagChange", payload: true });
+        // }
     }, [componentProps, extraComponentProps, props === null || props === void 0 ? void 0 : props.defaultBackground]);
     return (<>
       <div className="w-full h-screen flex relative">
@@ -118,7 +128,7 @@ const TableEditor = (props) => {
           </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}/>
+            <ControlPanels action={props.action}/>
           </div>)}
       </div>
     </>);

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

@@ -1,13 +1,7 @@
 import { UploadFile } from "antd";
 import { PropertiesProps } from "../../dto/table";
 interface ControlPanelsProps {
-    action?: (file: UploadFile<File>, type: string, defaultValue: PropertiesProps) => Promise<PropertiesProps>;
-    responseMapping?: {
-        status: string;
-        message: string;
-        data: string;
-        src: string;
-    };
+    action?: (file: UploadFile<File>, type: string, defaultValue: PropertiesProps) => Promise<string>;
 }
 declare const ControlPanels: (props: ControlPanelsProps) => import("react").JSX.Element;
 export default ControlPanels;

package/dist/features/panel/index.jsx

@@ -25,7 +25,7 @@ import { SEAT_SHAPES } from "../../utils/constant";
 import { adjustHeightWidthForSeatShape, getSeatCount, getSeatPosition, isSeatShape, } from "./utils";
 import SeatSquare from "./table-seat-square";
 const ControlPanels = (props) => {
-    const { action, responseMapping } = props;
+    const { action } = props;
     const dispatch = useAppDispatch();
     const theme = useAppSelector((state) => state.theme);
     const tool = useAppSelector((state) => state.tool);
@@ -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;
@@ -203,7 +216,7 @@ const ControlPanels = (props) => {
     const renderFormPanel = () => {
         switch (tool.active) {
             case "select":
-                return (<SelectToolForm action={action} responseMapping={responseMapping}/>);
+                return (<SelectToolForm action={action}/>);
             case "square":
             case "circle":
                 return <SquareToolForm />;
@@ -212,9 +225,9 @@ const ControlPanels = (props) => {
             case "table-seat-square":
                 return <SeatSquare />;
             case "image-table":
-                return (<UploadTool name={tool.active} type="component" action={action} responseMapping={responseMapping}/>);
+                return (<UploadTool name={tool.active} type="component" action={action}/>);
             case "background":
-                return (<UploadTool name={tool.active} type="background" action={action} responseMapping={responseMapping}/>);
+                return (<UploadTool name={tool.active} type="background" action={action}/>);
             default:
                 return null;
         }

package/dist/features/panel/select-tool.d.ts

@@ -1,6 +1,5 @@
-declare const SelectToolForm: ({ title, action, responseMapping }: {
+declare const SelectToolForm: ({ title, action }: {
     title?: string;
     action: any;
-    responseMapping: any;
 }) => import("react").JSX.Element;
 export default SelectToolForm;