seat-editor 3.5.66 → 3.6.1

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

@@ -6,6 +6,7 @@ import { arcByDirection, distributeWithSpacing, getBoundingBoxFromPoints, } from
 import { PRIVILEGED_TAGS, tagsDummy } from "./constant";
 import { useAppSelector } from "../../hooks/use-redux";
 import { RsvpIcons } from "../../features/board-v3/icons";
+import { LabelItem } from "../layer-v3";
 const toKebabCase = (str) => str.replace(/[A-Z]/g, (m) => "-" + m.toLowerCase());
 const iconNames = [
     "upcoming",
@@ -35,126 +36,110 @@ const getIconFromId = (data) => {
 };
 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 showLabels = !["type-1", "type-2", "type-3"].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 { 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, horizontalAlign, verticalAlign, fontSizeType1, fontSizeType2, fontSizeType3, } = item;
         const fontSizeFromLabel = (_a = labels === null || labels === void 0 ? void 0 : labels[0]) === null || _a === void 0 ? void 0 : _a.fontSize;
+        const fontTypeSize = {
+            "type-1": fontSizeType1,
+            "type-2": fontSizeType2,
+            "type-3": fontSizeType3,
+        };
         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 scaleFontSize = Number(fontTypeSize[isShowTagType] || 1);
             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));
+                        : isShowTagType === "type-3"
+                            ? PRIVILEGED_TAGS["POS_VIEW"]
+                            : undefined;
+            if (!(tags === null || tags === void 0 ? void 0 : tags.length))
+                return null;
+            const scaleDefault = Number(scaleFontSize || fontSize || fontSizeFromLabel || 12);
+            const postViewTagDummy = isShowTagType === "type-3";
+            const gapBetweenTags = Number((postViewTagDummy ? 1 : gapTags) || 20) * scaleDefault;
+            const defaultFontSize = Number(fontSize || fontSizeFromLabel || 12) * scaleDefault;
+            const filteredTags = tags.filter((tag) => privileged === null || privileged === void 0 ? void 0 : privileged.find((p) => p.key === tag.key));
+            // hitung tinggi tiap group
+            const groupHeights = filteredTags.map((tag) => {
+                var _a;
+                const isColumn = (_a = tag.direction) === null || _a === void 0 ? void 0 : _a.includes("column");
+                const gap = Number(tag.gap || 2) * scaleDefault;
+                const items = tag.items || [];
+                return isColumn
+                    ? (items.length - 1) * (defaultFontSize + gap) + defaultFontSize
+                    : defaultFontSize;
+            });
+            // total tinggi semua group + gap antar group
+            const totalTagHeight = groupHeights.reduce((sum, h) => sum + h, 0) +
+                (filteredTags.length - 1) * gapBetweenTags;
+            // startY supaya center vertikal
+            let currentY = height / 2 - totalTagHeight / 2;
+            return filteredTags.map((tag, tagIndex) => {
+                var _a;
+                const itemsPriv = privileged[tagIndex].items;
+                const isColumn = (_a = tag.direction) === null || _a === void 0 ? void 0 : _a.includes("column");
+                const gap = Number(tag.gap || 2) * scaleDefault;
+                const items = tag.items || [];
+                const groupHeight = groupHeights[tagIndex];
+                const centerX = width / 2;
+                const centerY = currentY + groupHeight / 2;
+                currentY += groupHeight + gapBetweenTags;
+                const elements = items
+                    .filter((item) => itemsPriv.includes(item.type))
+                    .map((item, i) => {
+                    var _a, _b, _c;
+                    const offsetY = isColumn
+                        ? i * (defaultFontSize + gap) - groupHeight / 2 + defaultFontSize / 2
+                        : 0;
+                    const offsetX = !isColumn
+                        ? i * (defaultFontSize + gap) - ((items.length - 1) * (defaultFontSize + 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, width) => {
+                        var _a;
+                        if (!symbol)
+                            return null;
+                        const { position = "right", size = Number(item === null || item === void 0 ? void 0 : item.fontSize) || defaultFontSize / 3, gap: symbolGap = 0, } = symbol;
+                        const sizeFont = defaultFontSize / 3;
+                        const offsets = {
+                            right: { x: size + (symbolGap * scaleFontSize) + width / 2.3, y: 0 },
+                            left: { x: -(size + (symbolGap * scaleFontSize) + width / 2.3), y: 0 },
+                            top: { x: 0, y: -(size + (symbolGap * scaleFontSize) + width / 2.3) },
+                            bottom: { x: 0, y: size + (symbolGap * scaleFontSize) + width / 2.3 },
+                            "right-top": { x: size + (symbolGap * scaleFontSize) + width / 2.3, y: -(defaultFontSize / 4) },
+                            "right-bottom": { x: size + (symbolGap * scaleFontSize) + width / 2.3, y: defaultFontSize / 4 },
+                            "left-top": { x: -(size + (symbolGap * scaleFontSize) + width / 2.3), y: -(defaultFontSize / 4) },
+                            "left-bottom": { x: -(size + (symbolGap * scaleFontSize) + width / 2.3), y: defaultFontSize / 4 },
                         };
-                        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}`));
+                        const { x: sx, y: sy } = (_a = offsets[position]) !== null && _a !== void 0 ? _a : offsets.right;
+                        return (_jsx("tspan", { x: posX + sx, y: posY + sy, textAnchor: "middle", dominantBaseline: "middle", fontSize: `${sizeFont}px`, children: symbol.value }, `symbol-${tagIndex}-${i}`));
+                    };
+                    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 / 1.3}, ${posY - defaultFontSize / 1.3}) scale(${scale})` }), iconTag.icon));
+                    }
+                    if (item.type === "text") {
+                        const widthText = ((_c = item === null || item === void 0 ? void 0 : item.value) === null || _c === void 0 ? void 0 : _c.length) * defaultFontSize * 0.6;
+                        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, widthText)));
+                    }
+                    return null;
                 });
-            }
+                return (_jsx("g", { pointerEvents: "none", transform: `rotate(${-rotation}, ${width / 2}, ${height / 2})`, children: elements }, `group-${tagIndex}`));
+            });
         };
         let commonProps = {
             fill,
@@ -162,6 +147,16 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
             stroke,
             strokeWidth,
         };
+        const labelProps = {
+            labels,
+            id,
+            width,
+            height,
+            commonProps,
+            horizontalAlign,
+            verticalAlign,
+            rotation,
+        };
         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");
@@ -290,16 +285,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
                                 "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));
+                            ]), commonProps), `${id}-rect`), renderTags(tags), showLabels && (_jsx("g", { transform: `rotate(${-rotation}, ${width / 2}, ${height / 2})`, pointerEvents: "none", children: _jsx(LabelItem, Object.assign({}, labelProps)) }))] }) }, id));
             case "polygon":
                 if (!points)
                     return null;
@@ -307,16 +293,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
                 const box = getBoundingBoxFromPoints(points, rotation !== null && rotation !== void 0 ? rotation : 0);
                 const centerX = box.x + box.width / 2;
                 const centerY = box.y + box.height / 2;
-                return (_jsx("g", { "data-id": id, transform: `translate(${x}, ${y})`, children: _jsxs("g", { transform: `rotate(${rotation}, 0, 0)`, children: [_createElement("polygon", Object.assign({}, commonProps, { key: id, points: finalPoint, x: "0", y: "0" })), _jsx("g", { "data-text": `${id}-text`, transform: `rotate(${-rotation}, ${centerX}, ${centerY}) translate(${box === null || box === void 0 ? void 0 : box.x}, ${box === null || box === void 0 ? void 0 : box.y})`, children: labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
-                                    var _a, _b, _c, _d, _e, _f, _g;
-                                    const cx = (box === null || box === void 0 ? void 0 : box.width) / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0);
-                                    const cy = (box === null || box === void 0 ? void 0 : box.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: (box === null || box === void 0 ? void 0 : box.width) / 2 + ((_d = _ === null || _ === void 0 ? void 0 : _.x) !== null && _d !== void 0 ? _d : 0), y: (box === null || box === void 0 ? void 0 : box.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));
+                return (_jsx("g", { "data-id": id, transform: `translate(${x}, ${y})`, children: _jsxs("g", { transform: `rotate(${rotation}, 0, 0)`, children: [_createElement("polygon", Object.assign({}, commonProps, { key: id, points: finalPoint, x: "0", y: "0" })), _jsx("g", { "data-text": `${id}-text`, transform: `rotate(${-rotation}, ${centerX}, ${centerY}) translate(${box === null || box === void 0 ? void 0 : box.x}, ${box === null || box === void 0 ? void 0 : box.y})`, children: _jsx(LabelItem, Object.assign({}, labelProps)) })] }) }, 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
@@ -362,16 +339,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
                                     "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));
+                                ])), id), renderTags(tags), showLabels && (_jsx("g", { transform: `rotate(${-rotation}, ${width / 2}, ${height / 2})`, children: _jsx(LabelItem, Object.assign({}, labelProps)) }))] })] }, id));
             case "table-seat-circle": {
                 const seatCount = item.seatCount;
                 const openSpace = (_b = item.openSpace) !== null && _b !== void 0 ? _b : 0;
@@ -436,10 +404,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
                                 "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));
+                            ]), 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: _jsx(LabelItem, Object.assign({}, labelProps)) }))] }) }, id));
             }
             case "table-seat-rect-circle": {
                 const clamp = (v, min, max) => Math.max(min, Math.min(max, v));
@@ -568,16 +533,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
                                 "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));
+                            ]), 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: _jsx(LabelItem, Object.assign({}, labelProps)) }))] }) }, id));
             }
             case "table-seat-square": {
                 const openSpace = item.openSpace || 0; // from 0 to 0.9
@@ -677,16 +633,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
                                 "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));
+                            ]))), 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: _jsx(LabelItem, Object.assign({}, labelProps)) }))] }) }, id));
             }
             case "table-seat-half-square": {
                 const openSpace = item.openSpace || 0;
@@ -790,16 +737,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
                                 "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));
+                            ]))), _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: _jsx(LabelItem, Object.assign({}, labelProps)) }))] }) }, id));
             }
             case "table-seat-rect-square": {
                 const clamp = (v, min, max) => Math.max(min, Math.min(max, v));
@@ -927,16 +865,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
                                 "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));
+                            ]))), _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: _jsx(LabelItem, Object.assign({}, labelProps)) }))] }) }, 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));
@@ -971,15 +900,9 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
                         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));
+                    }, 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: _jsx(LabelItem, Object.assign({}, labelProps)) }))] }) }, 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));
+                return (_jsx("g", { onContextMenu: (e) => e.preventDefault(), transform: `translate(${x}, ${y})`, children: _jsxs("g", { transform: `rotate(${rotation}, 0, 0)`, children: [_jsx("image", { href: src, width: width, height: height }), _jsx("g", { "data-text": `${id}-text`, transform: `rotate(${-rotation}, ${width / 2}, ${height / 2})`, children: _jsx(LabelItem, Object.assign({}, labelProps)) })] }) }, id));
             default:
                 return _jsx("g", {}, id);
         }