seat-editor 3.3.13 → 3.3.15

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

@@ -0,0 +1,390 @@
+"use client";
+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: <MousePointer />,
+        },
+        {
+            id: "grab",
+            name: "Grab Tool",
+            icon: <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: <SquareMousePointer />,
+        },
+        {
+            id: "circle",
+            name: "Circle",
+            icon: <Circle />,
+        },
+        {
+            id: "table-seat-circle",
+            name: "Table Seat Circle",
+            icon: <Ratio />,
+        },
+        {
+            id: "image-table",
+            name: "Image Table",
+            icon: <Upload />,
+        },
+        // {
+        //   id: "table-seat-square",
+        //   name: "Table Seat Square",
+        //   icon: <Dock />,
+        // },
+        // {
+        //   id: "diamond",
+        //   name: "Diamond",
+        //   icon: <Diamond />,
+        // },
+    ];
+    const controlTools = [
+        {
+            id: "background",
+            name: "Background",
+            icon: <Image />,
+        },
+        {
+            id: "text",
+            name: "Text",
+            icon: <Type />,
+        },
+        {
+            id: "polygon",
+            name: "Polygon Tool",
+            icon: <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 (<div className="h-full left-0 flex flex-col items-center border-r-2 border-gray-300 bg-white px-2 pt-4">
+      {tools === null || tools === void 0 ? void 0 : tools.map((tool) => (<ButtonTools key={tool.id} buttonProps={{
+                icon: tool.icon,
+                type: "text",
+                name: tool.name,
+                onClick: () => hanldeSelectTool(tool.id),
+                style: active === tool.id ? { color: "red" } : {},
+            }} popoverProps={{
+                content: <div>{tool.name}</div>,
+                trigger: "hover",
+                placement: "right",
+            }} items={[]}/>))}
+      {!dragOnly && (<>
+          <ButtonTools buttonProps={{
+                icon: <CopyPlus />,
+                type: "text",
+                name: "duplicate",
+                onClick: () => handleDuplicateComponent(),
+            }} items={[]} popoverProps={{
+                content: <div>Duplicate</div>,
+                trigger: "hover",
+                placement: "right",
+            }}/>
+
+          <ButtonTools buttonProps={{
+                onClick: () => handleOverride(),
+                icon: <Layers2 />,
+                type: "text",
+                name: "override",
+            }} items={[]} popoverProps={{
+                content: <div>Override Right</div>,
+                trigger: "hover",
+                placement: "right",
+            }}/>
+          <ButtonTools buttonProps={{
+                onClick: () => handleOverrideLeft(),
+                icon: <Layers />,
+                type: "text",
+                name: "override",
+            }} items={[]} popoverProps={{
+                content: <div>Override Left</div>,
+                trigger: "hover",
+                placement: "right",
+            }}/>
+
+          <Divider />
+          {actionsTools === null || actionsTools === void 0 ? void 0 : actionsTools.map((tool) => (<ButtonTools key={tool.id} buttonProps={{
+                    icon: tool.icon,
+                    type: "text",
+                    name: tool.name,
+                    onClick: () => hanldeSelectTool(tool.id),
+                    style: active === tool.id ? { color: "red" } : {},
+                }} popoverProps={{
+                    content: <div>{tool.name}</div>,
+                    trigger: "hover",
+                    placement: "right",
+                }} items={[]}/>))}
+
+          <Divider />
+        </>)}
+      {controlTools === null || controlTools === void 0 ? void 0 : controlTools.map((tool) => (<ButtonTools key={tool.id} buttonProps={{
+                icon: tool.icon,
+                type: "text",
+                name: tool.name,
+                onClick: () => hanldeSelectTool(tool.id),
+                style: active === tool.id ? { color: "red" } : {},
+            }} popoverProps={{
+                content: <div>{tool.name}</div>,
+                trigger: "hover",
+                placement: "right",
+            }} items={[]}/>))}
+      <ColorPicker value={color} onChange={handleChangeColorBackground}>
+        <Button icon={<PaintBucket />} type="text" name="Background Color" onClick={() => hanldeSelectTool("background-color")} style={active === "background-color" ? { color: "red" } : {}}/>
+      </ColorPicker>
+      <Button icon={<Scan />} type="text" name="Preview" onClick={() => hanldeSelectTool("bounding-box")} style={active === "preview" ? { color: "red" } : {}}/>
+      <Button icon={preview ? <EyeOff /> : <Eye />} type="text" name="Preview" onClick={handleOpenModalPreview} style={active === "preview" ? { color: "red" } : {}}/>
+      <Button icon={<Grid />} type="text" name="Grid" onClick={() => toggleGrid()}/>
+      <ButtonTools buttonProps={{
+            onClick: () => handleRemoveComponent(),
+            icon: <Trash />,
+            type: "text",
+            name: "trash",
+        }} items={[]} popoverProps={{
+            content: <div>Trash</div>,
+            trigger: "hover",
+            placement: "right",
+        }}/>
+      <ButtonTools buttonProps={{
+            onClick: () => toogleSetLockBackground(),
+            icon: lockBackground ? <Lock /> : <LockOpen />,
+            type: "text",
+            name: "trash",
+        }} items={[]} popoverProps={{
+            content: (<div>
+              {lockBackground ? "Unlock Background" : "Lock Background"}
+            </div>),
+            trigger: "hover",
+            placement: "right",
+        }}/>
+      <ButtonTools buttonProps={{
+            onClick: () => handleUndo(),
+            icon: <Undo2 />,
+            type: "text",
+            name: "undo",
+        }} items={[]} popoverProps={{
+            content: <div>Undo</div>,
+            trigger: "hover",
+            placement: "right",
+        }}/>
+      <ButtonTools buttonProps={{
+            onClick: () => handleRedo(),
+            icon: <Redo2 />,
+            type: "text",
+            name: "redo",
+        }} items={[]} popoverProps={{
+            content: <div>Redo</div>,
+            trigger: "hover",
+            placement: "right",
+        }}/>
+    </div>);
+};
+export default SideTool;

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

@@ -0,0 +1,16 @@
+import { PayloadAction } from "@reduxjs/toolkit";
+export interface ToolState {
+    active: "circle" | "square" | "diamond" | string;
+    isPreview: boolean;
+    grid: boolean;
+    lockBackground: boolean;
+}
+export declare const sideToolSlice: import("@reduxjs/toolkit").Slice<ToolState, {
+    setActiveTool: (state: import("immer").WritableDraft<ToolState>, action: PayloadAction<string>) => void;
+    setTooglePreview: (state: import("immer").WritableDraft<ToolState>, action: PayloadAction<boolean>) => void;
+    setToogleGrid: (state: import("immer").WritableDraft<ToolState>, action: PayloadAction<boolean>) => void;
+    setToogleBackground: (state: import("immer").WritableDraft<ToolState>, action: PayloadAction<boolean>) => void;
+}, "tool", "tool", import("@reduxjs/toolkit").SliceSelectors<ToolState>>;
+export declare const setActiveTool: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<string, "tool/setActiveTool">, setTooglePreview: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<boolean, "tool/setTooglePreview">, setToogleGrid: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<boolean, "tool/setToogleGrid">, setToogleBackground: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<boolean, "tool/setToogleBackground">;
+declare const _default: import("redux").Reducer<ToolState>;
+export default _default;

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

@@ -0,0 +1,28 @@
+"use client";
+import { createSlice } from "@reduxjs/toolkit";
+const initialState = {
+    active: "",
+    isPreview: false,
+    grid: false,
+    lockBackground: false
+};
+export const sideToolSlice = createSlice({
+    name: "tool",
+    initialState,
+    reducers: {
+        setActiveTool: (state, action) => {
+            state.active = action.payload;
+        },
+        setTooglePreview: (state, action) => {
+            state.isPreview = action.payload;
+        },
+        setToogleGrid: (state, action) => {
+            state.grid = action.payload;
+        },
+        setToogleBackground: (state, action) => {
+            state.lockBackground = action.payload;
+        },
+    },
+});
+export const { setActiveTool, setTooglePreview, setToogleGrid, setToogleBackground } = sideToolSlice.actions;
+export default sideToolSlice.reducer;

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

@@ -0,0 +1,12 @@
+export interface ThemeProps {
+    primaryColor: string;
+}
+export declare const themeSlice: import("@reduxjs/toolkit").Slice<ThemeProps, {
+    setPrimaryColor: (state: import("immer").WritableDraft<ThemeProps>, action: {
+        payload: any;
+        type: string;
+    }) => void;
+}, "theme", "theme", import("@reduxjs/toolkit").SliceSelectors<ThemeProps>>;
+export declare const setPrimaryColor: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, "theme/setPrimaryColor">;
+declare const _default: import("redux").Reducer<ThemeProps>;
+export default _default;

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

@@ -0,0 +1,15 @@
+import { createSlice } from "@reduxjs/toolkit";
+const initialState = {
+    primaryColor: "#4A90E2",
+};
+export const themeSlice = createSlice({
+    name: "theme",
+    initialState,
+    reducers: {
+        setPrimaryColor: (state, action) => {
+            state.primaryColor = action.payload;
+        },
+    },
+});
+export const { setPrimaryColor } = themeSlice.actions;
+export default themeSlice.reducer;

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

@@ -0,0 +1,19 @@
+export interface LayerViewProps {
+    componentProps?: any[];
+    extraComponentProps?: any[];
+    onCurrentStateChange?: (state: any) => void;
+    onSelectComponent?: (component: any) => void;
+    mappingKey?: string;
+    selectedTableColor?: string;
+    colorMatchKey?: {
+        color: string;
+        key: string;
+    }[];
+    statusKey: string;
+    defaultBackground?: string;
+    transformProps?: any;
+    containerProps?: any;
+    svgProps?: any;
+}
+declare const LayerView: (props: LayerViewProps) => import("react").JSX.Element;
+export default LayerView;