seat-editor 3.6.6 → 3.6.8

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

@@ -1,164 +1,193 @@
 "use client";
 import { isEmpty, omit } from "lodash";
-import { arcByDirection, distributeWithSpacing } from "../layer-v3/utils";
-import { PRIVILEGED_TAGS, tagsDummy } from "./constant";
-import { useAppSelector } from "../../hooks/use-redux";
-import { RsvpIcons } from "../../features/board-v3/icons";
+import { arcByDirection, distributeWithSpacing, rectToPolygonNodes, } from "../layer-v3/utils";
+// import { RsvpIcons } from "../../features/board-v3/icons";
 import { getBoundingBoxFromPoints } from "../layer-v3/utils";
+import { LabelItem } from "../layer-v3";
+import { TrashIcon } from "lucide-react";
+import React from "react";
 const toKebabCase = (str) => str.replace(/[A-Z]/g, (m) => "-" + m.toLowerCase());
-const iconNames = [
-    "upcoming",
-    "late",
-    "overtime",
-    "overlapping",
-    "hold",
-    "reserved",
-    "armchair",
-    "cheque",
-    "people",
-];
-const dummyIconTags = iconNames === null || iconNames === void 0 ? void 0 : iconNames.map((item) => {
-    const Icon = RsvpIcons === null || RsvpIcons === void 0 ? void 0 : RsvpIcons[item];
-    return {
-        key: item,
-        icon: <Icon />,
-    };
-});
-const getIconFromId = (data) => {
-    const id = String(data);
-    let hash = 0;
-    for (let i = 0; i < id.length; i++) {
-        hash += id.charCodeAt(i);
-    }
-    return iconNames[hash % iconNames.length];
-};
-const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighlightGroup, onForceRestoreGroup, selectedTableColor, privilegedTags = [], }) => {
-    const { isShowTagType } = useAppSelector((state) => state.board);
-    const showLabels = !["type-1", "type-2"].includes(isShowTagType) && !iconTags;
+const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighlightGroup, onForceRestoreGroup, selectedTableColor, selectionLines, }) => {
+    // const { isShowTagType } = useAppSelector((state) => state.board);
     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 (<tspan {...symbol} key={`symbol-${tagIndex}-${i}`} x={posX + offsetSymbolX} y={posY + offsetSymbolY} textAnchor="middle" dominantBaseline="middle" fontSize={`${sizeFont}px`}>
-                      {symbol.value}
-                    </tspan>);
-                        };
-                        if (item.type === "icon") {
-                            const icons = iconTags !== null && iconTags !== void 0 ? iconTags : dummyIconTags;
-                            const iconTag = icons === null || icons === void 0 ? void 0 : icons.find((icon) => icon.key === item.value);
-                            if (!iconTag)
-                                return null;
-                            const scale = defaultFontSize / 12;
-                            return (<g {...item} key={`icon-${tagIndex}-${i}`} transform={`translate(${posX - defaultFontSize}, ${posY - defaultFontSize / 2}) scale(${scale})`}>
-                      {iconTag.icon}
-                    </g>);
-                        }
-                        if (item.type === "text") {
-                            return (<text {...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)}
-                    </text>);
-                        }
-                        return null;
-                    });
-                    return (<g key={`group-${tagIndex}`} pointerEvents="none">
-                {elements}
-              </g>);
-                });
-            }
+        var _a, _b, _c, _d, _e, _f;
+        const { id, x, y, width, height, fill, opacity, rotate = 0, rotation, shape, text, stroke, strokeWidth, labels, fontSize, fontColor, seatFill, src, tags, points, seatPositions, radius, element, } = item;
+        const showLabels = !element;
+        // const fontSizeFromLabel = labels?.[0]?.fontSize;
+        // const renderTags = (data) => {
+        //   const tags =
+        //     data ?? tagsDummy(labels?.[0]?.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?.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
+        //         ?.filter((tag) => privileged?.find((p) => p.key === tag.key))
+        //         .reduce((sum, tag) => {
+        //           const items = tag.items || [];
+        //           const isColumn = tag.direction?.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?.find((p) => p.key === tag.key))
+        //       .map((tag: Tag, tagIndex: number) => {
+        //         const itemsPriv = privileged[tagIndex].items;
+        //         const direction = tag.direction?.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: Item, i: number) => {
+        //             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(tag.offsetX ?? 0);
+        //             const posY = centerY + offsetY + Number(tag.offsetY ?? 0);
+        //             const renderSymbol = (symbol) => {
+        //               if (!symbol) return null;
+        //               const {
+        //                 position = "right",
+        //                 size = item?.fontSize || Number(fontSize),
+        //                 gap: symbolGap = 0,
+        //               } = symbol;
+        //               const sizeFont = item?.fontSize || Number(fontSize) / 3;
+        //               let offsetSymbolX = 0;
+        //               let offsetSymbolY = 0;
+        //               switch (position) {
+        //                 case "right":
+        //                   offsetSymbolX = size + symbolGap;
+        //                   break;
+        //                 case "left":
+        //                   offsetSymbolX = -(size + symbolGap);
+        //                   break;
+        //                 case "top":
+        //                   offsetSymbolY = -(size + symbolGap);
+        //                   break;
+        //                 case "bottom":
+        //                   offsetSymbolY = size + symbolGap;
+        //                   break;
+        //                 case "right-top":
+        //                   offsetSymbolX = size + symbolGap;
+        //                   offsetSymbolY = -(size / 4);
+        //                   break;
+        //                 case "right-bottom":
+        //                   offsetSymbolX = size + symbolGap;
+        //                   offsetSymbolY = size / 4;
+        //                   break;
+        //                 case "left-top":
+        //                   offsetSymbolX = -size - symbolGap;
+        //                   offsetSymbolY = -(size / 4);
+        //                   break;
+        //                 case "left-bottom":
+        //                   offsetSymbolX = -size - symbolGap;
+        //                   offsetSymbolY = size / 4;
+        //                   break;
+        //               }
+        //               return (
+        //                 <tspan
+        //                   {...symbol}
+        //                   key={`symbol-${tagIndex}-${i}`}
+        //                   x={posX + offsetSymbolX}
+        //                   y={posY + offsetSymbolY}
+        //                   textAnchor="middle"
+        //                   dominantBaseline="middle"
+        //                   fontSize={`${sizeFont}px`}
+        //                 >
+        //                   {symbol.value}
+        //                 </tspan>
+        //               );
+        //             };
+        //             if (item.type === "icon") {
+        //               const icons = iconTags ?? dummyIconTags;
+        //               const iconTag = icons?.find(
+        //                 (icon) => icon.key === item.value
+        //               );
+        //               if (!iconTag) return null;
+        //               const scale = defaultFontSize / 12;
+        //               return (
+        //                 <g
+        //                   {...item}
+        //                   key={`icon-${tagIndex}-${i}`}
+        //                   transform={`translate(${posX - defaultFontSize}, ${
+        //                     posY - defaultFontSize / 2
+        //                   }) scale(${scale})`}
+        //                 >
+        //                   {iconTag.icon}
+        //                 </g>
+        //               );
+        //             }
+        //             if (item.type === "text") {
+        //               return (
+        //                 <text
+        //                   {...item}
+        //                   key={`text-${tagIndex}-${i}`}
+        //                   x={posX}
+        //                   y={posY}
+        //                   textAnchor="middle"
+        //                   dominantBaseline="middle"
+        //                   fontSize={defaultFontSize}
+        //                 >
+        //                   {item.value} {renderSymbol(item?.symbol)}
+        //                 </text>
+        //               );
+        //             }
+        //             return null;
+        //           });
+        //         return (
+        //           <g key={`group-${tagIndex}`} pointerEvents="none">
+        //             {elements}
+        //           </g>
+        //         );
+        //       });
+        //   }
+        // };
+        const renderIcon = () => {
+            var _a, _b;
+            const icon = element === null || element === void 0 ? void 0 : element.icon;
+            const offsetX = Number((_a = element === null || element === void 0 ? void 0 : element.offsetX) !== null && _a !== void 0 ? _a : 0);
+            const offsetY = Number((_b = element === null || element === void 0 ? void 0 : element.offsetY) !== null && _b !== void 0 ? _b : 0);
+            const defaultFontSize = Number(fontSize || 12);
+            const posX = width / 2 + (offsetX !== null && offsetX !== void 0 ? offsetX : defaultFontSize);
+            const posY = height / 2 + (offsetY !== null && offsetY !== void 0 ? offsetY : defaultFontSize);
+            const centerLabelX = width / 2;
+            const centetLabelY = height / 2;
+            const newLabelProps = Object.assign(Object.assign({}, labelProps), { height: centetLabelY - defaultFontSize });
+            return (<>
+          <g data-text={`${id}-text`} transform={`rotate(${-rotation}, ${centerLabelX}, ${centetLabelY})`}>
+            <LabelItem {...newLabelProps}/>
+          </g>
+          <g transform={`rotate(${-rotation}, ${centerLabelX}, ${centetLabelY}) translate(${posX - defaultFontSize}, ${posY}) scale(${defaultFontSize / 12})`}>
+            {icon ? icon : <TrashIcon />}
+          </g>
+        </>);
         };
         let commonProps = {
             fill,
@@ -244,6 +273,14 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
             delete group.dataset.dragEnterCount;
         };
         const transformRotate = `rotate(${rotate} ${x + width / 2} ${y + height / 2})`;
+        const labelProps = {
+            labels,
+            id,
+            width,
+            height,
+            commonProps,
+            rotation,
+        };
         switch (shape) {
             case "square":
                 return (<g key={id} id={`${id}`} data-id={id} transform={`translate(${x}, ${y})`} style={{ pointerEvents: "all" }} onContextMenu={(e) => e.preventDefault()} onDragEnter={(e) => {
@@ -297,21 +334,9 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
                     "tags",
                     "seatCount",
                 ])} {...commonProps}/>
-              {renderTags(tags)}
-              {showLabels && (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`} pointerEvents="none">
-                  {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
-                            var _a, _b, _c, _d, _e, _f, _g;
-                            const cx = width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0);
-                            const cy = height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0);
-                            return (<text pointerEvents="none" {...omit(commonProps, [
-                                "opacity",
-                                "stroke",
-                                "strokeWidth",
-                            ])} transform={`rotate(${(_c = _ === null || _ === void 0 ? void 0 : _.rotation) !== null && _c !== void 0 ? _c : 0}, ${cx},${cy})`} key={`${id}-label-${index}`} x={width / 2 + ((_d = _ === null || _ === void 0 ? void 0 : _.x) !== null && _d !== void 0 ? _d : 0)} y={height / 2 + ((_e = _ === null || _ === void 0 ? void 0 : _.y) !== null && _e !== void 0 ? _e : 0)} fill={(_f = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _f !== void 0 ? _f : "black"} fontSize={`${(_g = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _g !== void 0 ? _g : 10}px`} fontWeight="bold" textAnchor="middle" dominantBaseline="middle">
-                        {_ === null || _ === void 0 ? void 0 : _.label}
-                      </text>);
-                        })}
-                </g>)}
+              {showLabels ? (<g data-text={`${id}-text`} transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
+                  <LabelItem {...labelProps}/>
+                </g>) : (renderIcon())}
             </g>
           </g>);
             case "polygon":
@@ -389,26 +414,14 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
                     "tags",
                     "seatCount",
                 ])}/>
-              {renderTags(tags)}
-              {showLabels && (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
-                  {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
-                            var _a, _b, _c, _d, _e, _f, _g;
-                            const cx = width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0);
-                            const cy = height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0);
-                            return (<text {...omit(commonProps, [
-                                "opacity",
-                                "stroke",
-                                "strokeWidth",
-                            ])} transform={`rotate(${(_c = _ === null || _ === void 0 ? void 0 : _.rotation) !== null && _c !== void 0 ? _c : 0}, ${cx},${cy})`} key={`${id}-label-${index}`} x={width / 2 + ((_d = _ === null || _ === void 0 ? void 0 : _.x) !== null && _d !== void 0 ? _d : 0)} y={height / 2 + ((_e = _ === null || _ === void 0 ? void 0 : _.y) !== null && _e !== void 0 ? _e : 0)} fill={(_f = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _f !== void 0 ? _f : "black"} fontSize={`${(_g = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _g !== void 0 ? _g : 10}px`} fontWeight="bold" textAnchor="middle" dominantBaseline="middle">
-                        {_ === null || _ === void 0 ? void 0 : _.label}
-                      </text>);
-                        })}
-                </g>)}
+              {showLabels ? (<g data-text={`${id}-text`} transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
+                  <LabelItem {...labelProps}/>
+                </g>) : (renderIcon())}
             </g>
           </g>);
             case "table-seat-circle": {
                 const seatCount = item.seatCount;
-                const openSpace = (_b = item.openSpace) !== null && _b !== void 0 ? _b : 0;
+                const openSpace = (_a = item.openSpace) !== null && _a !== void 0 ? _a : 0;
                 // LOCAL SPACE (tanpa x,y)
                 const centerX = width / 2;
                 const centerY = height / 2;
@@ -477,15 +490,9 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
                 {seatCircles.map(({ cx, cy }, i) => (<circle key={`${id}-seat-${i}`} cx={cx} cy={cy} r={seatRadius} fill={seatFill} className={item === null || item === void 0 ? void 0 : item.className}/>))}
               </g>
 
-              {renderTags(tags)}
-              {showLabels && (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
-                  {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
-                            var _a, _b, _c, _d;
-                            return (<text key={`${id}-label-${index}`} x={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}>
-                        {_ === null || _ === void 0 ? void 0 : _.label}
-                      </text>);
-                        })}
-                </g>)}
+              {showLabels ? (<g data-text={`${id}-text`} transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
+                  <LabelItem {...labelProps}/>
+                </g>) : (renderIcon())}
             </g>
           </g>);
             }
@@ -623,21 +630,9 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
               <g key={`${id}-seats`} data-seat={`${id}-seats`}>
                 {seats === null || seats === void 0 ? void 0 : seats.map(({ height, width, x, y, id }, i) => (<rect x={x} y={y} key={`${id}-seat-${i}`} id={`seat-${id}`} height={height} width={width} rx={radius / 4} fill={seatFill} className={item === null || item === void 0 ? void 0 : item.className}/>))}
               </g>
-              {renderTags(tags)}
-              {showLabels && (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
-                  {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
-                            var _a, _b, _c, _d, _e, _f, _g;
-                            const cx = width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0);
-                            const cy = height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0);
-                            return (<text {...omit(commonProps, [
-                                "opacity",
-                                "stroke",
-                                "strokeWidth",
-                            ])} transform={`rotate(${(_c = _ === null || _ === void 0 ? void 0 : _.rotation) !== null && _c !== void 0 ? _c : 0}, ${cx},${cy})`} key={`${id}-label-${index}`} x={width / 2 + ((_d = _ === null || _ === void 0 ? void 0 : _.x) !== null && _d !== void 0 ? _d : 0)} y={height / 2 + ((_e = _ === null || _ === void 0 ? void 0 : _.y) !== null && _e !== void 0 ? _e : 0)} fill={(_f = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _f !== void 0 ? _f : "black"} fontSize={`${(_g = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _g !== void 0 ? _g : 10}px`} fontWeight="bold" textAnchor="middle" dominantBaseline="middle">
-                        {_ === null || _ === void 0 ? void 0 : _.label}
-                      </text>);
-                        })}
-                </g>)}
+              {showLabels ? (<g data-text={`${id}-text`} transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
+                  <LabelItem {...labelProps}/>
+                </g>) : (renderIcon())}
             </g>
           </g>);
             }
@@ -645,10 +640,10 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
                 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;
+                const topCount = (_b = seatPositions === null || seatPositions === void 0 ? void 0 : seatPositions.top) !== null && _b !== void 0 ? _b : 0;
+                const bottomCount = (_c = seatPositions === null || seatPositions === void 0 ? void 0 : seatPositions.bottom) !== null && _c !== void 0 ? _c : 0;
+                const leftCount = (_d = seatPositions === null || seatPositions === void 0 ? void 0 : seatPositions.left) !== null && _d !== void 0 ? _d : 0;
+                const rightCount = (_e = seatPositions === null || seatPositions === void 0 ? void 0 : seatPositions.right) !== null && _e !== void 0 ? _e : 0;
                 // split seats evenly on top and bottom
                 const seatCountTopBottom = Math.ceil(Math.max(topCount, bottomCount) / 2);
                 const seatCountLeftRight = Math.ceil(Math.max(leftCount, rightCount) / 2);
@@ -743,26 +738,15 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
                     "tags",
                     "seatCount",
                 ])}/>
-              {renderTags(tags)}
+              {/* {renderTags(tags)} */}
 
               {/* Seats */}
               <g key={`${id}-seats`} data-seat={`${id}-seats`} transform={`translate(${-x}, ${-y})`}>
                 {[...topSeats, ...bottomSeats, ...leftSeats, ...rightSeats].map(({ cx, cy, id }, i) => (<circle key={`${id}-seat-${i}`} id={`seat-${id}`} cx={cx} cy={cy} r={r} fill={seatFill} className={item === null || item === void 0 ? void 0 : item.className}/>))}
               </g>
-              {showLabels && (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
-                  {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
-                            var _a, _b, _c, _d, _e, _f, _g;
-                            const cx = width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0);
-                            const cy = height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0);
-                            return (<text {...omit(commonProps, [
-                                "opacity",
-                                "stroke",
-                                "strokeWidth",
-                            ])} transform={`rotate(${(_c = _ === null || _ === void 0 ? void 0 : _.rotation) !== null && _c !== void 0 ? _c : 0}, ${cx},${cy})`} key={`${id}-label-${index}`} x={width / 2 + ((_d = _ === null || _ === void 0 ? void 0 : _.x) !== null && _d !== void 0 ? _d : 0)} y={height / 2 + ((_e = _ === null || _ === void 0 ? void 0 : _.y) !== null && _e !== void 0 ? _e : 0)} fill={(_f = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _f !== void 0 ? _f : "black"} fontSize={`${(_g = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _g !== void 0 ? _g : 10}px`} fontWeight="bold" textAnchor="middle" dominantBaseline="middle">
-                        {_ === null || _ === void 0 ? void 0 : _.label}
-                      </text>);
-                        })}
-                </g>)}
+              {showLabels ? (<g data-text={`${id}-text`} transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
+                  <LabelItem {...labelProps}/>
+                </g>) : (renderIcon())}
             </g>
           </g>);
             }
@@ -812,12 +796,12 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
                     radius: seatRadius,
                     spacing: spacingHeight,
                 }).map((cy) => ({ cx: width - seatRadius * 0.1, cy, id: "right" }));
-                const seats = (_g = [
+                const seats = (_f = [
                     ...topSeats,
                     ...bottomSeats,
                     ...leftSeats,
                     ...rightSeats,
-                ]) === null || _g === void 0 ? void 0 : _g.map((seat) => (Object.assign(Object.assign({}, seat), { d: arcByDirection({
+                ]) === null || _f === void 0 ? void 0 : _f.map((seat) => (Object.assign(Object.assign({}, seat), { d: arcByDirection({
                         cx: seat.cx,
                         cy: seat.cy,
                         r: seatRadius,
@@ -875,21 +859,9 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
               <g key={`${id}-seats`} data-seat={`${id}-seats`}>
                 {seats === null || seats === void 0 ? void 0 : seats.map(({ d, id }, i) => (<path key={`${id}-seat-${i}`} id={`seat-${id}`} d={d} fill={seatFill} className={item === null || item === void 0 ? void 0 : item.className}/>))}
               </g>
-              {renderTags(tags)}
-              {showLabels && (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
-                  {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
-                            var _a, _b, _c, _d, _e, _f, _g;
-                            const cx = width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0);
-                            const cy = height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0);
-                            return (<text {...omit(commonProps, [
-                                "opacity",
-                                "stroke",
-                                "strokeWidth",
-                            ])} transform={`rotate(${(_c = _ === null || _ === void 0 ? void 0 : _.rotation) !== null && _c !== void 0 ? _c : 0}, ${cx},${cy})`} key={`${id}-label-${index}`} x={width / 2 + ((_d = _ === null || _ === void 0 ? void 0 : _.x) !== null && _d !== void 0 ? _d : 0)} y={height / 2 + ((_e = _ === null || _ === void 0 ? void 0 : _.y) !== null && _e !== void 0 ? _e : 0)} fill={(_f = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _f !== void 0 ? _f : "black"} fontSize={`${(_g = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _g !== void 0 ? _g : 10}px`} fontWeight="bold" textAnchor="middle" dominantBaseline="middle">
-                        {_ === null || _ === void 0 ? void 0 : _.label}
-                      </text>);
-                        })}
-                </g>)}
+              {showLabels ? (<g data-text={`${id}-text`} transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
+                  <LabelItem {...labelProps}/>
+                </g>) : (renderIcon())}
             </g>
           </g>);
             }
@@ -1026,21 +998,9 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
               <g key={`${id}-seats`} data-seat={`${id}-seats`} transform={`translate(${-x}, ${-y})`}>
                 {seats === null || seats === void 0 ? void 0 : seats.map(({ height, width, x, y, id }, i) => (<rect x={x} y={y} key={`${id}-seat-${i}`} id={`seat-${id}`} height={height} width={width} rx={radius / 4} fill={seatFill}/>))}
               </g>
-              {renderTags(tags)}
-              {showLabels && (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
-                  {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
-                            var _a, _b, _c, _d, _e, _f, _g;
-                            const cx = width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0);
-                            const cy = height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0);
-                            return (<text {...omit(commonProps, [
-                                "opacity",
-                                "stroke",
-                                "strokeWidth",
-                            ])} transform={`rotate(${(_c = _ === null || _ === void 0 ? void 0 : _.rotation) !== null && _c !== void 0 ? _c : 0}, ${cx},${cy})`} key={`${id}-label-${index}`} x={width / 2 + ((_d = _ === null || _ === void 0 ? void 0 : _.x) !== null && _d !== void 0 ? _d : 0)} y={height / 2 + ((_e = _ === null || _ === void 0 ? void 0 : _.y) !== null && _e !== void 0 ? _e : 0)} fill={(_f = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _f !== void 0 ? _f : "black"} fontSize={`${(_g = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _g !== void 0 ? _g : 10}px`} fontWeight="bold" textAnchor="middle" dominantBaseline="middle">
-                        {_ === null || _ === void 0 ? void 0 : _.label}
-                      </text>);
-                        })}
-                </g>)}
+              {showLabels ? (<g data-text={`${id}-text`} transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
+                  <LabelItem {...labelProps}/>
+                </g>) : (renderIcon())}
             </g>
           </g>);
             }
@@ -1087,15 +1047,9 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
                     }}>
             <g transform={`rotate(${rotation}, 0, 0)`}>
               <image href={src} width={width} height={height} transform={transformRotate} {...commonProps}/>
-              {renderTags(tags)}
-              {showLabels && (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
-                  {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
-                            var _a, _b, _c, _d;
-                            return (<text key={index} x={x + width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0)} y={y + height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0)} fill={(_c = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _c !== void 0 ? _c : "black"} fontSize={`${(_d = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _d !== void 0 ? _d : 10}px`} fontWeight="bold" textAnchor="middle" dominantBaseline="middle" transform={transformRotate}>
-                        {_ === null || _ === void 0 ? void 0 : _.label}
-                      </text>);
-                        })}
-                </g>)}
+              {showLabels ? (<g data-text={`${id}-text`} transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
+                  <LabelItem {...labelProps}/>
+                </g>) : (renderIcon())}
             </g>
           </g>);
             case "background":
@@ -1113,6 +1067,14 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
         }
     };
     let date = new Date();
-    return <g key={`${date}`}>{components === null || components === void 0 ? void 0 : components.map(renderShape)}</g>;
+    const nodesRaw = rectToPolygonNodes(selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.width, selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.height);
+    return (<g key={`${date}`}>
+      {components === null || components === void 0 ? void 0 : components.map(renderShape)}
+      {!isEmpty(selectionLines) && (<g key={`selection-${Date.now()}`} id="selection-lines" transform={`translate(${(selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.x) - 5},${(selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.y) - 5})`}>
+          <g transform={`rotate(${0}, 0,0)`}>
+            <rect width={selectionLines.width + 10} height={selectionLines.height + 10} fill="none" stroke="#4a90e2" strokeWidth={1} strokeDasharray={"4 2"} id="rect-box-selection"/>
+          </g>
+        </g>)}
+    </g>);
 };
 export default Layers;