seat-editor 3.1.16 → 3.1.18

package/dist/app/constant.d.ts

@@ -102,42 +102,35 @@ export declare const data3: {
 }[];
 export declare const test1: {
     uuid: string;
-    uuid_rsvp: string;
+    uuid_rsvp: any;
     code: string;
     name: string;
     capacity: number;
-    pax: {
-        adults: number;
-    };
-    req_pax: {
-        adults: number;
-    };
-    total_pax: number;
-    total_req_pax: number;
-    status_bg_color: string;
-    status_name: string;
-    status_color: string;
-    status_icon: string;
-    title: string;
-    firstname: string;
-    lastname: string;
-    ranks: {
-        name: string;
-        image: string;
-    }[];
+    pax: any;
+    req_pax: any;
+    total_pax: any;
+    total_req_pax: any;
+    status_bg_color: any;
+    status_name: any;
+    status_color: any;
+    status_icon: any;
+    title: any;
+    firstname: any;
+    lastname: any;
+    ranks: any;
     tags: any;
-    rank_sp: string;
-    rank_ts: string;
-    start_date: string;
-    end_date: string;
-    start_time: string;
-    end_time: string;
-    walk_in: number;
-    dp_amount: string;
-    dp_status: number;
-    online_payment: number;
-    rsvp_type: number;
-    rsvp_input: number;
+    rank_sp: any;
+    rank_ts: any;
+    start_date: any;
+    end_date: any;
+    start_time: any;
+    end_time: any;
+    walk_in: any;
+    dp_amount: any;
+    dp_status: any;
+    online_payment: any;
+    rsvp_type: any;
+    rsvp_input: any;
     is_reserved: number;
     is_hold: number;
     is_overtime: number;
@@ -157,7 +150,6 @@ export declare const test1: {
                 value: string;
             }[];
             direction: string;
-            fontSize: string;
             offsetX?: undefined;
             offsetY?: undefined;
         } | {
@@ -170,7 +162,6 @@ export declare const test1: {
             offsetX: string;
             offsetY: string;
             direction: string;
-            fontSize?: undefined;
         })[];
         shape: string;
         width: number;
@@ -208,17 +199,12 @@ export declare const test1: {
         src?: undefined;
         image?: undefined;
     })[];
-    upcomings: any[];
-    areas: {
-        name: string;
-        uuid: string;
-    }[];
-    sections: {
-        icon: string;
-        name: string;
+    upcomings: {
+        time: string;
         uuid: string;
-        image: any;
     }[];
+    areas: any;
+    sections: any;
 }[];
 export declare const test4: ({
     x: number;

package/dist/app/constant.js

@@ -3065,54 +3065,45 @@ export const data3 = [
 export const test1 = [
     {
         uuid: "d088bba0-e990-410e-aea9-08548175a0b9",
-        uuid_rsvp: "9a7b8a78-631f-41ad-8e01-25966ec8bf16",
+        uuid_rsvp: null,
         code: "V1",
         name: "VIP 1",
         capacity: 8,
-        pax: {
-            adults: 2,
-        },
-        req_pax: {
-            adults: 8,
-        },
-        total_pax: 2,
-        total_req_pax: 8,
-        status_bg_color: "#F6F6F6",
-        status_name: "Booked",
-        status_color: "#F9D500",
-        status_icon: "check",
-        title: "Mr",
-        firstname: "Mail",
-        lastname: "",
-        ranks: [
-            {
-                name: "Reg",
-                image: "/5bf923de-2366-4a11-9b8b-e92de0afbf05/3a65cb36-7d85-4c38-9403-a15f94641920/rsvp/1755064935470041622_regular.png",
-            },
-        ],
+        pax: null,
+        req_pax: null,
+        total_pax: null,
+        total_req_pax: null,
+        status_bg_color: null,
+        status_name: null,
+        status_color: null,
+        status_icon: null,
+        title: null,
+        firstname: null,
+        lastname: null,
+        ranks: null,
         tags: null,
-        rank_sp: "25",
-        rank_ts: "20",
-        start_date: "2026-02-06",
-        end_date: "2026-02-06",
-        start_time: "2000-01-01T14:30:00Z",
-        end_time: "2000-01-01T17:30:00Z",
-        walk_in: 0,
-        dp_amount: "0",
-        dp_status: 0,
-        online_payment: 0,
-        rsvp_type: 0,
-        rsvp_input: 2,
+        rank_sp: null,
+        rank_ts: null,
+        start_date: null,
+        end_date: null,
+        start_time: null,
+        end_time: null,
+        walk_in: null,
+        dp_amount: null,
+        dp_status: null,
+        online_payment: null,
+        rsvp_type: null,
+        rsvp_input: null,
         is_reserved: 0,
         is_hold: 0,
         is_overtime: 0,
-        is_upcoming: 1,
+        is_upcoming: 0,
         conflicted: 0,
-        is_late: 1,
+        is_late: 0,
         properties: {
-            x: 460.7938358701509,
-            y: 126.90873770878233,
-            id: 1753965865493,
+            x: 359.7921676635742,
+            y: 109.07066345214844,
+            id: 1753965738978,
             fill: "#bca16a",
             tags: [
                 {
@@ -3123,31 +3114,41 @@ export const test1 = [
                             type: "text",
                             value: "VIP 1",
                         },
-                        {
-                            type: "icon",
-                            value: "chair",
-                        },
                     ],
                     direction: "column",
-                    fontSize: "10"
                 },
                 {
                     gap: "8",
                     key: "pax",
                     items: [
                         {
-                            type: "text",
-                            value: "1/1",
+                            type: "icon",
+                            value: "people",
                         },
                         {
-                            type: "icon",
-                            value: "user",
+                            type: "text",
+                            value: "0/8",
                         },
                     ],
                     offsetX: "3",
                     offsetY: "1",
                     direction: "flex",
                 },
+                {
+                    gap: "2",
+                    key: "rsvp_time",
+                    items: [
+                        {
+                            type: "text",
+                            value: "19:00",
+                        },
+                        {
+                            type: "text",
+                            value: "22:00",
+                        },
+                    ],
+                    direction: "column",
+                },
             ],
             shape: "square",
             width: 50,
@@ -3155,7 +3156,7 @@ export const test1 = [
             labels: [
                 {
                     x: 0,
-                    y: 8,
+                    y: 4,
                     label: "V 1",
                     fontSize: 12,
                     fontColor: "#0d0c0c",
@@ -3168,40 +3169,37 @@ export const test1 = [
         },
         image_mapping: [
             {
-                x: 368,
-                y: 77.54706573486328,
-                id: 1753965986410,
-                src: "https://cdn.table.link/prod/5bf923de-2366-4a11-9b8b-e92de0afbf05/3a65cb36-7d85-4c38-9403-a15f94641920/68d45207-d66b-4bb5-92a2-4e5a87715e98/rsvp/1753965985769725756_BOI Reg.png",
-                image: "/5bf923de-2366-4a11-9b8b-e92de0afbf05/3a65cb36-7d85-4c38-9403-a15f94641920/68d45207-d66b-4bb5-92a2-4e5a87715e98/rsvp/1753965985769725756_BOI Reg.png",
+                x: 102.2516241245301,
+                y: 56.33927640274972,
+                id: 1753965911529,
+                src: "https://cdn.table.link/prod/5bf923de-2366-4a11-9b8b-e92de0afbf05/3a65cb36-7d85-4c38-9403-a15f94641920/68d45207-d66b-4bb5-92a2-4e5a87715e98/rsvp/1753965909936935262_BOI HT.png",
+                image: "/5bf923de-2366-4a11-9b8b-e92de0afbf05/3a65cb36-7d85-4c38-9403-a15f94641920/68d45207-d66b-4bb5-92a2-4e5a87715e98/rsvp/1753965909936935262_BOI HT.png",
                 shape: "background",
-                width: 751.9405198530717,
-                height: 715.6363664106889,
+                width: 1080.4444427490234,
+                height: 719,
             },
             {
                 x: 0,
                 y: 0,
-                id: 1769502386215,
+                id: 1766992965422,
                 fill: "#ffffff",
                 shape: "backgroundColor",
                 width: 0,
                 height: 0,
             },
         ],
-        upcomings: [],
-        areas: [
+        upcomings: [
             {
-                name: "Floor",
-                uuid: "549cefc4-6581-4bfc-974b-ba395c28fc18",
+                time: "19:00",
+                uuid: "ab7eb02b-1c4b-4e13-9ad8-122c891376db",
             },
-        ],
-        sections: [
             {
-                icon: "",
-                name: "Dining Only",
-                uuid: "4cf5b676-e77e-43d6-943a-22446a7f02dd",
-                image: null,
+                time: "22:00",
+                uuid: "0d925aad-70a1-441c-943b-51ebed06ee0f",
             },
         ],
+        areas: null,
+        sections: null,
     },
 ];
 export const test4 = [

package/dist/app/only-view/page.jsx

@@ -5,7 +5,7 @@ import { data4, test1 } from "../constant";
 import { ChairIcon } from "./chair";
 import { UserIcon } from "./user";
 import { Modal } from "antd";
-import JsonView from '@uiw/react-json-view';
+import JsonView from "@uiw/react-json-view";
 // import { dummyImage } from "./constant";
 const dummyImage = [
     {
@@ -121,8 +121,8 @@ const dummyImage = [
             top: 3,
             bottom: 3,
             left: 3,
-            right: 3
-        }
+            right: 3,
+        },
     },
 ];
 const Card = (item) => {
@@ -167,7 +167,7 @@ const TouchScrollDetect = () => {
     const renderModal = () => {
         return (<Modal open={open} onCancel={() => setOpen(false)} width={700} title="Preview Board" centered footer={null}>
         <div className="flex flex-col p-4 h-[500px] overflow-auto">
-        <JsonView value={table}/>
+          <JsonView value={table}/>
         </div>
       </Modal>);
     };
@@ -180,13 +180,24 @@ const TouchScrollDetect = () => {
           </div>
         </div>
         <div className="h-screen w-2/3 relative">
-        <div className="absolute top-1 right-1  flex gap-4 z-[10]">
-          <button className="p-4 bg-gray-400" onClick={() => handleZoomIn()}>+</button>
-          <button className="p-4 bg-gray-400" onClick={() => handleZoomOut()}>-</button>
-        </div>
-          <LayerView refs={refLayer} statusKey="status" privilegedTags={["pax", "table"]} 
-    // defaultBackground="#000000"
-    mappingKey="properties" componentProps={test1} onDrop={(e, data) => handleDrop(e, data)} onSwitch={(e, data) => handleSwitch(e, data)} extraComponentProps={[]} onSelectComponent={(component) => {
+          <div className="absolute top-1 right-1  flex gap-4 z-[10]">
+            <button className="p-4 bg-gray-400" onClick={() => handleZoomIn()}>
+              +
+            </button>
+            <button className="p-4 bg-gray-400" onClick={() => handleZoomOut()}>
+              -
+            </button>
+          </div>
+          <LayerView refs={refLayer} statusKey="status" privilegedTags={[
+            {
+                key: "table",
+                items: ["text", "icon"],
+            },
+            {
+                key: "pax",
+                items: ["text", "icon"],
+            },
+        ]} defaultBackground="#000000" mappingKey="properties" componentProps={test1} onDrop={(e, data) => handleDrop(e, data)} onSwitch={(e, data) => handleSwitch(e, data)} extraComponentProps={[]} onSelectComponent={(component) => {
             handleSelectTable(component);
         }} dragTableBlockKey={[
             {

package/dist/components/layer-v4/index.d.ts

@@ -15,7 +15,10 @@ interface LayersProps {
     onHighlightGroup?: (group: SVGGElement, eventType: EventHandleType) => void;
     onForceRestoreGroup?: (group: SVGGElement, eventType: EventHandleType) => void;
     selectedTableColor?: string;
-    privilegedTags?: string[];
+    privilegedTags?: {
+        key: string;
+        items: string[];
+    }[];
 }
-declare const Layers: ({ components, selectedTable, iconTags, eventMatchTable, onHighlightGroup, onForceRestoreGroup, selectedTableColor, privilegedTags }: LayersProps) => import("react").JSX.Element;
+declare const Layers: ({ components, selectedTable, iconTags, eventMatchTable, onHighlightGroup, onForceRestoreGroup, selectedTableColor, privilegedTags, }: LayersProps) => import("react").JSX.Element;
 export default Layers;

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

@@ -1,16 +1,15 @@
 "use client";
 import { isEmpty, omit } from "lodash";
 import { arcByDirection, distributeWithSpacing } from "../layer-v3/utils";
-const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighlightGroup, onForceRestoreGroup, selectedTableColor, privilegedTags }) => {
+const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighlightGroup, onForceRestoreGroup, selectedTableColor, privilegedTags, }) => {
     const renderShape = (item) => {
         var _a, _b, _c, _d, _e, _f;
         const { id, x, y, width, height, fill, opacity, rotate = 0, rotation, shape, text, stroke, strokeWidth, labels, fontSize, fontColor, seatFill, src, tags, gapTags, label, points, seatPositions, radius, } = item;
         const renderTags = (tags) => {
-            var _a;
             const gapBetweenTags = Number(gapTags || 20);
             const defaultFontSize = Number(fontSize || 12);
             // Hitung total tinggi semua grup tag (buat center vertikal)
-            const totalTagHeight = (tags === null || tags === void 0 ? void 0 : tags.reduce((sum, tag) => {
+            const totalTagHeight = (tags === null || tags === void 0 ? void 0 : tags.filter((tag) => privilegedTags === null || privilegedTags === void 0 ? void 0 : privilegedTags.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");
@@ -20,11 +19,16 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
                     : defaultFontSize; // horizontal = 1 line
                 return sum + tagHeight + gapBetweenTags;
             }, 0)) - gapBetweenTags;
-            const startY = Number(height) / 3 - totalTagHeight / 2; // titik awal supaya semua di tengah
+            const startY = Number(height) / 3 - totalTagHeight / 3; // titik awal supaya semua di tengah
             let currentY = startY;
-            return (_a = tags.filter((tag) => privilegedTags === null || privilegedTags === void 0 ? void 0 : privilegedTags.includes(tag.key))) === null || _a === void 0 ? void 0 : _a.map((tag, tagIndex) => {
+            return tags
+                .filter((tag) => privilegedTags === null || privilegedTags === void 0 ? void 0 : privilegedTags.find((p) => p.key === tag.key))
+                .map((tag, tagIndex) => {
                 var _a;
-                const direction = ((_a = tag.direction) === null || _a === void 0 ? void 0 : _a.includes("column")) ? "column" : "flex";
+                const itemsPriv = privilegedTags[tagIndex].items;
+                const direction = ((_a = tag.direction) === null || _a === void 0 ? void 0 : _a.includes("column"))
+                    ? "column"
+                    : "flex";
                 const gap = Number(tag.gap || 2);
                 const items = tag.items || [];
                 const fontSize = Number(defaultFontSize);
@@ -37,16 +41,19 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
                 // naikkan posisi Y untuk grup berikutnya
                 currentY += groupHeight + gapBetweenTags;
                 // kumpulkan elemen yang akan dirender (bisa mix text + icon)
-                const elements = items.map((item, i) => {
+                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) - ((items.length - 1) * (fontSize + gap)) / 2
+                        ? i * (fontSize + gap) -
+                            ((items.length - 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 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;
@@ -84,23 +91,23 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
                                 break;
                         }
                         return (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
-                <tspan {...symbol} key={`symbol-${tagIndex}-${i}`} x={posX + offsetSymbolX} y={posY + offsetSymbolY} textAnchor="middle" dominantBaseline="middle" transform={`rotate(${rotate} ${posX} ${posY})`}>
-                  {symbol.value}
-                </tspan>
-              </g>);
+                    <tspan {...symbol} key={`symbol-${tagIndex}-${i}`} x={posX + offsetSymbolX} y={posY + offsetSymbolY} textAnchor="middle" dominantBaseline="middle" transform={`rotate(${rotate} ${posX} ${posY})`}>
+                      {symbol.value}
+                    </tspan>
+                  </g>);
                     };
                     if (item.type === "icon") {
                         const iconTag = iconTags === null || iconTags === void 0 ? void 0 : iconTags.find((icon) => icon.key === item.value);
                         if (!iconTag)
                             return null;
                         return (<g {...item} key={`icon-${tagIndex}-${i}`} transform={`translate(${posX - 10}, ${posY - 10})`}>
-                {iconTag.icon}
-              </g>);
+                    {iconTag.icon}
+                  </g>);
                     }
                     if (item.type === "text") {
-                        return (<text {...item} key={`text-${tagIndex}-${i}`} x={posX} y={posY} textAnchor="middle" dominantBaseline="middle" fontSize={Number(defaultFontSize) * 3 / 4}>
-                {item.value} {renderSymbol(item === null || item === void 0 ? void 0 : item.symbol)}
-              </text>);
+                        return (<text {...item} key={`text-${tagIndex}-${i}`} x={posX} y={posY} textAnchor="middle" dominantBaseline="middle" fontSize={(Number(defaultFontSize) * 3) / 4}>
+                    {item.value} {renderSymbol(item === null || item === void 0 ? void 0 : item.symbol)}
+                  </text>);
                     }
                     return null;
                 });
@@ -303,7 +310,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
               <circle key={id} cx={width / 2} cy={height / 2} r={Math.min(height, width) / 2} fill={fill} {...commonProps}/>
               {renderTags(tags)}
               {!iconTags && (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
-                {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
+                  {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);
@@ -312,10 +319,10 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
                                 "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>);
+                        {_ === null || _ === void 0 ? void 0 : _.label}
+                      </text>);
                         })}
-              </g>)}
+                </g>)}
             </g>
           </g>);
             case "table-seat-circle": {
@@ -384,13 +391,13 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
 
               {renderTags(tags)}
               {!iconTags && (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
-                {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
+                  {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
                             var _a, _b, _c, _d;
                             return (<text key={`${id}-label-${index}`} x={x + width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0)} y={y + height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0)} fill={(_c = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _c !== void 0 ? _c : "black"} fontSize={`${(_d = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _d !== void 0 ? _d : 10}px`} fontWeight="bold" textAnchor="middle" dominantBaseline="middle" transform={transformRotate}>
-                      {_ === null || _ === void 0 ? void 0 : _.label}
-                    </text>);
+                        {_ === null || _ === void 0 ? void 0 : _.label}
+                      </text>);
                         })}
-              </g>)}
+                </g>)}
             </g>
           </g>);
             }
@@ -523,7 +530,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
               </g>
               {renderTags(tags)}
               {!iconTags && (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
-                {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
+                  {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);
@@ -532,10 +539,10 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
                                 "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>);
+                        {_ === null || _ === void 0 ? void 0 : _.label}
+                      </text>);
                         })}
-              </g>)}
+                </g>)}
             </g>
           </g>);
             }
@@ -641,7 +648,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
                 {[...topSeats, ...bottomSeats, ...leftSeats, ...rightSeats].map(({ cx, cy, id }, i) => (<circle key={`${id}-seat-${i}`} id={`seat-${id}`} cx={cx} cy={cy} r={r} fill={seatFill}/>))}
               </g>
               {!iconTags && (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
-                {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
+                  {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);
@@ -650,10 +657,10 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
                                 "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>);
+                        {_ === null || _ === void 0 ? void 0 : _.label}
+                      </text>);
                         })}
-              </g>)}
+                </g>)}
             </g>
           </g>);
             }
@@ -761,7 +768,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
               </g>
               {renderTags(tags)}
               {!iconTags && (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
-                {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
+                  {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);
@@ -770,10 +777,10 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
                                 "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>);
+                        {_ === null || _ === void 0 ? void 0 : _.label}
+                      </text>);
                         })}
-              </g>)}
+                </g>)}
             </g>
           </g>);
             }
@@ -905,7 +912,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
               </g>
               {renderTags(tags)}
               {!iconTags && (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
-                {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
+                  {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);
@@ -914,10 +921,10 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
                                 "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>);
+                        {_ === null || _ === void 0 ? void 0 : _.label}
+                      </text>);
                         })}
-              </g>)}
+                </g>)}
             </g>
           </g>);
             }
@@ -965,15 +972,14 @@ 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)}
-               {!iconTags && (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
-                
-                {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
+              {!iconTags && (<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>);
+                        {_ === null || _ === void 0 ? void 0 : _.label}
+                      </text>);
                         })}
-              </g>)}
+                </g>)}
             </g>
           </g>);
             case "background":

package/dist/features/view-only-3/index.d.ts

@@ -47,7 +47,10 @@ export interface LayerViewProps {
         icon: React.JSX.Element;
         key: string;
     }[];
-    privilegedTags?: string[];
+    privilegedTags?: {
+        key: string;
+        items: string[];
+    }[];
     tooltipProps?: {
         className?: string;
         style?: CSSProperties;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "seat-editor",
-  "version": "3.1.16",
+  "version": "3.1.18",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",