seat-editor 1.6.11 → 1.6.13

package/dist/app/test/page.d.ts

@@ -0,0 +1 @@
+export default function DraggableRect(): import("react/jsx-runtime").JSX.Element;

package/dist/app/test/page.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+export default function DraggableRect() {
+    const rectRef = useRef(null);
+    const [pos, setPos] = useState({ x: 100, y: 100 });
+    const [dragging, setDragging] = useState(false);
+    const [offset, setOffset] = useState({ x: 0, y: 0 });
+    const getCoords = (e) => {
+        if ("touches" in e) {
+            return {
+                x: e.touches[0].clientX,
+                y: e.touches[0].clientY,
+            };
+        }
+        return {
+            x: e.clientX,
+            y: e.clientY,
+        };
+    };
+    const handleStart = (e) => {
+        e.preventDefault();
+        const coords = getCoords(e);
+        setOffset({
+            x: coords.x - pos.x,
+            y: coords.y - pos.y,
+        });
+        setDragging(true);
+    };
+    const handleMove = (e) => {
+        if (!dragging)
+            return;
+        const coords = getCoords(e);
+        setPos({
+            x: coords.x - offset.x,
+            y: coords.y - offset.y,
+        });
+    };
+    const handleEnd = () => {
+        setDragging(false);
+    };
+    return (_jsx("svg", { width: "100%", height: "500", viewBox: "0 0 800 600", style: { border: "1px solid black", touchAction: "none" }, onMouseMove: handleMove, onMouseUp: handleEnd, onTouchMove: handleMove, onTouchEnd: handleEnd, children: _jsx("rect", { ref: rectRef, x: pos.x, y: pos.y, width: "150", height: "100", fill: "tomato", onMouseDown: handleStart, onTouchStart: handleStart, style: { cursor: "grab" } }) }));
+}

package/dist/app/v2/page.d.ts

@@ -0,0 +1,2 @@
+declare const TableEditor: () => import("react/jsx-runtime").JSX.Element;
+export default TableEditor;

package/dist/app/v2/page.js

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

@@ -0,0 +1,19 @@
+interface LayersProps {
+    shadowShape?: any[];
+    components?: any[];
+    onClick?: (items: any) => void;
+    selectedComponent?: any;
+    activeTool?: string;
+    onMouseDown?: (e: React.MouseEvent, item: any, direction?: string) => void;
+    onMouseUp?: (e: React.MouseEvent) => void;
+    onBlur?: () => void;
+    selectedTable?: any;
+    selectedTableColor?: string;
+    style?: any;
+    mode?: "view" | "edit";
+    onTouchStart?: (e: React.TouchEvent<SVGRectElement | SVGCircleElement | SVGTextElement | SVGImageElement>, items: any, direction?: string) => void;
+    onTouchMove?: (e: React.TouchEvent<SVGRectElement | SVGCircleElement | SVGTextElement | SVGImageElement>) => void;
+    onTouchEnd?: (e: React.TouchEvent<SVGRectElement | SVGCircleElement | SVGTextElement | SVGImageElement>) => void;
+}
+declare const Layers: ({ shadowShape, components, onClick, selectedComponent, selectedTable, activeTool, onMouseDown, onMouseUp, onBlur, selectedTableColor, mode, style, onTouchEnd, onTouchMove, onTouchStart }: LayersProps) => import("react/jsx-runtime").JSX.Element;
+export default Layers;

package/dist/components/layer-v2/index.js

@@ -0,0 +1,295 @@
+"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 && activeTool === "select" && (_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;

package/dist/features/board/index.js

@@ -259,8 +259,8 @@ const BoardTemplate = ({ onSelectComponent }) => {
             const newX = e.clientX - workspaceRect.left - (dragOffset === null || dragOffset === void 0 ? void 0 : dragOffset.x);
             const newY = e.clientY - workspaceRect.top - (dragOffset === null || dragOffset === void 0 ? void 0 : dragOffset.y);
             let newPosition = {
-                x: newX,
-                y: newY,
+                x: newX / scale,
+                y: newY / scale,
             };
             requestAnimationFrame(() => {
                 setComponentsState((prev) => {

package/dist/features/board-v2/board-slice.d.ts

@@ -0,0 +1,14 @@
+export interface Component {
+    id: string;
+    [key: string]: any;
+}
+export interface InitialState {
+    components: Component[];
+    backgroundColor: string;
+    themeColor: string;
+    extraComponents: Component[];
+    flagChange: boolean;
+}
+export declare const addComponent: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, "board/addComponent">, removeComponent: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, "board/removeComponent">, updateComponent: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, "board/updateComponent">, setBackgroundColor: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, "board/setBackgroundColor">, removeExtraComponent: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, "board/removeExtraComponent">;
+declare const _default: import("redux").Reducer<InitialState>;
+export default _default;

package/dist/features/board-v2/board-slice.js

@@ -0,0 +1,52 @@
+import { createSlice } from "@reduxjs/toolkit";
+const initialState = {
+    components: [],
+    backgroundColor: "#FFFFFF",
+    themeColor: "#4A90E2",
+    extraComponents: [],
+    flagChange: false
+};
+const boardSlice = createSlice({
+    name: "board",
+    initialState,
+    reducers: {
+        addComponent: (state, action) => {
+            state.components.push(action.payload);
+        },
+        removeComponent: (state, action) => {
+            state.components = state.components.filter((component) => component.id !== action.payload.id);
+        },
+        removeExtraComponent: (state, action) => {
+            state.extraComponents = state.extraComponents.filter((component) => component.id !== action.payload.id);
+        },
+        updateComponent: (state, action) => {
+            const index = state.components.findIndex((component) => component.id === action.payload.id);
+            const indexExtra = state.extraComponents.findIndex((extraComponent) => extraComponent.id === action.payload.id);
+            if (index !== -1) {
+                // Update component biasa
+                state.components[index] = Object.assign(Object.assign({}, state.components[index]), action.payload);
+            }
+            else if (indexExtra !== -1) {
+                // Update extraComponent
+                state.extraComponents[indexExtra] = Object.assign(Object.assign({}, state.extraComponents[indexExtra]), action.payload);
+            }
+        },
+        setBackgroundColor: (state, action) => {
+            state.backgroundColor = action.payload;
+        },
+        setNewComponents: (state, action) => {
+            state.components = action.payload;
+        },
+        setNewExtraComponents: (state, action) => {
+            state.extraComponents = action.payload;
+        },
+        setExtraComponent: (state, action) => {
+            state.extraComponents.push(action.payload);
+        },
+        setFlagChange: (state, action) => {
+            state.flagChange = action.payload;
+        },
+    },
+});
+export const { addComponent, removeComponent, updateComponent, setBackgroundColor, removeExtraComponent } = boardSlice.actions;
+export default boardSlice.reducer;

package/dist/features/board-v2/index.d.ts

@@ -0,0 +1,6 @@
+interface BoardTemplateProps {
+    onSelectComponent?: (items: any) => void;
+    mappingKey?: string;
+}
+declare const BoardTemplate: ({ onSelectComponent }: BoardTemplateProps) => import("react/jsx-runtime").JSX.Element;
+export default BoardTemplate;