seat-editor 1.4.20 → 1.4.21

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

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

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

@@ -0,0 +1,66 @@
+"use client";
+import { ColorPicker, Flex, Form, InputNumber, Select } from "antd";
+const SectionShape = () => {
+    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 (<div className="py-2">
+      <h1 className="heading-s">Shape</h1>
+      <Flex gap={2} className="w-full">
+        <Form.Item label="Name" name="shape" className="w-full">
+          <Select options={optionsShape} className="w-full"/>
+        </Form.Item>
+      </Flex>
+      <Flex gap={2} className="w-full">
+        <Form.Item label="Width" name="width" className="w-full">
+          <InputNumber suffix="px"/>
+        </Form.Item>
+        <Form.Item label="Height" name="height" className="w-full">
+          <InputNumber suffix="px"/>
+        </Form.Item>
+      </Flex>
+      <Flex gap={2}>
+        <Form.Item label="Position X" name="x" className="w-full">
+          <InputNumber />
+        </Form.Item>
+        <Form.Item label="Position Y" name="y" className="w-full">
+          <InputNumber />
+        </Form.Item>
+        <Form.Item label="Rotation" name="rotation" className="w-full">
+          <InputNumber />
+        </Form.Item>
+      </Flex>
+      <Flex gap={2}>
+        <Form.Item label="Fill" name={"fill"} getValueFromEvent={(color) => color.toHexString()} className="w-full ">
+          <ColorPicker allowClear format="hex" defaultFormat="hex"/>
+        </Form.Item>
+        <Form.Item label="Stroke" name={"stroke"} getValueFromEvent={(color) => color.toHexString()} className="w-full ">
+          <ColorPicker allowClear format="hex" defaultFormat="hex"/>
+        </Form.Item>
+      </Flex>
+      <Flex>
+        <Form.Item label="Stroke Width" name={"strokeWidth"} className="w-full">
+          <InputNumber />
+        </Form.Item>
+        <Form.Item label="opacity" name={"opacity"} className="w-full">
+          <InputNumber step={0.1} max={1} min={0}/>
+        </Form.Item>
+      </Flex>
+    </div>);
+};
+export default SectionShape;

package/dist/components/input/number-indicator.jsx

@@ -0,0 +1,36 @@
+"use client";
+import { useState, useEffect } from "react";
+import { Input, Button, Flex, Form } from "antd";
+import { ArrowRight, ArrowLeft } from "lucide-react";
+const NumberIndicator = ({ name, defaultValue, onChange }) => {
+    const [value, setValue] = useState(0);
+    const form = Form.useFormInstance();
+    useEffect(() => {
+        if (defaultValue) {
+            setValue(defaultValue);
+            form.setFieldsValue({ [name]: defaultValue });
+        }
+    }, [defaultValue]);
+    const handlePrev = () => {
+        setValue(value - 1);
+        form.setFieldsValue({ [name]: value - 1 });
+        onChange(value - 1);
+    };
+    const handleNext = () => {
+        setValue(value + 1);
+        form.setFieldsValue({ [name]: value + 1 });
+        onChange(value + 1);
+    };
+    return (<Flex gap={2}>
+      <Button onClick={handlePrev}>
+        <ArrowLeft />
+      </Button>
+      <Form.Item name={name} noStyle>
+      <Input className="flex text-center" type="number" value={value} name={name} onChange={(e) => setValue(parseInt(e.target.value))}/>
+      </Form.Item>
+      <Button onClick={handleNext}>
+        <ArrowRight />
+      </Button>
+    </Flex>);
+};
+export default NumberIndicator;

package/dist/components/joystick/index.jsx

@@ -0,0 +1,49 @@
+// Joystick.tsx
+import React, { useRef, useState } from "react";
+export const Joystick = ({ size = 120, onMove, onEnd, }) => {
+    const baseRef = useRef(null);
+    const [position, setPosition] = useState({ x: 0, y: 0 });
+    const handleMove = (e) => {
+        const base = baseRef.current;
+        if (!base)
+            return;
+        const rect = base.getBoundingClientRect();
+        const isTouch = "touches" in e;
+        const clientX = isTouch ? e.touches[0].clientX : e.clientX;
+        const clientY = isTouch ? e.touches[0].clientY : e.clientY;
+        const centerX = rect.left + rect.width / 2;
+        const centerY = rect.top + rect.height / 2;
+        const dx = clientX - centerX;
+        const dy = clientY - centerY;
+        const distance = Math.min(Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2)), size / 2 - 20);
+        const angle = Math.atan2(dy, dx);
+        const x = Math.cos(angle) * distance;
+        const y = Math.sin(angle) * distance;
+        setPosition({ x, y });
+        onMove === null || onMove === void 0 ? void 0 : onMove({ x, y });
+    };
+    const handleEnd = () => {
+        setPosition({ x: 0, y: 0 });
+        onEnd === null || onEnd === void 0 ? void 0 : onEnd();
+    };
+    return (<div ref={baseRef} onMouseMove={(e) => e.buttons === 1 && handleMove(e)} onMouseUp={handleEnd} onMouseLeave={handleEnd} onTouchMove={handleMove} onTouchEnd={handleEnd} style={{
+            width: size,
+            height: size,
+            background: "#ddd",
+            borderRadius: "50%",
+            position: "relative",
+            touchAction: "none",
+            userSelect: "none",
+        }}>
+      <div onMouseDown={handleMove} onTouchStart={handleMove} style={{
+            width: 40,
+            height: 40,
+            background: "#3E97FF",
+            borderRadius: "50%",
+            position: "absolute",
+            left: `calc(50% + ${position.x}px - 20px)`,
+            top: `calc(50% + ${position.y}px - 20px)`,
+            touchAction: "none",
+        }}/>
+    </div>);
+};

package/dist/components/layer/index.jsx

@@ -0,0 +1,361 @@
+"use client";
+import { omit } from "lodash";
+const Layers = ({ shadowShape, components, onClick, selectedComponent, selectedTable, activeTool, onMouseDown, onMouseUp, onBlur, selectedTableColor, mode = "edit", style, onTouchEnd, onTouchMove, onTouchStart }) => {
+    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 (<rect key={id} x={x} y={y} width={width} height={height} {...commonProps}/>);
+            case "circle":
+                return (<circle key={id} cx={x + width / 2} cy={y + height / 2} r={width / 2} {...commonProps}/>);
+            case "diamond":
+                return (<rect key={id} x={x} y={y} width={width} height={height} transform={`rotate(${rotation}, ${x}, ${y})`} {...commonProps}/>);
+            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 (<g key={id} transform={`rotate(${rotation} ${x + width / 2} ${y + height / 2})`}>
+            <circle 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 (<text 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})`}>
+                  {_ === null || _ === void 0 ? void 0 : _.label}
+                </text>);
+                    })}
+            <g fill="#e6b9c0" opacity={id === (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) ? 0.5 : opacity} stroke="#c49ba3" strokeWidth="1" key={`${id}-seats`}>
+              {seatCircles.map(({ cx, cy }, i) => (<circle key={`${id}-seat-${i}`} cx={cx} cy={cy} r={seatRadius} fill={seatFill}/>))}
+            </g>
+          </g>);
+            }
+            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 (<g key={id}>
+            {/* Square Table */}
+            <rect x={x} y={y} width={width} height={height} {...commonProps}/>
+
+            {/* Seats */}
+            <g fill="#e6b9c0" fillOpacity="0.5" stroke="#c49ba3" strokeWidth="1" key={`${id}-seats`}>
+              {[...topSeats, ...bottomSeats].map(({ cx, cy }, i) => (<circle key={`${id}-seat-${i}`} cx={cx} cy={cy} r={seatRadius}/>))}
+            </g>
+          </g>);
+            }
+            case "text":
+                return (<g key={id} onClick={() => onClick(item)}>
+            <rect x={x} y={y} width={width} height={height} fill="transparent" opacity={opacity}/>
+            <text x={x + width / 2} y={y + height / 2} textAnchor="middle" dominantBaseline="middle" fill={fontColor} fontSize={height * 0.6} opacity={opacity}>
+              {text}
+            </text>
+          </g>);
+            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();
+            },
+            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 (<g key={id}>
+            <rect key={id} 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})`}/>
+            {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
+                        var _a, _b, _c, _d;
+                        return (<text 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(item);
+                            }}>
+                  {_ === null || _ === void 0 ? void 0 : _.label}
+                </text>);
+                    })}
+          </g>);
+            case "circle":
+                return (<g key={id}>
+            <circle key={id} 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")}/>
+            {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
+                        var _a, _b, _c, _d;
+                        return (<text 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(item);
+                            }}>
+                  {_ === null || _ === void 0 ? void 0 : _.label}
+                </text>);
+                    })}
+          </g>);
+            case "diamond":
+                return (<g key={id}>
+            <rect key={id} 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}/>
+            <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">
+              {label}
+            </text>
+          </g>);
+            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 (<g key={id} transform={`rotate(${rotation} ${x + width / 2} ${y + height / 2})`}>
+            <circle 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 (<text 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(item);
+                            }}>
+                  {_ === null || _ === void 0 ? void 0 : _.label}
+                </text>);
+                    })}
+            <g fill="#e6b9c0" opacity={id === (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) ? 0.5 : opacity} stroke="#c49ba3" key={`${id}-seats`} strokeWidth="1">
+              {seatCircles.map(({ cx, cy }, i) => (<circle key={`${id}-seat-${i}`} cx={cx} cy={cy} r={seatRadius} fill={seatFill}/>))}
+            </g>
+          </g>);
+            }
+            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 (<g key={id} transform={`rotate(${rotation}, ${x}, ${y})`}>
+            {/* Square Table */}
+            <rect 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}/>
+            <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">
+              {label}
+            </text>
+            {/* Seats */}
+            <g fill="#e6b9c0" fillOpacity="0.5" stroke="#c49ba3" strokeWidth="1" key={`${id}-seats`}>
+              {[...topSeats, ...bottomSeats].map(({ cx, cy }, i) => (<circle key={`${id}-seat-${i}`} cx={cx} cy={cy} r={seatRadius}/>))}
+            </g>
+          </g>);
+            }
+            case "text":
+                return (<g key={id}>
+            <rect x={x} y={y} width={width} height={height} fill="transparent" opacity={opacity} onClick={(e) => {
+                        e.stopPropagation();
+                        onClick(item);
+                    }}/>
+            <text 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"])}>
+              {text}
+            </text>
+          </g>);
+            case "image-table":
+            case "background":
+                return (<g key={id} onClick={() => onClick(item)}>
+            <image 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 (<text key={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})`}>
+                  {_ === null || _ === void 0 ? void 0 : _.label}
+                </text>);
+                    })}
+          </g>);
+            default:
+                return <g key={id}/>;
+        }
+    };
+    let date = new Date();
+    return (<g key={`${date}`}>
+      {components === null || components === void 0 ? void 0 : components.map(renderShape)}
+      {shadowShape === null || shadowShape === void 0 ? void 0 : shadowShape.map(renderShadowShape)}
+
+      {selectedComponent && (<>
+          {[
+                "square",
+                "circle",
+                "diamond",
+                "text",
+                "background",
+                "image-table",
+            ].includes(selectedComponent.shape) && (<g key={`${selectedComponent.id}-selection`}>
+              <rect x={selectedComponent.x - 25} y={selectedComponent.y - 25} 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);
+                }}/>
+              <rect x={selectedComponent.x + (selectedComponent.width - 15) / 2} y={selectedComponent.y - 25} width={20} height={20} fill="black" stroke="white" strokeWidth="2" transform={`scale(${selectedComponent.scale})`} onMouseDown={(e) => {
+                    e.stopPropagation();
+                    onMouseDown(e, selectedComponent, "top-center");
+                }} onTouchStart={(e) => {
+                    e.stopPropagation();
+                    onTouchStart(e, selectedComponent, "top-center");
+                }} onTouchMove={(e) => {
+                    e.stopPropagation();
+                    onTouchMove(e);
+                }}/>
+              <rect x={selectedComponent.x - 25} y={selectedComponent.y + (selectedComponent.height - 15) / 2} width={20} height={20} fill="black" stroke="white" strokeWidth="2" transform={`scale(${selectedComponent.scale})`} onMouseDown={(e) => {
+                    e.stopPropagation();
+                    onMouseDown(e, selectedComponent, "left-center");
+                }} onTouchStart={(e) => {
+                    e.stopPropagation();
+                    onTouchStart(e, selectedComponent, "left-center");
+                }} onTouchMove={(e) => {
+                    e.stopPropagation();
+                    onTouchMove(e);
+                }}/>
+              <rect x={selectedComponent.x + selectedComponent.width + 5} y={selectedComponent.y - 25} width={20} height={20} fill="black" stroke="white" strokeWidth="2" transform={`scale(${selectedComponent.scale})`} onMouseDown={(e) => {
+                    e.stopPropagation();
+                    onMouseDown(e, selectedComponent, "top-right");
+                }} onTouchStart={(e) => {
+                    e.stopPropagation();
+                    onTouchStart(e, selectedComponent, "top-right");
+                }} onTouchMove={(e) => {
+                    e.stopPropagation();
+                    onTouchMove(e);
+                }}/>
+              <rect x={selectedComponent.x + selectedComponent.width + 5} y={selectedComponent.y + selectedComponent.height + 5} width={20} height={20} fill="black" stroke="white" strokeWidth="2" transform={`scale(${selectedComponent.scale})`} onMouseDown={(e) => {
+                    e.stopPropagation();
+                    onMouseDown(e, selectedComponent, "bottom-right");
+                }} onTouchStart={(e) => {
+                    e.stopPropagation();
+                    onTouchStart(e, selectedComponent, "bottom-right");
+                }} onTouchMove={(e) => {
+                    e.stopPropagation();
+                    onTouchMove(e);
+                }}/>
+              <rect x={selectedComponent.x + (selectedComponent.width - 15) / 2} y={selectedComponent.y + selectedComponent.height + 5} width={20} height={20} fill="black" stroke="white" strokeWidth="2" transform={`scale(${selectedComponent.scale})`} onMouseDown={(e) => {
+                    e.stopPropagation();
+                    onMouseDown(e, selectedComponent, "bottom-center");
+                }} onTouchStart={(e) => {
+                    e.stopPropagation();
+                    onTouchStart(e, selectedComponent, "bottom-center");
+                }} onTouchMove={(e) => {
+                    e.stopPropagation();
+                    onTouchMove(e);
+                }}/>
+              <rect x={selectedComponent.x + selectedComponent.width + 5} y={selectedComponent.y + (selectedComponent.height - 15) / 2} width={20} height={20} fill="black" stroke="white" strokeWidth="2" transform={`scale(${selectedComponent.scale})`} onMouseDown={(e) => {
+                    e.stopPropagation();
+                    onMouseDown(e, selectedComponent, "right-center");
+                }} onTouchStart={(e) => {
+                    e.stopPropagation();
+                    onTouchStart(e, selectedComponent, "right-center");
+                }} onTouchMove={(e) => {
+                    e.stopPropagation();
+                    onTouchMove(e);
+                }}/>
+              <rect x={selectedComponent.x - 25} y={selectedComponent.y + selectedComponent.height + 5} width={20} height={20} fill="black" stroke="white" strokeWidth="2" transform={`scale(${selectedComponent.scale})`} onMouseDown={(e) => {
+                    e.stopPropagation();
+                    onMouseDown(e, selectedComponent, "bottom-left");
+                }} onTouchStart={(e) => {
+                    e.stopPropagation();
+                    onTouchStart(e, selectedComponent, "bottom-left");
+                }} onTouchMove={(e) => {
+                    e.stopPropagation();
+                    onTouchMove(e);
+                }}/>
+            </g>)}
+          {["table-seat-circle", "table-seat-square"].includes(selectedComponent.shape) && (<g key={selectedComponent.id}>
+              <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");
+                }}/>
+              <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");
+                }}/>
+              <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");
+                }}/>
+              <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");
+                }}/>
+            </g>)}
+        </>)}
+    </g>);
+};
+export default Layers;

package/dist/components/lib/index.jsx

@@ -0,0 +1,33 @@
+"use client";
+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 (<>
+      <div className="w-full h-screen flex relative">
+        <SideTool />
+        <Board />
+        <ControlPanels />
+      </div>
+    </>);
+};
+export default TableEditor;
+export { LayerView };

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

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