seat-editor 2.1.2 → 3.0.0

package/dist/components/layer-v3/index.js

@@ -3,12 +3,10 @@ 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";
-import clsx from "clsx";
-const Layers = ({ shadowShape, components, onClick, selectedComponent, selectedTable, activeTool, onMouseDown, onMouseUp, onBlur, selectedTableColor, mode = "edit", style, 
-// onTouchEnd,
-// onTouchMove,
-onTouchStart, }) => {
+const Layers = ({ shadowShape, components, onClick, selectedComponent, selectedTable, activeTool, onMouseDown, onMouseUp, onBlur, selectedTableColor, mode = "edit", style, selectionLines, }) => {
+    var _a;
     const refItemTemp = useRef(null);
+    const hasPoints = selectionLines && !isEmpty(selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.points);
     const handleOnHover = (item) => {
         if (mode === "edit") {
             refItemTemp.current = item;
@@ -24,15 +22,6 @@ onTouchStart, }) => {
             .join(" ");
         return points;
     }
-    function rectToPolygonNodes(x, y, width, height) {
-        const points = [
-            { x: x, y: y },
-            { x: x + width, y: y },
-            { x: x + width, y: y + height },
-            { x: x, y: y + height },
-        ];
-        return points;
-    }
     const renderShadowShape = (item) => {
         var _a;
         const { id, x, y, width, height, fill, opacity, rotation, shape, fontColor, text, seatFill, labels, points, } = item;
@@ -40,17 +29,18 @@ onTouchStart, }) => {
         switch (shape) {
             case "square":
             case "polygon":
+            case "selection-box":
                 const pointsFormat = !isEmpty(points)
                     ? points
                     : rectToPolygonPoints(x, y, width, height);
                 return _jsx("polygon", Object.assign({ points: pointsFormat }, commonProps), id);
             case "circle":
-                return (_jsx("circle", Object.assign({ cx: x + width / 2, cy: y + height / 2, r: width / 2 }, commonProps), id));
+                return (_jsx("circle", Object.assign({ cx: x + width / 2, cy: y + height / 2, r: Math.min(height, width) / 2 }, commonProps), id));
             case "diamond":
                 return (_jsx("rect", Object.assign({ x: x, y: y, width: width, height: height, transform: `rotate(${rotation}, ${x}, ${y})` }, commonProps), id));
             case "table-seat-circle": {
                 const seatCount = item.seatCount;
-                const openSpace = (_a = item.openSpace) !== null && _a !== void 0 ? _a : 0;
+                const openSpace = (_a = item.openSpace) !== null && _a !== void 0 ? _a : 0.2;
                 const centerX = x + width / 2;
                 const centerY = y + height / 2;
                 const baseSize = Math.min(width, height);
@@ -68,13 +58,13 @@ onTouchStart, }) => {
                     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, { opacity: id === (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) ? 0.5 : opacity })), labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
+                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", opacity: id === (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) ? 0.5 : opacity, stroke: "#c49ba3", strokeWidth: "1", children: seatCircles.map(({ cx, cy }, i) => (_jsx("circle", { cx: cx, cy: cy, r: seatRadius, fill: seatFill }, `${id}-seat-${i}`))) })] }, id));
+                        }), _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;
@@ -87,14 +77,14 @@ onTouchStart, }) => {
                 const spacing = seatCountPerSide > 1 ? availableWidth / (seatCountPerSide - 1) : 0;
                 const topSeats = Array.from({ length: seatCountPerSide }, (_, i) => ({
                     cx: startX + i * spacing,
-                    cy: y - seatRadius * 1.5,
+                    cy: y - seatRadius * 1.5 + 50,
                 }));
                 const bottomSeats = Array.from({ length: seatCount - seatCountPerSide }, // in case it's odd
                 (_, i) => ({
                     cx: startX + i * spacing,
                     cy: y + height + seatRadius * 1.5,
                 }));
-                return (_jsxs("g", { children: [_jsx("rect", Object.assign({ x: x, y: y, width: width, height: height }, commonProps)), _jsx("g", { fill: "#e6b9c0", fillOpacity: "0.5", stroke: "#c49ba3", strokeWidth: "1", children: [...topSeats, ...bottomSeats].map(({ cx, cy }, i) => (_jsx("circle", { cx: cx, cy: cy, r: seatRadius }, `${id}-seat-${i}`))) }, `${id}-seats`)] }, id));
+                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 (_jsxs("g", { onClick: () => {
@@ -107,8 +97,8 @@ onTouchStart, }) => {
         }
     };
     const renderShape = (item) => {
-        var _a;
-        const { id, x, y, width, height, fill, opacity, rotation = 0, shape, text, stroke, strokeWidth, labels, fontSize, fontColor, label, seatFill, src, points, } = item;
+        var _a, _b, _c, _d, _e, _f;
+        const { id, x, y, width, height, fill, opacity, rotation = 0, shape, text, stroke, strokeWidth, labels, fontSize, fontColor, label, seatFill, src, points, transform, seatPositions, } = item;
         const commonProps = {
             fill,
             opacity,
@@ -143,7 +133,7 @@ onTouchStart, }) => {
             // },
             onTouchStart: (e) => {
                 // e.stopPropagation();
-                onTouchStart === null || onTouchStart === void 0 ? void 0 : onTouchStart(e, item);
+                // onTouchStart?.(e, item);
             },
             // onTouchEnd: (
             //   e: React.TouchEvent<
@@ -160,116 +150,250 @@ onTouchStart, }) => {
         };
         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));
             case "polygon":
+                function isPolygonClosed(points) {
+                    if (points.length < 3)
+                        return false;
+                    const first = points[0];
+                    const last = points[points.length - 1];
+                    return first.x === last.x && first.y === last.y;
+                }
+                const finalPoint = points.map((p) => `${p.x},${p.y}`).join(" ");
+                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));
+            case "selection-box":
                 const pointsFormat = !isEmpty(points)
                     ? points
                     : rectToPolygonPoints(x, y, width, height);
-                return (_jsx("g", { children: _createElement("polygon", Object.assign({}, commonProps, { key: id, points: pointsFormat })) }, id));
-            // return (
-            //   <g key={id}>
-            //     <rect
-            //       key={id}
-            //       x={x}
-            //       y={y}
-            //       width={width}
-            //       height={height}
-            //       fill={selectedTableColor ?? fill}
-            //       style={{
-            //         cursor: mode === "view" ? "pointer" : "default",
-            //         ...style,
-            //       }}
-            //       opacity={id === selectedComponent?.id ? 0.5 : opacity}
-            //       {...omit(commonProps, "opacity")}
-            //       transform={`rotate(${rotation} ${x + width / 2} ${
-            //         y + height / 2
-            //       })`}
-            //     />
-            //     {labels?.map((_: any, index: number) => {
-            //       return (
-            //         <text
-            //           {...omit(commonProps, ["opacity", "stroke", "strokeWidth"])}
-            //           key={`${id}-label-${index}`}
-            //           x={x + width / 2 + (_?.x ?? 0)}
-            //           y={y + height / 2 + (_?.y ?? 0)}
-            //           fill={_?.fontColor ?? "black"}
-            //           fontSize={`${_?.fontSize ?? 10}px`}
-            //           fontWeight="bold"
-            //           textAnchor="middle"
-            //           dominantBaseline="middle"
-            //           transform={`rotate(${rotation} ${x + width / 2} ${
-            //             y + height / 2
-            //           })`}
-            //           onClick={(e) => {
-            //             e.stopPropagation();
-            //             onClick&& onClick(item);
-            //           }}
-            //         >
-            //           {_?.label}
-            //         </text>
-            //       );
-            //     })}
-            //   </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 (_jsxs("g", { children: [_jsx("circle", Object.assign({ cx: x + width / 2, cy: y + height / 2, r: Math.min(width, height) / 2, style: Object.assign({ cursor: mode === "view" ? "pointer" : "default" }, style), fill: selectedTableColor !== null && selectedTableColor !== void 0 ? selectedTableColor : fill, opacity: id === (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) ? 0.5 : opacity }, omit(commonProps, "opacity")), id), labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
-                            var _a, _b, _c, _d;
-                            return (_jsx("text", { x: x + width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0), y: y + height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0), fill: (_c = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _c !== void 0 ? _c : "black", fontSize: `${(_d = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _d !== void 0 ? _d : 10}px`, fontWeight: "bold", textAnchor: "middle", dominantBaseline: "middle", transform: `rotate(${rotation} ${x + width / 2} ${y + height / 2})`, onClick: (e) => {
-                                    e.stopPropagation();
-                                    onClick && onClick(item);
-                                }, children: _ === null || _ === void 0 ? void 0 : _.label }, `${id}-label-${index}`));
-                        })] }, id));
+                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
+            //       key={id}
+            //       id={id}
+            //       transform={`translate(${x}, ${y})`}
+            //     >
+            //       <g transform={`rotate(${rotation}, 0, 0)`}>
+            //       <ellipse
+            //         key={id}
+            //         cx={width / 2}
+            //         cy={height / 2}
+            //         rx={width / 2}
+            //         ry={height / 2}
+            //         style={{
+            //           cursor: mode === "view" ? "pointer" : "default",
+            //           ...style,
+            //         }}
+            //         // transform={transform}
+            //         fill={selectedTableColor ?? fill}
+            //         {...omit(commonProps, ["opacity","x","y","height","width"])}
+            //       />
+            //       {labels?.map((_: any, index: number) => {
+            //         return (
+            //           <text
+            //             key={`${id}-label-${index}`}
+            //             x={width / 2 + (_?.x ?? 0)}
+            //             y={width / 2 + (_?.y ?? 0)}
+            //             fill={_?.fontColor ?? "black"}
+            //             fontSize={`${_?.fontSize ?? 10}px`}
+            //             fontWeight="bold"
+            //             textAnchor="middle"
+            //             dominantBaseline="middle"
+            //             transform={`rotate(${rotation} ${width / 2} ${
+            //               height / 2
+            //             })`}
+            //             onClick={(e) => {
+            //               e.stopPropagation();
+            //               onClick && onClick(item);
+            //             }}
+            //           >
+            //             {_?.label}
+            //           </text>
+            //         );
+            //       })}
+            //       </g>
+            //     </g>
+            //   );
             case "diamond":
-                return (_jsxs("g", { 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 (_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;
-                const centerX = x + width / 2;
-                const centerY = y + height / 2;
-                const baseSize = Math.min(width, height);
-                const radius = baseSize / 2; // jarak kursi dari pusat
-                const seatRadius = baseSize / 6; // ukuran kursi
-                const fullAngle = 2 * Math.PI;
+                // LOCAL SPACE (tanpa x,y)
+                const centerX = width / 2;
+                const centerY = height / 2;
+                // meja
+                const tableRadius = Math.min(width, height) / 2;
+                // seat statis
+                const seatRadius = 10;
+                const fullAngle = Math.PI * 2;
                 const availableAngle = fullAngle * (1 - openSpace);
                 const angleStart = (fullAngle - availableAngle) / 2;
                 const angleStep = availableAngle / seatCount;
-                const seatInsetFactor = 0.3;
                 const seatCircles = Array.from({ length: seatCount }, (_, i) => {
                     const angle = angleStart + i * angleStep;
-                    const inset = seatRadius * seatInsetFactor; // default 0.3
-                    const cx = centerX + (radius - inset) * Math.cos(angle);
-                    const cy = centerY + (radius - inset) * Math.sin(angle);
+                    const cx = centerX + (tableRadius + seatRadius) * Math.cos(angle);
+                    const cy = centerY + (tableRadius + seatRadius) * 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, { opacity: id === (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) ? 0.5 : opacity })), labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
-                            var _a, _b, _c, _d;
-                            return (_jsx("text", { x: 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", opacity: id === (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) ? 0.5 : opacity, stroke: "#c49ba3", strokeWidth: "1", children: seatCircles.map(({ cx, cy }, i) => (_jsx("circle", { cx: cx, cy: cy, r: seatRadius, fill: seatFill }, `${id}-seat-${i}`))) })] }, id));
+                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 seatCount = item.seatCount || 6;
                 const openSpace = item.openSpace || 0; // from 0 to 0.9
-                const seatRadius = width / 6;
+                const r = 10;
+                const seatPositions = item.seatPositions;
+                const topCount = (_b = seatPositions === null || seatPositions === void 0 ? void 0 : seatPositions.top) !== null && _b !== void 0 ? _b : 0;
+                const bottomCount = (_c = seatPositions === null || seatPositions === void 0 ? void 0 : seatPositions.bottom) !== null && _c !== void 0 ? _c : 0;
+                const leftCount = (_d = seatPositions === null || seatPositions === void 0 ? void 0 : seatPositions.left) !== null && _d !== void 0 ? _d : 0;
+                const rightCount = (_e = seatPositions === null || seatPositions === void 0 ? void 0 : seatPositions.right) !== null && _e !== void 0 ? _e : 0;
                 // split seats evenly on top and bottom
-                const seatCountPerSide = Math.ceil(seatCount / 2);
+                const seatCountTopBottom = Math.ceil(Math.max(topCount, bottomCount) / 2);
+                const seatCountLeftRight = Math.ceil(Math.max(leftCount, rightCount) / 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 availableHeight = height * (1 - openSpace);
+                const spacingWidth = availableWidth / seatCountTopBottom;
+                const spacingHeight = availableHeight / seatCountLeftRight;
+                const topXs = distributeWithSpacing({
+                    start: x,
+                    length: width,
+                    count: topCount,
+                    radius: r,
+                    spacing: spacingWidth,
+                });
+                const topSeats = topXs.map((cx) => ({ cx, cy: y - r, id: "top" }));
+                // TOP
+                const bottomSeats = distributeWithSpacing({
+                    start: x,
+                    length: width,
+                    count: bottomCount,
+                    radius: r,
+                    spacing: spacingWidth,
+                }).map((cx) => ({
+                    cx: cx,
+                    cy: y + height + r,
+                    id: "bottom",
                 }));
-                const bottomSeats = Array.from({ length: seatCount - seatCountPerSide }, // in case it's odd
-                (_, i) => ({
-                    cx: startX + i * spacing,
-                    cy: y + height + seatRadius * 1.5,
+                const leftYs = distributeWithSpacing({
+                    start: y,
+                    length: height,
+                    count: leftCount,
+                    radius: r,
+                    spacing: spacingHeight,
+                });
+                const leftSeats = leftYs.map((cy) => ({ cx: x - r, cy, id: "left" }));
+                const rightSeats = distributeWithSpacing({
+                    start: y,
+                    length: height,
+                    count: rightCount,
+                    radius: r,
+                    spacing: spacingHeight,
+                }).map((cy) => ({
+                    cx: x + width + r,
+                    cy,
+                    id: "right",
                 }));
-                return (_jsxs("g", { transform: `rotate(${rotation}, ${x}, ${y})`, children: [_jsx("rect", Object.assign({ x: x, y: y, style: Object.assign({ cursor: mode === "view" ? "pointer" : "default" }, style), width: width, height: height }, commonProps, { fill: selectedTableColor !== null && selectedTableColor !== void 0 ? selectedTableColor : fill })), _jsx("text", { x: x + width / 2, y: y + height / 2, fill: fontColor !== null && fontColor !== void 0 ? fontColor : "black", fontSize: `${fontSize !== null && fontSize !== void 0 ? fontSize : 10}px`, fontWeight: "bold", textAnchor: "middle", dominantBaseline: "middle", children: label }), _jsx("g", { fill: "#e6b9c0", fillOpacity: "0.5", stroke: "#c49ba3", strokeWidth: "1", children: [...topSeats, ...bottomSeats].map(({ cx, cy }, i) => (_jsx("circle", { cx: cx, cy: cy, r: seatRadius }, `${id}-seat-${i}`))) }, `${id}-seats`)] }, id));
+                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;
+                const top = (seatPositions === null || seatPositions === void 0 ? void 0 : seatPositions.top) || 0;
+                const right = (seatPositions === null || seatPositions === void 0 ? void 0 : seatPositions.right) || 0;
+                const bottom = (seatPositions === null || seatPositions === void 0 ? void 0 : seatPositions.bottom) || 0;
+                const left = (seatPositions === null || seatPositions === void 0 ? void 0 : seatPositions.left) || 0;
+                const topSeats = distributeWithSpacing({
+                    start: x,
+                    length: width,
+                    count: top,
+                    radius: seatRadius,
+                }).map((cx) => ({ cx, cy: y - seatRadius * 0.1, id: "top" }));
+                console.log({ topSeats });
+                const bottomSeats = distributeWithSpacing({
+                    start: x,
+                    length: width,
+                    count: bottom,
+                    radius: seatRadius,
+                }).map((cx) => ({ cx, cy: y + height + seatRadius * 0.1, id: "bottom" }));
+                const leftSeats = distributeWithSpacing({
+                    start: y,
+                    length: height,
+                    count: left,
+                    radius: seatRadius,
+                }).map((cy) => ({ cx: x - seatRadius * 0.1, cy, id: "left" }));
+                const rightSeats = distributeWithSpacing({
+                    start: y,
+                    length: height,
+                    count: right,
+                    radius: seatRadius,
+                }).map((cy) => ({ cx: x + width + seatRadius * 0.1, cy, id: "right" }));
+                const seats = (_f = [
+                    ...topSeats,
+                    ...bottomSeats,
+                    ...leftSeats,
+                    ...rightSeats,
+                ]) === null || _f === void 0 ? void 0 : _f.map(seat => (Object.assign(Object.assign({}, seat), { d: arcByDirection({ cx: seat.cx, cy: seat.cy, r: seatRadius, direction: seat.id, fraction: 0.4 }) })));
+                // console.log("seats", seats);
+                // const seats = [
+                //   // TOP (tengah)
+                //   {
+                //     cx: x + width / 2,
+                //     cy: y - seatRadius * 0.1,
+                //   },
+                //   // RIGHT (tengah)
+                //   {
+                //     cx: x + width + seatRadius * 0.1,
+                //     cy: y + height / 2,
+                //   },
+                //   // BOTTOM (tengah)
+                //   {
+                //     cx: x + width / 2,
+                //     cy: y + height + seatRadius * 0.1,
+                //   },
+                //   // LEFT (tengah)
+                //   {
+                //     cx: x - seatRadius * 0.1,
+                //     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));
             }
             case "text":
-                return (_jsxs("g", { children: [_jsx("rect", { x: x, y: y, width: width, height: height, fill: "transparent", opacity: opacity, onClick: (e) => {
+                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));
@@ -277,7 +401,7 @@ onTouchStart, }) => {
             case "background":
                 return (_jsxs("g", { onClick: () => {
                         onClick && onClick(item);
-                    }, children: [_jsx("image", Object.assign({ href: src, x: x, y: y, width: width, height: height, transform: `rotate(${rotation} ${x + width / 2} ${y + height / 2})` }, commonProps)), labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
+                    }, "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));
@@ -286,14 +410,15 @@ onTouchStart, }) => {
         }
     };
     let date = new Date();
-    const nodesRaw = !isEmpty(selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.nodes) && isArray(selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.nodes)
-        ? selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.nodes
-        : rectToPolygonNodes(selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.x, selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.y, selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.width, selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.height);
+    const nodesRaw = !isEmpty(selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.nodes) && isArray(selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.nodes)
+        ? selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.nodes
+        : rectToPolygonNodes(selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.x, selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.y, selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.width, selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.height);
+    const points = selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.points;
     const polylinePoints = [...nodesRaw, nodesRaw[0]]
         .map((n) => `${n.x},${n.y}`)
         .join(" ");
-    return (_jsxs("g", { children: [components === null || components === void 0 ? void 0 : components.map(renderShape), shadowShape === null || shadowShape === void 0 ? void 0 : shadowShape.map(renderShadowShape), selectedComponent && activeTool === "select" && (_jsxs(_Fragment, { children: [nodesRaw.map((p1, index) => {
-                        const p2 = nodesRaw[(index + 1) % nodesRaw.length]; // sisi berikutnya (wrap ke awal)
+    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
@@ -301,37 +426,95 @@ onTouchStart, }) => {
                                 : index === 2
                                     ? "bottom"
                                     : "left";
-                        return (_jsx("polyline", { points: `${p1.x},${p1.y} ${p2.x},${p2.y}`, fill: "none", stroke: "transparent", strokeWidth: 5, className: clsx([
-                                {
-                                    "cursor-ns-resize": side === "top" || side === "bottom",
-                                    "cursor-ew-resize": side === "left" || side === "right",
-                                },
-                            ]), onMouseDown: (e) => {
-                                e.stopPropagation();
-                                if (side === "top" || side === "bottom") {
-                                    onMouseDown(e, selectedComponent, side); // misal "top" / "bottom"
-                                }
-                                else if (side === "left" || side === "right") {
-                                    onMouseDown(e, selectedComponent, side);
-                                }
-                            } }, index));
-                    }), nodesRaw === null || nodesRaw === void 0 ? void 0 : nodesRaw.map((node, index) => {
-                        const corner = index === 0
-                            ? "top-left"
-                            : index === 1
-                                ? "top-right"
-                                : index === 2
-                                    ? "bottom-right"
-                                    : "bottom-left";
-                        return (_jsx("rect", { x: node.x - 10, y: node.y - 10, width: 20, height: 20, fill: "transparent", className: clsx([
-                                {
-                                    "cursor-nwse-resize": corner === "top-left" || corner === "bottom-right",
-                                    "cursor-nesw-resize": corner === "top-right" || corner === "bottom-left",
-                                },
-                            ]), onMouseDown: (e) => {
-                                e.stopPropagation();
-                                onMouseDown(e, selectedComponent, corner);
-                            } }, index));
-                    }), _jsx("polyline", { points: polylinePoints, fill: "none", stroke: "blue", strokeWidth: 1 })] }))] }, `${date}`));
+                        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) {
+    const points = [
+        { x: 0, y: 0 },
+        { x: 0 + width / 2, y: 0 },
+        { x: 0 + width, y: 0 },
+        { x: 0 + width, y: 0 + height / 2 },
+        { x: 0 + width, y: 0 + height },
+        { x: 0 + width / 2, y: 0 + height },
+        { x: 0, y: 0 + height },
+        { x: 0, y: 0 + height / 2 },
+    ];
+    return points;
+}
+export function distributeWithSpacing({ start, length, count, radius, spacing, }) {
+    if (count === 0)
+        return [];
+    // ✅ satu seat → selalu center
+    if (count === 1) {
+        return [start + length / 2];
+    }
+    const usable = length - 2 * radius;
+    // spacing default = bagi penuh
+    const defaultSpacing = usable / (count - 1);
+    const s = spacing != null ? Math.min(spacing, defaultSpacing) : defaultSpacing;
+    // total panjang seat berdasarkan spacing
+    const total = (count - 1) * s;
+    // start supaya CENTERED
+    const offset = (usable - total) / 2;
+    return Array.from({ length: count }, (_, i) => start + radius + offset + i * s);
+}
+// utils/svgPath.ts
+// utils/svgArc.ts
+export const arcByDirection = ({ cx, cy, r, direction = "top", fraction = 0.5, }) => {
+    const clamp = (v, min, max) => Math.max(min, Math.min(max, v));
+    const frac = clamp(fraction, 0.01, 1);
+    const sweep = 360 * frac;
+    // angle tengah untuk tiap direction
+    const centerAngleMap = {
+        top: -90,
+        right: 0,
+        bottom: 90,
+        left: 180,
+    };
+    const centerAngle = centerAngleMap[direction];
+    const startAngle = centerAngle - sweep / 2;
+    const endAngle = centerAngle + sweep / 2;
+    const rad = (deg) => (deg * Math.PI) / 180;
+    const start = {
+        x: cx + r * Math.cos(rad(startAngle)),
+        y: cy + r * Math.sin(rad(startAngle)),
+    };
+    const end = {
+        x: cx + r * Math.cos(rad(endAngle)),
+        y: cy + r * Math.sin(rad(endAngle)),
+    };
+    const largeArcFlag = sweep > 180 ? 1 : 0;
+    const sweepFlag = 1;
+    return `
+    M ${start.x} ${start.y}
+    A ${r} ${r} 0 ${largeArcFlag} ${sweepFlag} ${end.x} ${end.y}
+  `;
+};