seat-editor 1.2.26 → 1.2.28

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

@@ -0,0 +1,36 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAppSelector } from "../../hooks/use-redux";
+import SquareToolForm from "./square-circle-tool";
+import SeatCircle from "./table-seat-circle";
+import UploadTool from "./upload-tool";
+import TextTool from "./text-tool";
+const SelectToolForm = ({ title = "Title" }) => {
+    const components = useAppSelector((state) => state.board.components);
+    const selectedComponent = useAppSelector((state) => state.panel.selectedComponent);
+    const SummaryComponents = () => {
+        const countByShape = components === null || components === void 0 ? void 0 : components.reduce((acc, item) => {
+            acc[item.shape] = (acc[item.shape] || 0) + 1;
+            return acc;
+        }, {});
+        return (_jsxs("div", { className: "flex flex-col", children: [_jsx("h1", { className: "heading-s", children: title }), _jsx("div", { className: "flex flex-col gap-2 mt-5", children: Object.entries(countByShape).map(([shape, count]) => (_jsxs("div", { children: [_jsxs("span", { className: "font-bold", children: [shape, ":"] }), " ", count] }, shape))) })] }));
+    };
+    const renderComponent = () => {
+        switch (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) {
+            case "square":
+            case "circle":
+                return _jsx(SquareToolForm, {});
+            case "table-seat-circle":
+                return _jsx(SeatCircle, {});
+            case "image-table":
+            case "background":
+                return _jsx(UploadTool, { name: selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.name });
+            case "text":
+                return _jsx(TextTool, {});
+            default:
+                return null;
+        }
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(SummaryComponents, {}), renderComponent()] }));
+};
+export default SelectToolForm;

package/dist/features/panel/square-circle-tool.js

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import SectionLabel from "../../components/form-tools/label";
+import SectionShape from "../../components/form-tools/shape";
+const SquareToolForm = () => {
+    return (_jsxs(_Fragment, { children: [_jsx(SectionShape, {}), _jsx(SectionLabel, {})] }));
+};
+export default SquareToolForm;

package/dist/features/panel/table-seat-circle.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ColorPicker, Flex, Form, InputNumber } from "antd";
+import SectionLabel from "../../components/form-tools/label";
+import SectionShape from "../../components/form-tools/shape";
+const SeatCircle = () => {
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "py-2", children: [_jsx("h1", { className: "heading-s", children: " Round table" }), _jsxs(Flex, { children: [_jsx(Form.Item, { name: "seatCount", label: "Seat Count", className: "w-full", children: _jsx(InputNumber, {}) }), _jsx(Form.Item, { name: "openSpace", label: "Open Space", className: "w-full", children: _jsx(InputNumber, { max: 1, min: 0, step: 0.1 }) })] }), _jsxs(Flex, { gap: 2, children: [_jsx(Form.Item, { label: "Seat Fill", name: "seatFill", getValueFromEvent: (color) => color.toHexString(), className: "w-full ", children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) }), _jsx(Form.Item, { label: "Table Fill", name: "fill", getValueFromEvent: (color) => color.toHexString(), className: "w-full ", children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) })] }), _jsx(SectionShape, {}), _jsx(SectionLabel, {})] }) }));
+};
+export default SeatCircle;

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

@@ -0,0 +1,7 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ColorPicker, Form, Input, InputNumber } from "antd";
+const TextTool = () => {
+    return (_jsxs("div", { className: "py-2", children: [_jsx(Form.Item, { name: "text", label: "Text", children: _jsx(Input, {}) }), _jsx(Form.Item, { name: "fontColor", label: "Color", getValueFromEvent: (color) => color.toHexString(), children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) }), _jsx(Form.Item, { name: "x", label: "X", children: _jsx(InputNumber, {}) }), _jsx(Form.Item, { name: "y", label: "Y", children: _jsx(InputNumber, {}) }), _jsx(Form.Item, { name: "fontSize", label: "Size", children: _jsx(InputNumber, { suffix: "px" }) })] }));
+};
+export default TextTool;

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

@@ -0,0 +1,119 @@
+"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, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Upload, message } 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, }) => {
+    var _a, _b;
+    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 props = {
+        name: "file",
+        multiple: false,
+        maxCount: 1,
+        showUploadList: false,
+        onChange: (info) => __awaiter(void 0, void 0, void 0, function* () {
+            var _a;
+            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 && responseMapping) {
+                        const res = yield action(file);
+                        const isSuccess = (res === null || res === void 0 ? void 0 : res[responseMapping.status]) === 200;
+                        if (isSuccess) {
+                            srcFromResponse =
+                                (_a = res === null || res === void 0 ? void 0 : res[responseMapping.data]) === null || _a === void 0 ? void 0 : _a[responseMapping.src];
+                            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;
+                                dispatch({
+                                    type: type === "component"
+                                        ? "board/addComponent"
+                                        : "board/setExtraComponent",
+                                    payload: {
+                                        id: new Date().getTime(),
+                                        x: 0,
+                                        y: 0,
+                                        width,
+                                        height,
+                                        rotation: 0,
+                                        shape: name,
+                                        src: srcFromResponse,
+                                    },
+                                });
+                                message.success(`${info.file.name} uploaded successfully.`);
+                            };
+                            // Set img src AFTER onload
+                            img.src = srcFromResponse;
+                        }
+                        else {
+                            message.error((res === null || res === void 0 ? void 0 : res[responseMapping.message]) || "Upload failed");
+                        }
+                    }
+                    // ⬇️ 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;
+                            dispatch({
+                                type: type === "component"
+                                    ? "board/addComponent"
+                                    : "board/setExtraComponent",
+                                payload: {
+                                    id: new Date().getTime(),
+                                    x: 0,
+                                    y: 0,
+                                    width,
+                                    height,
+                                    rotation: 0,
+                                    shape: name,
+                                    src: img.src,
+                                },
+                            });
+                            message.success(`${info.file.name} uploaded successfully.`);
+                        };
+                        // Set img src AFTER onload
+                        img.src = URL.createObjectURL(file);
+                    }
+                }
+                catch (e) {
+                    console.error("Upload error:", e);
+                    message.error("Upload failed, please try again.");
+                }
+            }
+        }),
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs(Dragger, Object.assign({}, props, { 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, {}), _jsx(SectionLabel, {})] }));
+};
+export default UploadTool;

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

@@ -0,0 +1,197 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Circle, CopyPlus, Eye, EyeOff, Image, Layers2, MousePointer, PaintBucket, Ratio, SquareMousePointer, Trash, Type, Upload, } 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 = () => {
+    const [color, setColor] = useState("#000000");
+    const dispatch = useAppDispatch();
+    const { active } = useAppSelector((state) => state.tool);
+    const { selectedComponent } = useAppSelector((state) => state.panel);
+    const { components } = useAppSelector((state) => state.board);
+    const [preview, setPreview] = useState(false);
+    const tools = [
+        {
+            id: "select",
+            name: "Select Tool",
+            icon: _jsx(MousePointer, {}),
+        },
+    ];
+    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,
+        });
+    };
+    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
+        });
+    };
+    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 = () => {
+        const newArr = swapOneStepById(components, selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id, 'right');
+        dispatch({
+            type: "board/setNewComponents",
+            payload: newArr
+        });
+    };
+    return (_jsxs("div", { className: "h-screen 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))), _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" }),
+                    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.d.ts

@@ -12,6 +12,8 @@ export interface LayerViewProps {
     statusKey: string;
     defaultBackground?: string;
     transformProps?: any;
+    containerProps?: any;
+    svgProps?: any;
 }
 declare const LayerView: (props: LayerViewProps) => import("react").JSX.Element;
 export default LayerView;

package/dist/features/view/index.js

@@ -0,0 +1,156 @@
+"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";
+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();
+    useEffect(() => {
+        if ((componentProps === null || componentProps === void 0 ? void 0 : componentProps.length) > 0) {
+            dispatch({
+                type: "board/setNewComponents",
+                payload: componentProps,
+            });
+        }
+        if ((extraComponentProps === null || extraComponentProps === void 0 ? void 0 : extraComponentProps.length) > 0) {
+            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(() => {
+        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] : _.shape;
+            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;
+            if ((_a = values === null || values === void 0 ? void 0 : values.shape) === null || _a === void 0 ? void 0 : _a.includes("background")) {
+                minX = values.x;
+                minY = values.y;
+                maxX = values.width;
+                maxY = values.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]);
+    let elementEditor = [, ...componentsEditor];
+    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;
+        });
+    };
+    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, { 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: "#000000",
+                        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/features/view/index.jsx

@@ -130,11 +130,19 @@ const LayerView = (props) => {
             overflow: "auto",
             WebkitOverflowScrolling: "touch",
             touchAction: "pan-y",
-        }}>
-      <TransformWrapper ref={transformRef} {...props.transformProps} 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} 
+        }} {...props.containerProps}>
+      <TransformWrapper ref={transformRef} {...props.transformProps} 
+    // 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}>
         <TransformComponent wrapperStyle={{
@@ -145,11 +153,11 @@ const LayerView = (props) => {
             width: "100%",
             height: "100%",
         }}>
-          <svg 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={{
+          <svg {...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: "#000000",
             display: "block",
             pointerEvents: "auto",
-            touchAction: "pay-y",
+            // touchAction: "pan-y",
         }}>
             <Layers mode="view" components={[
             ...extraComponentsEditor,

package/dist/provider/antd-provider.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ConfigProvider } from "antd";
+import { AntdRegistry } from "@ant-design/nextjs-registry";
+import { useAppSelector } from "../hooks/use-redux";
+export const AntdProvider = ({ children, }) => {
+    const theme = useAppSelector((state) => state.theme);
+    return (_jsx(AntdRegistry, { children: _jsx(ConfigProvider, { theme: {
+                //   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,
+                    },
+                },
+            }, children: children }) }));
+};

package/dist/provider/redux-provider.js

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

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

package/package.json

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