seat-editor 2.0.0 → 2.1.1

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

@@ -1,152 +0,0 @@
-"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 { useState, useEffect } from "react";
-import { Upload, Image, Button } from "antd";
-import { InboxOutlined } 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 actionResponseBased = {
-//   status: 200,
-//   message: "Upload successful",
-//   data: {
-//     id: "12345",
-//     url: "https://example.com/image.png",
-//   },
-// };
-const UploadTool = ({ name, type, action, responseMapping, defaultValue, }) => {
-    var _a, _b;
-    const [defaultSrc, setDefaultSrc] = useState(null);
-    const [isEdit, setIsEdit] = useState(false);
-    useEffect(() => {
-        if (defaultValue) {
-            setDefaultSrc(defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.src);
-            setIsEdit(true);
-        }
-    }, [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 defaultFormatValue = (width, height, src, id) => ({
-        id: id || new Date().getTime(),
-        x: 0,
-        y: 0,
-        width: width < 1 ? 100 : width,
-        height: height < 1 ? 100 : 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* () {
-            const { status } = info.file;
-            if (status !== "uploading" && info.file.originFileObj) {
-                const file = info.file.originFileObj;
-                const img = new window.Image();
-                let srcFromResponse = "";
-                try {
-                    // ⬇️ IF ada custom action (upload ke server)
-                    if (action) {
-                        yield action(file, type, 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:
-                    //           type === "component"
-                    //             ? "board/updateComponent"
-                    //             : "board/updateExtraComponent",
-                    //         payload: {
-                    //           ...defaultFormatValue(
-                    //             width,
-                    //             height,
-                    //             img.src,
-                    //             defaultValue.id
-                    //           ),
-                    //         },
-                    //       });
-                    //       dispatch({
-                    //         type: "panel/setSelectedComponent",
-                    //         payload: {
-                    //           ...defaultFormatValue(
-                    //             width,
-                    //             height,
-                    //             srcFromResponse,
-                    //             defaultValue.id
-                    //           ),
-                    //         },
-                    //       });
-                    //       setDefaultSrc(img.src);
-                    //     } else {
-                    //       dispatch({
-                    //         type:
-                    //           type === "component"
-                    //             ? "board/addComponent"
-                    //             : "board/setExtraComponent",
-                    //         payload: {
-                    //           ...defaultFormatValue(width, height, img.src),
-                    //         },
-                    //       });
-                    //     }
-                    //     dispatch({ type: "board/setFlagChange", payload: true });
-                    //     // 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 (<>
-      {defaultSrc ? (<>
-          <div className="w-full flex flex-col items-center gap-2 max-h-[200px] overflow-y-auto">
-            <Image src={defaultSrc}/>
-          </div>
-          <Button type="primary" onClick={handleDelete}>
-            Edit
-          </Button>
-        </>) : (<Dragger {...propsUpload} action={""}>
-          <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"}/>
-      <SectionLabel />
-    </>);
-};
-export default UploadTool;

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

@@ -1,8 +0,0 @@
-declare const SideTool: ({ dragOnly, deleteAutorized, }: {
-    dragOnly?: boolean;
-    deleteAutorized?: {
-        component: boolean;
-        extraComponent: boolean;
-    };
-}) => import("react").JSX.Element;
-export default SideTool;

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

@@ -1,371 +0,0 @@
-"use client";
-import { Circle, CopyPlus, Eye, EyeOff, Image, Layers2, MousePointer, PaintBucket, Ratio, SquareMousePointer, Trash, Type, Upload, Hand, Layers, Ruler, Grid, MousePointer2, Lock, LockOpen, Undo2, Redo2, } 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: "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: "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 });
-    };
-    const handleRedo = () => {
-        dispatch({ type: "board/redoHistory" });
-        dispatch({ type: "board/setFlagChange", payload: true });
-    };
-    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={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

@@ -1,16 +0,0 @@
-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

@@ -1,28 +0,0 @@
-"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

@@ -1,12 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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/index.d.ts

@@ -1,19 +0,0 @@
-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;