seat-editor 1.3.11 → 1.3.12

package/dist/components/layer/index.js

@@ -95,7 +95,7 @@ const Layers = ({ shadowShape, components, onClick, selectedComponent, selectedT
                 e.stopPropagation();
                 onTouchEnd === null || onTouchEnd === void 0 ? void 0 : onTouchEnd(e);
             },
-            ondblclick: (e) => {
+            onDoubleClick: (e) => {
                 e.stopPropagation();
                 onClick === null || onClick === void 0 ? void 0 : onClick(item);
             }
@@ -179,7 +179,7 @@ const Layers = ({ shadowShape, components, onClick, selectedComponent, selectedT
                 return null;
         }
     };
-    return (_jsxs("g", { children: [components === null || components === void 0 ? void 0 : components.map(renderShape), shadowShape === null || shadowShape === void 0 ? void 0 : shadowShape.map(renderShadowShape), selectedComponent && (_jsxs(_Fragment, { children: [["square", "circle", "diamond", "text",].includes(selectedComponent.shape) && (_jsxs("g", { children: [_jsx("rect", { x: selectedComponent.x - 25, y: selectedComponent.y - 25, width: 20, height: 20, fill: "black", stroke: "white", strokeWidth: "2", transform: `scale(${selectedComponent.scale})`, onMouseDown: (e) => {
+    return (_jsxs("g", { children: [components === null || components === void 0 ? void 0 : components.map(renderShape), shadowShape === null || shadowShape === void 0 ? void 0 : shadowShape.map(renderShadowShape), selectedComponent && (_jsxs(_Fragment, { children: [["square", "circle", "diamond", "text", "background", "image-table"].includes(selectedComponent.shape) && (_jsxs("g", { children: [_jsx("rect", { x: selectedComponent.x - 25, y: selectedComponent.y - 25, width: 20, height: 20, fill: "black", stroke: "white", strokeWidth: "2", transform: `scale(${selectedComponent.scale})`, onMouseDown: (e) => {
                                     e.stopPropagation();
                                     onMouseDown(e, selectedComponent, "top-left");
                                 }, onTouchStart: (e) => {

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

@@ -7,6 +7,7 @@ export interface InitialState {
     backgroundColor: string;
     themeColor: string;
     extraComponents: Component[];
+    flagChange: boolean;
 }
 export declare const addComponent: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, "board/addComponent">, removeComponent: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, "board/removeComponent">, updateComponent: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, "board/updateComponent">, setBackgroundColor: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, "board/setBackgroundColor">, removeExtraComponent: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, "board/removeExtraComponent">;
 declare const _default: import("redux").Reducer<InitialState>;

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

@@ -3,7 +3,8 @@ const initialState = {
     components: [],
     backgroundColor: "#FFFFFF",
     themeColor: "#4A90E2",
-    extraComponents: []
+    extraComponents: [],
+    flagChange: false
 };
 const boardSlice = createSlice({
     name: "board",
@@ -42,6 +43,9 @@ const boardSlice = createSlice({
         setExtraComponent: (state, action) => {
             state.extraComponents.push(action.payload);
         },
+        setFlagChange: (state, action) => {
+            state.flagChange = action.payload;
+        },
     },
 });
 export const { addComponent, removeComponent, updateComponent, setBackgroundColor, removeExtraComponent } = boardSlice.actions;

package/dist/features/board/index.js

@@ -7,6 +7,7 @@ import Layers from "../../components/layer";
 import { throttle } from "lodash";
 import ModalPreview from "../../components/modal-preview";
 import LayerView from "../view";
+import { isEqual, debounce } from "lodash";
 const BoardTemplate = ({ onSelectComponent }) => {
     const dispatch = useAppDispatch();
     const theme = useAppSelector((state) => state.theme);
@@ -21,13 +22,64 @@ const BoardTemplate = ({ onSelectComponent }) => {
     const [moveComponent, setMoveComponent] = useState(false);
     const [scale, setScale] = useState(1);
     const activeTool = useAppSelector((state) => state.tool.active);
-    const { components, extraComponents } = useAppSelector((state) => state.board);
+    const { components: componentsProps, extraComponents: extraComponentsProps, flagChange } = useAppSelector((state) => state.board);
     const isTouching = useRef(false);
     const [isDragging, setIsDragging] = useState(false);
     const [resizeDirection, setResizeDirection] = useState(null);
     const backgroundColor = useAppSelector((state) => state.board.backgroundColor);
-    const selectedComponent = useAppSelector((state) => state.panel.selectedComponent);
+    const selectedComponentProps = useAppSelector((state) => state.panel.selectedComponent);
     const screenCTMRef = useRef(null);
+    const dragIndex = useRef(null);
+    const [componentsState, setComponentsState] = useState([]);
+    const [extraComponentsState, setExtraComponentsState] = useState([]);
+    const [selectedComponent, setSelectedComponent] = useState(null);
+    const isSyncingFromRedux = useRef(false);
+    const debouncedSyncToReduxSelected = useRef(debounce((data) => {
+        throttledDispatch(data);
+    }, 300)).current;
+    const debouncedSyncComponents = useRef(debounce((data) => {
+        dispatch({
+            type: "board/setNewComponents",
+            payload: data,
+        });
+    }, 300));
+    const debouncedSyncExtraComponents = useRef(debounce((data) => {
+        dispatch({
+            type: "board/setNewExtraComponents",
+            payload: data,
+        });
+    }, 300));
+    // Redux → Local
+    useEffect(() => {
+        if (flagChange) {
+            if (!isEqual(componentsProps, componentsState)) {
+                isSyncingFromRedux.current = true;
+                setComponentsState(componentsProps);
+            }
+            if (!isEqual(extraComponentsProps, extraComponentsState)) {
+                isSyncingFromRedux.current = true;
+                setExtraComponentsState(extraComponentsProps);
+            }
+            if (!isEqual(selectedComponentProps, selectedComponent)) {
+                isSyncingFromRedux.current = true;
+                setSelectedComponent(selectedComponentProps);
+            }
+            dispatch({ type: "board/setFlagChange", payload: false });
+        }
+    }, [componentsProps, extraComponentsProps, selectedComponentProps]);
+    // Local → Redux
+    useEffect(() => {
+        if (isSyncingFromRedux.current) {
+            isSyncingFromRedux.current = false;
+            return;
+        }
+        if (!isEqual(componentsState, componentsProps)) {
+            debouncedSyncComponents.current(componentsState);
+        }
+        if (!isEqual(extraComponentsState, extraComponentsProps)) {
+            debouncedSyncExtraComponents.current(extraComponentsState);
+        }
+    }, [componentsState, extraComponentsState]);
     const handleAddComponent = (shape) => {
         dispatch({
             type: activeTool === "text"
@@ -35,6 +87,13 @@ const BoardTemplate = ({ onSelectComponent }) => {
                 : "board/addComponent",
             payload: Object.assign(Object.assign({}, shape), { fill: theme === null || theme === void 0 ? void 0 : theme.primaryColor }),
         });
+        const payload = Object.assign(Object.assign({}, shape), { fill: theme === null || theme === void 0 ? void 0 : theme.primaryColor });
+        if (activeTool === "text") {
+            setExtraComponentsState((prev) => [...prev, payload]);
+        }
+        else {
+            setComponentsState((prev) => [...prev, payload]);
+        }
     };
     const getSvgCoords = (e) => {
         var _a;
@@ -69,7 +128,8 @@ const BoardTemplate = ({ onSelectComponent }) => {
             if (e) {
                 dispatch({ type: "panel/setShow", payload: false });
                 setMoveComponent(true);
-                dispatch({ type: "panel/setSelectedComponent", payload: item });
+                // dispatch({ type: "panel/setSelectedComponent", payload: null });
+                // setSelectedComponent(null)
                 const rectBox = (e === null || e === void 0 ? void 0 : e.target).getBoundingClientRect();
                 setDragOffset({
                     x: e.clientX - rectBox.left,
@@ -82,6 +142,8 @@ const BoardTemplate = ({ onSelectComponent }) => {
         if (activeTool === "select") {
             setMoveComponent(false);
             dispatch({ type: "panel/setShow", payload: false });
+            dispatch({ type: "panel/setSelectedComponent", payload: null });
+            setSelectedComponent(null);
             setIsDragging(false);
             setResizeDirection(null);
         }
@@ -155,15 +217,34 @@ const BoardTemplate = ({ onSelectComponent }) => {
             !isTouching.current &&
             !resizeDirection) {
             const workspaceRect = e.currentTarget.getBoundingClientRect();
-            const newX = e.clientX - workspaceRect.left - dragOffset.x;
-            const newY = e.clientY - workspaceRect.top - dragOffset.y;
+            const newX = e.clientX - workspaceRect.left - (dragOffset === null || dragOffset === void 0 ? void 0 : dragOffset.x);
+            const newY = e.clientY - workspaceRect.top - (dragOffset === null || dragOffset === void 0 ? void 0 : dragOffset.y);
             let newPosition = {
                 x: newX,
                 y: newY,
             };
-            throttledDispatch(Object.assign(Object.assign({}, (typeof selectedComponent === "object" && selectedComponent !== null
-                ? selectedComponent
-                : {})), { x: newPosition.x, y: newPosition.y }));
+            requestAnimationFrame(() => {
+                setComponentsState((prev) => {
+                    return prev.map((component) => {
+                        if (component.id === selectedComponent.id) {
+                            return Object.assign(Object.assign({}, component), { x: newPosition.x, y: newPosition.y });
+                        }
+                        return component;
+                    });
+                });
+                setExtraComponentsState((prev) => {
+                    return prev.map((component) => {
+                        if (component.id === selectedComponent.id) {
+                            return Object.assign(Object.assign({}, component), { x: newPosition.x, y: newPosition.y });
+                        }
+                        return component;
+                    });
+                });
+                setSelectedComponent((prev) => {
+                    return Object.assign(Object.assign({}, prev), { x: newPosition.x, y: newPosition.y });
+                });
+            });
+            debouncedSyncToReduxSelected(Object.assign(Object.assign({}, selectedComponent), newPosition));
             return;
         }
         if (activeTool === "select" && resizeDirection) {
@@ -212,7 +293,7 @@ const BoardTemplate = ({ onSelectComponent }) => {
                         break;
                 }
             }
-            else if (['table-seat-circle', 'table-seat-square'].includes(selectedComponent.shape)) {
+            else if (["table-seat-circle", "table-seat-square"].includes(selectedComponent.shape)) {
                 switch (resizeDirection) {
                     case "top-left":
                         newShape.width = width + (x - currentX);
@@ -238,16 +319,41 @@ const BoardTemplate = ({ onSelectComponent }) => {
                         break;
                 }
             }
-            throttledDispatch(Object.assign(Object.assign({}, (typeof selectedComponent === "object" && selectedComponent !== null
-                ? selectedComponent
-                : {})), newShape));
+            // updateComponentRef({
+            //   ...(typeof selectedComponent === "object" && selectedComponent !== null
+            //     ? selectedComponent
+            //     : {}),
+            //   ...newShape,
+            // });
+            requestAnimationFrame(() => {
+                setComponentsState((prev) => {
+                    return prev.map((component) => {
+                        if (component.id === selectedComponent.id) {
+                            return Object.assign(Object.assign({}, component), newShape);
+                        }
+                        return component;
+                    });
+                });
+                setExtraComponentsState((prev) => {
+                    return prev.map((component) => {
+                        if (component.id === selectedComponent.id) {
+                            return Object.assign(Object.assign({}, component), newShape);
+                        }
+                        return component;
+                    });
+                });
+                setSelectedComponent(newShape);
+            });
+            debouncedSyncToReduxSelected(newShape);
         }
     };
     const handleSelectComponent = (items) => {
         if (activeTool === "select" && !isDragging) {
             setIsDragging(false);
             onSelectComponent && onSelectComponent(items);
+            setSelectedComponent(items);
             dispatch({ type: "panel/setSelectedComponent", payload: items });
+            // selectedComponentRef.current = items;
             dispatch({ type: "panel/setShow", payload: true });
         }
     };
@@ -259,6 +365,8 @@ const BoardTemplate = ({ onSelectComponent }) => {
     });
     const handleUnSelectComponent = () => {
         dispatch({ type: "panel/setSelectedComponent", payload: null });
+        setSelectedComponent(null);
+        // selectedComponentRef.current = null;
     };
     const handleTouchStart = (e, items, direction) => {
         var _a, _b, _c, _d;
@@ -269,6 +377,8 @@ const BoardTemplate = ({ onSelectComponent }) => {
             // dispatch({ type: "panel/setSelectedComponent", payload: item });
             onSelectComponent && onSelectComponent(items);
             dispatch({ type: "panel/setSelectedComponent", payload: items });
+            setSelectedComponent(items);
+            // selectedComponentRef.current = items;
             const touch = e.touches[0];
             const svg = e.currentTarget.ownerSVGElement;
             const pt = svg.createSVGPoint();
@@ -282,6 +392,10 @@ const BoardTemplate = ({ onSelectComponent }) => {
                 x: cursorpt.x - items.x,
                 y: cursorpt.y - items.y,
             });
+            // dragOffset.current = {
+            //   x: cursorpt.x - items.x,
+            //   y: cursorpt.y - items.y
+            // }
         }
         else if (activeTool === "select" && direction) {
             setResizeDirection(direction);
@@ -301,10 +415,17 @@ const BoardTemplate = ({ onSelectComponent }) => {
                 x: cursorpt.x - items.x,
                 y: cursorpt.y - items.y,
             });
+            // dragOffset.current = {
+            //   x: cursorpt.x - items.x,
+            //   y: cursorpt.y - items.y
+            // }
         }
     };
     const handleTouchMove = (e) => {
-        if (activeTool === "select" && moveComponent && isTouching.current && !resizeDirection) {
+        if (activeTool === "select" &&
+            moveComponent &&
+            isTouching.current &&
+            !resizeDirection) {
             setIsDragging(true);
             const touch = e.touches[0];
             const svg = e.currentTarget.ownerSVGElement;
@@ -314,11 +435,37 @@ const BoardTemplate = ({ onSelectComponent }) => {
             pt.x = touch.clientX;
             pt.y = touch.clientY;
             const cursorpt = pt.matrixTransform(screenCTMRef.current);
-            throttledDispatch(Object.assign(Object.assign({}, (typeof selectedComponent === "object" && selectedComponent !== null
-                ? selectedComponent
-                : {})), { x: cursorpt.x - dragOffset.x, y: cursorpt.y - dragOffset.y }));
+            requestAnimationFrame(() => {
+                setComponentsState((prev) => {
+                    return prev.map((component) => {
+                        if (component.id === selectedComponent.id) {
+                            return Object.assign(Object.assign({}, component), { x: cursorpt.x - (dragOffset === null || dragOffset === void 0 ? void 0 : dragOffset.x), y: cursorpt.y - (dragOffset === null || dragOffset === void 0 ? void 0 : dragOffset.y) });
+                        }
+                        return component;
+                    });
+                });
+                setExtraComponentsState((prev) => {
+                    return prev.map((component) => {
+                        if (component.id === selectedComponent.id) {
+                            return Object.assign(Object.assign({}, component), { x: cursorpt.x - (dragOffset === null || dragOffset === void 0 ? void 0 : dragOffset.x), y: cursorpt.y - (dragOffset === null || dragOffset === void 0 ? void 0 : dragOffset.y) });
+                        }
+                        return component;
+                    });
+                });
+                setSelectedComponent(Object.assign(Object.assign({}, selectedComponent), { x: cursorpt.x - (dragOffset === null || dragOffset === void 0 ? void 0 : dragOffset.x), y: cursorpt.y - (dragOffset === null || dragOffset === void 0 ? void 0 : dragOffset.y) }));
+            });
+            // updateComponentRef({
+            //   ...(typeof selectedComponent === "object" && selectedComponent !== null
+            //     ? selectedComponent
+            //     : {}),
+            //   x: cursorpt.x - dragOffset?.current.x,
+            //   y: cursorpt.y - dragOffset?.current.y,
+            // });
         }
-        else if (activeTool === "select" && moveComponent && isTouching.current && resizeDirection) {
+        else if (activeTool === "select" &&
+            moveComponent &&
+            isTouching.current &&
+            resizeDirection) {
             setIsDragging(true);
             const touch = e.touches[0];
             const svg = e.currentTarget.ownerSVGElement;
@@ -367,9 +514,32 @@ const BoardTemplate = ({ onSelectComponent }) => {
                 default:
                     break;
             }
-            throttledDispatch(Object.assign(Object.assign({}, (typeof selectedComponent === "object" && selectedComponent !== null
-                ? selectedComponent
-                : {})), newShape));
+            // updateComponentRef({
+            //   ...(typeof selectedComponent === "object" && selectedComponent !== null
+            //     ? selectedComponent
+            //     : {}),
+            //   ...newShape,
+            // });
+            requestAnimationFrame(() => {
+                setComponentsState((prev) => {
+                    return prev.map((component) => {
+                        if (component.id === selectedComponent.id) {
+                            return Object.assign(Object.assign({}, component), newShape);
+                        }
+                        return component;
+                    });
+                });
+                setExtraComponentsState((prev) => {
+                    return prev.map((component) => {
+                        if (component.id === selectedComponent.id) {
+                            return Object.assign(Object.assign({}, component), newShape);
+                        }
+                        return component;
+                    });
+                });
+                setSelectedComponent(Object.assign(Object.assign({}, selectedComponent), newShape));
+            });
+            debouncedSyncToReduxSelected(newShape);
         }
     };
     const handleTouchEnd = () => {
@@ -391,6 +561,6 @@ const BoardTemplate = ({ onSelectComponent }) => {
                             }, onMouseLeave: handleMouseLeave, xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "xMidYMid meet", style: {
                                 background: backgroundColor,
                                 display: "block",
-                            }, children: _jsx(Layers, { shadowShape: shadowShape, components: [...extraComponents, ...components], onClick: handleSelectComponent, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onBlur: handleUnSelectComponent, selectedComponent: selectedComponent, activeTool: activeTool, onTouchStart: (e, item, direction) => handleTouchStart(e, item, direction), onTouchMove: (e) => handleTouchMove(e), onTouchEnd: handleTouchEnd }) }) }) }) })] }));
+                            }, children: _jsx(Layers, { shadowShape: shadowShape, components: [...extraComponentsState, ...componentsState], onClick: handleSelectComponent, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onBlur: handleUnSelectComponent, selectedComponent: selectedComponent, activeTool: activeTool, onTouchStart: (e, item, direction) => handleTouchStart(e, item, direction), onTouchMove: (e) => handleTouchMove(e), onTouchEnd: handleTouchEnd }) }) }) }) })] }));
 };
 export default BoardTemplate;

package/dist/features/panel/index.js

@@ -47,6 +47,7 @@ const ControlPanels = (props) => {
             type: "panel/updateSelectedComponent",
             payload: Object.assign(Object.assign({}, (selectedComponent || {})), allValues),
         });
+        dispatch({ type: "board/setFlagChange", payload: true });
     };
     const renderFormPanel = () => {
         switch (tool.active) {

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

@@ -69,6 +69,7 @@ const UploadTool = ({ name, type, action, responseMapping, }) => {
                                         src: srcFromResponse,
                                     },
                                 });
+                                dispatch({ type: "board/setFlagChange", payload: true });
                                 message.success(`${info.file.name} uploaded successfully.`);
                             };
                             // Set img src AFTER onload
@@ -101,6 +102,7 @@ const UploadTool = ({ name, type, action, responseMapping, }) => {
                                     src: img.src,
                                 },
                             });
+                            dispatch({ type: "board/setFlagChange", payload: true });
                             message.success(`${info.file.name} uploaded successfully.`);
                         };
                         // Set img src AFTER onload

package/dist/features/side-tool/index.js

@@ -107,6 +107,7 @@ const SideTool = ({ dragOnly }) => {
             type: "board/removeExtraComponent",
             payload: selectedComponent,
         });
+        dispatch({ type: "board/setFlagChange", payload: true });
     };
     const handleDuplicateComponent = () => {
         const newComponent = Object.assign(Object.assign({}, selectedComponent), { x: selectedComponent.x + 20, y: selectedComponent.y + 20, id: Date.now() });

package/dist/libs/store.js

@@ -1,12 +1,11 @@
 "use client";
 import { configureStore } from "@reduxjs/toolkit";
 import { rootReducer } from "./rootReducer";
-import { logger } from "redux-logger";
 import { middleware } from "./middleware";
 import { FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER } from "redux-persist";
-if (process.env.NODE_ENV === "development") {
-    middleware.push(logger);
-}
+// if(process.env.NODE_ENV === "development") {
+//       middleware.push(logger);
+//   }
 // const rootPersistReducer = persistReducer<RootState>(rootPersistConfig, rootReducer);
 export const store = configureStore({
     reducer: rootReducer,

package/package.json

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