seat-editor 3.0.2 → 3.0.3

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

@@ -1,370 +0,0 @@
-"use client";
-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 (<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 && 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>);
-            case "ruler":
-                return (<g key={id}>
-            <rect x={x - (window.innerWidth * 3) / 2} y={y} width={window.innerWidth * 3} height={1} fill="black"/>
-            <rect x={x} y={y - (window.innerHeight * 3) / 2} width={1} height={window.innerHeight * 3} fill="black"/>
-
-          </g>);
-            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: React.TouchEvent<
-            //     SVGRectElement | SVGCircleElement | SVGTextElement | SVGImageElement
-            //   >
-            // ) => {
-            //   // e.stopPropagation();
-            //   onTouchMove?.(e);
-            // },
-            onTouchStart: (e) => {
-                // e.stopPropagation();
-                onTouchStart === null || onTouchStart === void 0 ? void 0 : onTouchStart(e, item);
-            },
-            // onTouchEnd: (
-            //   e: React.TouchEvent<
-            //     SVGRectElement | SVGCircleElement | SVGTextElement | SVGImageElement
-            //   >
-            // ) => {
-            //   // e.stopPropagation();
-            //   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 {...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}
-                </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 && 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 && 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 && 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 && 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 && activeTool === "select" && (<>
-          {[
-                "square",
-                "circle",
-                "diamond",
-                "text",
-                "background",
-                "image-table",
-            ].includes(selectedComponent.shape) && (<g key={`${selectedComponent.id}-selection`}>
-              <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");
-                }}/>
-              <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");
-                }}/>
-              <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");
-                }}/>
-              <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");
-                }}/>
-              <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");
-                }}/>
-              <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");
-                }}/>
-              <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");
-                }}/>
-              <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");
-                }}/>
-            </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/modal-preview/index.jsx

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

package/dist/features/navbar/index.jsx

@@ -1,5 +0,0 @@
-"use client";
-const Navbar = () => {
-    return <div>Navbar</div>;
-};
-export default Navbar;

package/dist/features/panel/selected-group.jsx

@@ -1,47 +0,0 @@
-"use client";
-import { ColorPicker, Flex, Form, InputNumber } from "antd";
-const SelectedGroup = () => {
-    return (<>
-      <div className="py-2">
-        <h1 className="heading-s"> Group Selection</h1>
-        <div className="py-2">
-          <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 max={360} min={0}/>
-            </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>
-      </div>
-    </>);
-};
-export default SelectedGroup;

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

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

package/dist/features/panel/table-seat-square.jsx

@@ -1,46 +0,0 @@
-"use client";
-import { Col, ColorPicker, Flex, Form, InputNumber, Row, } from "antd";
-import SectionLabel from "../../components/form-tools/label";
-import SectionShape from "../../components/form-tools/shape";
-const SeatSquare = () => {
-    return (<>
-      <div className="py-2">
-        <h1 className="heading-s"> Square table</h1>
-        <Flex className="w-full">
-          <Form.Item name="openSpace" label="Open Space" className="w-full">
-            <InputNumber max={1} min={0} step={0.1}/>
-          </Form.Item>
-        </Flex>
-        <Row gutter={[16, 16]}>
-          <Col span={12}>
-            <Form.Item name={["seatPositions", "top"]} label="Top" className="w-full">
-               <InputNumber max={100} min={0} step={1}/>
-            </Form.Item>
-            <Form.Item name={["seatPositions", "left"]} label="Left" className="w-full">
-               <InputNumber max={100} min={0} step={1}/>
-            </Form.Item>
-          </Col>
-          <Col span={12}>
-            <Form.Item name={["seatPositions", "right"]} label="Right" className="w-full">
-               <InputNumber max={100} min={0} step={1}/>
-            </Form.Item>
-            <Form.Item name={["seatPositions", "bottom"]} label="Bottom" className="w-full">
-               <InputNumber max={100} min={0} step={1}/>
-            </Form.Item>
-          </Col>
-        </Row>
-
-        <Flex gap={2}>
-          <Form.Item label="Seat Fill" name={"seatFill"} getValueFromEvent={(color) => color.toHexString()} className="w-full ">
-            <ColorPicker allowClear format="hex" defaultFormat="hex"/>
-          </Form.Item>
-          <Form.Item label="Table Fill" name={"fill"} getValueFromEvent={(color) => color.toHexString()} className="w-full ">
-            <ColorPicker allowClear format="hex" defaultFormat="hex"/>
-          </Form.Item>
-        </Flex>
-        <SectionShape />
-        <SectionLabel />
-      </div>
-    </>);
-};
-export default SeatSquare;

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

@@ -1,26 +0,0 @@
-"use client";
-import { ColorPicker, Form, Input, InputNumber } from "antd";
-const TextTool = () => {
-    return (<div className="py-2">
-        <Form.Item label="Name" name="shape" className="w-full hidden">
-          <Input defaultValue={"text"}/>
-        </Form.Item>
-      
-      <Form.Item name="text" label="Text">
-        <Input />
-      </Form.Item>
-      <Form.Item name={"fontColor"} label="Color" getValueFromEvent={(color) => color.toHexString()}>
-        <ColorPicker allowClear format="hex" defaultFormat="hex"/>
-      </Form.Item>
-      <Form.Item name={"x"} label="X">
-        <InputNumber />
-      </Form.Item>
-      <Form.Item name={"y"} label="Y">
-        <InputNumber />
-      </Form.Item>
-      <Form.Item name={"fontSize"} label="Size">
-        <InputNumber suffix="px"/>
-      </Form.Item>
-    </div>);
-};
-export default TextTool;

package/dist/provider/antd-provider.jsx

@@ -1,46 +0,0 @@
-"use client";
-import { useEffect } from "react";
-import { ConfigProvider } from "antd";
-import { AntdRegistry } from "@ant-design/nextjs-registry";
-import { useAppSelector, useAppDispatch } from "../hooks/use-redux";
-export const AntdProvider = ({ children, themeColor }) => {
-    const dispatch = useAppDispatch();
-    const theme = useAppSelector((state) => state.theme);
-    useEffect(() => {
-        if (themeColor !== theme.primaryColor) {
-            dispatch({
-                type: "theme/setPrimaryColor",
-                payload: themeColor
-            });
-        }
-    }, [themeColor]);
-    return (<AntdRegistry>
-      <ConfigProvider theme={{
-            token: {
-                colorPrimary: themeColor,
-            },
-            //   token: {
-            //     colorPrimary: theme.theme["--primary-color"],
-            //     colorPrimaryBorderHover: theme.theme["--primary-color"],
-            //     fontFamily: "var(--font-inter), sans-serif",
-            //     colorError: theme.theme["--danger"],
-            //     controlOutlineWidth: 4,
-            //     controlOutline: theme.theme["--surface-color"],
-            //     colorBgContainerDisabled: "var(--netral-03)",
-            //     colorTextPlaceholder: "var(--netral-06)",
-            //   },
-            components: {
-                Form: {
-                    labelFontSize: 14,
-                    fontWeightStrong: 500,
-                    itemMarginBottom: 12,
-                },
-                Button: {
-                    colorPrimary: themeColor
-                }
-            },
-        }}>
-        {children}
-      </ConfigProvider>
-    </AntdRegistry>);
-};