seat-editor 1.6.16 → 1.6.18

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

@@ -5,6 +5,7 @@ import { constantData } from "../constant";
 export default function NewBoard() {
     const [initialValue, setInitialValue] = useState([]);
     const [extraComponents, setExtraComponents] = useState([]);
+    const [backgroundColor, setBackgroundColor] = useState("#ffffff");
     const [viewOnly, setViewOnly] = useState(true);
     useEffect(() => {
         setInitialValue(constantData);
@@ -16,6 +17,15 @@ export default function NewBoard() {
                 shape: "background",
                 width: 100,
                 height: 100,
+            },
+            {
+                src: "https://d3l3j4e3k9p181.cloudfront.net/dev/5bf923de-2366-4a11-9b8b-e92de0afbf05/3a65cb36-7d85-4c38-9403-a15f94641920/68d45207-d66b-4bb5-92a2-4e5a87715e98/rsvp/1751350513582817819_download (10).jpg",
+                id: 1747388267451,
+                x: 100,
+                y: 100,
+                shape: "background",
+                width: 100,
+                height: 100,
             }]);
     }, []);
     return (<>
@@ -43,10 +53,13 @@ export default function NewBoard() {
             if (((_a = setState === null || setState === void 0 ? void 0 : setState.components) === null || _a === void 0 ? void 0 : _a.length) > 0) {
                 setInitialValue((_b = setState === null || setState === void 0 ? void 0 : setState.components) !== null && _b !== void 0 ? _b : []);
             }
+            if (setState === null || setState === void 0 ? void 0 : setState.background) {
+                setBackgroundColor(setState === null || setState === void 0 ? void 0 : setState.backgroundColor);
+            }
             if (((_c = setState === null || setState === void 0 ? void 0 : setState.extraComponents) === null || _c === void 0 ? void 0 : _c.length) > 0) {
                 setExtraComponents((_d = setState === null || setState === void 0 ? void 0 : setState.extraComponents) !== null && _d !== void 0 ? _d : []);
             }
-        }} extraComponentProps={extraComponents} defaultBackground="#ffffff" 
+        }} extraComponentProps={extraComponents} defaultBackground={backgroundColor} 
     // dragOnly={true}
     statusKey="status"/>
           </div>

package/dist/features/board-v2/index.d.ts

@@ -2,6 +2,7 @@ import React from "react";
 interface BoardTemplateProps {
     onSelectComponent?: (items: any) => void;
     mappingKey?: string;
+    viewOnly?: boolean;
 }
-declare const BoardTemplate: ({ onSelectComponent }: BoardTemplateProps) => React.JSX.Element;
+declare const BoardTemplate: ({ onSelectComponent, viewOnly }: BoardTemplateProps) => React.JSX.Element;
 export default BoardTemplate;

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

@@ -9,7 +9,8 @@ import LayerView from "../view";
 import { isEqual, debounce } from "lodash";
 import { ZoomIn, ZoomOut } from "lucide-react";
 import { Button } from "antd";
-const BoardTemplate = ({ onSelectComponent }) => {
+const BoardTemplate = ({ onSelectComponent, viewOnly }) => {
+    var _a, _b;
     const dispatch = useAppDispatch();
     const theme = useAppSelector((state) => state.theme);
     const transformRef = useRef(null);
@@ -451,7 +452,7 @@ const BoardTemplate = ({ onSelectComponent }) => {
             setWidthBoard(containerRef.current.offsetWidth);
             setHeightBoard(containerRef.current.offsetHeight);
         }
-    });
+    }, [(_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth, (_b = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight, viewOnly]);
     const handleUnSelectComponent = () => {
         dispatch({ type: "panel/setSelectedComponent", payload: null });
         setSelectedComponent(null);

package/dist/features/package/index.jsx

@@ -49,7 +49,7 @@ const TableEditor = (props) => {
     };
     useEffect(() => {
         if (!isEqual(components, convertComponentProps()) ||
-            !isEqual(extraComponents, extraComponentProps)) {
+            !isEqual(extraComponents, extraComponentProps) || !isEqual(backgroundColor, props === null || props === void 0 ? void 0 : props.defaultBackground)) {
             onCurrentStateChange && onUpdateCurrentState();
         }
     }, [components, extraComponents, backgroundColor]);
@@ -105,7 +105,7 @@ const TableEditor = (props) => {
             display: viewOnly ? "none" : "flex",
         }}>
           <SideTool dragOnly={dragOnly} deleteAutorized={deleteAutorized}/>
-          <Board onSelectComponent={props.onSelectComponent}/>
+          <Board onSelectComponent={props.onSelectComponent} viewOnly={viewOnly}/>
           <ControlPanels action={props.action} responseMapping={props.responseMapping}/>
         </div>
       </div>

package/dist/features/panel/index.jsx

@@ -10,13 +10,14 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
 import { Form, Drawer, Input } from "antd";
 import SelectToolForm from "./select-tool";
 import SquareToolForm from "./square-circle-tool";
 import SeatCircle from "./table-seat-circle";
 import UploadTool from "./upload-tool";
+import { debounce } from "lodash";
 const ControlPanels = (props) => {
     const { action, responseMapping } = props;
     const dispatch = useAppDispatch();
@@ -56,20 +57,43 @@ const ControlPanels = (props) => {
                 ? (_h = (_g = props === null || props === void 0 ? void 0 : props[0]) === null || _g === void 0 ? void 0 : _g.seatFill) !== null && _h !== void 0 ? _h : "#DADADA"
                 : undefined, text: shape === "text" ? (_k = (_j = props === null || props === void 0 ? void 0 : props[0]) === null || _j === void 0 ? void 0 : _j.text) !== null && _k !== void 0 ? _k : "Text" : undefined, fontColor: shape === "text" ? (_m = (_l = props === null || props === void 0 ? void 0 : props[0]) === null || _l === void 0 ? void 0 : _l.fontColor) !== null && _m !== void 0 ? _m : "#DADADA" : undefined }));
     };
-    const handleChangeComponent = (values, allValues) => {
-        const { shape } = allValues, restProps = __rest(allValues, ["shape"]);
-        const newValues = createShape(shape, restProps);
+    const debouncedSyncComponents = useRef(debounce((data) => {
         dispatch({
             type: "board/updateComponent",
-            payload: Object.assign(Object.assign({}, (selectedComponent || {})), newValues),
+            payload: data,
+        });
+    }, 300));
+    const debouncedSyncSelectedComponents = useRef(debounce((data) => {
+        dispatch({
+            type: "panel/updateSelectedComponent",
+            payload: data,
         });
+    }, 300));
+    const debouncedSyncForm = useRef(debounce(() => {
+        dispatch({ type: "board/setFlagChange", payload: true });
+    }, 300));
+    const handleChangeComponent = (values, allValues) => {
+        const { shape } = allValues, restProps = __rest(allValues, ["shape"]);
+        const newValues = createShape(shape, restProps);
+        debouncedSyncComponents.current(Object.assign(Object.assign({}, (selectedComponent || {})), newValues));
+        // dispatch({
+        //   type: "board/updateComponent",
+        //   payload: {
+        //     ...(selectedComponent || {}),
+        //     ...newValues,
+        //   },
+        // });
         if (shape !== (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape)) {
-            dispatch({
-                type: "panel/updateSelectedComponent",
-                payload: Object.assign(Object.assign({}, (selectedComponent || {})), newValues),
-            });
+            debouncedSyncSelectedComponents.current(Object.assign(Object.assign({}, (selectedComponent || {})), newValues));
+            // dispatch({
+            //   type: "panel/updateSelectedComponent",
+            //   payload: {
+            //     ...(selectedComponent || {}),
+            //     ...newValues,
+            //   },
+            // });
         }
-        dispatch({ type: "board/setFlagChange", payload: true });
+        debouncedSyncForm.current();
     };
     const renderFormPanel = () => {
         switch (tool.active) {

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

@@ -146,21 +146,22 @@ const SideTool = ({ dragOnly, deleteAutorized, }) => {
         dispatch({ type: "board/setFlagChange", payload: true });
     };
     const handleRemoveComponent = () => {
-        if ((selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) !== "background" && !(deleteAutorized === null || deleteAutorized === void 0 ? void 0 : deleteAutorized.component)) {
+        const exludedShapes = ["background", "text"];
+        if (!exludedShapes.includes(selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) && !(deleteAutorized === null || deleteAutorized === void 0 ? void 0 : deleteAutorized.component)) {
             message.error("You are not authorized to delete this table.");
             return;
         }
-        if ((selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) === "background" && !(deleteAutorized === null || deleteAutorized === void 0 ? void 0 : deleteAutorized.extraComponent)) {
+        if (exludedShapes.includes(selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) && !(deleteAutorized === null || deleteAutorized === void 0 ? void 0 : deleteAutorized.extraComponent)) {
             message.error("You are not authorized to delete this background.");
             return;
         }
-        if (deleteAutorized === null || deleteAutorized === void 0 ? void 0 : deleteAutorized.component) {
+        if ((deleteAutorized === null || deleteAutorized === void 0 ? void 0 : deleteAutorized.component) && !exludedShapes.includes(selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape)) {
             dispatch({
                 type: "board/removeComponent",
                 payload: selectedComponent,
             });
         }
-        if (deleteAutorized === null || deleteAutorized === void 0 ? void 0 : deleteAutorized.extraComponent) {
+        if ((deleteAutorized === null || deleteAutorized === void 0 ? void 0 : deleteAutorized.extraComponent) && exludedShapes.includes(selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape)) {
             dispatch({
                 type: "board/removeExtraComponent",
                 payload: selectedComponent,

package/package.json

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

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

@@ -1,36 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
-import SeatEditor from "../../features/package";
-import { constantData } from "../constant";
-export default function NewBoard() {
-    const [initialValue, setInitialValue] = useState([]);
-    const [extraComponents, setExtraComponents] = useState([]);
-    const [viewOnly, setViewOnly] = useState(true);
-    useEffect(() => {
-        setInitialValue(constantData);
-        setExtraComponents([{
-                src: "https://d3l3j4e3k9p181.cloudfront.net/dev/5bf923de-2366-4a11-9b8b-e92de0afbf05/3a65cb36-7d85-4c38-9403-a15f94641920/68d45207-d66b-4bb5-92a2-4e5a87715e98/rsvp/1751350513582817819_download (10).jpg",
-                id: 1747388267450,
-                x: 0,
-                y: 0,
-                shape: "background",
-                width: 100,
-                height: 100,
-            }]);
-    }, []);
-    return (_jsx(_Fragment, { children: _jsxs("div", { className: "w-full h-screen flex flex-col relative justify-center", children: [_jsx("button", { className: "bg-blue-500 text-white px-4 py-2 rounded", onClick: () => setViewOnly(!viewOnly), children: viewOnly ? "Edit Mode" : "View Mode" }), _jsx("div", { className: "flex-1 h-full", children: _jsx(SeatEditor, { componentProps: initialValue, viewOnly: viewOnly, dragOnly: true, deleteAutorized: {
-                            component: true,
-                            extraComponent: true,
-                        }, mappingKey: "properties", onCurrentStateChange: (setState) => {
-                            var _a, _b, _c, _d;
-                            if (((_a = setState === null || setState === void 0 ? void 0 : setState.components) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-                                setInitialValue((_b = setState === null || setState === void 0 ? void 0 : setState.components) !== null && _b !== void 0 ? _b : []);
-                            }
-                            if (((_c = setState === null || setState === void 0 ? void 0 : setState.extraComponents) === null || _c === void 0 ? void 0 : _c.length) > 0) {
-                                setExtraComponents((_d = setState === null || setState === void 0 ? void 0 : setState.extraComponents) !== null && _d !== void 0 ? _d : []);
-                            }
-                        }, extraComponentProps: extraComponents, defaultBackground: "#ffffff", 
-                        // dragOnly={true}
-                        statusKey: "status" }) })] }) }));
-}