seat-editor 3.3.35 → 3.3.37

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

@@ -6,5 +6,5 @@ interface UploadToolProps {
     defaultValue?: PropertiesProps;
     transform?: any;
 }
-declare const UploadTool: ({ name, type, action, defaultValue, transform }: UploadToolProps) => import("react").JSX.Element;
+declare const UploadTool: ({ name, type, action, defaultValue, transform }: UploadToolProps) => import("react/jsx-runtime").JSX.Element;
 export default UploadTool;

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

@@ -0,0 +1,150 @@
+"use client";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { Upload, Image, Button, Form } from "antd";
+import { InboxOutlined, LoadingOutlined } from "@ant-design/icons";
+import { useAppDispatch, useAppSelector } 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, defaultValue, transform }) => {
+    // const src = Form.useWatch("src");
+    // const height = Form.useWatch("height");
+    // const width = Form.useWatch("width");
+    // const x = Form.useWatch("x");
+    // const y = Form.useWatch("y");
+    // const shape = Form.useWatch("shape");
+    var _a, _b, _c;
+    const selectedComponent = useAppSelector((state) => state.panel.selectedComponent);
+    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]);
+    useEffect(() => {
+        if (selectedComponent && selectedComponent.shape === name) {
+            setDefaultSrc(selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.src);
+            setIsEdit(true);
+            setLoading(false);
+        }
+    }, [selectedComponent]);
+    const dispatch = useAppDispatch();
+    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, x, y) => ({
+        id: String(id) || `${Date.now()}`,
+        x: x || Math.abs(transformState === null || transformState === void 0 ? void 0 : transformState.positionX),
+        y: y || Math.abs(transformState === null || transformState === void 0 ? void 0 : transformState.positionY),
+        width: width < 1 ? 200 : width,
+        height: height < 1 ? 200 : height,
+        rotation: 0,
+        shape: name,
+        src,
+    });
+    const propsUpload = {
+        name: "file",
+        multiple: true,
+        maxCount: 1,
+        showUploadList: false,
+        onChange: (info) => __awaiter(void 0, void 0, void 0, function* () {
+            setLoading(true);
+            if (info.file) {
+                const file = info.file;
+                const img = new window.Image();
+                let srcFromResponse = "";
+                try {
+                    // ⬇️ IF ada custom action (upload ke server)
+                    if (action) {
+                        const src = yield action(file);
+                        if (isEdit) {
+                            dispatch({
+                                type: "board/updateComponent",
+                                payload: Object.assign({}, defaultFormatValue(selectedComponent.width, selectedComponent.height, src, String(selectedComponent.id), selectedComponent.x, selectedComponent.y)),
+                            });
+                            dispatch({
+                                type: "panel/setSelectedComponent",
+                                payload: Object.assign({}, defaultFormatValue(selectedComponent.width, selectedComponent.height, src, String(selectedComponent.id), selectedComponent.x, selectedComponent.y)),
+                            });
+                            setDefaultSrc(src);
+                            dispatch({ type: "board/setFlagChange", payload: true });
+                            dispatch({ type: "board/setUpdateBy", payload: "global" });
+                        }
+                        else {
+                            const defaultValue = Object.assign({}, defaultFormatValue(0, 0, src));
+                            dispatch({
+                                type: type === "component"
+                                    ? "board/addComponent"
+                                    : "board/setExtraComponent",
+                                payload: defaultValue,
+                            });
+                            dispatch({
+                                type: "panel/setSelectedComponent",
+                                payload: defaultValue,
+                            });
+                        }
+                    }
+                    // ⬇️ IF local upload
+                    else {
+                        img.onload = () => {
+                            const scaleX = widthWorkspace / img.width;
+                            const scaleY = heightWorkspace / img.height;
+                            const scale = Math.min(1, scaleX, scaleY);
+                            const width = img.width * scale;
+                            const height = img.height * scale;
+                            if (isEdit) {
+                                dispatch({
+                                    type: "board/updateComponent",
+                                    payload: Object.assign({}, defaultFormatValue(selectedComponent.width, selectedComponent.height, img.src, selectedComponent.id, selectedComponent.x, selectedComponent.y)),
+                                });
+                                dispatch({
+                                    type: "panel/setSelectedComponent",
+                                    payload: Object.assign({}, defaultFormatValue(selectedComponent.width, selectedComponent.height, img.src, selectedComponent.id, selectedComponent.x, selectedComponent.y)),
+                                });
+                                setDefaultSrc(img.src);
+                                dispatch({ type: "board/setFlagChange", payload: true });
+                                dispatch({ type: "board/setUpdateBy", payload: "global" });
+                            }
+                            else {
+                                dispatch({
+                                    type: type === "component"
+                                        ? "board/addComponent"
+                                        : "board/setExtraComponent",
+                                    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.`);
+                        };
+                        // Set img src AFTER onload
+                        img.src = URL.createObjectURL(file);
+                    }
+                }
+                catch (e) {
+                    // message.error("Upload failed, please try again.");
+                }
+            }
+        }),
+    };
+    const handleDelete = () => {
+        setDefaultSrc(null);
+    };
+    return (_jsxs(Form.Item, { label: "", name: "src", className: "w-full", children: [defaultSrc ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "w-full flex flex-col items-center gap-2 max-h-[200px] overflow-y-auto", children: _jsx(Image, { src: defaultSrc }) }), _jsx(Button, { type: "primary", onClick: handleDelete, children: "Edit" })] })) : (_jsx(Dragger, Object.assign({ beforeUpload: () => false }, propsUpload, { children: loading ? (_jsx("div", { className: "w-full flex flex-col items-center gap-2 max-h-[200px]", children: _jsx(LoadingOutlined, {}) })) : (_jsxs(_Fragment, { children: [_jsx("p", { className: "ant-upload-drag-icon", children: _jsx(InboxOutlined, {}) }), _jsx("p", { className: "ant-upload-text", children: "Click or drag file to this area to upload" }), _jsx("p", { className: "ant-upload-hint", children: "Support for a single or bulk upload. Strictly prohibited from uploading company data or other banned files." })] })) }))), _jsx(SectionShape, { allowChangeShape: type === "component" }), _jsx(SectionLabel, {})] }));
+};
+export default UploadTool;

package/dist/features/side-tool/index.d.ts

@@ -4,5 +4,5 @@ declare const SideTool: ({ dragOnly, deleteAutorized, }: {
         component: boolean;
         extraComponent: boolean;
     };
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default SideTool;

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

@@ -0,0 +1,365 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Circle, CopyPlus, Eye, EyeOff, Image, Layers2, MousePointer, PaintBucket, Ratio, SquareMousePointer, Trash, Type, Upload, Hand, Layers, Grid, Lock, LockOpen, Undo2, Redo2, PenTool, Scan, } from "lucide-react";
+import ButtonTools from "../../components/button-tools";
+import { Divider, ColorPicker, Button, message, } from "antd";
+import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
+import { useState } from "react";
+const SideTool = ({ dragOnly, deleteAutorized, }) => {
+    const [color, setColor] = useState("#000000");
+    const dispatch = useAppDispatch();
+    const { active, grid, lockBackground } = useAppSelector((state) => state.tool);
+    const { selectedComponent } = useAppSelector((state) => state.panel);
+    const { components, extraComponents } = useAppSelector((state) => state.board);
+    const [preview, setPreview] = useState(false);
+    const tools = [
+        {
+            id: "select",
+            name: "Select Tool",
+            icon: _jsx(MousePointer, {}),
+        },
+        {
+            id: "grab",
+            name: "Grab Tool",
+            icon: _jsx(Hand, {}),
+        },
+        // {
+        //   id: "ruler",
+        //   name: "Ruler",
+        //   icon: <Ruler />,
+        // },
+        // {
+        //   id: "bounding-box",
+        //   name: "Bounding Box Tool",
+        //   icon: <Scan />,
+        // }
+        // {
+        //   id: "node",
+        //   name: "Node Tool",
+        //   icon: <MousePointer2 />,
+        // },
+    ];
+    const actionsTools = [
+        // {
+        //   id: "table-split",
+        //   name: "Table Split",
+        //   icon: <TableCellsSplit />,
+        // },
+        {
+            id: "square",
+            name: "Square",
+            icon: _jsx(SquareMousePointer, {}),
+        },
+        {
+            id: "circle",
+            name: "Circle",
+            icon: _jsx(Circle, {}),
+        },
+        {
+            id: "table-seat-circle",
+            name: "Table Seat Circle",
+            icon: _jsx(Ratio, {}),
+        },
+        {
+            id: "image-table",
+            name: "Image Table",
+            icon: _jsx(Upload, {}),
+        },
+        // {
+        //   id: "table-seat-square",
+        //   name: "Table Seat Square",
+        //   icon: <Dock />,
+        // },
+        // {
+        //   id: "diamond",
+        //   name: "Diamond",
+        //   icon: <Diamond />,
+        // },
+    ];
+    const controlTools = [
+        {
+            id: "background",
+            name: "Background",
+            icon: _jsx(Image, {}),
+        },
+        {
+            id: "text",
+            name: "Text",
+            icon: _jsx(Type, {}),
+        },
+        {
+            id: "polygon",
+            name: "Polygon Tool",
+            icon: _jsx(PenTool, {}),
+        },
+        // {
+        //   id: "background-color",
+        //   name: "Background Color",
+        //   icon: <PaintBucket/>
+        // }
+    ];
+    const hanldeSelectTool = (id) => {
+        if (active === id) {
+            dispatch({
+                type: "tool/setActiveTool",
+                payload: "",
+            });
+            return;
+        }
+        if (id === "background" || id === "image-table") {
+            dispatch({
+                type: "panel/setShow",
+                payload: true,
+            });
+        }
+        dispatch({
+            type: "tool/setActiveTool",
+            payload: id,
+        });
+        dispatch({
+            type: "panel/setSelectedComponent",
+            payload: null,
+        });
+        dispatch({ type: "board/setFlagChange", payload: true });
+    };
+    const toggleGrid = () => {
+        dispatch({
+            type: "tool/setToogleGrid",
+            payload: !grid,
+        });
+        dispatch({
+            type: "panel/setSelectedComponent",
+            payload: null,
+        });
+        dispatch({ type: "board/setFlagChange", payload: true });
+    };
+    const toogleSetLockBackground = () => {
+        dispatch({
+            type: "tool/setToogleBackground",
+            payload: !lockBackground,
+        });
+        // dispatch({ type: "board/setFlagChange", payload: true });
+    };
+    const handleChangeColorBackground = (color) => {
+        setColor(color.toHexString());
+        dispatch({
+            type: "board/setBackgroundColor",
+            payload: color.toHexString(),
+        });
+        dispatch({
+            type: "panel/setSelectedComponent",
+            payload: null,
+        });
+        dispatch({ type: "board/setFlagChange", payload: true });
+    };
+    const handleOpenModalPreview = () => {
+        dispatch({
+            type: "tool/setTooglePreview",
+            payload: true,
+        });
+        dispatch({
+            type: "panel/setSelectedComponent",
+            payload: null,
+        });
+        dispatch({ type: "board/setFlagChange", payload: true });
+    };
+    const handleRemoveComponent = () => {
+        const exludedShapes = ["background", "text"];
+        if (!selectedComponent)
+            return;
+        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 (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) &&
+            !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) &&
+            exludedShapes.includes(selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape)) {
+            dispatch({
+                type: "board/removeExtraComponent",
+                payload: selectedComponent,
+            });
+        }
+        dispatch({ type: "board/setFlagChange", payload: true });
+        dispatch({
+            type: "panel/setSelectedComponent",
+            payload: null,
+        });
+        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() });
+        dispatch({
+            type: "board/addComponent",
+            payload: newComponent,
+        });
+        dispatch({
+            type: "panel/setSelectedComponent",
+            payload: newComponent,
+        });
+        dispatch({ type: "board/setFlagChange", payload: true });
+    };
+    function swapOneStepById(arr, id, direction) {
+        const index = arr.findIndex((item) => (item === null || item === void 0 ? void 0 : item.id) === id);
+        if (index === -1)
+            return arr; // id tidak ditemukan
+        const newArr = [...arr];
+        if (direction === "left" && index > 0) {
+            [newArr[index - 1], newArr[index]] = [newArr[index], newArr[index - 1]];
+        }
+        if (direction === "right" && index < arr.length - 1) {
+            [newArr[index + 1], newArr[index]] = [newArr[index], newArr[index + 1]];
+        }
+        return newArr;
+    }
+    const handleOverride = () => {
+        if ((selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) === "background") {
+            const setNewExtraComponents = swapOneStepById(extraComponents, selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id, "right");
+            dispatch({
+                type: "board/setNewExtraComponents",
+                payload: setNewExtraComponents,
+            });
+            dispatch({ type: "board/setFlagChange", payload: true });
+            return;
+        }
+        const newArr = swapOneStepById(components, selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id, "right");
+        dispatch({
+            type: "board/setNewComponents",
+            payload: newArr,
+        });
+        dispatch({ type: "board/setFlagChange", payload: true });
+    };
+    const handleOverrideLeft = () => {
+        if ((selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) === "background") {
+            const setNewExtraComponents = swapOneStepById(extraComponents, selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id, "left");
+            dispatch({
+                type: "board/setNewExtraComponents",
+                payload: setNewExtraComponents,
+            });
+            dispatch({ type: "board/setFlagChange", payload: true });
+            return;
+        }
+        const newArr = swapOneStepById(components, selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id, "left");
+        dispatch({
+            type: "board/setNewComponents",
+            payload: newArr,
+        });
+        dispatch({ type: "board/setFlagChange", payload: true });
+    };
+    const handleUndo = () => {
+        dispatch({ type: "board/undoHistory" });
+        dispatch({ type: "board/setFlagChange", payload: true });
+        dispatch({ type: "board/setUpdateBy", payload: "global" });
+    };
+    const handleRedo = () => {
+        dispatch({ type: "board/redoHistory" });
+        dispatch({ type: "board/setFlagChange", payload: true });
+        dispatch({ type: "board/setUpdateBy", payload: "global" });
+    };
+    return (_jsxs("div", { className: "h-full left-0 flex flex-col items-center border-r-2 border-gray-300 bg-white px-2 pt-4", children: [tools === null || tools === void 0 ? void 0 : tools.map((tool) => (_jsx(ButtonTools, { buttonProps: {
+                    icon: tool.icon,
+                    type: "text",
+                    name: tool.name,
+                    onClick: () => hanldeSelectTool(tool.id),
+                    style: active === tool.id ? { color: "red" } : {},
+                }, popoverProps: {
+                    content: _jsx("div", { children: tool.name }),
+                    trigger: "hover",
+                    placement: "right",
+                }, items: [] }, tool.id))), !dragOnly && (_jsxs(_Fragment, { children: [_jsx(ButtonTools, { buttonProps: {
+                            icon: _jsx(CopyPlus, {}),
+                            type: "text",
+                            name: "duplicate",
+                            onClick: () => handleDuplicateComponent(),
+                        }, items: [], popoverProps: {
+                            content: _jsx("div", { children: "Duplicate" }),
+                            trigger: "hover",
+                            placement: "right",
+                        } }), _jsx(ButtonTools, { buttonProps: {
+                            onClick: () => handleOverride(),
+                            icon: _jsx(Layers2, {}),
+                            type: "text",
+                            name: "override",
+                        }, items: [], popoverProps: {
+                            content: _jsx("div", { children: "Override Right" }),
+                            trigger: "hover",
+                            placement: "right",
+                        } }), _jsx(ButtonTools, { buttonProps: {
+                            onClick: () => handleOverrideLeft(),
+                            icon: _jsx(Layers, {}),
+                            type: "text",
+                            name: "override",
+                        }, items: [], popoverProps: {
+                            content: _jsx("div", { children: "Override Left" }),
+                            trigger: "hover",
+                            placement: "right",
+                        } }), _jsx(Divider, {}), actionsTools === null || actionsTools === void 0 ? void 0 : actionsTools.map((tool) => (_jsx(ButtonTools, { buttonProps: {
+                            icon: tool.icon,
+                            type: "text",
+                            name: tool.name,
+                            onClick: () => hanldeSelectTool(tool.id),
+                            style: active === tool.id ? { color: "red" } : {},
+                        }, popoverProps: {
+                            content: _jsx("div", { children: tool.name }),
+                            trigger: "hover",
+                            placement: "right",
+                        }, items: [] }, tool.id))), _jsx(Divider, {})] })), controlTools === null || controlTools === void 0 ? void 0 : controlTools.map((tool) => (_jsx(ButtonTools, { buttonProps: {
+                    icon: tool.icon,
+                    type: "text",
+                    name: tool.name,
+                    onClick: () => hanldeSelectTool(tool.id),
+                    style: active === tool.id ? { color: "red" } : {},
+                }, popoverProps: {
+                    content: _jsx("div", { children: tool.name }),
+                    trigger: "hover",
+                    placement: "right",
+                }, items: [] }, tool.id))), _jsx(ColorPicker, { value: color, onChange: handleChangeColorBackground, children: _jsx(Button, { icon: _jsx(PaintBucket, {}), type: "text", name: "Background Color", onClick: () => hanldeSelectTool("background-color"), style: active === "background-color" ? { color: "red" } : {} }) }), _jsx(Button, { icon: _jsx(Scan, {}), type: "text", name: "Bounding Box", onClick: () => hanldeSelectTool("bounding-box"), style: active === "bounding-box" ? { color: "red" } : {} }), _jsx(Button, { icon: preview ? _jsx(EyeOff, {}) : _jsx(Eye, {}), type: "text", name: "Preview", onClick: handleOpenModalPreview, style: active === "preview" ? { color: "red" } : {} }), _jsx(Button, { icon: _jsx(Grid, {}), type: "text", name: "Grid", onClick: () => toggleGrid() }), _jsx(ButtonTools, { buttonProps: {
+                    onClick: () => handleRemoveComponent(),
+                    icon: _jsx(Trash, {}),
+                    type: "text",
+                    name: "trash",
+                }, items: [], popoverProps: {
+                    content: _jsx("div", { children: "Trash" }),
+                    trigger: "hover",
+                    placement: "right",
+                } }), _jsx(ButtonTools, { buttonProps: {
+                    onClick: () => toogleSetLockBackground(),
+                    icon: lockBackground ? _jsx(Lock, {}) : _jsx(LockOpen, {}),
+                    type: "text",
+                    name: "trash",
+                }, items: [], popoverProps: {
+                    content: (_jsx("div", { children: lockBackground ? "Unlock Background" : "Lock Background" })),
+                    trigger: "hover",
+                    placement: "right",
+                } }), _jsx(ButtonTools, { buttonProps: {
+                    onClick: () => handleUndo(),
+                    icon: _jsx(Undo2, {}),
+                    type: "text",
+                    name: "undo",
+                }, items: [], popoverProps: {
+                    content: _jsx("div", { children: "Undo" }),
+                    trigger: "hover",
+                    placement: "right",
+                } }), _jsx(ButtonTools, { buttonProps: {
+                    onClick: () => handleRedo(),
+                    icon: _jsx(Redo2, {}),
+                    type: "text",
+                    name: "redo",
+                }, items: [], popoverProps: {
+                    content: _jsx("div", { children: "Redo" }),
+                    trigger: "hover",
+                    placement: "right",
+                } })] }));
+};
+export default SideTool;

package/dist/features/view-only/index.d.ts

@@ -15,5 +15,5 @@ export interface LayerViewProps {
     containerProps?: any;
     svgProps?: any;
 }
-declare const LayerView: (props: LayerViewProps) => import("react").JSX.Element;
+declare const LayerView: (props: LayerViewProps) => import("react/jsx-runtime").JSX.Element;
 export default LayerView;