seat-editor 1.4.21 → 1.4.23

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

@@ -1,244 +0,0 @@
-"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 } from "lucide-react";
-import ButtonTools from "../../components/button-tools";
-import { Divider, ColorPicker, Button, } from "antd";
-import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
-import { useState } from "react";
-const SideTool = ({ dragOnly }) => {
-    const [color, setColor] = useState("#000000");
-    const dispatch = useAppDispatch();
-    const { active } = 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, {}),
-        }
-    ];
-    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: "background-color",
-        //   name: "Background Color",
-        //   icon: <PaintBucket/>
-        // }
-    ];
-    const hanldeSelectTool = (id) => {
-        if (id === "background" || id === "text" || id === "image-table") {
-            dispatch({
-                type: "panel/setShow",
-                payload: true,
-            });
-        }
-        dispatch({
-            type: "tool/setActiveTool",
-            payload: id,
-        });
-    };
-    const handleChangeColorBackground = (color) => {
-        setColor(color.toHexString());
-        dispatch({
-            type: "board/setBackgroundColor",
-            payload: color.toHexString(),
-        });
-    };
-    const handleOpenModalPreview = () => {
-        dispatch({
-            type: "tool/setTooglePreview",
-            payload: true,
-        });
-    };
-    const handleRemoveComponent = () => {
-        dispatch({
-            type: "board/removeComponent",
-            payload: selectedComponent,
-        });
-        dispatch({
-            type: "board/removeExtraComponent",
-            payload: selectedComponent,
-        });
-        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 });
-    };
-    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: () => handleRemoveComponent(),
-                            icon: _jsx(Trash, {}),
-                            type: "text",
-                            name: "trash",
-                        }, items: [], popoverProps: {
-                            content: _jsx("div", { children: "Trash" }),
-                            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: preview ? _jsx(EyeOff, {}) : _jsx(Eye, {}), type: "text", name: "Preview", onClick: handleOpenModalPreview, style: active === "preview" ? { color: "red" } : {} })] }));
-};
-export default SideTool;

package/dist/features/view/index.js

@@ -1,213 +0,0 @@
-"use client";
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef, useState } from "react";
-import { TransformWrapper, TransformComponent, } from "react-zoom-pan-pinch";
-import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
-import Layers from "../../components/layer";
-import { isEqual } from "lodash";
-const LayerView = (props) => {
-    const { componentProps, extraComponentProps, onSelectComponent, onCurrentStateChange, mappingKey, selectedTableColor, colorMatchKey, statusKey, defaultBackground, } = props;
-    const transformRef = useRef(null);
-    const containerRef = useRef(null);
-    const svgRef = useRef(null);
-    const [scale, setScale] = useState(1);
-    const [selectedTable, setSelectedTable] = useState(null);
-    const { components: componentsEditor, extraComponents: extraComponentsEditor, } = useAppSelector((state) => state.board);
-    const backgroundColor = useAppSelector((state) => state.board.backgroundColor);
-    const dispatch = useAppDispatch();
-    const convertComponentProps = () => {
-        let mappingData = componentProps === null || componentProps === void 0 ? void 0 : componentProps.map((item) => {
-            if (mappingKey && (item === null || item === void 0 ? void 0 : item[mappingKey])) {
-                return Object.assign({}, item[mappingKey]);
-            }
-            return item;
-        });
-        return mappingData;
-    };
-    useEffect(() => {
-        if (!isEqual(componentsEditor, convertComponentProps())) {
-            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]);
-                }
-                return item;
-            });
-            dispatch({
-                type: "board/setNewComponents",
-                payload: mappingData,
-            });
-        }
-        if (!isEqual(extraComponentsEditor, extraComponentProps)) {
-            dispatch({
-                type: "board/setNewExtraComponents",
-                payload: extraComponentProps,
-            });
-        }
-        if (defaultBackground) {
-            dispatch({
-                type: "board/setBackgroundColor",
-                payload: defaultBackground,
-            });
-        }
-    }, [componentProps, extraComponentProps, defaultBackground]);
-    useEffect(() => {
-        onCurrentStateChange &&
-            onCurrentStateChange({
-                components: componentsEditor,
-                extraComponents: extraComponentsEditor,
-            });
-    }, [componentsEditor, extraComponentsEditor]);
-    const handleSelectComponent = (items) => {
-        const find = componentsEditor.find((item) => {
-            if (mappingKey && (item === null || item === void 0 ? void 0 : item[mappingKey])) {
-                return item[mappingKey].id === (items === null || items === void 0 ? void 0 : items.id);
-            }
-            return (item === null || item === void 0 ? void 0 : item.id) === (items === null || items === void 0 ? void 0 : items.id);
-        });
-        onSelectComponent && onSelectComponent(find);
-        setSelectedTable(find);
-    };
-    const boundingBox = useMemo(() => {
-        var _a, _b, _c, _d, _e, _f;
-        if (!componentsEditor && (componentsEditor === null || componentsEditor === void 0 ? void 0 : componentsEditor.length) === 0) {
-            return { minX: 0, minY: 0, width: 500, height: 500 };
-        }
-        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
-        componentsEditor === null || componentsEditor === void 0 ? void 0 : componentsEditor.forEach((_) => {
-            var _a, _b, _c, _d;
-            let values = mappingKey ? _[mappingKey] : _;
-            if (!values)
-                return;
-            if ((_a = values === null || values === void 0 ? void 0 : values.shape) === null || _a === void 0 ? void 0 : _a.includes("square")) {
-                minX = Math.min(minX, values.x);
-                minY = Math.min(minY, values.y);
-                maxX = Math.max(maxX, values.x + values.width);
-                maxY = Math.max(maxY, values.y + values.height);
-            }
-            if ((_b = values === null || values === void 0 ? void 0 : values.shape) === null || _b === void 0 ? void 0 : _b.includes("circle")) {
-                minX = Math.min(minX, values.x);
-                minY = Math.min(minY, values.y);
-                maxX = Math.max(maxX, values.x + values.width);
-                maxY = Math.max(maxY, values.y + values.height);
-            }
-            if ((_c = values === null || values === void 0 ? void 0 : values.shape) === null || _c === void 0 ? void 0 : _c.includes("table-seat-circle")) {
-                minX = Math.min(minX, values.x);
-                minY = Math.min(minY, values.y);
-                maxX = Math.max(maxX, values.x + values.width);
-                maxY = Math.max(maxY, values.y + values.height);
-            }
-            if ((_d = values === null || values === void 0 ? void 0 : values.shape) === null || _d === void 0 ? void 0 : _d.includes("image-table")) {
-                minX = Math.min(minX, values.x);
-                minY = Math.min(minY, values.y);
-                maxX = Math.max(maxX, values.x + values.width);
-                maxY = Math.max(maxY, values.y + values.height);
-            }
-        });
-        extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor.forEach((values) => {
-            var _a, _b;
-            if ((_a = values === null || values === void 0 ? void 0 : values.shape) === null || _a === void 0 ? void 0 : _a.includes("background")) {
-                minX = Math.min(minX, values.x);
-                minY = Math.min(minY, values.y);
-                maxX = Math.max(maxX, values.x + values.width);
-                maxY = Math.max(maxY, values.y + values.height);
-            }
-            if ((_b = values === null || values === void 0 ? void 0 : values.shape) === null || _b === void 0 ? void 0 : _b.includes("text")) {
-                minX = Math.min(minX, values.x);
-                minY = Math.min(minY, values.y);
-                maxX = Math.max(maxX, values.x + values.width);
-                maxY = Math.max(maxY, values.y + values.height);
-            }
-        });
-        if ((extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor.length) === 1 && ((_b = (_a = extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor[0]) === null || _a === void 0 ? void 0 : _a.shape) === null || _b === void 0 ? void 0 : _b.includes("background"))) {
-            minX = (_c = extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor[0]) === null || _c === void 0 ? void 0 : _c.x;
-            minY = (_d = extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor[0]) === null || _d === void 0 ? void 0 : _d.y;
-            maxX = (_e = extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor[0]) === null || _e === void 0 ? void 0 : _e.width;
-            maxY = (_f = extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor[0]) === null || _f === void 0 ? void 0 : _f.height;
-        }
-        if ((extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor.length) < 1) {
-            minX = minX - minX * 0.5;
-            minY = minY - minY * 0.5;
-        }
-        return {
-            minX,
-            minY,
-            width: maxX,
-            height: maxY,
-        };
-    }, [componentsEditor, extraComponentsEditor]);
-    const renderElements = (elementEditor, mappingKey, colorMatchKey) => {
-        return elementEditor.map((editorItem, i) => {
-            var _a, _b, _c, _d;
-            const isUsingMapping = mappingKey &&
-                typeof editorItem[mappingKey] === "object" &&
-                editorItem[mappingKey] !== null;
-            const finalProps = isUsingMapping ? editorItem[mappingKey] : editorItem;
-            if (colorMatchKey) {
-                if (isUsingMapping) {
-                    return Object.assign(Object.assign({}, finalProps), { fill: (_b = (_a = colorMatchKey.find((item) => item.key == (editorItem === null || editorItem === void 0 ? void 0 : editorItem[statusKey]))) === null || _a === void 0 ? void 0 : _a.color) !== null && _b !== void 0 ? _b : finalProps.fill });
-                }
-                else {
-                    return Object.assign(Object.assign({}, finalProps), { fill: (_d = (_c = colorMatchKey.find((item) => item.key == (editorItem === null || editorItem === void 0 ? void 0 : editorItem[statusKey]))) === null || _c === void 0 ? void 0 : _c.color) !== null && _d !== void 0 ? _d : finalProps.fill });
-                }
-            }
-            return finalProps;
-        });
-    };
-    const [fingerCount, setFingerCount] = useState(0);
-    useEffect(() => {
-        const container = document.getElementById("workspace");
-        const handleTouchStart = (e) => {
-            const count = e.touches.length;
-            setFingerCount(count);
-        };
-        const handleTouchEnd = () => {
-            setFingerCount(0);
-        };
-        if (container) {
-            container.addEventListener("touchstart", handleTouchStart);
-            container.addEventListener("touchend", handleTouchEnd);
-        }
-        return () => {
-            if (container) {
-                container.removeEventListener("touchstart", handleTouchStart);
-                container.removeEventListener("touchend", handleTouchEnd);
-            }
-        };
-    }, []);
-    return (_jsx("div", Object.assign({ className: "relative w-full h-full flex-1", ref: containerRef, style: {
-            height: "100vh",
-            overflow: "auto",
-            WebkitOverflowScrolling: "touch",
-            touchAction: "pan-y",
-        } }, props.containerProps, { children: _jsx(TransformWrapper, Object.assign({ ref: transformRef }, props.transformProps, { disabled: fingerCount === 1 && scale === 1, disablePadding: true, 
-            // panning={{
-            //   disabled: false,
-            //   velocityDisabled: true,
-            // }}
-            // limitToBounds={false}
-            // doubleClick={{ disabled: true }}
-            // pinch={{ disabled: false }}
-            // wheel={{ disabled: true }}
-            // disabled={true}
-            // disablePadding={true}
-            centerZoomedOut: true, onTransformed: ({ state: { scale } }) => setScale(scale), minScale: 1, maxScale: 1000, initialScale: 1, 
-            // pinch={{ step: 1 }}
-            smooth: true, children: _jsx(TransformComponent, { wrapperStyle: {
-                    width: "100%",
-                    height: "100%",
-                    overflow: "visible",
-                }, contentStyle: {
-                    width: "100%",
-                    height: "100%",
-                }, children: _jsx("svg", Object.assign({}, props.svgProps, { id: "workspace", ref: svgRef, width: "100%", height: "100%", viewBox: `${boundingBox.minX} ${boundingBox.minY} ${boundingBox.width} ${boundingBox.height}`, className: "h-full", xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "xMidYMid meet", style: {
-                        background: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : defaultBackground,
-                        display: "block",
-                        pointerEvents: "auto",
-                        // touchAction: "pan-y",
-                    }, children: _jsx(Layers, { mode: "view", components: [
-                            ...extraComponentsEditor,
-                            ...renderElements(componentsEditor, mappingKey, colorMatchKey),
-                        ], onClick: handleSelectComponent, selectedTable: selectedTable, selectedTableColor: selectedTableColor }) })) }) })) })));
-};
-export default LayerView;

package/dist/provider/antd-provider.js

@@ -1,43 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect } from "react";
-import { ConfigProvider } from "antd";
-import { AntdRegistry } from "@ant-design/nextjs-registry";
-import { useAppSelector, useAppDispatch } from "../hooks/use-redux";
-export const AntdProvider = ({ children, themeColor }) => {
-    const dispatch = useAppDispatch();
-    const theme = useAppSelector((state) => state.theme);
-    useEffect(() => {
-        if (themeColor !== theme.primaryColor) {
-            dispatch({
-                type: "theme/setPrimaryColor",
-                payload: themeColor
-            });
-        }
-    }, [themeColor]);
-    return (_jsx(AntdRegistry, { children: _jsx(ConfigProvider, { theme: {
-                token: {
-                    colorPrimary: themeColor,
-                },
-                //   token: {
-                //     colorPrimary: theme.theme["--primary-color"],
-                //     colorPrimaryBorderHover: theme.theme["--primary-color"],
-                //     fontFamily: "var(--font-inter), sans-serif",
-                //     colorError: theme.theme["--danger"],
-                //     controlOutlineWidth: 4,
-                //     controlOutline: theme.theme["--surface-color"],
-                //     colorBgContainerDisabled: "var(--netral-03)",
-                //     colorTextPlaceholder: "var(--netral-06)",
-                //   },
-                components: {
-                    Form: {
-                        labelFontSize: 14,
-                        fontWeightStrong: 500,
-                        itemMarginBottom: 12,
-                    },
-                    Button: {
-                        colorPrimary: themeColor
-                    }
-                },
-            }, children: children }) }));
-};

package/dist/provider/redux-provider.js

@@ -1,7 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { store } from "../libs/store";
-import { Provider } from "react-redux";
-export const ReduxProvider = ({ children }) => {
-    return _jsx(Provider, { store: store, children: children });
-};

package/dist/provider/store-provider.js

@@ -1,9 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { ReduxProvider } from "./redux-provider";
-import { AntdProvider } from "./antd-provider";
-import { injectSeatEditorCSS } from "../utils/injectCss";
-export const StoreProvider = ({ children, themeColor = "red", }) => {
-    injectSeatEditorCSS();
-    return (_jsx(ReduxProvider, { children: _jsx(AntdProvider, { themeColor: themeColor, children: children }) }));
-};