seat-editor 3.2.4 → 3.2.6

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

@@ -1,24 +1,26 @@
 "use client";
 import { useEffect, useState } from "react";
 import SeatEditor from "../../features/package";
-import { data4 } from "../constant";
+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(false);
     useEffect(() => {
-        setInitialValue(data4);
-        setExtraComponents([]);
+        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/features/board-v3/board-slice.js

@@ -59,7 +59,7 @@ const boardSlice = createSlice({
             }
         },
         updateComponentsBulk: (state, action) => {
-            const updates = action.payload; // array of components
+            const updates = action.payload;
             // Simpan snapshot untuk undo (deep clone lebih aman)
             state.historyChanges.push({
                 components: [...state.components],
@@ -119,6 +119,19 @@ const boardSlice = createSlice({
             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) => {
@@ -153,14 +166,16 @@ const boardSlice = createSlice({
                     state.pointer -= 1;
                 }
                 const prev = state.historyChanges[state.pointer];
+                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((_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.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) {
@@ -168,8 +183,20 @@ const boardSlice = createSlice({
                 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

@@ -208,7 +208,7 @@ const BoardTemplate = ({ refs }) => {
         const updatedExtra = updateSingleComponent(extraComponentsState, component, setExtraComponentsState);
         if (updatedExtra) {
             dispatch({ type: "board/setUpdateBy", payload: "local" });
-            queueUpdateComponents(updatedComponents);
+            queueUpdateComponents(updatedExtra);
         }
     };
     const updateComponentsAttribute = (components) => {

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

@@ -1,6 +1,5 @@
 import { RefsType } from "../board-v3";
 import { PropertiesProps } from "@/dto/table";
-import { UploadFile } from "antd";
 export interface TableEditorProps {
     componentProps: PropertiesProps[];
     extraComponentProps: PropertiesProps[];
@@ -20,7 +19,7 @@ export interface TableEditorProps {
     ];
     statusKey: string;
     defaultBackground?: string;
-    action?: (file: UploadFile<File>, type: string, defaultValue: PropertiesProps) => Promise<PropertiesProps>;
+    action?: (file: File) => Promise<string>;
     responseMapping?: {
         status: string;
         message: string;

package/dist/features/package/index.jsx

@@ -7,6 +7,7 @@ import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
 import { isEqual } from "lodash";
 import LayerView from "../view-only";
 const TableEditor = (props) => {
+    var _a;
     const [initialValue, setInitialValue] = useState(null);
     const { componentProps, extraComponentProps, onCurrentStateChange, dragOnly, mappingKey, viewOnly, deleteAutorized, refs, } = props;
     const { components, extraComponents, backgroundColor } = useAppSelector((state) => state.board);
@@ -29,7 +30,7 @@ const TableEditor = (props) => {
         }
         dispatch({
             type: "tool/setActiveTool",
-            payload: ""
+            payload: "",
         });
         if (viewOnly) {
             dispatch({ type: "board/setFlagChange", payload: true });
@@ -80,7 +81,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 +94,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 +129,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} transform={(_a = refsBoard === null || refsBoard === void 0 ? void 0 : refsBoard.current) === null || _a === void 0 ? void 0 : _a.transformRef}/>
           </div>)}
       </div>
     </>);

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

@@ -1,13 +1,6 @@
-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: File) => Promise<string>;
+    transform?: any;
 }
 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, transform } = props;
     const dispatch = useAppDispatch();
     const theme = useAppSelector((state) => state.theme);
     const tool = useAppSelector((state) => state.tool);
@@ -216,7 +216,7 @@ const ControlPanels = (props) => {
     const renderFormPanel = () => {
         switch (tool.active) {
             case "select":
-                return (<SelectToolForm action={action} responseMapping={responseMapping}/>);
+                return (<SelectToolForm action={action} tranform={transform}/>);
             case "square":
             case "circle":
                 return <SquareToolForm />;
@@ -225,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} transform={transform}/>);
             case "background":
-                return (<UploadTool name={tool.active} type="background" action={action} responseMapping={responseMapping}/>);
+                return (<UploadTool name={tool.active} type="background" action={action} transform={transform}/>);
             default:
                 return null;
         }

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

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

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

@@ -6,7 +6,7 @@ import SeatSquare from "./table-seat-square";
 import UploadTool from "./upload-tool";
 import TextTool from "./text-tool";
 import SelectedGroup from "./selected-group";
-const SelectToolForm = ({ title = "Title", action, responseMapping }) => {
+const SelectToolForm = ({ title = "Title", action, tranform }) => {
     const components = useAppSelector((state) => state.board.components);
     const selectedComponent = useAppSelector((state) => state.panel.selectedComponent);
     const extraComponents = useAppSelector((state) => state.board.extraComponents);
@@ -47,9 +47,9 @@ const SelectToolForm = ({ title = "Title", action, responseMapping }) => {
                 return <SeatSquare />;
             case "image-table":
             case "background":
-                return (<UploadTool action={action} responseMapping={responseMapping} name={selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape} defaultValue={selectedComponent} type={(selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) === "background"
+                return (<UploadTool action={action} name={selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape} defaultValue={selectedComponent} type={(selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) === "background"
                         ? "background"
-                        : "component"}/>);
+                        : "component"} transform={tranform}/>);
             case "text":
                 return <TextTool />;
             default:

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

@@ -1,16 +1,10 @@
-import { UploadFile } from "antd";
 import { PropertiesProps } from "@/dto/table";
 interface UploadToolProps {
     name: string;
     type?: "component" | "background" | "assets";
-    action?: (file: UploadFile<File>, type: string, defaultValue: PropertiesProps) => Promise<PropertiesProps>;
-    responseMapping?: {
-        status: string;
-        message: string;
-        data: string;
-        src: string;
-    };
+    action?: (file: File) => Promise<string>;
     defaultValue?: PropertiesProps;
+    transform?: any;
 }
-declare const UploadTool: ({ name, type, action, responseMapping, defaultValue, }: UploadToolProps) => import("react").JSX.Element;
+declare const UploadTool: ({ name, type, action, defaultValue, transform }: UploadToolProps) => import("react").JSX.Element;
 export default UploadTool;

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

@@ -10,28 +10,31 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { useState, useEffect } from "react";
 import { Upload, Image, Button } from "antd";
-import { InboxOutlined } from "@ant-design/icons";
+import { InboxOutlined, LoadingOutlined } from "@ant-design/icons";
 import { useAppDispatch } from "../../hooks/use-redux";
 import SectionLabel from "../../components/form-tools/label";
 import SectionShape from "../../components/form-tools/shape";
 const { Dragger } = Upload;
-const UploadTool = ({ name, type, action, responseMapping, defaultValue, }) => {
-    var _a, _b;
+const UploadTool = ({ name, type, action, defaultValue, transform }) => {
+    var _a, _b, _c;
+    const transformState = (_a = transform === null || transform === void 0 ? void 0 : transform.instance) === null || _a === void 0 ? void 0 : _a.transformState;
     const [defaultSrc, setDefaultSrc] = useState(null);
     const [isEdit, setIsEdit] = useState(false);
+    const [loading, setLoading] = useState(false);
     useEffect(() => {
         if (defaultValue) {
             setDefaultSrc(defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.src);
             setIsEdit(true);
+            setLoading(false);
         }
     }, [defaultValue]);
     const dispatch = useAppDispatch();
-    const widthWorkspace = ((_a = document === null || document === void 0 ? void 0 : document.getElementById("workspace")) === null || _a === void 0 ? void 0 : _a.clientWidth) || 0;
-    const heightWorkspace = ((_b = document === null || document === void 0 ? void 0 : document.getElementById("workspace")) === null || _b === void 0 ? void 0 : _b.clientHeight) || 0;
+    const widthWorkspace = ((_b = document === null || document === void 0 ? void 0 : document.getElementById("workspace")) === null || _b === void 0 ? void 0 : _b.clientWidth) || 0;
+    const heightWorkspace = ((_c = document === null || document === void 0 ? void 0 : document.getElementById("workspace")) === null || _c === void 0 ? void 0 : _c.clientHeight) || 0;
     const defaultFormatValue = (width, height, src, id) => ({
         id: id || new Date().getTime(),
-        x: 0,
-        y: 0,
+        x: Math.abs(transformState === null || transformState === void 0 ? void 0 : transformState.positionX),
+        y: Math.abs(transformState === null || transformState === void 0 ? void 0 : transformState.positionY),
         width: width < 1 ? 100 : width,
         height: height < 1 ? 100 : height,
         rotation: 0,
@@ -44,7 +47,7 @@ const UploadTool = ({ name, type, action, responseMapping, defaultValue, }) => {
         maxCount: 1,
         showUploadList: false,
         onChange: (info) => __awaiter(void 0, void 0, void 0, function* () {
-            console.log({ info });
+            setLoading(true);
             if (info.file) {
                 const file = info.file;
                 const img = new window.Image();
@@ -52,7 +55,30 @@ const UploadTool = ({ name, type, action, responseMapping, defaultValue, }) => {
                 try {
                     // ⬇️ IF ada custom action (upload ke server)
                     if (action) {
-                        yield action(file, type, defaultValue);
+                        const src = yield action(file);
+                        if (isEdit) {
+                            dispatch({
+                                type: "board/updateComponent",
+                                payload: Object.assign({}, defaultFormatValue(widthWorkspace, heightWorkspace, src, Number(defaultValue.id))),
+                            });
+                            dispatch({
+                                type: "panel/setSelectedComponent",
+                                payload: Object.assign({}, defaultFormatValue(widthWorkspace, heightWorkspace, src, Number(defaultValue.id))),
+                            });
+                            setDefaultSrc(src);
+                            dispatch({ type: "board/setFlagChange", payload: true });
+                            dispatch({ type: "board/setUpdateBy", payload: "global" });
+                        }
+                        else {
+                            dispatch({
+                                type: "board/addComponent",
+                                payload: Object.assign({}, defaultFormatValue(widthWorkspace, heightWorkspace, src)),
+                            });
+                            dispatch({
+                                type: "panel/setSelectedComponent",
+                                payload: Object.assign({}, defaultFormatValue(widthWorkspace, heightWorkspace, src)),
+                            });
+                        }
                     }
                     // ⬇️ IF local upload
                     else {
@@ -64,14 +90,12 @@ const UploadTool = ({ name, type, action, responseMapping, defaultValue, }) => {
                             const height = img.height * scale;
                             if (isEdit) {
                                 dispatch({
-                                    type: type === "component"
-                                        ? "board/updateComponent"
-                                        : "board/updateExtraComponent",
+                                    type: "board/updateComponent",
                                     payload: Object.assign({}, defaultFormatValue(width, height, img.src, Number(defaultValue.id))),
                                 });
                                 dispatch({
                                     type: "panel/setSelectedComponent",
-                                    payload: Object.assign({}, defaultFormatValue(width, height, srcFromResponse, Number(defaultValue.id))),
+                                    payload: Object.assign({}, defaultFormatValue(width, height, srcFromResponse || img.src, Number(defaultValue.id))),
                                 });
                                 setDefaultSrc(img.src);
                                 dispatch({ type: "board/setFlagChange", payload: true });
@@ -85,6 +109,7 @@ const UploadTool = ({ name, type, action, responseMapping, defaultValue, }) => {
                                     payload: Object.assign({}, defaultFormatValue(width, height, img.src)),
                                 });
                             }
+                            setDefaultSrc(img.src);
                             dispatch({ type: "board/setFlagChange", payload: true });
                             dispatch({ type: "board/setUpdateBy", payload: "global" });
                             // message.success(`${info.file.name} uploaded successfully.`);
@@ -111,16 +136,20 @@ const UploadTool = ({ name, type, action, responseMapping, defaultValue, }) => {
             Edit
           </Button>
         </>) : (<Dragger beforeUpload={() => false} {...propsUpload}>
-          <p className="ant-upload-drag-icon">
-            <InboxOutlined />
-          </p>
-          <p className="ant-upload-text">
-            Click or drag file to this area to upload
-          </p>
-          <p className="ant-upload-hint">
-            Support for a single or bulk upload. Strictly prohibited from
-            uploading company data or other banned files.
-          </p>
+          {loading ? (<div className="w-full flex flex-col items-center gap-2 max-h-[200px]">
+              <LoadingOutlined />
+            </div>) : (<>
+              <p className="ant-upload-drag-icon">
+                <InboxOutlined />
+              </p>
+              <p className="ant-upload-text">
+                Click or drag file to this area to upload
+              </p>
+              <p className="ant-upload-hint">
+                Support for a single or bulk upload. Strictly prohibited from
+                uploading company data or other banned files.
+              </p>
+            </>)}
         </Dragger>)}
 
       <SectionShape allowChangeShape={type === "component"}/>

package/package.json

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