seat-editor 3.4.7 → 3.5.0

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

@@ -0,0 +1,927 @@
+"use client";
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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: _jsx(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, _g;
+        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 fontSizeFromLabel = (_a = labels === null || labels === void 0 ? void 0 : labels[0]) === null || _a === void 0 ? void 0 : _a.fontSize;
+        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 scaleDefault = Number(fontSize || fontSizeFromLabel || 12) / 12;
+                const gapBetweenTags = Number(gapTags || 20) * scaleDefault;
+                const defaultFontSize = Number(fontSize || fontSizeFromLabel || 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) * scaleDefault;
+                    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 (_createElement("tspan", Object.assign({}, symbol, { key: `symbol-${tagIndex}-${i}`, x: posX + offsetSymbolX, y: posY + offsetSymbolY, textAnchor: "middle", dominantBaseline: "middle", fontSize: `${sizeFont}px` }), symbol.value));
+                        };
+                        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;
+                            const scale = defaultFontSize / 12;
+                            return (_createElement("g", Object.assign({}, item, { key: `icon-${tagIndex}-${i}`, transform: `translate(${posX - defaultFontSize}, ${posY - defaultFontSize / 2}) scale(${scale})` }), iconTag.icon));
+                        }
+                        if (item.type === "text") {
+                            return (_createElement("text", Object.assign({}, item, { key: `text-${tagIndex}-${i}`, x: posX, y: posY, textAnchor: "middle", dominantBaseline: "middle", fontSize: defaultFontSize }),
+                                item.value,
+                                " ",
+                                renderSymbol(item === null || item === void 0 ? void 0 : item.symbol)));
+                        }
+                        return null;
+                    });
+                    return (_jsx("g", { pointerEvents: "none", children: elements }, `group-${tagIndex}`));
+                });
+            }
+        };
+        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 (_jsx("g", { 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);
+                    }, children: _jsxs("g", { transform: `rotate(${rotation}, 0,0)`, children: [_jsx("rect", Object.assign({ width: width, height: height, fill: fill, rx: radius }, omit(item, ["x", "y", "label", "points", "tags", "seatCount"]), commonProps), `${id}-rect`), renderTags(tags), showLabels && (_jsx("g", { transform: `rotate(${-rotation}, ${width / 2}, ${height / 2})`, pointerEvents: "none", children: 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 (_createElement("text", Object.assign({ 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));
+                                }) }))] }) }, id));
+            case "polygon":
+                const finalPoint = points.map((p) => `${p.x},${p.y}`).join(" ");
+                return (_jsx("g", { "data-id": id, transform: `translate(${x}, ${y})`, children: _jsx("g", { transform: `rotate(${rotation}, 0, 0)`, children: _createElement("polygon", Object.assign({}, commonProps, { key: id, points: finalPoint, x: "0", y: "0" })) }) }, id));
+            case "circle":
+                return (_jsxs("g", { 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);
+                    }, children: [" ", _jsxs("g", { transform: `rotate(${-rotation}, 0, 0)`, children: [_jsx("circle", Object.assign({ cx: width / 2, cy: height / 2, r: Math.min(height, width) / 2, fill: fill }, commonProps, omit(item, ["x", "y", "label", "points", "tags", "seatCount"])), id), renderTags(tags), showLabels && (_jsx("g", { transform: `rotate(${-rotation}, ${width / 2}, ${height / 2})`, children: 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 (_createElement("text", Object.assign({}, 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));
+                                    }) }))] })] }, id));
+            case "table-seat-circle": {
+                const seatCount = item.seatCount;
+                const openSpace = (_b = item.openSpace) !== null && _b !== void 0 ? _b : 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 (_jsx("g", { 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);
+                    }, children: _jsxs("g", { transform: `rotate(${rotation}, 0, 0)`, children: [_jsx("circle", Object.assign({ cx: centerX, cy: centerY, r: tableRadius, fill: selectedTableColor !== null && selectedTableColor !== void 0 ? selectedTableColor : fill }, omit(item, ["x", "y", "label", "points", "tags", "seatCount"]), commonProps)), _jsx("g", { "data-seat": `${id}-seats`, children: seatCircles.map(({ cx, cy }, i) => (_jsx("circle", { cx: cx, cy: cy, r: seatRadius, fill: seatFill, className: item === null || item === void 0 ? void 0 : item.className }, `${id}-seat-${i}`))) }), renderTags(tags), showLabels && (_jsx("g", { transform: `rotate(${-rotation}, ${width / 2}, ${height / 2})`, children: labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
+                                    var _a, _b, _c, _d;
+                                    return (_jsx("text", { x: width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0), y: 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, children: _ === null || _ === void 0 ? void 0 : _.label }, `${id}-label-${index}`));
+                                }) }))] }) }, id));
+            }
+            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 (_jsx("g", { 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);
+                    }, children: _jsxs("g", { transform: `rotate(${rotation}, 0, 0)`, children: [_jsx("circle", Object.assign({ cx: width / 2, cy: height / 2, r: tableRadius, fill: fill }, omit(item, ["x", "y", "label", "points", "tags", "seatCount"]), commonProps)), _jsx("g", { "data-seat": `${id}-seats`, children: seats === null || seats === void 0 ? void 0 : seats.map(({ height, width, x, y, id }, i) => (_jsx("rect", { x: x, y: y, id: `seat-${id}`, height: height, width: width, rx: radius / 4, fill: seatFill, className: item === null || item === void 0 ? void 0 : item.className }, `${id}-seat-${i}`))) }, `${id}-seats`), renderTags(tags), showLabels && (_jsx("g", { transform: `rotate(${-rotation}, ${width / 2}, ${height / 2})`, children: 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 (_createElement("text", Object.assign({}, 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));
+                                }) }))] }) }, id));
+            }
+            case "table-seat-square": {
+                const openSpace = item.openSpace || 0; // from 0 to 0.9
+                const r = 10;
+                const seatPositions = item.seatPositions;
+                const topCount = (_c = seatPositions === null || seatPositions === void 0 ? void 0 : seatPositions.top) !== null && _c !== void 0 ? _c : 0;
+                const bottomCount = (_d = seatPositions === null || seatPositions === void 0 ? void 0 : seatPositions.bottom) !== null && _d !== void 0 ? _d : 0;
+                const leftCount = (_e = seatPositions === null || seatPositions === void 0 ? void 0 : seatPositions.left) !== null && _e !== void 0 ? _e : 0;
+                const rightCount = (_f = seatPositions === null || seatPositions === void 0 ? void 0 : seatPositions.right) !== null && _f !== void 0 ? _f : 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 (_jsx("g", { "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);
+                    }, children: _jsxs("g", { transform: `rotate(${rotate}, 0, 0)`, children: [_jsx("rect", Object.assign({ width: width, height: height }, commonProps, { fill: selectedTableColor !== null && selectedTableColor !== void 0 ? selectedTableColor : fill }, omit(item, ["x", "y", "label", "points", "tags", "seatCount"]))), renderTags(tags), _jsx("g", { "data-seat": `${id}-seats`, transform: `translate(${-x}, ${-y})`, children: [...topSeats, ...bottomSeats, ...leftSeats, ...rightSeats].map(({ cx, cy, id }, i) => (_jsx("circle", { id: `seat-${id}`, cx: cx, cy: cy, r: r, fill: seatFill, className: item === null || item === void 0 ? void 0 : item.className }, `${id}-seat-${i}`))) }, `${id}-seats`), showLabels && (_jsx("g", { transform: `rotate(${-rotation}, ${width / 2}, ${height / 2})`, children: 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 (_createElement("text", Object.assign({}, 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));
+                                }) }))] }) }, id));
+            }
+            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 = (_g = [
+                    ...topSeats,
+                    ...bottomSeats,
+                    ...leftSeats,
+                    ...rightSeats,
+                ]) === null || _g === void 0 ? void 0 : _g.map((seat) => (Object.assign(Object.assign({}, seat), { d: arcByDirection({
+                        cx: seat.cx,
+                        cy: seat.cy,
+                        r: seatRadius,
+                        direction: seat.id,
+                        fraction: 0.4,
+                    }) })));
+                return (_jsx("g", { 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);
+                    }, children: _jsxs("g", { transform: `rotate(${rotation}, 0, 0)`, children: [_jsx("rect", Object.assign({ width: width, height: height, rx: radius }, commonProps, { fill: fill }, omit(item, ["x", "y", "label", "points", "tags", "seatCount"]))), _jsx("g", { "data-seat": `${id}-seats`, children: seats === null || seats === void 0 ? void 0 : seats.map(({ d, id }, i) => (_jsx("path", { id: `seat-${id}`, d: d, fill: seatFill, className: item === null || item === void 0 ? void 0 : item.className }, `${id}-seat-${i}`))) }, `${id}-seats`), renderTags(tags), showLabels && (_jsx("g", { transform: `rotate(${-rotation}, ${width / 2}, ${height / 2})`, children: 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 (_createElement("text", Object.assign({}, 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));
+                                }) }))] }) }, id));
+            }
+            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 (_jsx("g", { 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);
+                    }, children: _jsxs("g", { transform: `rotate(${rotation}, 0, 0)`, children: [_jsx("rect", Object.assign({ width: width, height: height, rx: radius }, commonProps, { fill: fill }, omit(item, ["x", "y", "label", "points", "tags", "seatCount"]))), _jsx("g", { "data-seat": `${id}-seats`, transform: `translate(${-x}, ${-y})`, children: seats === null || seats === void 0 ? void 0 : seats.map(({ height, width, x, y, id }, i) => (_jsx("rect", { x: x, y: y, id: `seat-${id}`, height: height, width: width, rx: radius / 4, fill: seatFill }, `${id}-seat-${i}`))) }, `${id}-seats`), renderTags(tags), showLabels && (_jsx("g", { transform: `rotate(${-rotation}, ${width / 2}, ${height / 2})`, children: 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 (_createElement("text", Object.assign({}, 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));
+                                }) }))] }) }, id));
+            }
+            case "text":
+                return (_jsx("g", { onContextMenu: (e) => e.preventDefault(), "data-id": id, transform: `translate(${x}, ${y})`, children: _jsxs("g", { transform: `rotate(${rotation}, 0, 0)`, children: [_jsx("rect", { width: width, height: height, fill: "transparent", opacity: opacity }), _jsx("text", Object.assign({ 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"]), { children: text }))] }) }, id));
+            case "image-table":
+                return (_jsx("g", { 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");
+                    }, children: _jsxs("g", { transform: `rotate(${rotation}, 0, 0)`, children: [_jsx("image", Object.assign({ href: src, width: width, height: height, transform: transformRotate }, commonProps)), renderTags(tags), showLabels && (_jsx("g", { transform: `rotate(${-rotation}, ${width / 2}, ${height / 2})`, children: labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
+                                    var _a, _b, _c, _d;
+                                    return (_jsx("text", { x: x + width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0), y: y + height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0), fill: (_c = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _c !== void 0 ? _c : "black", fontSize: `${(_d = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _d !== void 0 ? _d : 10}px`, fontWeight: "bold", textAnchor: "middle", dominantBaseline: "middle", transform: transformRotate, children: _ === null || _ === void 0 ? void 0 : _.label }, index));
+                                }) }))] }) }, id));
+            case "background":
+                return (_jsxs("g", { onContextMenu: (e) => e.preventDefault(), children: [_jsx("image", Object.assign({ 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 (_jsx("text", { x: x + width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0), y: y + height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0), fill: (_c = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _c !== void 0 ? _c : "black", fontSize: `${(_d = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _d !== void 0 ? _d : 10}px`, fontWeight: "bold", textAnchor: "middle", dominantBaseline: "middle", transform: transformRotate, children: _ === null || _ === void 0 ? void 0 : _.label }, index));
+                        })] }, id));
+            default:
+                return _jsx("g", {}, id);
+        }
+    };
+    let date = new Date();
+    return _jsx("g", { children: components === null || components === void 0 ? void 0 : components.map(renderShape) }, `${date}`);
+};
+export default Layers;