seat-editor 3.3.13 → 3.3.15

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

@@ -0,0 +1,1046 @@
+"use client";
+import { isEmpty, omit } from "lodash";
+import { arcByDirection, distributeWithSpacing } from "../layer-v3/utils";
+import { PRIVILEGED_TAGS, tagsDummy } from "./constant";
+import { useAppSelector } from "../../hooks/use-redux";
+import { RsvpIcons } from "../../features/board-v3/icons";
+const toKebabCase = (str) => str.replace(/[A-Z]/g, (m) => "-" + m.toLowerCase());
+const iconNames = [
+    "upcoming",
+    "late",
+    "overtime",
+    "overlapping",
+    "hold",
+    "reserved",
+    "armchair",
+    "cheque",
+    "people",
+];
+const dummyIconTags = iconNames === null || iconNames === void 0 ? void 0 : iconNames.map((item) => {
+    const Icon = RsvpIcons === null || RsvpIcons === void 0 ? void 0 : RsvpIcons[item];
+    return {
+        key: item,
+        icon: <Icon />,
+    };
+});
+const getIconFromId = (data) => {
+    const id = String(data);
+    let hash = 0;
+    for (let i = 0; i < id.length; i++) {
+        hash += id.charCodeAt(i);
+    }
+    return iconNames[hash % iconNames.length];
+};
+const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighlightGroup, onForceRestoreGroup, selectedTableColor, privilegedTags = [], }) => {
+    const { isShowTagType } = useAppSelector((state) => state.board);
+    const showLabels = !["type-1", "type-2"].includes(isShowTagType) && !iconTags;
+    const renderShape = (item) => {
+        var _a, _b, _c, _d, _e, _f;
+        const { id, x, y, width, height, fill, opacity, rotate = 0, rotation, shape, text, stroke, strokeWidth, labels, fontSize, fontColor, seatFill, src, tags, gapTags, label, points, seatPositions, radius, } = item;
+        const renderTags = (data) => {
+            var _a;
+            const tags = data !== null && data !== void 0 ? data : tagsDummy(((_a = labels === null || labels === void 0 ? void 0 : labels[0]) === null || _a === void 0 ? void 0 : _a.label) || "Table", getIconFromId(id));
+            const privileged = !isEmpty(privilegedTags)
+                ? privilegedTags
+                : isShowTagType === "type-1"
+                    ? PRIVILEGED_TAGS["CURRENT_TIME"]
+                    : isShowTagType === "type-2"
+                        ? PRIVILEGED_TAGS["NEXT_3_RESERVATION"]
+                        : undefined;
+            if (tags && (tags === null || tags === void 0 ? void 0 : tags.length) > 0) {
+                const gapBetweenTags = Number(gapTags || 20);
+                const defaultFontSize = Number(fontSize || 12);
+                // Hitung total tinggi semua grup tag (buat center vertikal)
+                const totalTagHeight = (tags === null || tags === void 0 ? void 0 : tags.filter((tag) => privileged === null || privileged === void 0 ? void 0 : privileged.find((p) => p.key === tag.key)).reduce((sum, tag) => {
+                    var _a;
+                    const items = tag.items || [];
+                    const isColumn = (_a = tag.direction) === null || _a === void 0 ? void 0 : _a.includes("column");
+                    const tagHeight = isColumn
+                        ? items.length * defaultFontSize + 2 * (Number(tag.gap) || 2)
+                        : defaultFontSize; // horizontal = 1 line
+                    return sum + tagHeight + gapBetweenTags;
+                }, 0)) - gapBetweenTags;
+                const startY = Number(height) / 4 - totalTagHeight / 3; // titik awal supaya semua di tengah
+                let currentY = startY;
+                return tags
+                    .filter((tag) => privileged === null || privileged === void 0 ? void 0 : privileged.find((p) => p.key === tag.key))
+                    .map((tag, tagIndex) => {
+                    var _a;
+                    const itemsPriv = privileged[tagIndex].items;
+                    const direction = ((_a = tag.direction) === null || _a === void 0 ? void 0 : _a.includes("column"))
+                        ? "column"
+                        : "flex";
+                    const gap = Number(tag.gap || 2);
+                    const items = tag.items || [];
+                    const fontSize = Number(defaultFontSize);
+                    const isColumn = direction === "column";
+                    const groupHeight = isColumn
+                        ? items.length * fontSize + 2 * gap
+                        : fontSize;
+                    const centerX = width / 2;
+                    const centerY = currentY + groupHeight;
+                    // naikkan posisi Y untuk grup berikutnya
+                    currentY += groupHeight + gapBetweenTags;
+                    const elements = items
+                        .filter((item) => itemsPriv.includes(item.type))
+                        .map((item, i) => {
+                        var _a, _b;
+                        const offsetY = isColumn
+                            ? i * (fontSize + gap) - groupHeight / 2 + fontSize / 2
+                            : 0;
+                        const offsetX = !isColumn
+                            ? i * (fontSize + gap) - (1 * (fontSize + gap)) / 2
+                            : 0;
+                        const posX = centerX + offsetX + Number((_a = tag.offsetX) !== null && _a !== void 0 ? _a : 0);
+                        const posY = centerY + offsetY + Number((_b = tag.offsetY) !== null && _b !== void 0 ? _b : 0);
+                        const renderSymbol = (symbol) => {
+                            if (!symbol)
+                                return null;
+                            const { position = "right", size = (item === null || item === void 0 ? void 0 : item.fontSize) || Number(fontSize), gap: symbolGap = 0, } = symbol;
+                            const sizeFont = (item === null || item === void 0 ? void 0 : item.fontSize) || Number(fontSize) / 3;
+                            let offsetSymbolX = 0;
+                            let offsetSymbolY = 0;
+                            switch (position) {
+                                case "right":
+                                    offsetSymbolX = size + symbolGap;
+                                    break;
+                                case "left":
+                                    offsetSymbolX = -(size + symbolGap);
+                                    break;
+                                case "top":
+                                    offsetSymbolY = -(size + symbolGap);
+                                    break;
+                                case "bottom":
+                                    offsetSymbolY = size + symbolGap;
+                                    break;
+                                case "right-top":
+                                    offsetSymbolX = size + symbolGap;
+                                    offsetSymbolY = -(size / 4);
+                                    break;
+                                case "right-bottom":
+                                    offsetSymbolX = size + symbolGap;
+                                    offsetSymbolY = size / 4;
+                                    break;
+                                case "left-top":
+                                    offsetSymbolX = -size - symbolGap;
+                                    offsetSymbolY = -(size / 4);
+                                    break;
+                                case "left-bottom":
+                                    offsetSymbolX = -size - symbolGap;
+                                    offsetSymbolY = size / 4;
+                                    break;
+                            }
+                            return (<tspan {...symbol} key={`symbol-${tagIndex}-${i}`} x={posX + offsetSymbolX} y={posY + offsetSymbolY} textAnchor="middle" dominantBaseline="middle" fontSize={`${sizeFont}px`}>
+                      {symbol.value}
+                    </tspan>);
+                        };
+                        if (item.type === "icon") {
+                            const icons = iconTags !== null && iconTags !== void 0 ? iconTags : dummyIconTags;
+                            const iconTag = icons === null || icons === void 0 ? void 0 : icons.find((icon) => icon.key === item.value);
+                            if (!iconTag)
+                                return null;
+                            return (<g {...item} key={`icon-${tagIndex}-${i}`} transform={`translate(${posX - 10}, ${posY - 10})`}>
+                      {iconTag.icon}
+                    </g>);
+                        }
+                        if (item.type === "text") {
+                            return (<text {...item} key={`text-${tagIndex}-${i}`} x={posX} y={posY} textAnchor="middle" dominantBaseline="middle" fontSize={(Number(defaultFontSize) * 3) / 4}>
+                      {item.value} {renderSymbol(item === null || item === void 0 ? void 0 : item.symbol)}
+                    </text>);
+                        }
+                        return null;
+                    });
+                    return (<g key={`group-${tagIndex}`} pointerEvents="none">
+                {elements}
+              </g>);
+                });
+            }
+        };
+        let commonProps = {
+            fill,
+            opacity,
+            stroke,
+            strokeWidth,
+        };
+        const hasSelected = (selectedTable === null || selectedTable === void 0 ? void 0 : selectedTable.id) === id;
+        if (hasSelected) {
+            const eventSelectedStyles = eventMatchTable === null || eventMatchTable === void 0 ? void 0 : eventMatchTable.find((style) => style.event === "selected");
+            commonProps = Object.assign(Object.assign({}, commonProps), eventSelectedStyles === null || eventSelectedStyles === void 0 ? void 0 : eventSelectedStyles.properties);
+        }
+        // helper: highlight / unhighlight dengan enter-counter
+        let properties = {};
+        const highlightGroup = (group, eventType) => {
+            if (!group)
+                return;
+            onHighlightGroup === null || onHighlightGroup === void 0 ? void 0 : onHighlightGroup(group, eventType);
+            eventMatchTable === null || eventMatchTable === void 0 ? void 0 : eventMatchTable.forEach((styleConfig) => {
+                if (styleConfig.event === eventType) {
+                    properties = omit(styleConfig.properties || {}, "points");
+                    const hasStroke = (properties === null || properties === void 0 ? void 0 : properties.stroke) || (commonProps === null || commonProps === void 0 ? void 0 : commonProps.stroke);
+                    const hasStrokeWidth = properties === null || properties === void 0 ? void 0 : properties.strokeWidth;
+                    if (hasStrokeWidth && !hasStroke) {
+                        properties.stroke = "#E1E3EA";
+                    }
+                }
+            });
+            if (isEmpty(properties))
+                return;
+            // counter
+            const count = Number(group.dataset.dragEnterCount || "0") + 1;
+            group.dataset.dragEnterCount = String(count);
+            // selalu ubah warna, tapi simpan original hanya sekali
+            ["rect", "circle"].forEach((selector) => {
+                const el = group.querySelector(selector);
+                if (!el)
+                    return;
+                Object.entries(properties).forEach(([key]) => {
+                    el.dataset[key] = el.getAttribute(key) || "";
+                });
+                Object.entries(properties).forEach(([key, value]) => {
+                    el.setAttribute(toKebabCase(key), value);
+                });
+            });
+        };
+        const unhighlightGroup = (group) => {
+            if (!group)
+                return;
+            const count = Math.max(0, Number(group.dataset.dragEnterCount || "0") - 1);
+            group.dataset.dragEnterCount = String(count);
+            // restore hanya saat counter = 0
+            if (count === 0) {
+                ["rect", "circle"].forEach((selector) => {
+                    const el = group.querySelector(selector);
+                    if (!el)
+                        return;
+                    // bersihkan data
+                    const dataset = el.dataset;
+                    Object.entries(dataset).forEach(([key, value]) => {
+                        el.setAttribute(toKebabCase(key), value);
+                        delete el.dataset[key];
+                        properties = {};
+                    });
+                });
+                delete group.dataset.dragEnterCount;
+            }
+        };
+        const forceRestoreGroup = (group, type) => {
+            // langsung restore (dipanggil pada drop)
+            onForceRestoreGroup === null || onForceRestoreGroup === void 0 ? void 0 : onForceRestoreGroup(group, type);
+            ["rect", "circle"].forEach((selector) => {
+                const el = group === null || group === void 0 ? void 0 : group.querySelector(selector);
+                if (!el)
+                    return;
+                const dataset = el.dataset;
+                Object.entries(dataset).forEach(([key, value]) => {
+                    el.setAttribute(toKebabCase(key), value);
+                    delete el.dataset[key];
+                    properties = {};
+                });
+            });
+            delete group.dataset.dragEnterCount;
+        };
+        const transformRotate = `rotate(${rotate} ${x + width / 2} ${y + height / 2})`;
+        switch (shape) {
+            case "square":
+                return (<g key={id} id={id} data-id={id} transform={`translate(${x}, ${y})`} style={{ pointerEvents: "all" }} onContextMenu={(e) => e.preventDefault()} onDragEnter={(e) => {
+                        const group = e.currentTarget;
+                        highlightGroup(group, "dragenter");
+                    }} onDragOver={(e) => {
+                        e.preventDefault(); // agar drop diterima
+                    }} onDragLeave={(e) => {
+                        const group = e.currentTarget;
+                        unhighlightGroup(group);
+                    }} onDrop={(e) => {
+                        const group = e.currentTarget;
+                        // restore langsung dan reset
+                        forceRestoreGroup(group, "drop");
+                    }} onPointerOver={(e) => {
+                        // e.preventDefault(); // penting
+                        const group = e.currentTarget;
+                        highlightGroup(group, "pointerover");
+                    }} onPointerOut={(e) => {
+                        const group = e.currentTarget;
+                        unhighlightGroup(group);
+                    }} onPointerUp={(e) => {
+                        const group = e.currentTarget;
+                        // restore langsung dan reset
+                        forceRestoreGroup(group, "pointerup");
+                    }} onPointerDown={(e) => {
+                        const group = e.currentTarget;
+                        highlightGroup(group, "pointerdown");
+                    }} 
+                // onPointerEnter={(e) => {
+                //   const group = e.currentTarget as SVGGElement;
+                //   highlightGroup(group, "pointerenter");
+                // }}
+                onPointerLeave={(e) => {
+                        const group = e.currentTarget;
+                        unhighlightGroup(group);
+                    }} onMouseEnter={(e) => {
+                        // e.preventDefault(); // penting
+                        const group = e.currentTarget;
+                        highlightGroup(group, "mouseenter");
+                    }} onMouseLeave={(e) => {
+                        const group = e.currentTarget;
+                        unhighlightGroup(group);
+                    }}>
+            <g transform={`rotate(${rotation}, 0,0)`}>
+              <rect key={`${id}-rect`} width={width} height={height} fill={fill} rx={radius} {...omit(item, ["x", "y", "label", "points", "tags"])} {...commonProps}/>
+              {renderTags(tags)}
+              {showLabels && (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`} pointerEvents="none">
+                  {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 pointerEvents="none" {...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":
+                const finalPoint = points.map((p) => `${p.x},${p.y}`).join(" ");
+                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"/>
+            </g>
+          </g>);
+            case "circle":
+                return (<g key={id} style={{ pointerEvents: "all" }} data-id={id} transform={`translate(${x}, ${y})`} onContextMenu={(e) => e.preventDefault()} onDragEnter={(e) => {
+                        e.preventDefault(); // penting
+                        const group = e.currentTarget;
+                        highlightGroup(group, "dragenter");
+                    }} onDragOver={(e) => {
+                        e.preventDefault(); // agar drop diterima
+                    }} onDragLeave={(e) => {
+                        const group = e.currentTarget;
+                        unhighlightGroup(group);
+                    }} onDrop={(e) => {
+                        e.preventDefault();
+                        const group = e.currentTarget;
+                        // restore langsung dan reset
+                        forceRestoreGroup(group);
+                    }} onPointerOver={(e) => {
+                        e.preventDefault(); // penting
+                        const group = e.currentTarget;
+                        highlightGroup(group, "pointerover");
+                    }} onPointerOut={(e) => {
+                        const group = e.currentTarget;
+                        unhighlightGroup(group);
+                    }} onPointerUp={(e) => {
+                        e.preventDefault();
+                        const group = e.currentTarget;
+                        // restore langsung dan reset
+                        forceRestoreGroup(group);
+                    }} onMouseDown={(e) => {
+                        e.preventDefault();
+                        const group = e.currentTarget;
+                        highlightGroup(group, "mousedown");
+                    }} onMouseEnter={(e) => {
+                        // e.preventDefault(); // penting
+                        const group = e.currentTarget;
+                        highlightGroup(group, "mouseenter");
+                    }} onMouseLeave={(e) => {
+                        const group = e.currentTarget;
+                        unhighlightGroup(group);
+                    }}>
+            {" "}
+            <g transform={`rotate(${-rotation}, 0, 0)`}>
+              <circle key={id} cx={width / 2} cy={height / 2} r={Math.min(height, width) / 2} fill={fill} {...commonProps} {...omit(item, ["x", "y", "label", "points", "tags"])}/>
+              {renderTags(tags)}
+              {showLabels && (<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-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} style={{ pointerEvents: "all" }} data-id={id} id={id} transform={`translate(${x}, ${y})`} onContextMenu={(e) => e.preventDefault()} onDragEnter={(e) => {
+                        e.preventDefault(); // penting
+                        const group = e.currentTarget;
+                        highlightGroup(group, "dragenter");
+                    }} onDragOver={(e) => {
+                        e.preventDefault(); // agar drop diterima
+                    }} onDragLeave={(e) => {
+                        const group = e.currentTarget;
+                        unhighlightGroup(group);
+                    }} onDrop={(e) => {
+                        e.preventDefault();
+                        const group = e.currentTarget;
+                        // restore langsung dan reset
+                        forceRestoreGroup(group);
+                    }} onPointerOver={(e) => {
+                        e.preventDefault(); // penting
+                        const group = e.currentTarget;
+                        highlightGroup(group, "pointerover");
+                    }} onPointerOut={(e) => {
+                        const group = e.currentTarget;
+                        unhighlightGroup(group);
+                    }} onPointerUp={(e) => {
+                        e.preventDefault();
+                        const group = e.currentTarget;
+                        // restore langsung dan reset
+                        forceRestoreGroup(group);
+                    }} onMouseDown={(e) => {
+                        e.preventDefault();
+                        const group = e.currentTarget;
+                        highlightGroup(group, "mousedown");
+                    }} onMouseEnter={(e) => {
+                        // e.preventDefault(); // penting
+                        const group = e.currentTarget;
+                        highlightGroup(group, "mouseenter");
+                    }} onMouseLeave={(e) => {
+                        const group = e.currentTarget;
+                        unhighlightGroup(group);
+                    }}>
+            <g transform={`rotate(${rotation}, 0, 0)`}>
+              <circle cx={centerX} cy={centerY} r={tableRadius} fill={selectedTableColor !== null && selectedTableColor !== void 0 ? selectedTableColor : fill} {...omit(item, ["x", "y", "label", "points", "tags"])} {...commonProps}/>
+              <g data-seat={`${id}-seats`}>
+                {seatCircles.map(({ cx, cy }, i) => (<circle key={`${id}-seat-${i}`} cx={cx} cy={cy} r={seatRadius} fill={seatFill} className={item === null || item === void 0 ? void 0 : item.className}/>))}
+              </g>
+
+              {renderTags(tags)}
+              {showLabels && (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
+                  {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
+                            var _a, _b, _c, _d;
+                            return (<text key={`${id}-label-${index}`} x={x + width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0)} y={y + height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0)} fill={(_c = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _c !== void 0 ? _c : "black"} fontSize={`${(_d = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _d !== void 0 ? _d : 10}px`} fontWeight="bold" textAnchor="middle" dominantBaseline="middle" transform={transformRotate}>
+                        {_ === 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} onContextMenu={(e) => e.preventDefault()} onDragEnter={(e) => {
+                        e.preventDefault(); // penting
+                        const group = e.currentTarget;
+                        highlightGroup(group, "dragenter");
+                    }} onDragOver={(e) => {
+                        e.preventDefault(); // agar drop diterima
+                    }} onDragLeave={(e) => {
+                        const group = e.currentTarget;
+                        unhighlightGroup(group);
+                    }} onDrop={(e) => {
+                        e.preventDefault();
+                        const group = e.currentTarget;
+                        // restore langsung dan reset
+                        forceRestoreGroup(group);
+                    }} onPointerOver={(e) => {
+                        e.preventDefault(); // penting
+                        const group = e.currentTarget;
+                        highlightGroup(group, "pointerover");
+                    }} onPointerOut={(e) => {
+                        const group = e.currentTarget;
+                        unhighlightGroup(group);
+                    }} onPointerUp={(e) => {
+                        e.preventDefault();
+                        const group = e.currentTarget;
+                        // restore langsung dan reset
+                        forceRestoreGroup(group);
+                    }} onMouseDown={(e) => {
+                        e.preventDefault();
+                        const group = e.currentTarget;
+                        highlightGroup(group, "mousedown");
+                    }} onMouseEnter={(e) => {
+                        // e.preventDefault(); // penting
+                        const group = e.currentTarget;
+                        highlightGroup(group, "mouseenter");
+                    }} onMouseLeave={(e) => {
+                        const group = e.currentTarget;
+                        unhighlightGroup(group);
+                    }}>
+            <g transform={`rotate(${rotation}, 0, 0)`}>
+              {/* Seats */}
+              <circle cx={width / 2} cy={height / 2} r={tableRadius} fill={fill} {...omit(item, ["x", "y", "label", "points", "tags"])} {...commonProps}/>
+              <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} className={item === null || item === void 0 ? void 0 : item.className}/>))}
+              </g>
+              {renderTags(tags)}
+              {showLabels && (<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})`} onContextMenu={(e) => e.preventDefault()} onDragEnter={(e) => {
+                        e.preventDefault(); // penting
+                        const group = e.currentTarget;
+                        highlightGroup(group, "dragenter");
+                    }} onDragOver={(e) => {
+                        e.preventDefault(); // agar drop diterima
+                    }} onDragLeave={(e) => {
+                        const group = e.currentTarget;
+                        unhighlightGroup(group);
+                    }} onDrop={(e) => {
+                        e.preventDefault();
+                        const group = e.currentTarget;
+                        // restore langsung dan reset
+                        forceRestoreGroup(group);
+                    }} onPointerOver={(e) => {
+                        e.preventDefault(); // penting
+                        const group = e.currentTarget;
+                        highlightGroup(group, "pointerover");
+                    }} onPointerOut={(e) => {
+                        const group = e.currentTarget;
+                        unhighlightGroup(group);
+                    }} onPointerUp={(e) => {
+                        e.preventDefault();
+                        const group = e.currentTarget;
+                        // restore langsung dan reset
+                        forceRestoreGroup(group);
+                    }} onMouseDown={(e) => {
+                        e.preventDefault();
+                        const group = e.currentTarget;
+                        highlightGroup(group, "mousedown");
+                    }} onMouseEnter={(e) => {
+                        // e.preventDefault(); // penting
+                        const group = e.currentTarget;
+                        highlightGroup(group, "mouseenter");
+                    }} onMouseLeave={(e) => {
+                        const group = e.currentTarget;
+                        unhighlightGroup(group);
+                    }}>
+            <g transform={`rotate(${rotate}, 0, 0)`}>
+              {/* Square Table */}
+              <rect width={width} height={height} {...commonProps} fill={selectedTableColor !== null && selectedTableColor !== void 0 ? selectedTableColor : fill} {...omit(item, ["x", "y", "label", "points", "tags"])}/>
+              {renderTags(tags)}
+
+              {/* 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} className={item === null || item === void 0 ? void 0 : item.className}/>))}
+              </g>
+              {showLabels && (<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} onContextMenu={(e) => e.preventDefault()} onDragEnter={(e) => {
+                        e.preventDefault(); // penting
+                        const group = e.currentTarget;
+                        highlightGroup(group, "dragenter");
+                    }} onDragOver={(e) => {
+                        e.preventDefault(); // agar drop diterima
+                    }} onDragLeave={(e) => {
+                        const group = e.currentTarget;
+                        unhighlightGroup(group);
+                    }} onDrop={(e) => {
+                        e.preventDefault();
+                        const group = e.currentTarget;
+                        // restore langsung dan reset
+                        forceRestoreGroup(group);
+                    }} onPointerOver={(e) => {
+                        e.preventDefault(); // penting
+                        const group = e.currentTarget;
+                        highlightGroup(group, "pointerover");
+                    }} onPointerOut={(e) => {
+                        const group = e.currentTarget;
+                        unhighlightGroup(group);
+                    }} onPointerUp={(e) => {
+                        e.preventDefault();
+                        const group = e.currentTarget;
+                        // restore langsung dan reset
+                        forceRestoreGroup(group);
+                    }} onMouseDown={(e) => {
+                        e.preventDefault();
+                        const group = e.currentTarget;
+                        highlightGroup(group, "mousedown");
+                    }} onMouseEnter={(e) => {
+                        // e.preventDefault(); // penting
+                        const group = e.currentTarget;
+                        highlightGroup(group, "mouseenter");
+                    }} onMouseLeave={(e) => {
+                        const group = e.currentTarget;
+                        unhighlightGroup(group);
+                    }}>
+            <g transform={`rotate(${rotation}, 0, 0)`}>
+              {/* Seats */}
+              <rect width={width} height={height} rx={radius} {...commonProps} fill={fill} {...omit(item, ["x", "y", "label", "points", "tags"])}/>
+              <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" className={item === null || item === void 0 ? void 0 : item.className}/>))}
+              </g>
+              {renderTags(tags)}
+              {showLabels && (<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: 0,
+                    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: 0,
+                    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: -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: 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} onContextMenu={(e) => e.preventDefault()} onDragEnter={(e) => {
+                        e.preventDefault(); // penting
+                        const group = e.currentTarget;
+                        highlightGroup(group, "dragenter");
+                    }} onDragOver={(e) => {
+                        e.preventDefault(); // agar drop diterima
+                    }} onDragLeave={(e) => {
+                        const group = e.currentTarget;
+                        unhighlightGroup(group);
+                    }} onDrop={(e) => {
+                        e.preventDefault();
+                        const group = e.currentTarget;
+                        // restore langsung dan reset
+                        forceRestoreGroup(group);
+                    }} onPointerOver={(e) => {
+                        e.preventDefault(); // penting
+                        const group = e.currentTarget;
+                        highlightGroup(group, "pointerover");
+                    }} onPointerOut={(e) => {
+                        const group = e.currentTarget;
+                        unhighlightGroup(group);
+                    }} onPointerUp={(e) => {
+                        e.preventDefault();
+                        const group = e.currentTarget;
+                        // restore langsung dan reset
+                        forceRestoreGroup(group);
+                    }} onMouseDown={(e) => {
+                        e.preventDefault();
+                        const group = e.currentTarget;
+                        highlightGroup(group, "mousedown");
+                    }} onMouseEnter={(e) => {
+                        // e.preventDefault(); // penting
+                        const group = e.currentTarget;
+                        highlightGroup(group, "mouseenter");
+                    }} onMouseLeave={(e) => {
+                        const group = e.currentTarget;
+                        unhighlightGroup(group);
+                    }}>
+            <g transform={`rotate(${rotation}, 0, 0)`}>
+              {/* Seats */}
+              <rect width={width} height={height} rx={radius} {...commonProps} fill={fill} {...omit(item, ["x", "y", "label", "points", "tags"])}/>
+              <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>
+              {renderTags(tags)}
+              {showLabels && (<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} onContextMenu={(e) => e.preventDefault()} 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} fontSize={fontSize !== null && fontSize !== void 0 ? fontSize : height * 0.6} opacity={opacity} {...omit(commonProps, ["fill", "opacity"])}>
+                {text}
+              </text>
+            </g>
+          </g>);
+            case "image-table":
+                return (<g key={id} id={id} data-id={id} transform={`translate(${x}, ${y})`} onContextMenu={(e) => e.preventDefault()} onDragEnter={(e) => {
+                        e.preventDefault(); // penting
+                        const group = e.currentTarget;
+                        highlightGroup(group, "dragenter");
+                    }} onDragOver={(e) => {
+                        e.preventDefault(); // agar drop diterima
+                    }} onDragLeave={(e) => {
+                        const group = e.currentTarget;
+                        unhighlightGroup(group);
+                    }} onDrop={(e) => {
+                        e.preventDefault();
+                        const group = e.currentTarget;
+                        // restore langsung dan reset
+                        forceRestoreGroup(group);
+                    }} onPointerOver={(e) => {
+                        e.preventDefault(); // penting
+                        const group = e.currentTarget;
+                        highlightGroup(group, "pointerover");
+                    }} onPointerOut={(e) => {
+                        const group = e.currentTarget;
+                        unhighlightGroup(group);
+                    }} onPointerUp={(e) => {
+                        e.preventDefault();
+                        const group = e.currentTarget;
+                        // restore langsung dan reset
+                        forceRestoreGroup(group);
+                    }} onMouseDown={(e) => {
+                        e.preventDefault();
+                        const group = e.currentTarget;
+                        highlightGroup(group, "mousedown");
+                    }}>
+            <g transform={`rotate(${rotation}, 0, 0)`}>
+              <image href={src} width={width} height={height} transform={transformRotate} {...commonProps}/>
+              {renderTags(tags)}
+              {showLabels && (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
+                  {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={transformRotate}>
+                        {_ === null || _ === void 0 ? void 0 : _.label}
+                      </text>);
+                        })}
+                </g>)}
+            </g>
+          </g>);
+            case "background":
+                return (<g key={id} onContextMenu={(e) => e.preventDefault()}>
+            <image href={src} x={x} y={y} width={width} height={height} transform={transformRotate} {...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={transformRotate}>
+                  {_ === null || _ === void 0 ? void 0 : _.label}
+                </text>);
+                    })}
+          </g>);
+            default:
+                return <g key={id}/>;
+        }
+    };
+    let date = new Date();
+    return <g key={`${date}`}>{components === null || components === void 0 ? void 0 : components.map(renderShape)}</g>;
+};
+export default Layers;