seat-editor 3.3.13 → 3.3.14

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

@@ -0,0 +1,631 @@
+"use client";
+import { isEmpty, omit } from "lodash";
+import { arcByDirection, distributeWithSpacing, rectToPolygonNodes, rectToPolygonPoints, } from "./utils";
+import { useAppSelector } from "../../hooks/use-redux";
+const Layers = ({ components, selectedComponent, activeTool, selectionLines, }) => {
+    var _a;
+    const hasPoints = selectionLines && !isEmpty(selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.points);
+    const lockBackground = useAppSelector((state) => state.tool.lockBackground);
+    const renderShape = (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, seatPositions, radius = 0, } = item;
+        const commonProps = {
+            fill,
+            opacity,
+            stroke,
+            strokeWidth,
+        };
+        switch (shape) {
+            case "square":
+                return (<g key={id} data-id={id} id={id} transform={`translate(${x}, ${y})`}>
+            <g transform={`rotate(${rotation}, 0, 0)`}>
+              <rect {...commonProps} key={id} width={width} height={height} rx={radius}/>
+              <g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
+                {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
+                        var _a, _b, _c, _d, _e, _f, _g;
+                        const cx = width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0);
+                        const cy = height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0);
+                        return (<text {...omit(commonProps, [
+                            "opacity",
+                            "stroke",
+                            "strokeWidth",
+                        ])} transform={`rotate(${(_c = _ === null || _ === void 0 ? void 0 : _.rotation) !== null && _c !== void 0 ? _c : 0}, ${cx},${cy})`} key={`${id}-label-${index}`} x={width / 2 + ((_d = _ === null || _ === void 0 ? void 0 : _.x) !== null && _d !== void 0 ? _d : 0)} y={height / 2 + ((_e = _ === null || _ === void 0 ? void 0 : _.y) !== null && _e !== void 0 ? _e : 0)} fill={(_f = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _f !== void 0 ? _f : "black"} fontSize={`${(_g = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _g !== void 0 ? _g : 10}px`} fontWeight="bold" textAnchor="middle" dominantBaseline="middle">
+                      {_ === null || _ === void 0 ? void 0 : _.label}
+                    </text>);
+                    })}
+              </g>
+            </g>
+          </g>);
+            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);
+                const showPoints = (selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.id) == id;
+                return (<g key={id} data-id={id} transform={`translate(${x}, ${y})`}>
+            <g transform={`rotate(${rotation}, 0, 0)`}>
+              <polygon {...commonProps} key={id} points={finalPoint} x="0" y="0"/>
+              {(showPoints || !isClosed) &&
+                        points.map((_, index) => {
+                            return (<>
+                      <rect data-point={JSON.stringify(_)} id={`${index}`} key={`${id}-point-${index}`} x={(_ === null || _ === void 0 ? void 0 : _.x) - 5} y={(_ === null || _ === void 0 ? void 0 : _.y) - 5} width={10} height={10} fill="#4a90e2" cursor={"pointer"}/>
+                      <circle data-point={JSON.stringify(_)} id={`${index}`} key={`${id}-point-${index}`} cx={_ === null || _ === void 0 ? void 0 : _.x} cy={_ === null || _ === void 0 ? void 0 : _.y} r={15} fill="transparent" cursor={"pointer"}/>
+                    </>);
+                        })}
+            </g>
+          </g>);
+            case "selection-box":
+                const pointsFormat = rectToPolygonPoints(x, y, width, height);
+                return (<g key={id} data-table={JSON.stringify(item)} data-id={id}>
+            <g transform={`rotate(${rotation} ${x + width / 2} ${y + height / 2})`}>
+              <polygon {...commonProps} key={id} points={pointsFormat}/>
+              {/* circle every points */}
+              {points.map((_, index) => {
+                        return (<rect key={`${id}-point-${index}`} x={(_ === null || _ === void 0 ? void 0 : _.x) - 5} y={(_ === null || _ === void 0 ? void 0 : _.y) - 5} width={10} height={10} fill="blue"/>);
+                    })}
+              {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
+                        var _a, _b, _c, _d;
+                        return (<text {...omit(commonProps, ["opacity", "stroke", "strokeWidth"])} key={`${id}-label-${index}`} x={x + width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0)} y={y + height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0)} fill={(_c = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _c !== void 0 ? _c : "black"} fontSize={`${(_d = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _d !== void 0 ? _d : 10}px`} fontWeight="bold" textAnchor="middle" dominantBaseline="middle" transform={`rotate(${rotation} ${x + width / 2} ${y + height / 2})`}>
+                    {_ === null || _ === void 0 ? void 0 : _.label}
+                  </text>);
+                    })}
+            </g>
+          </g>);
+            case "circle":
+                return (<g key={id} data-id={id} transform={`translate(${x}, ${y})`}>
+            <g transform={`rotate(${rotation}, 0, 0)`}>
+              <circle key={id} cx={width / 2} cy={height / 2} r={Math.min(height, width) / 2} fill={fill} {...commonProps}/>
+              <g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
+                {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
+                        var _a, _b, _c, _d, _e, _f, _g;
+                        const cx = width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0);
+                        const cy = height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0);
+                        return (<text {...omit(commonProps, [
+                            "opacity",
+                            "stroke",
+                            "strokeWidth",
+                        ])} transform={`rotate(${(_c = _ === null || _ === void 0 ? void 0 : _.rotation) !== null && _c !== void 0 ? _c : 0}, ${cx},${cy})`} key={`${id}-label-${index}`} x={width / 2 + ((_d = _ === null || _ === void 0 ? void 0 : _.x) !== null && _d !== void 0 ? _d : 0)} y={height / 2 + ((_e = _ === null || _ === void 0 ? void 0 : _.y) !== null && _e !== void 0 ? _e : 0)} fill={(_f = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _f !== void 0 ? _f : "black"} fontSize={`${(_g = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _g !== void 0 ? _g : 10}px`} fontWeight="bold" textAnchor="middle" dominantBaseline="middle">
+                      {_ === null || _ === void 0 ? void 0 : _.label}
+                    </text>);
+                    })}
+              </g>
+            </g>
+          </g>);
+            case "diamond":
+                return (<g key={id} data-table={JSON.stringify(item)}>
+            <rect key={id} x={x} y={y} width={width} height={height} transform={`rotate(${rotation}, ${x}, ${y})`} {...commonProps} fill={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;
+                // 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 seatCircles = Array.from({ length: seatCount }, (_, i) => {
+                    const angle = angleStart + i * angleStep;
+                    const cx = centerX + (tableRadius + seatRadius) * Math.cos(angle);
+                    const cy = centerY + (tableRadius + seatRadius) * Math.sin(angle);
+                    return { cx, cy };
+                });
+                return (<g key={id} data-id={id} transform={`translate(${x}, ${y})`}>
+            <g transform={`rotate(${rotation}, 0, 0)`}>
+              {/* Meja */}
+              <circle cx={centerX} cy={centerY} r={tableRadius} fill={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>
+
+              <g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
+                {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
+                        var _a, _b, _c, _d, _e, _f, _g;
+                        const cx = width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0);
+                        const cy = height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0);
+                        return (<text {...omit(commonProps, [
+                            "opacity",
+                            "stroke",
+                            "strokeWidth",
+                        ])} transform={`rotate(${(_c = _ === null || _ === void 0 ? void 0 : _.rotation) !== null && _c !== void 0 ? _c : 0}, ${cx},${cy})`} key={`${id}-label-${index}`} x={width / 2 + ((_d = _ === null || _ === void 0 ? void 0 : _.x) !== null && _d !== void 0 ? _d : 0)} y={height / 2 + ((_e = _ === null || _ === void 0 ? void 0 : _.y) !== null && _e !== void 0 ? _e : 0)} fill={(_f = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _f !== void 0 ? _f : "black"} fontSize={`${(_g = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _g !== void 0 ? _g : 10}px`} fontWeight="bold" textAnchor="middle" dominantBaseline="middle">
+                      {_ === null || _ === void 0 ? void 0 : _.label}
+                    </text>);
+                    })}
+              </g>
+            </g>
+          </g>);
+            }
+            case "table-seat-rect-circle": {
+                const clamp = (v, min, max) => Math.max(min, Math.min(max, v));
+                const base = clamp(Math.min(width, height) * 0.08, 12, 28);
+                const tableRadius = Math.min(width, height) / 2;
+                const seatSizeTB = {
+                    w: base * 1.8, // lebih panjang
+                    h: base * 0.9, // lebih tipis
+                };
+                const seatSizeLR = {
+                    w: base * 0.9, // lebih tipis
+                    h: base * 1.8, // lebih panjang
+                };
+                const openSpace = item.openSpace || 0;
+                const seatRadius = Math.min(width, height) * 0.2;
+                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;
+                // split seats evenly on top and bottom
+                const seatCountTopBottom = Math.ceil(Math.max(top, bottom) / 2);
+                const seatCountLeftRight = Math.ceil(Math.max(left, left) / 2);
+                const availableWidth = width * (1 - openSpace);
+                const availableHeight = height * (1 - openSpace);
+                const spacingWidth = availableWidth / seatCountTopBottom;
+                const spacingHeight = availableHeight / seatCountLeftRight;
+                const topSeats = distributeWithSpacing({
+                    start: 0,
+                    length: width,
+                    count: top,
+                    radius: seatRadius,
+                    spacing: spacingWidth,
+                }).map((cx) => ({
+                    x: cx - seatSizeTB.w / 2,
+                    y: -seatSizeTB.h,
+                    width: seatSizeTB.w,
+                    height: seatSizeTB.h,
+                    id: "top",
+                }));
+                const bottomSeats = distributeWithSpacing({
+                    start: 0,
+                    length: width,
+                    count: bottom,
+                    radius: seatRadius,
+                    spacing: spacingWidth,
+                }).map((cx) => ({
+                    x: cx - seatSizeTB.w / 2,
+                    y: height,
+                    width: seatSizeTB.w,
+                    height: seatSizeTB.h,
+                    id: "bottom",
+                }));
+                const leftSeats = distributeWithSpacing({
+                    start: 0,
+                    length: height,
+                    count: left,
+                    radius: seatRadius,
+                    spacing: spacingHeight,
+                }).map((cy) => ({
+                    x: -seatSizeLR.w,
+                    y: cy - seatSizeLR.h / 2,
+                    width: seatSizeLR.w,
+                    height: seatSizeLR.h,
+                    id: "left",
+                }));
+                const rightSeats = distributeWithSpacing({
+                    start: 0,
+                    length: height,
+                    count: right,
+                    radius: seatRadius,
+                    spacing: spacingHeight,
+                }).map((cy) => ({
+                    x: width,
+                    y: cy - seatSizeLR.h / 2,
+                    width: seatSizeLR.w,
+                    height: seatSizeLR.h,
+                    id: "right",
+                }));
+                const seats = [
+                    ...topSeats,
+                    ...bottomSeats,
+                    ...leftSeats,
+                    ...rightSeats,
+                ];
+                return (<g key={id} transform={`translate(${x}, ${y})`} data-id={id}>
+            <g transform={`rotate(${rotation}, 0, 0)`}>
+              {/* Seats */}
+              <circle cx={width / 2} cy={height / 2} r={tableRadius} {...commonProps} fill={fill}/>
+              <g key={`${id}-seats`} data-seat={`${id}-seats`}>
+                {seats === null || seats === void 0 ? void 0 : seats.map(({ height, width, x, y, id }, i) => (<rect x={x} y={y} key={`${id}-seat-${i}`} id={`seat-${id}`} height={height} width={width} rx={radius / 4} fill={seatFill}/>))}
+              </g>
+              <g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
+                {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
+                        var _a, _b, _c, _d, _e, _f, _g;
+                        const cx = width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0);
+                        const cy = height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0);
+                        return (<text {...omit(commonProps, [
+                            "opacity",
+                            "stroke",
+                            "strokeWidth",
+                        ])} transform={`rotate(${(_c = _ === null || _ === void 0 ? void 0 : _.rotation) !== null && _c !== void 0 ? _c : 0}, ${cx},${cy})`} key={`${id}-label-${index}`} x={width / 2 + ((_d = _ === null || _ === void 0 ? void 0 : _.x) !== null && _d !== void 0 ? _d : 0)} y={height / 2 + ((_e = _ === null || _ === void 0 ? void 0 : _.y) !== null && _e !== void 0 ? _e : 0)} fill={(_f = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _f !== void 0 ? _f : "black"} fontSize={`${(_g = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _g !== void 0 ? _g : 10}px`} fontWeight="bold" textAnchor="middle" dominantBaseline="middle">
+                      {_ === null || _ === void 0 ? void 0 : _.label}
+                    </text>);
+                    })}
+              </g>
+            </g>
+          </g>);
+            }
+            case "table-seat-square": {
+                const openSpace = item.openSpace || 0; // from 0 to 0.9
+                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 seatCountTopBottom = Math.ceil(Math.max(topCount, bottomCount) / 2);
+                const seatCountLeftRight = Math.ceil(Math.max(leftCount, rightCount) / 2);
+                const availableWidth = width * (1 - openSpace);
+                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 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 (<g key={id} data-id={id} transform={`translate(${x}, ${y})`}>
+            <g transform={`rotate(${rotation}, 0, 0)`}>
+              {/* Square Table */}
+              <rect width={width} height={height} {...commonProps} rx={radius} fill={fill}/>
+              {/* Seats */}
+              <g 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>
+              <g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
+                {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
+                        var _a, _b, _c, _d, _e, _f, _g;
+                        const cx = width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0);
+                        const cy = height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0);
+                        return (<text {...omit(commonProps, [
+                            "opacity",
+                            "stroke",
+                            "strokeWidth",
+                        ])} transform={`rotate(${(_c = _ === null || _ === void 0 ? void 0 : _.rotation) !== null && _c !== void 0 ? _c : 0}, ${cx},${cy})`} key={`${id}-label-${index}`} x={width / 2 + ((_d = _ === null || _ === void 0 ? void 0 : _.x) !== null && _d !== void 0 ? _d : 0)} y={height / 2 + ((_e = _ === null || _ === void 0 ? void 0 : _.y) !== null && _e !== void 0 ? _e : 0)} fill={(_f = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _f !== void 0 ? _f : "black"} fontSize={`${(_g = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _g !== void 0 ? _g : 10}px`} fontWeight="bold" textAnchor="middle" dominantBaseline="middle">
+                      {_ === null || _ === void 0 ? void 0 : _.label}
+                    </text>);
+                    })}
+              </g>
+            </g>
+          </g>);
+            }
+            case "table-seat-half-square": {
+                const openSpace = item.openSpace || 0;
+                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;
+                // split seats evenly on top and bottom
+                const seatCountTopBottom = Math.ceil(Math.max(top, bottom) / 2);
+                const seatCountLeftRight = Math.ceil(Math.max(left, left) / 2);
+                const availableWidth = width * (1 - openSpace);
+                const availableHeight = height * (1 - openSpace);
+                const spacingWidth = availableWidth / seatCountTopBottom;
+                const spacingHeight = availableHeight / seatCountLeftRight;
+                const topSeats = distributeWithSpacing({
+                    start: 0,
+                    length: width,
+                    count: top,
+                    radius: seatRadius,
+                    spacing: spacingWidth,
+                }).map((cx) => ({ cx, cy: seatRadius * 0.1, id: "top" }));
+                const bottomSeats = distributeWithSpacing({
+                    start: 0,
+                    length: width,
+                    count: bottom,
+                    radius: seatRadius,
+                    spacing: spacingWidth,
+                }).map((cx) => ({
+                    cx,
+                    cy: height - seatRadius * 0.1,
+                    id: "bottom",
+                }));
+                const leftSeats = distributeWithSpacing({
+                    start: 0,
+                    length: height,
+                    count: left,
+                    radius: seatRadius,
+                    spacing: spacingHeight,
+                }).map((cy) => ({ cx: seatRadius * 0.1, cy, id: "left" }));
+                const rightSeats = distributeWithSpacing({
+                    start: 0,
+                    length: height,
+                    count: right,
+                    radius: seatRadius,
+                    spacing: spacingHeight,
+                }).map((cy) => ({ cx: 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,
+                    }) })));
+                return (<g key={id} transform={`translate(${x}, ${y})`} data-id={id}>
+            <g transform={`rotate(${rotation}, 0, 0)`}>
+              {/* Seats */}
+              <rect width={width} height={height} rx={radius} {...commonProps} fill={fill}/>
+              <g key={`${id}-seats`} data-seat={`${id}-seats`}>
+                {seats === null || seats === void 0 ? void 0 : seats.map(({ d, id }, i) => (<path key={`${id}-seat-${i}`} id={`seat-${id}`} d={d} fill="white"/>))}
+              </g>
+              <g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
+                {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
+                        var _a, _b, _c, _d, _e, _f, _g;
+                        const cx = width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0);
+                        const cy = height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0);
+                        return (<text {...omit(commonProps, [
+                            "opacity",
+                            "stroke",
+                            "strokeWidth",
+                        ])} transform={`rotate(${(_c = _ === null || _ === void 0 ? void 0 : _.rotation) !== null && _c !== void 0 ? _c : 0}, ${cx},${cy})`} key={`${id}-label-${index}`} x={width / 2 + ((_d = _ === null || _ === void 0 ? void 0 : _.x) !== null && _d !== void 0 ? _d : 0)} y={height / 2 + ((_e = _ === null || _ === void 0 ? void 0 : _.y) !== null && _e !== void 0 ? _e : 0)} fill={(_f = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _f !== void 0 ? _f : "black"} fontSize={`${(_g = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _g !== void 0 ? _g : 10}px`} fontWeight="bold" textAnchor="middle" dominantBaseline="middle">
+                      {_ === null || _ === void 0 ? void 0 : _.label}
+                    </text>);
+                    })}
+              </g>
+            </g>
+          </g>);
+            }
+            case "table-seat-rect-square": {
+                const clamp = (v, min, max) => Math.max(min, Math.min(max, v));
+                const base = clamp(Math.min(width, height) * 0.08, 12, 28);
+                const seatSizeTB = {
+                    w: base * 1.8, // lebih panjang
+                    h: base * 0.9, // lebih tipis
+                };
+                const seatSizeLR = {
+                    w: base * 0.9, // lebih tipis
+                    h: base * 1.8, // lebih panjang
+                };
+                const openSpace = item.openSpace || 0;
+                const seatRadius = Math.min(width, height) * 0.2;
+                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;
+                // split seats evenly on top and bottom
+                const seatCountTopBottom = Math.ceil(Math.max(top, bottom) / 2);
+                const seatCountLeftRight = Math.ceil(Math.max(left, left) / 2);
+                const availableWidth = width * (1 - openSpace);
+                const availableHeight = height * (1 - openSpace);
+                const spacingWidth = availableWidth / seatCountTopBottom;
+                const spacingHeight = availableHeight / seatCountLeftRight;
+                const topSeats = distributeWithSpacing({
+                    start: x,
+                    length: width,
+                    count: top,
+                    radius: seatRadius,
+                    spacing: spacingWidth,
+                }).map((cx) => ({
+                    x: cx - seatSizeTB.w / 2,
+                    y: y - seatSizeTB.h,
+                    width: seatSizeTB.w,
+                    height: seatSizeTB.h,
+                    id: "top",
+                }));
+                const bottomSeats = distributeWithSpacing({
+                    start: x,
+                    length: width,
+                    count: bottom,
+                    radius: seatRadius,
+                    spacing: spacingWidth,
+                }).map((cx) => ({
+                    x: cx - seatSizeTB.w / 2,
+                    y: y + height,
+                    width: seatSizeTB.w,
+                    height: seatSizeTB.h,
+                    id: "bottom",
+                }));
+                const leftSeats = distributeWithSpacing({
+                    start: 0,
+                    length: height,
+                    count: left,
+                    radius: seatRadius,
+                    spacing: spacingHeight,
+                }).map((cy) => ({
+                    x: x - seatSizeLR.w,
+                    y: y + cy - seatSizeLR.h / 2,
+                    width: seatSizeLR.w,
+                    height: seatSizeLR.h,
+                    id: "left",
+                }));
+                const rightSeats = distributeWithSpacing({
+                    start: 0,
+                    length: height,
+                    count: right,
+                    radius: seatRadius,
+                    spacing: spacingHeight,
+                }).map((cy) => ({
+                    x: x + width,
+                    y: y + cy - seatSizeLR.h / 2,
+                    width: seatSizeLR.w,
+                    height: seatSizeLR.h,
+                    id: "right",
+                }));
+                const seats = [
+                    ...topSeats,
+                    ...bottomSeats,
+                    ...leftSeats,
+                    ...rightSeats,
+                ];
+                return (<g key={id} transform={`translate(${x}, ${y})`} data-id={id}>
+            <g transform={`rotate(${rotation}, 0, 0)`}>
+              {/* Seats */}
+              <rect width={width} height={height} rx={radius} {...commonProps} fill={fill}/>
+              <g key={`${id}-seats`} data-seat={`${id}-seats`} transform={`translate(${-x}, ${-y})`}>
+                {seats === null || seats === void 0 ? void 0 : seats.map(({ height, width, x, y, id }, i) => (<rect x={x} y={y} key={`${id}-seat-${i}`} id={`seat-${id}`} height={height} width={width} rx={radius / 4} fill={seatFill}/>))}
+              </g>
+              <g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
+                {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
+                        var _a, _b, _c, _d, _e, _f, _g;
+                        const cx = width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0);
+                        const cy = height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0);
+                        return (<text {...omit(commonProps, [
+                            "opacity",
+                            "stroke",
+                            "strokeWidth",
+                        ])} transform={`rotate(${(_c = _ === null || _ === void 0 ? void 0 : _.rotation) !== null && _c !== void 0 ? _c : 0}, ${cx},${cy})`} key={`${id}-label-${index}`} x={width / 2 + ((_d = _ === null || _ === void 0 ? void 0 : _.x) !== null && _d !== void 0 ? _d : 0)} y={height / 2 + ((_e = _ === null || _ === void 0 ? void 0 : _.y) !== null && _e !== void 0 ? _e : 0)} fill={(_f = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _f !== void 0 ? _f : "black"} fontSize={`${(_g = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _g !== void 0 ? _g : 10}px`} fontWeight="bold" textAnchor="middle" dominantBaseline="middle">
+                      {_ === null || _ === void 0 ? void 0 : _.label}
+                    </text>);
+                    })}
+              </g>
+            </g>
+          </g>);
+            }
+            case "text":
+                return (<g key={id} data-id={id} transform={`translate(${x}, ${y})`}>
+            <g transform={`rotate(${rotation}, 0, 0)`}>
+              <rect width={width} height={height} fill="transparent" opacity={opacity}/>
+              <text x={width / 2} y={height / 2} textAnchor="middle" dominantBaseline="middle" fill={fill !== null && fill !== void 0 ? fill : fontColor} fontSize={fontSize !== null && fontSize !== void 0 ? fontSize : height * 0.6} opacity={opacity} {...omit(commonProps, ["fill", "opacity"])}>
+                {text}
+              </text>
+            </g>
+          </g>);
+            case "image-table":
+            case "background":
+                return (<g key={id} id={id} data-id={id} transform={`translate(${x}, ${y})`} style={{
+                        pointerEvents: lockBackground ? "none" : "auto",
+                    }}>
+            <g transform={`rotate(${rotation}, 0, 0)`}>
+              <image href={src} width={width} height={height} {...commonProps}/>
+              <g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
+                {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
+                        var _a, _b, _c, _d, _e, _f, _g;
+                        const cx = width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0);
+                        const cy = height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0);
+                        return (<text {...omit(commonProps, [
+                            "opacity",
+                            "stroke",
+                            "strokeWidth",
+                        ])} transform={`rotate(${(_c = _ === null || _ === void 0 ? void 0 : _.rotation) !== null && _c !== void 0 ? _c : 0}, ${cx},${cy})`} key={`${id}-label-${index}`} x={width / 2 + ((_d = _ === null || _ === void 0 ? void 0 : _.x) !== null && _d !== void 0 ? _d : 0)} y={height / 2 + ((_e = _ === null || _ === void 0 ? void 0 : _.y) !== null && _e !== void 0 ? _e : 0)} fill={(_f = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _f !== void 0 ? _f : "black"} fontSize={`${(_g = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _g !== void 0 ? _g : 10}px`} fontWeight="bold" textAnchor="middle" dominantBaseline="middle">
+                      {_ === null || _ === void 0 ? void 0 : _.label}
+                    </text>);
+                    })}
+              </g>
+            </g>
+          </g>);
+            case "bounding-box": {
+                return (<g key={id} transform={`translate(${x}, ${y})`} data-bounding-box={id}>
+            <rect width={width} height={height} fill="none" stroke="#3b82f6" strokeWidth={1} strokeDasharray="6 4" pointerEvents="none"/>
+          </g>);
+            }
+            default:
+                return <g key={id}/>;
+        }
+    };
+    let date = new Date();
+    const nodesRaw = rectToPolygonNodes(selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.width, selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.height);
+    return (<g key={`${date}`} id="selection-layer">
+      {components === null || components === void 0 ? void 0 : components.map(renderShape)}
+      {!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(${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(${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;

package/dist/components/layer-v3/utils.d.ts

@@ -0,0 +1,19 @@
+export declare function rectToPolygonPoints(x: number, y: number, width: number, height: number): string;
+export declare function rectToPolygonNodes(width: number, height: number): {
+    x: number;
+    y: number;
+}[];
+export declare function distributeWithSpacing({ start, length, count, radius, spacing, }: {
+    start: number;
+    length: number;
+    count: number;
+    radius: number;
+    spacing?: number;
+}): number[];
+export declare const arcByDirection: ({ cx, cy, r, direction, fraction, }: {
+    cx: number;
+    cy: number;
+    r: number;
+    direction?: string;
+    fraction?: number;
+}) => string;