seat-editor 3.0.0 → 3.0.2

package/dist/provider/{store-provider.js → store-provider.jsx}

@@ -1,9 +1,10 @@
 "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 }) }));
+    return (<ReduxProvider>
+      <AntdProvider themeColor={themeColor}>{children}</AntdProvider>
+    </ReduxProvider>);
 };

package/package.json

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

package/dist/app/new-board/page.js

@@ -1,33 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
-import SeatEditor from "../../features/package";
-import { extraComponent } from "../constant";
-import { data4 } from "../constant";
-export default function NewBoard() {
-    const [initialValue, setInitialValue] = useState([]);
-    const [extraComponents, setExtraComponents] = useState([]);
-    const [backgroundColor, setBackgroundColor] = useState("#000000");
-    const [viewOnly, setViewOnly] = useState(true);
-    useEffect(() => {
-        setInitialValue(data4);
-        setExtraComponents(extraComponent);
-    }, []);
-    return (_jsx(_Fragment, { children: _jsxs("div", { className: "w-full h-screen flex flex-col relative justify-center", children: [_jsx("div", { className: "w-full h-[1000px] bg-white border-r border-gray-200" }), _jsx("div", { className: "flex-1 h-full", children: _jsx(SeatEditor, { componentProps: initialValue, viewOnly: false, dragOnly: true, deleteAutorized: {
-                            component: true,
-                            extraComponent: true,
-                        }, mappingKey: "properties", onCurrentStateChange: (setState) => {
-                            var _a, _b, _c, _d;
-                            if (((_a = setState === null || setState === void 0 ? void 0 : setState.components) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-                                setInitialValue((_b = setState === null || setState === void 0 ? void 0 : setState.components) !== null && _b !== void 0 ? _b : []);
-                            }
-                            if (setState === null || setState === void 0 ? void 0 : setState.backgroundColor) {
-                                setBackgroundColor(setState === null || setState === void 0 ? void 0 : setState.backgroundColor);
-                            }
-                            if (((_c = setState === null || setState === void 0 ? void 0 : setState.extraComponents) === null || _c === void 0 ? void 0 : _c.length) > 0) {
-                                setExtraComponents((_d = setState === null || setState === void 0 ? void 0 : setState.extraComponents) !== null && _d !== void 0 ? _d : []);
-                            }
-                        }, extraComponentProps: extraComponents, defaultBackground: backgroundColor, 
-                        // dragOnly={true}
-                        statusKey: "status" }) })] }) }));
-}

package/dist/app/only-view/page.js

@@ -1,78 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import LayerView from "@/features/view-only-3";
-import { useState, useRef } from "react";
-import { data4 } from "../constant";
-import { ChairIcon } from "./chair";
-import { UserIcon } from "./user";
-import { Modal } from "antd";
-import JsonView from '@uiw/react-json-view';
-const Card = (item) => {
-    const handleDragStart = (e) => {
-        // Jangan preventDefault di drag start
-        e.dataTransfer.setData("application/json", JSON.stringify(item));
-        e.dataTransfer.effectAllowed = "move";
-    };
-    return (_jsxs("div", { className: "h-40 bg-gray-400 shadow-lg rounded-lg p-4 m-4", "data-table": JSON.stringify(item), draggable: true, onContextMenu: (e) => e.preventDefault(), onDragStart: handleDragStart, onClick: (e) => e.stopPropagation(), onPointerDown: (e) => e.stopPropagation(), children: [_jsx("h2", { className: "text-lg font-semibold mb-2", children: "Card Title" }), _jsx("p", { className: "text-gray-600", children: item === null || item === void 0 ? void 0 : item.name })] }));
-};
-const TouchScrollDetect = () => {
-    const refLayer = useRef(null);
-    const [open, setOpen] = useState(false);
-    const [table, setTable] = useState(null);
-    const handleZoomIn = () => {
-        var _a, _b;
-        (_b = (_a = refLayer === null || refLayer === void 0 ? void 0 : refLayer.current) === null || _a === void 0 ? void 0 : _a.transformRef) === null || _b === void 0 ? void 0 : _b.zoomIn(0.1);
-    };
-    const handleZoomOut = () => {
-        var _a, _b;
-        (_b = (_a = refLayer === null || refLayer === void 0 ? void 0 : refLayer.current) === null || _a === void 0 ? void 0 : _a.transformRef) === null || _b === void 0 ? void 0 : _b.zoomOut();
-    };
-    const handleSwitch = (e, data) => {
-        setOpen(!open);
-        setTable(data);
-    };
-    const handleDrop = (e, data) => {
-        e.preventDefault();
-        setOpen(!open);
-        setTable(data);
-    };
-    const handleSelectTable = (item) => {
-        setOpen(!open);
-        setTable(item);
-    };
-    const renderModal = () => {
-        return (_jsx(Modal, { open: open, onCancel: () => setOpen(false), width: 700, title: "Preview Board", centered: true, footer: null, children: _jsx("div", { className: "flex flex-col p-4 h-[500px] overflow-auto", children: _jsx(JsonView, { value: table }) }) }));
-    };
-    return (_jsxs("div", { className: "w-full h-screen border-2 border-black overflow-auto", id: "scroll-container", children: [renderModal(), _jsxs("div", { className: "flex", children: [_jsx("div", { className: "h-screen bg-gray-500 w-1/3", children: _jsx("div", { className: "p-4", children: data4.map((item, index) => (_jsx(Card, Object.assign({}, item), index))) }) }), _jsxs("div", { className: "h-screen w-2/3 relative", children: [_jsxs("div", { className: "absolute top-1 right-1  flex gap-4 z-[10]", children: [_jsx("button", { className: "p-4 bg-gray-400", onClick: () => handleZoomIn(), children: "+" }), _jsx("button", { className: "p-4 bg-gray-400", onClick: () => handleZoomOut(), children: "-" })] }), _jsx(LayerView, { refs: refLayer, statusKey: "status", defaultBackground: "#000000", mappingKey: "properties", componentProps: data4, onDrop: (e, data) => handleDrop(e, data), onSwitch: (e, data) => handleSwitch(e, data), extraComponentProps: [], onSelectComponent: (component) => {
-                                    handleSelectTable(component);
-                                }, dragTableBlockKey: [
-                                    {
-                                        key: "is_lock",
-                                        value: 1,
-                                    },
-                                ], tableMatchKey: [
-                                    {
-                                        key: 0,
-                                        properties: { fill: "white" },
-                                    },
-                                ], eventMatchTable: [
-                                    {
-                                        event: "mouseenter",
-                                        properties: { fill: "red" },
-                                    },
-                                    {
-                                        event: "selected",
-                                        properties: { fill: "white" },
-                                    },
-                                ], iconTags: [
-                                    {
-                                        icon: _jsx(ChairIcon, {}),
-                                        key: "chair",
-                                    },
-                                    {
-                                        icon: _jsx(UserIcon, {}),
-                                        key: "user",
-                                    },
-                                ] })] })] })] }));
-};
-export default TouchScrollDetect;

package/dist/app/page.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import Board from "../features/board-v3";
-import SideTool from "../features/side-tool";
-import ControlPanels from "../features/panel";
-const TableEditor = () => {
-    return (_jsx(_Fragment, { children: _jsxs("div", { className: "w-full h-screen flex relative", children: [_jsx(SideTool, {}), _jsx(Board, {}), _jsx(ControlPanels, {})] }) }));
-};
-export default TableEditor;

package/dist/app/v2/page.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import Board from "../../features/board-v2";
-import SideTool from "../../features/side-tool";
-import ControlPanels from "../../features/panel";
-const TableEditor = () => {
-    return (_jsx(_Fragment, { children: _jsxs("div", { className: "w-full h-screen flex relative", children: [_jsx(SideTool, {}), _jsx(Board, {}), _jsx(ControlPanels, {})] }) }));
-};
-export default TableEditor;

package/dist/components/button-tools/index.js

@@ -1,11 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Popover } from "antd";
-const ButtonTools = (props) => {
-    const { buttonProps, items, popoverProps } = props;
-    if (items.length === 0) {
-        return (_jsx(Popover, Object.assign({ trigger: "hover" }, popoverProps, { children: _jsx(Button, Object.assign({}, buttonProps)) })));
-    }
-    return (_jsx(Popover, { content: _jsxs("div", { children: [_jsx(Button, { children: "Button 1" }), _jsx(Button, { children: "Button 2" })] }), trigger: "click", children: _jsx(Button, Object.assign({}, buttonProps)) }));
-};
-export default ButtonTools;

package/dist/components/form-tools/label.js

@@ -1,7 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button, ColorPicker, Flex, Form, Input, InputNumber } from "antd";
-const SectionLabel = () => {
-    return (_jsxs("div", { className: "py-2", children: [_jsx("h1", { className: "heading-s", children: "Section Labeling" }), _jsx(Form.Item, { label: "Labels in square", name: "labels", children: _jsx(Form.List, { name: "labels", children: (fields, { add, remove }) => (_jsxs(_Fragment, { children: [fields.map((field) => (_jsxs("div", { children: [_jsxs(Flex, { gap: 2, children: [_jsx(Form.Item, { name: [field.name, "label"], label: "Text", children: _jsx(Input, {}) }), _jsx(Form.Item, { name: [field.name, "fontColor"], label: "Color", getValueFromEvent: (color) => color.toHexString(), children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) })] }), _jsxs(Flex, { gap: 2, children: [_jsx(Form.Item, { name: [field.name, "x"], label: "X", children: _jsx(InputNumber, {}) }), _jsx(Form.Item, { name: [field.name, "y"], label: "Y", children: _jsx(InputNumber, {}) }), _jsx(Form.Item, { name: [field.name, "fontSize"], label: "Size", children: _jsx(InputNumber, { suffix: "px" }) })] })] }, field.key))), _jsxs(Flex, { gap: 2, children: [_jsx(Button, { type: "primary", onClick: () => add(), className: "btn btn-primary", children: "Add" }), _jsx(Button, { type: "primary", onClick: () => remove(fields.length - 1), className: "btn btn-primary", children: "Remove" })] })] })) }) }), _jsx("div", { className: "divider-dashed" })] }));
-};
-export default SectionLabel;

package/dist/components/form-tools/shape.js

@@ -1,25 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ColorPicker, Flex, Form, InputNumber, Select } from "antd";
-const SectionShape = ({ allowChangeShape = true, }) => {
-    const optionsShape = [
-        {
-            value: "circle",
-            label: "Circle",
-        },
-        {
-            value: "square",
-            label: "Square",
-        },
-        {
-            value: "table-seat-circle",
-            label: "Table Seat Circle",
-        },
-        {
-            label: "Image Table",
-            value: "image-table",
-        },
-    ];
-    return (_jsxs("div", { className: "py-2", children: [_jsx("h1", { className: "heading-s", children: "Shape" }), allowChangeShape && (_jsx(Flex, { gap: 2, className: "w-full", children: _jsx(Form.Item, { label: "Name", name: "shape", className: "w-full", children: _jsx(Select, { options: optionsShape, className: "w-full" }) }) })), _jsxs(Flex, { gap: 2, className: "w-full", children: [_jsx(Form.Item, { label: "Width", name: "width", className: "w-full", children: _jsx(InputNumber, { suffix: "px" }) }), _jsx(Form.Item, { label: "Height", name: "height", className: "w-full", children: _jsx(InputNumber, { suffix: "px" }) })] }), _jsxs(Flex, { gap: 2, children: [_jsx(Form.Item, { label: "Position X", name: "x", className: "w-full", children: _jsx(InputNumber, {}) }), _jsx(Form.Item, { label: "Position Y", name: "y", className: "w-full", children: _jsx(InputNumber, {}) }), _jsx(Form.Item, { label: "Rotation", name: "rotation", className: "w-full", children: _jsx(InputNumber, {}) })] }), _jsxs(Flex, { gap: 2, children: [_jsx(Form.Item, { label: "Fill", name: "fill", getValueFromEvent: (color) => color.toHexString(), className: "w-full ", children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) }), _jsx(Form.Item, { label: "Stroke", name: "stroke", getValueFromEvent: (color) => color.toHexString(), className: "w-full ", children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) })] }), _jsxs(Flex, { children: [_jsx(Form.Item, { label: "Stroke Width", name: "strokeWidth", className: "w-full", children: _jsx(InputNumber, {}) }), _jsx(Form.Item, { label: "opacity", name: "opacity", className: "w-full", children: _jsx(InputNumber, { step: 0.1, max: 1, min: 0 }) })] })] }));
-};
-export default SectionShape;

package/dist/components/layer/index.js

@@ -1,295 +0,0 @@
-"use client";
-import { createElement as _createElement } from "react";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useRef } from "react";
-import { omit } from "lodash";
-const Layers = ({ shadowShape, components, onClick, selectedComponent, selectedTable, activeTool, onMouseDown, onMouseUp, onBlur, selectedTableColor, mode = "edit", style, onTouchEnd, onTouchMove, onTouchStart }) => {
-    const refItemTemp = useRef(null);
-    const handleOnHover = (item) => {
-        if (mode === "edit") {
-            refItemTemp.current = item;
-        }
-    };
-    const renderShadowShape = (item) => {
-        const { id, x, y, width, height, fill, opacity, rotation, shape, fontColor, text, seatFill, labels, } = item;
-        const commonProps = { fill, opacity };
-        switch (shape) {
-            case "square":
-                return (_jsx("rect", Object.assign({ x: x, y: y, width: width, height: height }, commonProps), id));
-            case "circle":
-                return (_jsx("circle", Object.assign({ cx: x + width / 2, cy: y + height / 2, r: width / 2 }, commonProps), id));
-            case "diamond":
-                return (_jsx("rect", Object.assign({ x: x, y: y, width: width, height: height, transform: `rotate(${rotation}, ${x}, ${y})` }, commonProps), id));
-            case "table-seat-circle": {
-                const seatCount = item.seatCount;
-                const openSpace = item.openSpace; // nilai antara 0 (tidak ada ruang) sampai maksimal ~0.9
-                const centerX = x + width / 2;
-                const centerY = y + height / 2;
-                const radius = width;
-                const seatRadius = width / 4;
-                const fullAngle = 2 * Math.PI;
-                const availableAngle = fullAngle * (1 - openSpace); // sudut yang dipakai untuk kursi
-                const angleStart = (fullAngle - availableAngle) / 2; // agar tetap seimbang
-                const angleStep = availableAngle / seatCount;
-                const seatCircles = Array.from({ length: seatCount }, (_, i) => {
-                    const angle = angleStart + i * angleStep;
-                    const cx = centerX + radius * Math.cos(angle);
-                    const cy = centerY + radius * Math.sin(angle);
-                    return { cx, cy };
-                });
-                return (_jsxs("g", { transform: `rotate(${rotation} ${x + width / 2} ${y + height / 2})`, children: [_jsx("circle", Object.assign({ cx: centerX, cy: centerY, r: width - 15 }, commonProps, { opacity: id === (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) ? 0.5 : opacity })), labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
-                            var _a, _b, _c, _d;
-                            return (_jsx("text", { x: x + width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0), y: y + height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0), fill: (_c = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _c !== void 0 ? _c : "black", fontSize: `${(_d = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _d !== void 0 ? _d : 10}px`, fontWeight: "bold", textAnchor: "middle", dominantBaseline: "middle", transform: `rotate(${rotation} ${x + width / 2} ${y + height / 2})`, children: _ === null || _ === void 0 ? void 0 : _.label }, `${id}-label-${index}`));
-                        }), _jsx("g", { fill: "#e6b9c0", opacity: id === (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) ? 0.5 : opacity, stroke: "#c49ba3", strokeWidth: "1", children: seatCircles.map(({ cx, cy }, i) => (_jsx("circle", { cx: cx, cy: cy, r: seatRadius, fill: seatFill }, `${id}-seat-${i}`))) }, `${id}-seats`)] }, id));
-            }
-            case "table-seat-square": {
-                const seatCount = item.seatCount || 6;
-                const openSpace = item.openSpace || 0; // from 0 to 0.9
-                const seatRadius = width / 6;
-                // split seats evenly on top and bottom
-                const seatCountPerSide = Math.ceil(seatCount / 2);
-                const availableWidth = width * (1 - openSpace);
-                const startX = x + (width * openSpace) / 2;
-                const spacing = seatCountPerSide > 1 ? availableWidth / (seatCountPerSide - 1) : 0;
-                const topSeats = Array.from({ length: seatCountPerSide }, (_, i) => ({
-                    cx: startX + i * spacing,
-                    cy: y - seatRadius * 1.5,
-                }));
-                const bottomSeats = Array.from({ length: seatCount - seatCountPerSide }, // in case it's odd
-                (_, i) => ({
-                    cx: startX + i * spacing,
-                    cy: y + height + seatRadius * 1.5,
-                }));
-                return (_jsxs("g", { children: [_jsx("rect", Object.assign({ x: x, y: y, width: width, height: height }, commonProps)), _jsx("g", { fill: "#e6b9c0", fillOpacity: "0.5", stroke: "#c49ba3", strokeWidth: "1", children: [...topSeats, ...bottomSeats].map(({ cx, cy }, i) => (_jsx("circle", { cx: cx, cy: cy, r: seatRadius }, `${id}-seat-${i}`))) }, `${id}-seats`)] }, id));
-            }
-            case "text":
-                return (_jsxs("g", { onClick: () => {
-                        onClick && onClick(item);
-                    }, children: [_jsx("rect", { x: x, y: y, width: width, height: height, fill: "transparent", opacity: opacity }), _jsx("text", { x: x + width / 2, y: y + height / 2, textAnchor: "middle", dominantBaseline: "middle", fill: fontColor, fontSize: height * 0.6, opacity: opacity, children: text })] }, id));
-            case "ruler":
-                return (_jsxs("g", { children: [_jsx("rect", { x: x - (window.innerWidth * 3) / 2, y: y, width: window.innerWidth * 3, height: 1, fill: "black" }), _jsx("rect", { x: x, y: y - (window.innerHeight * 3) / 2, width: 1, height: window.innerHeight * 3, fill: "black" })] }, id));
-            default:
-                return null;
-        }
-    };
-    const renderShape = (item) => {
-        const { id, x, y, width, height, fill, opacity, rotation = 0, shape, text, stroke, strokeWidth, labels, fontSize, fontColor, label, seatFill, src, } = item;
-        const commonProps = {
-            fill,
-            opacity,
-            stroke,
-            strokeWidth,
-            onMouseDown: (e) => {
-                onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(e, item || refItemTemp.current);
-            },
-            onMouseEnter: (e) => {
-                // e.stopPropagation();
-                handleOnHover === null || handleOnHover === void 0 ? void 0 : handleOnHover(item);
-            },
-            onClick: (e) => {
-                // e.stopPropagation();
-                onClick === null || onClick === void 0 ? void 0 : onClick(item);
-            },
-            onMouseUp: (e) => {
-                // e.stopPropagation();
-                onMouseUp === null || onMouseUp === void 0 ? void 0 : onMouseUp(e);
-            },
-            onBlur: (e) => {
-                // e.stopPropagation();
-                onBlur === null || onBlur === void 0 ? void 0 : onBlur();
-            },
-            onTouchMove: (e) => {
-                // e.stopPropagation();
-                onTouchMove === null || onTouchMove === void 0 ? void 0 : onTouchMove(e);
-            },
-            onTouchStart: (e) => {
-                // e.stopPropagation();
-                onTouchStart === null || onTouchStart === void 0 ? void 0 : onTouchStart(e, item);
-            },
-            onTouchEnd: (e) => {
-                // e.stopPropagation();
-                onTouchEnd === null || onTouchEnd === void 0 ? void 0 : onTouchEnd(e);
-            },
-            onDoubleClick: (e) => {
-                // e.stopPropagation();
-                onClick === null || onClick === void 0 ? void 0 : onClick(item);
-            },
-        };
-        switch (shape) {
-            case "square":
-                return (_jsxs("g", { children: [_jsx("rect", Object.assign({ x: x, y: y, width: width, height: height, fill: selectedTableColor !== null && selectedTableColor !== void 0 ? selectedTableColor : fill, style: Object.assign({ cursor: mode === "view" ? "pointer" : "default" }, style), opacity: id === (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) ? 0.5 : opacity }, omit(commonProps, "opacity"), { transform: `rotate(${rotation} ${x + width / 2} ${y + height / 2})` }), id), labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
-                            var _a, _b, _c, _d;
-                            return (_createElement("text", Object.assign({}, omit(commonProps, ["opacity", "stroke", "strokeWidth"]), { key: `${id}-label-${index}`, x: x + width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0), y: y + height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0), fill: (_c = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _c !== void 0 ? _c : "black", fontSize: `${(_d = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _d !== void 0 ? _d : 10}px`, fontWeight: "bold", textAnchor: "middle", dominantBaseline: "middle", transform: `rotate(${rotation} ${x + width / 2} ${y + height / 2})`, onClick: (e) => {
-                                    e.stopPropagation();
-                                    onClick && onClick(item);
-                                } }), _ === null || _ === void 0 ? void 0 : _.label));
-                        })] }, id));
-            case "circle":
-                return (_jsxs("g", { children: [_jsx("circle", Object.assign({ cx: x + width / 2, cy: y + height / 2, r: width / 2, style: Object.assign({ cursor: mode === "view" ? "pointer" : "default" }, style), fill: selectedTableColor !== null && selectedTableColor !== void 0 ? selectedTableColor : fill, opacity: id === (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) ? 0.5 : opacity }, omit(commonProps, "opacity")), id), labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
-                            var _a, _b, _c, _d;
-                            return (_jsx("text", { x: x + width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0), y: y + height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0), fill: (_c = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _c !== void 0 ? _c : "black", fontSize: `${(_d = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _d !== void 0 ? _d : 10}px`, fontWeight: "bold", textAnchor: "middle", dominantBaseline: "middle", transform: `rotate(${rotation} ${x + width / 2} ${y + height / 2})`, onClick: (e) => {
-                                    e.stopPropagation();
-                                    onClick && onClick(item);
-                                }, children: _ === null || _ === void 0 ? void 0 : _.label }, `${id}-label-${index}`));
-                        })] }, id));
-            case "diamond":
-                return (_jsxs("g", { children: [_jsx("rect", Object.assign({ x: x, y: y, width: width, height: height, style: Object.assign({ cursor: mode === "view" ? "pointer" : "default" }, style), transform: `rotate(${rotation}, ${x}, ${y})` }, commonProps, { fill: selectedTableColor !== null && selectedTableColor !== void 0 ? selectedTableColor : fill }), id), _jsx("text", { x: x + width / 2, y: y + height / 2, fill: fontColor !== null && fontColor !== void 0 ? fontColor : "black", fontSize: `${fontSize !== null && fontSize !== void 0 ? fontSize : 10}px`, fontWeight: "bold", textAnchor: "middle", dominantBaseline: "middle", children: label })] }, id));
-            case "table-seat-circle": {
-                const seatCount = item.seatCount;
-                const openSpace = item.openSpace; // nilai antara 0 (tidak ada ruang) sampai maksimal ~0.9
-                const centerX = x + width / 2;
-                const centerY = y + height / 2;
-                const radius = width;
-                const seatRadius = width / 4;
-                const fullAngle = 2 * Math.PI;
-                const availableAngle = fullAngle * (1 - openSpace); // sudut yang dipakai untuk kursi
-                const angleStart = (fullAngle - availableAngle) / 2; // agar tetap seimbang
-                const angleStep = availableAngle / seatCount;
-                const seatCircles = Array.from({ length: seatCount }, (_, i) => {
-                    const angle = angleStart + i * angleStep;
-                    const cx = centerX + radius * Math.cos(angle);
-                    const cy = centerY + radius * Math.sin(angle);
-                    return { cx, cy };
-                });
-                return (_jsxs("g", { transform: `rotate(${rotation} ${x + width / 2} ${y + height / 2})`, children: [_jsx("circle", Object.assign({ cx: centerX, style: Object.assign({ cursor: mode === "view" ? "pointer" : "default" }, style), cy: centerY, r: width - 15, fill: selectedTableColor !== null && selectedTableColor !== void 0 ? selectedTableColor : fill }, commonProps, { opacity: id === (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) ? 0.5 : opacity })), labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
-                            var _a, _b, _c, _d;
-                            return (_jsx("text", { x: x + width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0), y: y + height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0), fill: (_c = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _c !== void 0 ? _c : "black", fontSize: `${(_d = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _d !== void 0 ? _d : 10}px`, fontWeight: "bold", textAnchor: "middle", dominantBaseline: "middle", transform: `rotate(${rotation} ${x + width / 2} ${y + height / 2})`, onClick: (e) => {
-                                    e.stopPropagation();
-                                    onClick && onClick(item);
-                                }, children: _ === null || _ === void 0 ? void 0 : _.label }, `${id}-label-${index}`));
-                        }), _jsx("g", { fill: "#e6b9c0", opacity: id === (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) ? 0.5 : opacity, stroke: "#c49ba3", strokeWidth: "1", children: seatCircles.map(({ cx, cy }, i) => (_jsx("circle", { cx: cx, cy: cy, r: seatRadius, fill: seatFill }, `${id}-seat-${i}`))) }, `${id}-seats`)] }, id));
-            }
-            case "table-seat-square": {
-                const seatCount = item.seatCount || 6;
-                const openSpace = item.openSpace || 0; // from 0 to 0.9
-                const seatRadius = width / 6;
-                // split seats evenly on top and bottom
-                const seatCountPerSide = Math.ceil(seatCount / 2);
-                const availableWidth = width * (1 - openSpace);
-                const startX = x + (width * openSpace) / 2;
-                const spacing = seatCountPerSide > 1 ? availableWidth / (seatCountPerSide - 1) : 0;
-                const topSeats = Array.from({ length: seatCountPerSide }, (_, i) => ({
-                    cx: startX + i * spacing,
-                    cy: y - seatRadius * 1.5,
-                }));
-                const bottomSeats = Array.from({ length: seatCount - seatCountPerSide }, // in case it's odd
-                (_, i) => ({
-                    cx: startX + i * spacing,
-                    cy: y + height + seatRadius * 1.5,
-                }));
-                return (_jsxs("g", { transform: `rotate(${rotation}, ${x}, ${y})`, children: [_jsx("rect", Object.assign({ x: x, y: y, style: Object.assign({ cursor: mode === "view" ? "pointer" : "default" }, style), width: width, height: height }, commonProps, { fill: selectedTableColor !== null && selectedTableColor !== void 0 ? selectedTableColor : fill })), _jsx("text", { x: x + width / 2, y: y + height / 2, fill: fontColor !== null && fontColor !== void 0 ? fontColor : "black", fontSize: `${fontSize !== null && fontSize !== void 0 ? fontSize : 10}px`, fontWeight: "bold", textAnchor: "middle", dominantBaseline: "middle", children: label }), _jsx("g", { fill: "#e6b9c0", fillOpacity: "0.5", stroke: "#c49ba3", strokeWidth: "1", children: [...topSeats, ...bottomSeats].map(({ cx, cy }, i) => (_jsx("circle", { cx: cx, cy: cy, r: seatRadius }, `${id}-seat-${i}`))) }, `${id}-seats`)] }, id));
-            }
-            case "text":
-                return (_jsxs("g", { children: [_jsx("rect", { x: x, y: y, width: width, height: height, fill: "transparent", opacity: opacity, onClick: (e) => {
-                                e.stopPropagation();
-                                onClick && onClick(item);
-                            } }), _jsx("text", Object.assign({ x: x + width / 2, y: y + height / 2, textAnchor: "middle", dominantBaseline: "middle", fill: fontColor, fontSize: fontSize !== null && fontSize !== void 0 ? fontSize : height * 0.6, opacity: opacity }, omit(commonProps, ["fill", "opacity"]), { children: text }))] }, id));
-            case "image-table":
-            case "background":
-                return (_jsxs("g", { onClick: () => {
-                        onClick && onClick(item);
-                    }, children: [_jsx("image", Object.assign({ href: src, x: x, y: y, width: width, height: height, transform: `rotate(${rotation} ${x + width / 2} ${y + height / 2})` }, commonProps)), labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
-                            var _a, _b, _c, _d;
-                            return (_jsx("text", { x: x + width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0), y: y + height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0), fill: (_c = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _c !== void 0 ? _c : "black", fontSize: `${(_d = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _d !== void 0 ? _d : 10}px`, fontWeight: "bold", textAnchor: "middle", dominantBaseline: "middle", transform: `rotate(${rotation} ${x + width / 2} ${y + height / 2})`, children: _ === null || _ === void 0 ? void 0 : _.label }, index));
-                        })] }, id));
-            default:
-                return _jsx("g", {}, id);
-        }
-    };
-    let date = new Date();
-    return (_jsxs("g", { children: [components === null || components === void 0 ? void 0 : components.map(renderShape), shadowShape === null || shadowShape === void 0 ? void 0 : shadowShape.map(renderShadowShape), selectedComponent && (_jsxs(_Fragment, { children: [[
-                        "square",
-                        "circle",
-                        "diamond",
-                        "text",
-                        "background",
-                        "image-table",
-                    ].includes(selectedComponent.shape) && (_jsxs("g", { children: [_jsx("rect", { x: selectedComponent.x - 25 - ((selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.strokeWidth) || 0), y: selectedComponent.y - 25 - ((selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.strokeWidth) || 0), width: 20, height: 20, fill: "black", stroke: "white", strokeWidth: "2", 
-                                // transform={`scale(${selectedComponent.scale})`}
-                                onMouseDown: (e) => {
-                                    e.stopPropagation();
-                                    onMouseDown(e, selectedComponent, "top-left");
-                                }, onTouchStart: (e) => {
-                                    e.stopPropagation();
-                                    onTouchStart(e, selectedComponent, "top-left");
-                                }, onTouchMove: (e) => {
-                                    e.stopPropagation();
-                                    onTouchMove(e);
-                                } }), _jsx("rect", { x: selectedComponent.x + (selectedComponent.width - 15) / 2, y: selectedComponent.y - 25 - ((selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.strokeWidth) || 0), width: 20, height: 20, fill: "black", stroke: "white", strokeWidth: "2", onMouseDown: (e) => {
-                                    e.stopPropagation();
-                                    onMouseDown(e, selectedComponent, "top-center");
-                                }, onTouchStart: (e) => {
-                                    e.stopPropagation();
-                                    onTouchStart(e, selectedComponent, "top-center");
-                                }, onTouchMove: (e) => {
-                                    e.stopPropagation();
-                                    onTouchMove(e);
-                                } }), _jsx("rect", { x: selectedComponent.x - 25 - ((selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.strokeWidth) || 0), y: selectedComponent.y + (selectedComponent.height - 15) / 2, width: 20, height: 20, fill: "black", stroke: "white", strokeWidth: "2", onMouseDown: (e) => {
-                                    e.stopPropagation();
-                                    onMouseDown(e, selectedComponent, "left-center");
-                                }, onTouchStart: (e) => {
-                                    e.stopPropagation();
-                                    onTouchStart(e, selectedComponent, "left-center");
-                                }, onTouchMove: (e) => {
-                                    e.stopPropagation();
-                                    onTouchMove(e);
-                                } }), _jsx("rect", { x: selectedComponent.x + selectedComponent.width + 5 + ((selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.strokeWidth) || 0), y: selectedComponent.y - 25 - ((selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.strokeWidth) || 0), width: 20, height: 20, fill: "black", stroke: "white", strokeWidth: "2", onMouseDown: (e) => {
-                                    e.stopPropagation();
-                                    onMouseDown(e, selectedComponent, "top-right");
-                                }, onTouchStart: (e) => {
-                                    e.stopPropagation();
-                                    onTouchStart(e, selectedComponent, "top-right");
-                                }, onTouchMove: (e) => {
-                                    e.stopPropagation();
-                                    onTouchMove(e);
-                                } }), _jsx("rect", { x: selectedComponent.x + selectedComponent.width + 5 + ((selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.strokeWidth) || 0), y: selectedComponent.y + selectedComponent.height + 5 + ((selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.strokeWidth) || 0), width: 20, height: 20, fill: "black", stroke: "white", strokeWidth: "2", onMouseDown: (e) => {
-                                    e.stopPropagation();
-                                    onMouseDown(e, selectedComponent, "bottom-right");
-                                }, onTouchStart: (e) => {
-                                    e.stopPropagation();
-                                    onTouchStart(e, selectedComponent, "bottom-right");
-                                }, onTouchMove: (e) => {
-                                    e.stopPropagation();
-                                    onTouchMove(e);
-                                } }), _jsx("rect", { x: selectedComponent.x + (selectedComponent.width - 15) / 2, y: selectedComponent.y + selectedComponent.height + 5 + ((selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.strokeWidth) || 0), width: 20, height: 20, fill: "black", stroke: "white", strokeWidth: "2", onMouseDown: (e) => {
-                                    e.stopPropagation();
-                                    onMouseDown(e, selectedComponent, "bottom-center");
-                                }, onTouchStart: (e) => {
-                                    e.stopPropagation();
-                                    onTouchStart(e, selectedComponent, "bottom-center");
-                                }, onTouchMove: (e) => {
-                                    e.stopPropagation();
-                                    onTouchMove(e);
-                                } }), _jsx("rect", { x: selectedComponent.x + selectedComponent.width + 5 + ((selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.strokeWidth) || 0), y: selectedComponent.y + (selectedComponent.height - 15) / 2, width: 20, height: 20, fill: "black", stroke: "white", strokeWidth: "2", onMouseDown: (e) => {
-                                    e.stopPropagation();
-                                    onMouseDown(e, selectedComponent, "right-center");
-                                }, onTouchStart: (e) => {
-                                    e.stopPropagation();
-                                    onTouchStart(e, selectedComponent, "right-center");
-                                }, onTouchMove: (e) => {
-                                    e.stopPropagation();
-                                    onTouchMove(e);
-                                } }), _jsx("rect", { x: selectedComponent.x - 25 - ((selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.strokeWidth) || 0), y: selectedComponent.y + selectedComponent.height + 5 + ((selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.strokeWidth) || 0), width: 20, height: 20, fill: "black", stroke: "white", strokeWidth: "2", onMouseDown: (e) => {
-                                    e.stopPropagation();
-                                    onMouseDown(e, selectedComponent, "bottom-left");
-                                }, onTouchStart: (e) => {
-                                    e.stopPropagation();
-                                    onTouchStart(e, selectedComponent, "bottom-left");
-                                }, onTouchMove: (e) => {
-                                    e.stopPropagation();
-                                    onTouchMove(e);
-                                } })] }, `${selectedComponent.id}-selection`)), ["table-seat-circle", "table-seat-square"].includes(selectedComponent.shape) && (_jsxs("g", { children: [_jsx("rect", { x: selectedComponent.x - selectedComponent.width, y: selectedComponent.y - selectedComponent.height, width: 20, height: 20, fill: "black", stroke: "white", strokeWidth: "2", transform: `scale(${selectedComponent.scale})`, onMouseDown: (e) => {
-                                    e.stopPropagation();
-                                    onMouseDown(e, selectedComponent, "top-left");
-                                } }), _jsx("rect", { x: selectedComponent.x + selectedComponent.width * 2 - 10, y: selectedComponent.y - selectedComponent.height, width: 20, height: 20, fill: "black", stroke: "white", strokeWidth: "2", transform: `scale(${selectedComponent.scale})`, onMouseDown: (e) => {
-                                    e.stopPropagation();
-                                    onMouseDown(e, selectedComponent, "top-right");
-                                } }), _jsx("rect", { x: selectedComponent.x + selectedComponent.width * 2 - 10, y: selectedComponent.y + selectedComponent.height * 2, width: 20, height: 20, fill: "black", stroke: "white", strokeWidth: "2", transform: `scale(${selectedComponent.scale})`, onMouseDown: (e) => {
-                                    e.stopPropagation();
-                                    onMouseDown(e, selectedComponent, "bottom-right");
-                                } }), _jsx("rect", { x: selectedComponent.x - selectedComponent.width, y: selectedComponent.y + selectedComponent.height * 2, width: 20, height: 20, fill: "black", stroke: "white", strokeWidth: "2", transform: `scale(${selectedComponent.scale})`, onMouseDown: (e) => {
-                                    e.stopPropagation();
-                                    onMouseDown(e, selectedComponent, "b-left");
-                                } })] }, selectedComponent.id))] }))] }, `${date}`));
-};
-export default Layers;