seat-editor 3.0.0 → 3.0.2

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

@@ -1,6 +1,4 @@
 "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, }) => {
@@ -33,11 +31,11 @@ const Layers = ({ shadowShape, components, onClick, selectedComponent, selectedT
                 const pointsFormat = !isEmpty(points)
                     ? points
                     : rectToPolygonPoints(x, y, width, height);
-                return _jsx("polygon", Object.assign({ points: pointsFormat }, commonProps), id);
+                return <polygon key={id} points={pointsFormat} {...commonProps}/>;
             case "circle":
-                return (_jsx("circle", Object.assign({ cx: x + width / 2, cy: y + height / 2, r: Math.min(height, width) / 2 }, commonProps), id));
+                return (<circle key={id} cx={x + width / 2} cy={y + height / 2} r={Math.min(height, width) / 2} {...commonProps}/>);
             case "diamond":
-                return (_jsx("rect", Object.assign({ x: x, y: y, width: width, height: height, transform: `rotate(${rotation}, ${x}, ${y})` }, commonProps), id));
+                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 = (_a = item.openSpace) !== null && _a !== void 0 ? _a : 0.2;
@@ -58,13 +56,26 @@ const Layers = ({ shadowShape, components, onClick, selectedComponent, selectedT
                     const cy = centerY + (radius - inset) * Math.sin(angle);
                     return { cx, cy };
                 });
-                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));
+                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>);
             }
             case "table-seat-square": {
                 const seatCount = item.seatCount || 6;
@@ -84,14 +95,29 @@ const Layers = ({ shadowShape, components, onClick, selectedComponent, selectedT
                     cx: startX + i * spacing,
                     cy: y + height + seatRadius * 1.5,
                 }));
-                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));
+                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>);
             }
             case "text":
-                return (_jsxs("g", { onClick: () => {
+                return (<g key={id} onClick={() => {
                         onClick && onClick(item);
-                    }, children: [_jsx("rect", { x: x, y: y, width: width, height: height, fill: "transparent", opacity: opacity }), _jsx("text", { x: x + width / 2, y: y + height / 2, textAnchor: "middle", dominantBaseline: "middle", fill: fontColor, fontSize: height * 0.6, opacity: opacity, children: text })] }, id));
+                    }}>
+            <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 (_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));
+                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;
         }
@@ -150,15 +176,22 @@ const Layers = ({ shadowShape, components, onClick, selectedComponent, selectedT
         };
         switch (shape) {
             case "square":
-                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));
+                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>);
             case "polygon":
                 function isPolygonClosed(points) {
                     if (points.length < 3)
@@ -171,31 +204,55 @@ 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 (_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));
+                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>);
             case "selection-box":
                 const pointsFormat = !isEmpty(points)
                     ? points
                     : rectToPolygonPoints(x, y, width, height);
-                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));
+                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>);
             case "circle":
-                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));
+                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>);
             // case "elipse":
             //   return (
             //     <g
@@ -245,7 +302,12 @@ const Layers = ({ shadowShape, components, onClick, selectedComponent, selectedT
             //     </g>
             //   );
             case "diamond":
-                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));
+                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>);
             case "table-seat-circle": {
                 const seatCount = item.seatCount;
                 const openSpace = (_a = item.openSpace) !== null && _a !== void 0 ? _a : 0;
@@ -266,13 +328,27 @@ const Layers = ({ shadowShape, components, onClick, selectedComponent, selectedT
                     const cy = centerY + (tableRadius + seatRadius) * Math.sin(angle);
                     return { cx, cy };
                 });
-                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));
+                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>);
             }
             case "table-seat-square": {
                 const openSpace = item.openSpace || 0; // from 0 to 0.9
@@ -328,7 +404,20 @@ const Layers = ({ shadowShape, components, onClick, selectedComponent, selectedT
                     cy,
                     id: "right",
                 }));
-                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));
+                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>);
             }
             case "table-seat-square-side": {
                 const seatRadius = Math.min(width, height) * 0.15;
@@ -390,23 +479,49 @@ const Layers = ({ shadowShape, components, onClick, selectedComponent, selectedT
                 //     cy: y + height / 2,
                 //   },
                 // ];
-                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));
+                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>);
             }
             case "text":
-                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));
+                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>);
             case "image-table":
             case "background":
-                return (_jsxs("g", { onClick: () => {
+                return (<g key={id} onClick={() => {
                         onClick && onClick(item);
-                    }, "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));
+                    }} 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>);
             default:
-                return _jsx("g", {}, id);
+                return <g key={id}/>;
         }
     };
     let date = new Date();
@@ -417,43 +532,68 @@ const Layers = ({ shadowShape, components, onClick, selectedComponent, selectedT
     const polylinePoints = [...nodesRaw, nodesRaw[0]]
         .map((n) => `${n.x},${n.y}`)
         .join(" ");
-    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}`));
+    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>);
 };
 export default Layers;
 export function rectToPolygonNodes(x, y, width, height) {

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

@@ -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-runtime").JSX.Element;
+declare const Layers: ({ components, selectedTable, iconTags, eventMatchTable, onHighlightGroup, onForceRestoreGroup, selectedTableColor, }: LayersProps) => import("react").JSX.Element;
 export default Layers;