seat-editor 1.2.26 → 1.2.28

package/dist/components/layer/index.js

@@ -0,0 +1,168 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { omit } from "lodash";
+const Layers = ({ shadowShape, components, onClick, selectedComponent, selectedTable, activeTool, onMouseDown, onMouseUp, onBlur, selectedTableColor, mode = "edit", style }) => {
+    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));
+            }
+            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));
+            }
+            case "text":
+                return (_jsxs("g", { 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));
+            default:
+                return null;
+        }
+    };
+    const renderShape = (item) => {
+        const { id, x, y, width, height, fill, opacity, rotation, shape, text, stroke, strokeWidth, labels, fontSize, fontColor, label, seatFill, src, } = item;
+        const commonProps = {
+            fill,
+            opacity,
+            onClick: (e) => {
+                // e.stopPropagation();
+                onClick(item);
+            },
+            stroke,
+            strokeWidth,
+            onMouseDown: (e) => {
+                // e.stopPropagation();
+                onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(e, 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();
+            },
+        };
+        switch (shape) {
+            case "square":
+                return (_jsxs(_Fragment, { 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 (_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(item);
+                                }, children: _ === null || _ === void 0 ? void 0 : _.label }, `${id}-label-${index}`));
+                        })] }));
+            case "circle":
+                return (_jsxs(_Fragment, { 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(item);
+                                }, children: _ === null || _ === void 0 ? void 0 : _.label }, `${id}-label-${index}`));
+                        })] }));
+            case "diamond":
+                return (_jsxs(_Fragment, { 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 })] }));
+            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(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));
+            }
+            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));
+            }
+            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(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(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 null;
+        }
+    };
+    return (_jsxs("g", { children: [components === null || components === void 0 ? void 0 : components.map(renderShape), shadowShape === null || shadowShape === void 0 ? void 0 : shadowShape.map(renderShadowShape)] }));
+};
+export default Layers;

package/dist/components/lib/index.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect } from "react";
+import Board from "../../features/board";
+import SideTool from "../../features/side-tool";
+import ControlPanels from "../../features/panel";
+import LayerView from "../../features/view";
+import { useAppDispatch } from "../../hooks/use-redux";
+const TableEditor = ({ componentProps = [], extraComponentProps = [], }) => {
+    const dispatch = useAppDispatch();
+    useEffect(() => {
+        if (componentProps.length > 0) {
+            dispatch({
+                type: "board/setNewComponents",
+                payload: componentProps,
+            });
+        }
+        if (extraComponentProps.length > 0) {
+            dispatch({
+                type: "board/setNewExtraComponent",
+                payload: extraComponentProps,
+            });
+        }
+    }, [componentProps, extraComponentProps]);
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "w-full h-screen flex relative", children: [_jsx(SideTool, {}), _jsx(Board, {}), _jsx(ControlPanels, {})] }) }));
+};
+export default TableEditor;
+export { LayerView };

package/dist/components/modal-preview/index.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Modal } from "antd";
+import { useAppSelector, useAppDispatch } from "../../hooks/use-redux";
+const ModalPreview = ({ children }) => {
+    const { isPreview } = useAppSelector((state) => state.tool);
+    const dispatch = useAppDispatch();
+    return (_jsx(Modal, { open: isPreview, onCancel: () => dispatch({ type: "tool/setTooglePreview", payload: false }), width: 700, title: "Preview Board", centered: true, footer: null, children: _jsx("div", { className: "flex flex-col p-4 h-[500px]", children: children }) }));
+};
+export default ModalPreview;

package/dist/features/board/index.js

@@ -0,0 +1,297 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { TransformWrapper, TransformComponent, } from "react-zoom-pan-pinch";
+import { useAppSelector, useAppDispatch } from "../../hooks/use-redux";
+import Layers from "../../components/layer";
+import { throttle } from "lodash";
+import ModalPreview from "../../components/modal-preview";
+import LayerView from "../view";
+const BoardTemplate = ({ onSelectComponent }) => {
+    const dispatch = useAppDispatch();
+    const transformRef = useRef(null);
+    const containerRef = useRef(null);
+    const [widthBoard, setWidthBoard] = useState(0);
+    const [heightBoard, setHeightBoard] = useState(0);
+    const svgRef = useRef(null);
+    const [shadowShape, setShadowShape] = useState([]);
+    const [startPoint, setStartPoint] = useState(null);
+    const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
+    const [moveComponent, setMoveComponent] = useState(false);
+    const [scale, setScale] = useState(1);
+    const activeTool = useAppSelector((state) => state.tool.active);
+    const { components, extraComponents } = useAppSelector((state) => state.board);
+    // useEffect(() => {
+    //   if (dataDummy.length > 0) {
+    //     dispatch({
+    //       type: "board/setNewComponents",
+    //       payload: dataDummy,
+    //     });
+    //   }
+    //   if (dummyImage.length > 0) {
+    //     dispatch({
+    //       type: "board/setNewExtraComponents",
+    //       payload: dummyImage,
+    //     });
+    //   }
+    // if(defaultBackground) {
+    //   dispatch({
+    //     type: "board/setBackgroundColor",
+    //     payload: defaultBackground,
+    //   });
+    // }
+    // }, []);
+    const backgroundColor = useAppSelector((state) => state.board.backgroundColor);
+    const selectedComponent = useAppSelector((state) => state.panel.selectedComponent);
+    // useEffect(() => {
+    //   const handleKeyDown = (event: KeyboardEvent) => {
+    //     if (event.key === 'Backspace' && selectedComponent) {
+    //         dispatch({
+    //           type:"board/removeComponent",
+    //           payload:selectedComponent
+    //         })
+    //         dispatch({
+    //           type:"panel/setUnSelectedComponent",
+    //         })
+    //     }
+    //   };
+    //   window.addEventListener('keydown', handleKeyDown);
+    //   return () => {
+    //     window.removeEventListener('keydown', handleKeyDown);
+    //   };
+    // }, [selectedComponent]);
+    const handleAddComponent = (shape) => {
+        dispatch({
+            type: activeTool === "text"
+                ? "board/setExtraComponent"
+                : "board/addComponent",
+            payload: Object.assign(Object.assign({}, shape), { fill: "#4A90E2" }),
+        });
+    };
+    const handleUpdateComponent = () => {
+        if (!selectedComponent)
+            return;
+        dispatch({
+            type: "board/updateComponent",
+            payload: Object.assign({}, (typeof selectedComponent === "object" && selectedComponent !== null
+                ? selectedComponent
+                : {})),
+        });
+    };
+    const getSvgCoords = (e) => {
+        var _a;
+        const svg = svgRef.current;
+        const point = svg.createSVGPoint();
+        point.x = e.clientX;
+        point.y = e.clientY;
+        const transformed = point.matrixTransform((_a = svg.getScreenCTM()) === null || _a === void 0 ? void 0 : _a.inverse());
+        return { x: transformed.x, y: transformed.y };
+    };
+    const createShape = (x, y, fill) => ({
+        x,
+        y,
+        width: 50,
+        height: 50,
+        shape: activeTool,
+        id: Date.now(),
+        fill,
+        rotation: activeTool === "diamond" ? 45 : 0,
+        seatCount: activeTool === "table-seat-circle" ? 6 : 0,
+        openSpace: activeTool === "table-seat-circle" ? 0 : undefined,
+        seatFill: activeTool === "table-seat-circle" ? "#DADADA" : undefined,
+        text: activeTool === "text" ? "Text" : "",
+        fontColor: activeTool === "text" ? "#DADADA" : undefined,
+    });
+    // console.log({ moveComponent})
+    const handleMouseDown = (e, item) => {
+        // console.log(" mouse down", item);
+        // if (!isEmpty(item)) {
+        //   handleSelectComponent(item);
+        // }
+        if (activeTool === "select") {
+            if (e) {
+                dispatch({ type: "panel/setShow", payload: false });
+                setMoveComponent(true);
+                dispatch({ type: "panel/setSelectedComponent", payload: item });
+                const rectBox = (e === null || e === void 0 ? void 0 : e.target).getBoundingClientRect();
+                setDragOffset({
+                    x: e.clientX - rectBox.left,
+                    y: e.clientY - rectBox.top,
+                });
+                // dispatch({ type: "panel/setShow" , payload: false });
+            }
+        }
+    };
+    const handleMouseUp = () => {
+        if (activeTool === "select") {
+            setMoveComponent(false);
+            dispatch({ type: "panel/setShow", payload: false });
+        }
+    };
+    const handleMouseEnter = () => {
+        if (![
+            "square",
+            "circle",
+            "diamond",
+            "table-seat-circle",
+            "table-seat-square",
+            "text",
+        ].includes(activeTool))
+            return;
+    };
+    const handleMouseLeave = () => {
+        if (![
+            "square",
+            "circle",
+            "diamond",
+            "table-seat-circle",
+            "table-seat-square",
+            "text",
+        ].includes(activeTool))
+            return;
+        setShadowShape([]);
+    };
+    const handleMouseClick = (e) => {
+        if (![
+            "square",
+            "circle",
+            "diamond",
+            "table-seat-circle",
+            "table-seat-square",
+            "text",
+        ].includes(activeTool))
+            return;
+        const { x, y } = getSvgCoords(event);
+        setStartPoint({ x, y });
+        handleAddComponent(createShape(x, y, "#4A90E2"));
+    };
+    const throttledDispatch = useCallback(throttle((component) => {
+        dispatch({
+            type: "board/updateComponent",
+            payload: component,
+        });
+    }, 16), // 16ms ≈ 60fps
+    [dispatch]);
+    const handleMouseMove = (e) => {
+        if ([
+            "square",
+            "circle",
+            "diamond",
+            "table-seat-circle",
+            "table-seat-square",
+            "text",
+        ].includes(activeTool)) {
+            const { x, y } = getSvgCoords(event);
+            setShadowShape([createShape(x, y, "white")]);
+            return;
+        }
+        if (activeTool === "select" &&
+            selectedComponent &&
+            moveComponent &&
+            dragOffset) {
+            const workspaceRect = e.currentTarget.getBoundingClientRect();
+            const newX = e.clientX - workspaceRect.left - dragOffset.x;
+            const newY = e.clientY - workspaceRect.top - dragOffset.y;
+            let newPosition = {
+                x: newX,
+                y: newY,
+            };
+            throttledDispatch(Object.assign(Object.assign({}, (typeof selectedComponent === "object" && selectedComponent !== null
+                ? selectedComponent
+                : {})), { x: newPosition.x, y: newPosition.y }));
+            // dispatch({
+            //   type: "board/updateComponent",
+            //   payload: {
+            //     ...(typeof selectedComponent === "object" &&
+            //     selectedComponent !== null
+            //       ? selectedComponent
+            //       : {}),
+            //     x: newPosition.x,
+            //     y: newPosition.y,
+            //   },
+            // });
+            return;
+        }
+    };
+    // if (activeTool === "table-seat-circle") {
+    //   shape = {
+    //     x: Math.min(x, startPoint.x),
+    //     y: Math.min(y, startPoint.y),
+    //     width: Math.abs(x - startPoint.x),
+    //     height: Math.abs(y - startPoint.y),
+    //     shape: activeTool,
+    //     id: Date.now(),
+    //     fill: "#4A90E2",
+    //     seats: 6,
+    //   };
+    // }
+    // if (activeTool === "text") {
+    //   shape = {
+    //     x: Math.min(x, startPoint.x),
+    //     y: Math.min(y, startPoint.y),
+    //     width: Math.abs(x - startPoint.x),
+    //     height: Math.abs(y - startPoint.y),
+    //     shape: activeTool,
+    //     id: Date.now(),
+    //     fill: "#4A90E2",
+    //     text: "Text",
+    //   };
+    // }
+    // if (activeTool === "select" && selectedComponent) {
+    //   shape = {
+    //     ...selectedComponent,
+    //     x: Math.min(x, startPoint.x),
+    //     y: Math.min(y, startPoint.y),
+    //     width: Math.abs(x - startPoint.x),
+    //     height: Math.abs(y - startPoint.y),
+    //   };
+    //   setSelectedComponent(shape);
+    //   return;
+    // }
+    // }
+    const handleSelectComponent = (items) => {
+        if (activeTool === "select") {
+            // if (isEmpty(items)) {
+            //   dispatch({ type: "panel/setSelectedComponent", payload: null });
+            //   setMoveComponent(false);
+            // } else {
+            onSelectComponent && onSelectComponent(items);
+            dispatch({ type: "panel/setSelectedComponent", payload: items });
+            dispatch({ type: "panel/setShow", payload: true });
+            // }
+        }
+    };
+    useEffect(() => {
+        if (containerRef.current) {
+            setWidthBoard(containerRef.current.offsetWidth);
+            setHeightBoard(containerRef.current.offsetHeight);
+        }
+    });
+    const handleUnSelectComponent = () => {
+        dispatch({ type: "panel/setSelectedComponent", payload: null });
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(ModalPreview, { children: _jsx(LayerView, { statusKey: "status", defaultBackground: "#ffffff" }) }), _jsx("div", { className: "relative w-full h-screen flex-1", ref: containerRef, children: _jsx(TransformWrapper, { ref: transformRef, panning: { disabled: false }, centerZoomedOut: true, onTransformed: ({ state: { scale } }) => setScale(scale), minScale: 1, maxScale: 1000, initialScale: 1, pinch: { step: 1 }, smooth: true, 
+                    // doubleClick={{ step: 2, mode: "zoomIn" }}
+                    disablePadding: true, children: _jsx(TransformComponent, { wrapperStyle: {
+                            width: "100%",
+                            height: "100%",
+                            overflow: "hidden",
+                        }, contentStyle: {
+                            width: "100%",
+                            height: "100%",
+                        }, children: _jsx("svg", { id: "workspace", ref: svgRef, width: "100%", height: "100%", viewBox: `0 0 ${widthBoard} ${heightBoard}`, className: "h-screen", onMouseUp: handleMouseUp, onMouseMove: handleMouseMove, onMouseEnter: handleMouseEnter, onClick: (e) => {
+                                e.stopPropagation();
+                                handleMouseClick(e);
+                            }, onMouseLeave: handleMouseLeave, 
+                            // onMouseDown={(e) => {
+                            //   e.stopPropagation();
+                            // }}
+                            // onFocus={(e) => {
+                            //   console.log(e.target);
+                            // }}
+                            xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "xMidYMid meet", style: {
+                                background: backgroundColor,
+                                display: "block",
+                            }, children: _jsx(Layers, { shadowShape: shadowShape, components: [...extraComponents, ...components], onClick: handleSelectComponent, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onBlur: handleUnSelectComponent, selectedComponent: selectedComponent, activeTool: activeTool }) }) }) }) })] }));
+};
+export default BoardTemplate;

package/dist/features/navbar/index.js

@@ -0,0 +1,6 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+const Navbar = () => {
+    return _jsx("div", { children: "Navbar" });
+};
+export default Navbar;

package/dist/features/package/index.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect } from "react";
+import Board from "../board";
+import SideTool from "../side-tool";
+import ControlPanels from "../panel";
+import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
+const TableEditor = (props) => {
+    const { componentProps, extraComponentProps, onCurrentStateChange } = props;
+    const { components, extraComponents } = useAppSelector((state) => state.board);
+    const dispatch = useAppDispatch();
+    useEffect(() => {
+        onCurrentStateChange &&
+            onCurrentStateChange({
+                components,
+                extraComponents,
+            });
+    }, [components, extraComponents]);
+    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/setNewExtraComponent",
+                payload: extraComponentProps,
+            });
+        }
+        if (props === null || props === void 0 ? void 0 : props.defaultBackground) {
+            dispatch({
+                type: "board/setBackgroundColor",
+                payload: props === null || props === void 0 ? void 0 : props.defaultBackground,
+            });
+        }
+    }, [componentProps, extraComponentProps, props === null || props === void 0 ? void 0 : props.defaultBackground]);
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "w-full h-screen flex relative", children: [_jsx(SideTool, {}), _jsx(Board, { onSelectComponent: props.onSelectComponent }), _jsx(ControlPanels, { action: props.action, responseMapping: props.responseMapping })] }) }));
+};
+export default TableEditor;

package/dist/features/panel/index.js

@@ -0,0 +1,78 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
+import { Form, Drawer, Input } from "antd";
+import SelectToolForm from "./select-tool";
+import SquareToolForm from "./square-circle-tool";
+import SeatCircle from "./table-seat-circle";
+import UploadTool from "./upload-tool";
+const ControlPanels = (props) => {
+    const { action, responseMapping } = props;
+    const dispatch = useAppDispatch();
+    const tool = useAppSelector((state) => state.tool);
+    const selectedComponent = useAppSelector((state) => state.panel.selectedComponent);
+    const { show } = useAppSelector((state) => state.panel);
+    const [open, setOpen] = useState(false);
+    const [form] = Form.useForm();
+    let values = Form.useWatch([], form);
+    useEffect(() => {
+        if (selectedComponent) {
+            const isDifferentId = (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) !== (values === null || values === void 0 ? void 0 : values.id) || !(values === null || values === void 0 ? void 0 : values.id);
+            const isSameIdAndSameDimensions = (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) === (values === null || values === void 0 ? void 0 : values.id) &&
+                (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.height) === (values === null || values === void 0 ? void 0 : values.height) &&
+                (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.width) === (values === null || values === void 0 ? void 0 : values.width) &&
+                (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.x) === (values === null || values === void 0 ? void 0 : values.x) &&
+                (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.y) === (values === null || values === void 0 ? void 0 : values.y);
+            if (show && (isDifferentId || isSameIdAndSameDimensions)) {
+                setOpen(true);
+            }
+            form.setFieldsValue(selectedComponent);
+        }
+        else {
+            setOpen(false);
+        }
+    }, [selectedComponent]);
+    useEffect(() => {
+        if (tool.active === "background" || tool.active === "image-table") {
+            setOpen(true);
+        }
+    }, [tool]);
+    const handleChangeComponent = (values, allValues) => {
+        dispatch({
+            type: "board/updateComponent",
+            payload: Object.assign(Object.assign({}, (selectedComponent || {})), allValues),
+        });
+        dispatch({
+            type: "panel/updateSelectedComponent",
+            payload: Object.assign(Object.assign({}, (selectedComponent || {})), allValues),
+        });
+    };
+    const renderFormPanel = () => {
+        switch (tool.active) {
+            case "select":
+                return _jsx(SelectToolForm, {});
+            case "square":
+            case "circle":
+                return _jsx(SquareToolForm, {});
+            case "table-seat-circle":
+                return _jsx(SeatCircle, {});
+            case "image-table":
+                return (_jsx(UploadTool, { name: tool.active, type: "component", action: action, responseMapping: responseMapping }));
+            case "background":
+                return (_jsx(UploadTool, { name: tool.active, type: "background", action: action, responseMapping: responseMapping }));
+            default:
+                return null;
+        }
+    };
+    const handleClose = () => {
+        setOpen(false);
+        dispatch({
+            type: "panel/setShow",
+            payload: false,
+        });
+    };
+    // if(!show) return null
+    return (_jsx(Drawer, { open: show, onClose: handleClose, title: "Panel", children: _jsx("div", { className: "bg-white h-full max-h-screen overflow-y-auto w-[300px]", children: _jsxs(Form, { layout: "vertical", form: form, name: "table", onFinish: (values) => { }, onValuesChange: handleChangeComponent, initialValues: { labels: [{}] }, children: [_jsx(Form.Item, { name: "id", hidden: true, children: _jsx(Input, {}) }), renderFormPanel()] }) }) }));
+};
+export default ControlPanels;