seat-editor 3.0.2 → 3.0.3

package/dist/components/layer-v3/{index.jsx → index.js}

@@ -1,4 +1,6 @@
 "use client";
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useRef } from "react";
 import { isArray, isEmpty, omit } from "lodash";
 const Layers = ({ shadowShape, components, onClick, selectedComponent, selectedTable, activeTool, onMouseDown, onMouseUp, onBlur, selectedTableColor, mode = "edit", style, selectionLines, }) => {
@@ -31,11 +33,11 @@ const Layers = ({ shadowShape, components, onClick, selectedComponent, selectedT
                 const pointsFormat = !isEmpty(points)
                     ? points
                     : rectToPolygonPoints(x, y, width, height);
-                return <polygon key={id} points={pointsFormat} {...commonProps}/>;
+                return _jsx("polygon", Object.assign({ points: pointsFormat }, commonProps), id);
             case "circle":
-                return (<circle key={id} cx={x + width / 2} cy={y + height / 2} r={Math.min(height, width) / 2} {...commonProps}/>);
+                return (_jsx("circle", Object.assign({ cx: x + width / 2, cy: y + height / 2, r: Math.min(height, width) / 2 }, commonProps), id));
             case "diamond":
-                return (<rect key={id} x={x} y={y} width={width} height={height} transform={`rotate(${rotation}, ${x}, ${y})`} {...commonProps}/>);
+                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 = (_a = item.openSpace) !== null && _a !== void 0 ? _a : 0.2;
@@ -56,26 +58,13 @@ const Layers = ({ shadowShape, components, onClick, selectedComponent, selectedT
                     const cy = centerY + (radius - inset) * Math.sin(angle);
                     return { cx, cy };
                 });
-                return (<g key={id} transform={`rotate(${rotation} ${centerX} ${centerY})`}>
-            {/* Meja */}
-            <circle cx={centerX} cy={centerY} r={radius - 15} fill={selectedTableColor !== null && selectedTableColor !== void 0 ? selectedTableColor : fill} {...commonProps}/>
-
-            {/* Label */}
-            {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
-                        var _a, _b, _c, _d;
-                        return (<text key={`${id}-label-${index}`} x={centerX + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0)} y={centerY + ((_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} ${centerX} ${centerY})`} onClick={(e) => {
-                                e.stopPropagation();
-                                onClick && onClick(item);
-                            }}>
-                {_ === null || _ === void 0 ? void 0 : _.label}
-              </text>);
-                    })}
-
-            {/* Kursi */}
-            <g fill="#e6b9c0" stroke="#c49ba3" strokeWidth="1">
-              {seatCircles.map(({ cx, cy }, i) => (<circle key={`${id}-seat-${i}`} cx={cx} cy={cy} r={seatRadius} fill={seatFill}/>))}
-            </g>
-          </g>);
+                return (_jsxs("g", { transform: `rotate(${rotation} ${centerX} ${centerY})`, children: [_jsx("circle", Object.assign({ cx: centerX, cy: centerY, r: radius - 15, fill: selectedTableColor !== null && selectedTableColor !== void 0 ? selectedTableColor : fill }, commonProps)), labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
+                            var _a, _b, _c, _d;
+                            return (_jsx("text", { x: centerX + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0), y: centerY + ((_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} ${centerX} ${centerY})`, onClick: (e) => {
+                                    e.stopPropagation();
+                                    onClick && onClick(item);
+                                }, children: _ === null || _ === void 0 ? void 0 : _.label }, `${id}-label-${index}`));
+                        }), _jsx("g", { fill: "#e6b9c0", 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;
@@ -95,29 +84,14 @@ const Layers = ({ shadowShape, components, onClick, selectedComponent, selectedT
                     cx: startX + i * spacing,
                     cy: y + height + seatRadius * 1.5,
                 }));
-                return (<g key={id}>
-            {/* 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>
-            {/* Square Table */}
-            <rect x={x} y={y} width={width} height={height} {...commonProps}/>
-          </g>);
+                return (_jsxs("g", { children: [_jsx("g", { fill: "#e6b9c0", fillOpacity: "0.5", stroke: "#c49ba3", strokeWidth: "1", children: [...topSeats, ...bottomSeats].map(({ cx, cy }, i) => (_jsx("circle", { cx: cx, cy: cy, r: seatRadius }, `${id}-seat-${i}`))) }, `${id}-seats`), _jsx("rect", Object.assign({ x: x, y: y, width: width, height: height }, commonProps))] }, id));
             }
             case "text":
-                return (<g key={id} onClick={() => {
+                return (_jsxs("g", { 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>);
+                    }, children: [_jsx("rect", { x: x, y: y, width: width, height: height, fill: "transparent", opacity: opacity }), _jsx("text", { x: x + width / 2, y: y + height / 2, textAnchor: "middle", dominantBaseline: "middle", fill: fontColor, fontSize: height * 0.6, opacity: opacity, children: text })] }, id));
             case "ruler":
-                return (<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>);
+                return (_jsxs("g", { children: [_jsx("rect", { x: x - (window.innerWidth * 3) / 2, y: y, width: window.innerWidth * 3, height: 1, fill: "black" }), _jsx("rect", { x: x, y: y - (window.innerHeight * 3) / 2, width: 1, height: window.innerHeight * 3, fill: "black" })] }, id));
             default:
                 return null;
         }
@@ -176,22 +150,15 @@ const Layers = ({ shadowShape, components, onClick, selectedComponent, selectedT
         };
         switch (shape) {
             case "square":
-                return (<g key={id} data-id={id} 
-                // data-table={JSON.stringify(item)}
-                transform={`translate(${x}, ${y})`} stroke="red">
-            <g transform={`rotate(${rotation}, 0, 0)`}>
-              <rect {...commonProps} key={id} width={width} height={height}/>
-              {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 : _.text}
-                  </text>);
-                    })}
-            </g>
-          </g>);
+                return (_jsx("g", { "data-id": id, 
+                    // data-table={JSON.stringify(item)}
+                    transform: `translate(${x}, ${y})`, stroke: "red", children: _jsxs("g", { transform: `rotate(${rotation}, 0, 0)`, children: [_createElement("rect", Object.assign({}, commonProps, { key: id, width: width, height: height })), labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
+                                var _a, _b, _c, _d;
+                                return (_createElement("text", Object.assign({}, omit(commonProps, ["opacity", "stroke", "strokeWidth"]), { key: `${id}-label-${index}`, x: x + width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0), y: y + height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0), fill: (_c = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _c !== void 0 ? _c : "black", fontSize: `${(_d = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _d !== void 0 ? _d : 10}px`, fontWeight: "bold", textAnchor: "middle", dominantBaseline: "middle", transform: `rotate(${rotation} ${x + width / 2} ${y + height / 2})`, onClick: (e) => {
+                                        e.stopPropagation();
+                                        onClick && onClick(item);
+                                    } }), _ === null || _ === void 0 ? void 0 : _.text));
+                            })] }) }, id));
             case "polygon":
                 function isPolygonClosed(points) {
                     if (points.length < 3)
@@ -204,55 +171,31 @@ const Layers = ({ shadowShape, components, onClick, selectedComponent, selectedT
                 const isClosed = isPolygonClosed(points);
                 console.log({ isClosed });
                 const showPoints = (selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.id) == id;
-                return (<g key={id} data-id={id} transform={`translate(${x}, ${y})`}>
-            <g transform={`rotate(${rotation}, 0, 0)`}>
-              <polygon {...commonProps} key={id} points={finalPoint} x="0" y="0"/>
-              {(showPoints || !isClosed) &&
-                        points.map((_, index) => {
-                            return (<>
-                      <rect data-point={JSON.stringify(_)} id={`${index}`} key={`${id}-point-${index}`} x={(_ === null || _ === void 0 ? void 0 : _.x) - 5} y={(_ === null || _ === void 0 ? void 0 : _.y) - 5} width={10} height={10} fill="#4a90e2" cursor={"pointer"}/>
-                      <circle data-point={JSON.stringify(_)} id={`${index}`} key={`${id}-point-${index}`} cx={_ === null || _ === void 0 ? void 0 : _.x} cy={_ === null || _ === void 0 ? void 0 : _.y} r={15} fill="transparent" cursor={"pointer"}/>
-                    </>);
-                        })}
-            </g>
-          </g>);
+                return (_jsx("g", { "data-id": id, transform: `translate(${x}, ${y})`, children: _jsxs("g", { transform: `rotate(${rotation}, 0, 0)`, children: [_createElement("polygon", Object.assign({}, commonProps, { key: id, points: finalPoint, x: "0", y: "0" })), (showPoints || !isClosed) &&
+                                points.map((_, index) => {
+                                    return (_jsxs(_Fragment, { children: [_jsx("rect", { "data-point": JSON.stringify(_), id: `${index}`, x: (_ === null || _ === void 0 ? void 0 : _.x) - 5, y: (_ === null || _ === void 0 ? void 0 : _.y) - 5, width: 10, height: 10, fill: "#4a90e2", cursor: "pointer" }, `${id}-point-${index}`), _jsx("circle", { "data-point": JSON.stringify(_), id: `${index}`, cx: _ === null || _ === void 0 ? void 0 : _.x, cy: _ === null || _ === void 0 ? void 0 : _.y, r: 15, fill: "transparent", cursor: "pointer" }, `${id}-point-${index}`)] }));
+                                })] }) }, id));
             case "selection-box":
                 const pointsFormat = !isEmpty(points)
                     ? points
                     : rectToPolygonPoints(x, y, width, height);
-                return (<g key={id} data-table={JSON.stringify(item)} data-id={id}>
-            <g transform={`rotate(${rotation} ${x + width / 2} ${y + height / 2})`}>
-              <polygon {...commonProps} key={id} points={pointsFormat}/>
-              {/* circle every points */}
-              {points.map((_, index) => {
-                        return (<rect key={`${id}-point-${index}`} x={(_ === null || _ === void 0 ? void 0 : _.x) - 5} y={(_ === null || _ === void 0 ? void 0 : _.y) - 5} width={10} height={10} fill="blue"/>);
-                    })}
-              {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>
-          </g>);
+                return (_jsx("g", { "data-table": JSON.stringify(item), "data-id": id, children: _jsxs("g", { transform: `rotate(${rotation} ${x + width / 2} ${y + height / 2})`, children: [_createElement("polygon", Object.assign({}, commonProps, { key: id, points: pointsFormat })), points.map((_, index) => {
+                                return (_jsx("rect", { x: (_ === null || _ === void 0 ? void 0 : _.x) - 5, y: (_ === null || _ === void 0 ? void 0 : _.y) - 5, width: 10, height: 10, fill: "blue" }, `${id}-point-${index}`));
+                            }), labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
+                                var _a, _b, _c, _d;
+                                return (_createElement("text", Object.assign({}, omit(commonProps, ["opacity", "stroke", "strokeWidth"]), { key: `${id}-label-${index}`, x: x + width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0), y: y + height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0), fill: (_c = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _c !== void 0 ? _c : "black", fontSize: `${(_d = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _d !== void 0 ? _d : 10}px`, fontWeight: "bold", textAnchor: "middle", dominantBaseline: "middle", transform: `rotate(${rotation} ${x + width / 2} ${y + height / 2})`, onClick: (e) => {
+                                        e.stopPropagation();
+                                        onClick && onClick(item);
+                                    } }), _ === null || _ === void 0 ? void 0 : _.label));
+                            })] }) }, id));
             case "circle":
-                return (<g key={id} data-id={id} transform={`translate(${x}, ${y})`}>
-            <g transform={`rotate(${rotation}, 0, 0)`}>
-              <circle key={id} cx={width / 2} cy={height / 2} r={Math.min(height, width) / 2} style={Object.assign({ cursor: mode === "view" ? "pointer" : "default" }, style)} fill={selectedTableColor !== null && selectedTableColor !== void 0 ? selectedTableColor : fill} {...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={width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0)} y={width / 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>
-          </g>);
+                return (_jsx("g", { "data-id": id, transform: `translate(${x}, ${y})`, children: _jsxs("g", { transform: `rotate(${rotation}, 0, 0)`, children: [_jsx("circle", Object.assign({ cx: width / 2, cy: height / 2, r: Math.min(height, width) / 2, style: Object.assign({ cursor: mode === "view" ? "pointer" : "default" }, style), fill: selectedTableColor !== null && selectedTableColor !== void 0 ? selectedTableColor : fill }, omit(commonProps, "opacity")), id), labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
+                                var _a, _b, _c, _d;
+                                return (_jsx("text", { x: width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0), y: width / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0), fill: (_c = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _c !== void 0 ? _c : "black", fontSize: `${(_d = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _d !== void 0 ? _d : 10}px`, fontWeight: "bold", textAnchor: "middle", dominantBaseline: "middle", transform: `rotate(${rotation} ${x + width / 2} ${y + height / 2})`, onClick: (e) => {
+                                        e.stopPropagation();
+                                        onClick && onClick(item);
+                                    }, children: _ === null || _ === void 0 ? void 0 : _.label }, `${id}-label-${index}`));
+                            })] }) }, id));
             // case "elipse":
             //   return (
             //     <g
@@ -302,12 +245,7 @@ const Layers = ({ shadowShape, components, onClick, selectedComponent, selectedT
             //     </g>
             //   );
             case "diamond":
-                return (<g key={id} data-table={JSON.stringify(item)}>
-            <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>);
+                return (_jsxs("g", { "data-table": JSON.stringify(item), children: [_jsx("rect", Object.assign({ x: x, y: y, width: width, height: height, style: Object.assign({ cursor: mode === "view" ? "pointer" : "default" }, style), transform: `rotate(${rotation}, ${x}, ${y})` }, commonProps, { fill: selectedTableColor !== null && selectedTableColor !== void 0 ? selectedTableColor : fill }), id), _jsx("text", { x: x + width / 2, y: y + height / 2, fill: fontColor !== null && fontColor !== void 0 ? fontColor : "black", fontSize: `${fontSize !== null && fontSize !== void 0 ? fontSize : 10}px`, fontWeight: "bold", textAnchor: "middle", dominantBaseline: "middle", children: label })] }, id));
             case "table-seat-circle": {
                 const seatCount = item.seatCount;
                 const openSpace = (_a = item.openSpace) !== null && _a !== void 0 ? _a : 0;
@@ -328,27 +266,13 @@ const Layers = ({ shadowShape, components, onClick, selectedComponent, selectedT
                     const cy = centerY + (tableRadius + seatRadius) * Math.sin(angle);
                     return { cx, cy };
                 });
-                return (<g key={id} data-id={id} transform={`translate(${x}, ${y})`}>
-            <g transform={`rotate(${rotation}, 0, 0)`}>
-              {/* Meja */}
-              <circle cx={centerX} cy={centerY} r={tableRadius} fill={selectedTableColor !== null && selectedTableColor !== void 0 ? selectedTableColor : fill} {...commonProps}/>
-              {/* Seat */}
-              <g data-seat={`${id}-seats`}>
-                {seatCircles.map(({ cx, cy }, i) => (<circle key={`${id}-seat-${i}`} cx={cx} cy={cy} r={seatRadius} fill={seatFill}/>))}
-              </g>
-
-              {/* Label */}
-              {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
-                        var _a, _b, _c, _d;
-                        return (<text key={`${id}-label-${index}`} x={centerX + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0)} y={centerY + ((_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} ${centerX} ${centerY})`} onClick={(e) => {
-                                e.stopPropagation();
-                                onClick && onClick(item);
-                            }}>
-                  {_ === null || _ === void 0 ? void 0 : _.label}
-                </text>);
-                    })}
-            </g>
-          </g>);
+                return (_jsx("g", { "data-id": id, transform: `translate(${x}, ${y})`, children: _jsxs("g", { transform: `rotate(${rotation}, 0, 0)`, children: [_jsx("circle", Object.assign({ cx: centerX, cy: centerY, r: tableRadius, fill: selectedTableColor !== null && selectedTableColor !== void 0 ? selectedTableColor : fill }, commonProps)), _jsx("g", { "data-seat": `${id}-seats`, children: seatCircles.map(({ cx, cy }, i) => (_jsx("circle", { cx: cx, cy: cy, r: seatRadius, fill: seatFill }, `${id}-seat-${i}`))) }), labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
+                                var _a, _b, _c, _d;
+                                return (_jsx("text", { x: centerX + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0), y: centerY + ((_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} ${centerX} ${centerY})`, onClick: (e) => {
+                                        e.stopPropagation();
+                                        onClick && onClick(item);
+                                    }, children: _ === null || _ === void 0 ? void 0 : _.label }, `${id}-label-${index}`));
+                            })] }) }, id));
             }
             case "table-seat-square": {
                 const openSpace = item.openSpace || 0; // from 0 to 0.9
@@ -404,20 +328,7 @@ const Layers = ({ shadowShape, components, onClick, selectedComponent, selectedT
                     cy,
                     id: "right",
                 }));
-                return (<g key={id} data-id={id} transform={`translate(${x}, ${y})`}>
-            <g transform={`rotate(${rotation}, 0, 0)`}>
-              {/* Square Table */}
-              <rect width={width} height={height} {...commonProps} fill={selectedTableColor !== null && selectedTableColor !== void 0 ? selectedTableColor : fill}/>
-              {/* Seats */}
-              <g fill="#e6b9c0" stroke="#c49ba3" strokeWidth="1" key={`${id}-seats`} data-seat={`${id}-seats`} transform={`translate(${-x}, ${-y})`}>
-                {[...topSeats, ...bottomSeats, ...leftSeats, ...rightSeats].map(({ cx, cy, id }, i) => (<circle key={`${id}-seat-${i}`} id={`seat-${id}`} cx={cx} cy={cy} r={r} fill={seatFill}/>))}
-              </g>
-
-              <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>
-          </g>);
+                return (_jsx("g", { "data-id": id, transform: `translate(${x}, ${y})`, children: _jsxs("g", { transform: `rotate(${rotation}, 0, 0)`, children: [_jsx("rect", Object.assign({ width: width, height: height }, commonProps, { fill: selectedTableColor !== null && selectedTableColor !== void 0 ? selectedTableColor : fill })), _jsx("g", { fill: "#e6b9c0", stroke: "#c49ba3", strokeWidth: "1", "data-seat": `${id}-seats`, transform: `translate(${-x}, ${-y})`, children: [...topSeats, ...bottomSeats, ...leftSeats, ...rightSeats].map(({ cx, cy, id }, i) => (_jsx("circle", { id: `seat-${id}`, cx: cx, cy: cy, r: r, fill: seatFill }, `${id}-seat-${i}`))) }, `${id}-seats`), _jsx("text", { x: x + width / 2, y: y + height / 2, fill: fontColor !== null && fontColor !== void 0 ? fontColor : "black", fontSize: `${fontSize !== null && fontSize !== void 0 ? fontSize : 10}px`, fontWeight: "bold", textAnchor: "middle", dominantBaseline: "middle", children: label })] }) }, id));
             }
             case "table-seat-square-side": {
                 const seatRadius = Math.min(width, height) * 0.15;
@@ -479,49 +390,23 @@ const Layers = ({ shadowShape, components, onClick, selectedComponent, selectedT
                 //     cy: y + height / 2,
                 //   },
                 // ];
-                return (<g key={id} transform={`translate(${x}, ${y}) )`} data-id={id}>
-            <g transform={`rotate(${rotation}, 0, 0)`}>
-              {/* Seats */}
-               {/* Square Table */}
-               <rect x={x} y={y} width={width} height={height} rx={10} {...commonProps} fill={selectedTableColor !== null && selectedTableColor !== void 0 ? selectedTableColor : fill}/>
-              <g>
-                {seats === null || seats === void 0 ? void 0 : seats.map(({ d }, i) => (<path key={`${id}-seat-${i}`} id={`seat-${id}`} d={d} fill="white"/>))}
-              </g>
-
-             
-
-              {/* Label */}
-              <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>
-          </g>);
+                return (_jsx("g", { transform: `translate(${x}, ${y}) )`, "data-id": id, children: _jsxs("g", { transform: `rotate(${rotation}, 0, 0)`, children: [_jsx("rect", Object.assign({ x: x, y: y, width: width, height: height, rx: 10 }, commonProps, { fill: selectedTableColor !== null && selectedTableColor !== void 0 ? selectedTableColor : fill })), _jsx("g", { children: seats === null || seats === void 0 ? void 0 : seats.map(({ d }, i) => (_jsx("path", { id: `seat-${id}`, d: d, fill: "white" }, `${id}-seat-${i}`))) }), _jsx("text", { x: x + width / 2, y: y + height / 2, fill: fontColor !== null && fontColor !== void 0 ? fontColor : "black", fontSize: `${fontSize !== null && fontSize !== void 0 ? fontSize : 10}px`, fontWeight: "bold", textAnchor: "middle", dominantBaseline: "middle", children: label })] }) }, id));
             }
             case "text":
-                return (<g key={id} data-table={JSON.stringify(item)}>
-            <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>);
+                return (_jsxs("g", { "data-table": JSON.stringify(item), children: [_jsx("rect", { x: x, y: y, width: width, height: height, fill: "transparent", opacity: opacity, onClick: (e) => {
+                                e.stopPropagation();
+                                onClick && onClick(item);
+                            } }), _jsx("text", Object.assign({ x: x + width / 2, y: y + height / 2, textAnchor: "middle", dominantBaseline: "middle", fill: fontColor, fontSize: fontSize !== null && fontSize !== void 0 ? fontSize : height * 0.6, opacity: opacity }, omit(commonProps, ["fill", "opacity"]), { children: text }))] }, id));
             case "image-table":
             case "background":
-                return (<g key={id} onClick={() => {
+                return (_jsxs("g", { onClick: () => {
                         onClick && onClick(item);
-                    }} data-table={JSON.stringify(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>);
+                    }, "data-table": JSON.stringify(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 <g key={id}/>;
+                return _jsx("g", {}, id);
         }
     };
     let date = new Date();
@@ -532,68 +417,43 @@ const Layers = ({ shadowShape, components, onClick, selectedComponent, selectedT
     const polylinePoints = [...nodesRaw, nodesRaw[0]]
         .map((n) => `${n.x},${n.y}`)
         .join(" ");
-    return (<g key={`${date}`} id="selection-layer">
-      {components === null || components === void 0 ? void 0 : components.map(renderShape)}
-      {shadowShape === null || shadowShape === void 0 ? void 0 : shadowShape.map(renderShadowShape)}
-      {!isEmpty(selectionLines) && activeTool === "select" && (<>
-          {nodesRaw.map((p1, index) => {
-                const p2 = nodesRaw[(index + 2) % nodesRaw.length];
-                const side = index === 0
-                    ? "top"
-                    : index === 1
-                        ? "right"
-                        : index === 2
-                            ? "bottom"
-                            : "left";
-                const mx = (p1.x + p2.x) / 2;
-                const my = (p1.y + p2.y) / 2;
-                if (side === "top")
-                    return (<g key={`selection-${date}`} id="help-group-0" data-selection={`selection-${selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id}`} transform={`translate(${selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.x},${selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.y})`}>
-                  <g transform={`rotate(${(selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.rotation) || 0}, 0,0)`}>
-                    {side === "top" && (<g id="help-group-1">
-                        <line x1={mx} y1={my + selectionLines.height / 2} x2={mx} y2={my - selectionLines.height / 3 - 10} // panjang line
-                         stroke="#4a90e2" strokeWidth={2} id="line-help"/>
-
-                        <circle id="circle-help" data-role="rotate" cx={mx} cy={my - selectionLines.height / 3 - 10} r={8} fill="#4a90e2"/>
-                      </g>)}
-                  </g>
-                </g>);
-            })}
-          <g key={`selection-${date}`} id="selection-lines" data-selection={`selection-${(_a = selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) !== null && _a !== void 0 ? _a : selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.id}`} transform={`translate(${selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.x},${selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.y})`}>
-            <g transform={`rotate(${(selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.rotation) || 0}, 0,0)`}>
-              {!hasPoints && (<rect width={selectionLines.width} height={selectionLines.height} fill="none" stroke="#4a90e2" strokeWidth={1} id="rect-box-selection"/>)}
-
-              {!hasPoints &&
-                (nodesRaw === null || nodesRaw === void 0 ? void 0 : nodesRaw.map((node, index) => {
-                    const corner = (index) => {
-                        switch (index) {
-                            case 0:
-                                return "top-left";
-                            case 1:
-                                return "top";
-                            case 2:
-                                return "top-right";
-                            case 3:
-                                return "right";
-                            case 4:
-                                return "bottom-right";
-                            case 5:
-                                return "bottom";
-                            case 6:
-                                return "bottom-left";
-                            case 7:
-                                return "left";
-                        }
-                    };
-                    return (<>
-                        <circle data-position={corner(index)} key={index} r={5} cx={node.x} cy={node.y} fill="transparent" style={{ cursor: "pointer" }}/>
-                        <circle data-position={corner(index)} key={index} r={5} cx={node.x} cy={node.y} fill="#4a90e2" id={`circle-corner-${selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id}`} style={{ cursor: "pointer" }}/>
-                      </>);
-                }))}
-            </g>
-          </g>
-        </>)}
-    </g>);
+    return (_jsxs("g", { id: "selection-layer", children: [components === null || components === void 0 ? void 0 : components.map(renderShape), shadowShape === null || shadowShape === void 0 ? void 0 : shadowShape.map(renderShadowShape), !isEmpty(selectionLines) && activeTool === "select" && (_jsxs(_Fragment, { children: [nodesRaw.map((p1, index) => {
+                        const p2 = nodesRaw[(index + 2) % nodesRaw.length];
+                        const side = index === 0
+                            ? "top"
+                            : index === 1
+                                ? "right"
+                                : index === 2
+                                    ? "bottom"
+                                    : "left";
+                        const mx = (p1.x + p2.x) / 2;
+                        const my = (p1.y + p2.y) / 2;
+                        if (side === "top")
+                            return (_jsx("g", { id: "help-group-0", "data-selection": `selection-${selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id}`, transform: `translate(${selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.x},${selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.y})`, children: _jsx("g", { transform: `rotate(${(selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.rotation) || 0}, 0,0)`, children: side === "top" && (_jsxs("g", { id: "help-group-1", children: [_jsx("line", { x1: mx, y1: my + selectionLines.height / 2, x2: mx, y2: my - selectionLines.height / 3 - 10, stroke: "#4a90e2", strokeWidth: 2, id: "line-help" }), _jsx("circle", { id: "circle-help", "data-role": "rotate", cx: mx, cy: my - selectionLines.height / 3 - 10, r: 8, fill: "#4a90e2" })] })) }) }, `selection-${date}`));
+                    }), _jsx("g", { id: "selection-lines", "data-selection": `selection-${(_a = selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) !== null && _a !== void 0 ? _a : selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.id}`, transform: `translate(${selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.x},${selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.y})`, children: _jsxs("g", { transform: `rotate(${(selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.rotation) || 0}, 0,0)`, children: [!hasPoints && (_jsx("rect", { width: selectionLines.width, height: selectionLines.height, fill: "none", stroke: "#4a90e2", strokeWidth: 1, id: "rect-box-selection" })), !hasPoints &&
+                                    (nodesRaw === null || nodesRaw === void 0 ? void 0 : nodesRaw.map((node, index) => {
+                                        const corner = (index) => {
+                                            switch (index) {
+                                                case 0:
+                                                    return "top-left";
+                                                case 1:
+                                                    return "top";
+                                                case 2:
+                                                    return "top-right";
+                                                case 3:
+                                                    return "right";
+                                                case 4:
+                                                    return "bottom-right";
+                                                case 5:
+                                                    return "bottom";
+                                                case 6:
+                                                    return "bottom-left";
+                                                case 7:
+                                                    return "left";
+                                            }
+                                        };
+                                        return (_jsxs(_Fragment, { children: [_jsx("circle", { "data-position": corner(index), r: 5, cx: node.x, cy: node.y, fill: "transparent", style: { cursor: "pointer" } }, index), _jsx("circle", { "data-position": corner(index), r: 5, cx: node.x, cy: node.y, fill: "#4a90e2", id: `circle-corner-${selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id}`, style: { cursor: "pointer" } }, index)] }));
+                                    }))] }) }, `selection-${date}`)] }))] }, `${date}`));
 };
 export default Layers;
 export function rectToPolygonNodes(x, y, width, height) {

package/dist/components/layer-v4/index.d.ts

@@ -1,6 +1,6 @@
-import { EventHandleType } from "@/dto/event-handler";
+import { EventHandleType } from "../../dto/event-handler";
 import { PropertiesProps } from "@/dto/table";
-import { TableMatchEvent } from "@/features/view-only-3";
+import { TableMatchEvent } from "../../features/view-only-3";
 interface LayersProps {
     components?: PropertiesProps[];
     selectedComponent?: PropertiesProps;
@@ -16,5 +16,5 @@ interface LayersProps {
     onForceRestoreGroup?: (group: SVGGElement, eventType: EventHandleType) => void;
     selectedTableColor?: string;
 }
-declare const Layers: ({ components, selectedTable, iconTags, eventMatchTable, onHighlightGroup, onForceRestoreGroup, selectedTableColor, }: LayersProps) => import("react").JSX.Element;
+declare const Layers: ({ components, selectedTable, iconTags, eventMatchTable, onHighlightGroup, onForceRestoreGroup, selectedTableColor, }: LayersProps) => import("react/jsx-runtime").JSX.Element;
 export default Layers;