seat-editor 3.5.66 → 3.6.0

package/dist/app/new-board/page.js

@@ -99,5 +99,22 @@ export default function NewBoard() {
                         defaultSeatCountKey: "capacity", hiddenStatusKey: {
                             key: "status",
                             value: 0,
-                        } }) })] }) }));
+                        }, priviewActive: [
+                            {
+                                type: "default",
+                                label: "Customer View",
+                            },
+                            {
+                                type: "type-1",
+                                label: "Layout view RSVP",
+                            },
+                            {
+                                type: "type-2",
+                                label: "next 3 reserve",
+                            },
+                            {
+                                type: "type-3",
+                                label: "Layout View POS",
+                            },
+                        ] }) })] }) }));
 }

package/dist/app/new-board/page.jsx

@@ -107,7 +107,24 @@ export default function NewBoard() {
     defaultSeatCountKey="capacity" hiddenStatusKey={{
             key: "status",
             value: 0,
-        }}/>
+        }} priviewActive={[
+            {
+                type: "default",
+                label: "Customer View",
+            },
+            {
+                type: "type-1",
+                label: "Layout view RSVP",
+            },
+            {
+                type: "type-2",
+                label: "next 3 reserve",
+            },
+            {
+                type: "type-3",
+                label: "Layout View POS",
+            },
+        ]}/>
         </div>
       </div>
     </>);

package/dist/components/button-radio/index.d.ts

@@ -0,0 +1,11 @@
+export type Option<T extends string> = {
+    label: string;
+    value: T;
+};
+type ButtonRadioProps<T extends string> = {
+    options: Option<T>[];
+    value?: T;
+    onChange?: (value: T) => void;
+};
+declare const ButtonRadio: <T extends string>({ options, value, onChange, }: ButtonRadioProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default ButtonRadio;

package/dist/components/button-radio/index.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import clsx from "clsx";
+const ButtonRadio = ({ options, value, onChange, }) => {
+    const [selected, setSelected] = useState(value);
+    const handleSelect = (val) => {
+        setSelected(val);
+        onChange === null || onChange === void 0 ? void 0 : onChange(val);
+    };
+    return (_jsx("div", { className: "flex items-center gap-[22px] p-1 rounded-xl w-fit", children: options.map((option) => {
+            const isSelected = selected === option.value;
+            return (_jsx("button", { type: "button", onClick: () => handleSelect(option.value), className: clsx("px-4 py-2.5 rounded-[6px] text-[12px] font-semibold transition-all duration-200", {
+                    "bg-[#EEF6FF] text-[#3E97FF] shadow-sm": isSelected,
+                    "text-[#7E8299]": !isSelected,
+                }), children: option.label }, option.value));
+        }) }));
+};
+export default ButtonRadio;

package/dist/components/button-radio/index.jsx

@@ -0,0 +1,22 @@
+"use client";
+import { useState } from "react";
+import clsx from "clsx";
+const ButtonRadio = ({ options, value, onChange, }) => {
+    const [selected, setSelected] = useState(value);
+    const handleSelect = (val) => {
+        setSelected(val);
+        onChange === null || onChange === void 0 ? void 0 : onChange(val);
+    };
+    return (<div className="flex items-center gap-[22px] p-1 rounded-xl w-fit">
+      {options.map((option) => {
+            const isSelected = selected === option.value;
+            return (<button key={option.value} type="button" onClick={() => handleSelect(option.value)} className={clsx("px-4 py-2.5 rounded-[6px] text-[12px] font-semibold transition-all duration-200", {
+                    "bg-[#EEF6FF] text-[#3E97FF] shadow-sm": isSelected,
+                    "text-[#7E8299]": !isSelected,
+                })}>
+            {option.label}
+          </button>);
+        })}
+    </div>);
+};
+export default ButtonRadio;

package/dist/components/form-tools/label.js

@@ -1,8 +1,26 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { ColorPicker, Flex, Form, Input, InputNumber, Divider } from "antd";
+import { ColorPicker, Flex, Form, Input, InputNumber, Divider, Segmented, } from "antd";
+import { AlignCenterOutlined, AlignLeftOutlined, AlignRightOutlined, VerticalAlignTopOutlined, VerticalAlignMiddleOutlined, VerticalAlignBottomOutlined, } from "@ant-design/icons";
 const SectionLabel = () => {
-    return (_jsxs("div", { className: "py-2", children: [_jsx("h1", { className: "heading-s", children: "Section Labeling" }), _jsx(Divider, { style: { margin: 4 } }), _jsx(Form.Item, { label: "Labels in table", name: ["labels", 0, "label"], className: "w-full", children: _jsx(Form.List, { name: "labels", children: (fields, { add, remove }) => (_jsx(_Fragment, { children: fields.map((field) => (_jsxs("div", { className: "w-full flex-col mb-2", children: [_jsx(Flex, { gap: 5, className: "w-full flex justify-between", children: _jsx(Form.Item, { name: [field.name, "label"], label: "Text", className: "w-full", children: _jsx(Input, {}) }) }), _jsxs(Flex, { gap: 5, className: "w-full flex justify-between", children: [_jsx(Form.Item, { name: [field.name, "x"], label: "Position X", children: _jsx(InputNumber, {}) }), _jsx(Form.Item, { name: [field.name, "y"], label: "Position Y", children: _jsx(InputNumber, {}) }), _jsx(Form.Item, { name: [field.name, "rotation"], label: "Rotation", children: _jsx(InputNumber, { suffix: "\u00B0", min: 0, max: 360, parser: (value) => {
+    return (_jsxs("div", { className: "py-2", children: [_jsx("h1", { className: "heading-s", children: "Section Labeling" }), _jsx(Divider, { style: { margin: 4 } }), _jsx(Form.Item, { label: "Labels in table", name: ["labels", 0, "label"], className: "w-full", children: _jsx(Form.List, { name: "labels", children: (fields) => (_jsx(_Fragment, { children: fields.map((field) => (_jsxs("div", { className: "w-full flex-col mb-2", children: [_jsx(Flex, { gap: 5, className: "w-full flex justify-between", children: _jsx(Form.Item, { name: [field.name, "label"], label: "Text", className: "w-full", children: _jsx(Input, {}) }) }), _jsxs(Flex, { justify: "space-between", className: "w-full", children: [_jsx(Form.Item, { name: [field.name, "horizontalAlign"], children: _jsx(Segmented, { defaultValue: "middle", options: [
+                                                    { label: _jsx(AlignLeftOutlined, {}), value: "start" },
+                                                    { label: _jsx(AlignCenterOutlined, {}), value: "middle" },
+                                                    { label: _jsx(AlignRightOutlined, {}), value: "end" },
+                                                ] }) }), _jsx(Form.Item, { name: [field.name, "verticalAlign"], children: _jsx(Segmented, { defaultValue: "middle", options: [
+                                                    {
+                                                        label: _jsx(VerticalAlignTopOutlined, {}),
+                                                        value: "hanging",
+                                                    },
+                                                    {
+                                                        label: _jsx(VerticalAlignMiddleOutlined, {}),
+                                                        value: "middle",
+                                                    },
+                                                    {
+                                                        label: _jsx(VerticalAlignBottomOutlined, {}),
+                                                        value: "auto",
+                                                    },
+                                                ] }) })] }), _jsxs(Flex, { gap: 5, className: "w-full flex justify-between", children: [_jsx(Form.Item, { name: [field.name, "x"], label: "Position X", children: _jsx(InputNumber, {}) }), _jsx(Form.Item, { name: [field.name, "y"], label: "Position Y", children: _jsx(InputNumber, {}) }), _jsx(Form.Item, { name: [field.name, "rotation"], label: "Rotation", children: _jsx(InputNumber, { suffix: "\u00B0", min: 0, max: 360, parser: (value) => {
                                                     if (!value)
                                                         return 0;
                                                     const num = Number(value.replace(/\D/g, ""));

package/dist/components/form-tools/label.jsx

@@ -1,5 +1,6 @@
 "use client";
-import { ColorPicker, Flex, Form, Input, InputNumber, Divider } from "antd";
+import { ColorPicker, Flex, Form, Input, InputNumber, Divider, Segmented, } from "antd";
+import { AlignCenterOutlined, AlignLeftOutlined, AlignRightOutlined, VerticalAlignTopOutlined, VerticalAlignMiddleOutlined, VerticalAlignBottomOutlined, } from "@ant-design/icons";
 const SectionLabel = () => {
     return (<div className="py-2">
       <h1 className="heading-s">Section Labeling</h1>
@@ -7,13 +8,39 @@ const SectionLabel = () => {
 
       <Form.Item label="Labels in table" name={["labels", 0, "label"]} className="w-full">
         <Form.List name="labels">
-          {(fields, { add, remove }) => (<>
+          {(fields) => (<>
               {fields.map((field) => (<div key={field.key} className="w-full flex-col mb-2">
                   <Flex gap={5} className="w-full flex justify-between">
                     <Form.Item name={[field.name, "label"]} label="Text" className="w-full">
                       <Input />
                     </Form.Item>
                   </Flex>
+                  <Flex justify="space-between" className="w-full">
+                    <Form.Item name={[field.name, "horizontalAlign"]}>
+                      <Segmented defaultValue="middle" options={[
+                    { label: <AlignLeftOutlined />, value: "start" },
+                    { label: <AlignCenterOutlined />, value: "middle" },
+                    { label: <AlignRightOutlined />, value: "end" },
+                ]}/>
+                    </Form.Item>
+                    <Form.Item name={[field.name, "verticalAlign"]}>
+                      <Segmented defaultValue="middle" options={[
+                    {
+                        label: <VerticalAlignTopOutlined />,
+                        value: "hanging",
+                    },
+                    {
+                        label: <VerticalAlignMiddleOutlined />,
+                        value: "middle",
+                    },
+                    {
+                        label: <VerticalAlignBottomOutlined />,
+                        value: "auto",
+                    },
+                ]}/>
+                    </Form.Item>
+                  </Flex>
+
                   <Flex gap={5} className="w-full flex justify-between">
                     <Form.Item name={[field.name, "x"]} label="Position X">
                       <InputNumber />
@@ -40,6 +67,7 @@ const SectionLabel = () => {
                       <ColorPicker allowClear format="hex" defaultFormat="hex"/>
                     </Form.Item>
                   </Flex>
+
                   {/* {fields.length > 1 && (
                   <Flex gap={2} className="w-full">
                     <Button

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

@@ -1,4 +1,4 @@
-import { PropertiesProps, BaseElement, Point } from "../../dto/table";
+import { PropertiesProps, BaseElement, Label, Point } from "../../dto/table";
 export interface SelectionLines extends BaseElement {
     points?: Point[];
     id?: string | number;
@@ -10,4 +10,12 @@ interface LayersProps {
     selectionLines?: SelectionLines;
 }
 declare const Layers: ({ components, selectedComponent, activeTool, selectionLines, }: LayersProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LabelItem: ({ id, width, height, labels, commonProps, rotation, }: {
+    id: string | number;
+    width: number;
+    height: number;
+    labels: Label[];
+    commonProps: any;
+    rotation?: number;
+}) => import("react/jsx-runtime").JSX.Element;
 export default Layers;

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

@@ -19,13 +19,23 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
     }, [selectedGroup, selectedComponent]);
     const renderShape = (item) => {
         var _a, _b, _c, _d, _e, _f;
-        const { id, x, y, width, height, fill, opacity, rotation = 0, shape, text, stroke, strokeWidth, labels, fontSize, fontColor, label, seatFill, src, points, seatPositions, radius = 0, } = item;
+        const { id, x, y, width, height, fill, opacity, rotation = 0, shape, text, stroke, strokeWidth, labels, fontSize, fontColor, label, seatFill, src, points, seatPositions, radius = 0, horizontalAlign, verticalAlign, } = item;
         const commonProps = {
             fill,
             opacity,
             stroke,
             strokeWidth,
         };
+        const labelProps = {
+            labels,
+            id,
+            width,
+            height,
+            commonProps,
+            horizontalAlign,
+            verticalAlign,
+            rotation,
+        };
         if (allSelectionId === null || allSelectionId === void 0 ? void 0 : allSelectionId.includes(id)) {
             commonProps.stroke = "#ffa39e";
             commonProps.strokeWidth = 4;
@@ -36,16 +46,7 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
         }
         switch (shape) {
             case "square":
-                return (_jsx("g", { "data-id": id, id: `${id}`, transform: `translate(${x}, ${y})`, children: _jsxs("g", { transform: `rotate(${rotation}, 0, 0)`, children: [_createElement("rect", Object.assign({}, commonProps, { key: id, width: width, height: height, rx: radius })), _jsx("g", { "data-text": `${id}-text`, 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));
+                return (_jsx("g", { "data-id": id, id: `${id}`, transform: `translate(${x}, ${y})`, children: _jsxs("g", { transform: `rotate(${rotation}, 0, 0)`, children: [_createElement("rect", Object.assign({}, commonProps, { key: id, width: width, height: height, rx: radius })), _jsx("g", { "data-text": `${id}-text`, transform: `rotate(${-rotation}, ${width / 2}, ${height / 2})`, children: _jsx(LabelItem, Object.assign({}, labelProps)) })] }) }, id));
             case "polygon":
                 if (!points)
                     return null;
@@ -65,16 +66,7 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
                 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" })), (showPoints || !isClosed) &&
                                 points.map((_, index) => {
                                     return (_jsxs(_Fragment, { children: [_jsx("rect", { "data-point": JSON.stringify(_), id: `${index}`, x: (_ === null || _ === void 0 ? void 0 : _.x) - 5, y: (_ === null || _ === void 0 ? void 0 : _.y) - 5, width: 10, height: 10, fill: "#4a90e2", cursor: "pointer" }, `${id}-point-${index}`), _jsx("circle", { "data-point": JSON.stringify(_), id: `${index}`, cx: _ === null || _ === void 0 ? void 0 : _.x, cy: _ === null || _ === void 0 ? void 0 : _.y, r: 15, fill: "transparent", cursor: "pointer" }, `${id}-point-${index - 100}`)] }));
-                                }), _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));
+                                }), _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 "selection-box":
                 const pointsFormat = rectToPolygonPoints(x, y, width, height);
                 return (_jsx("g", { "data-table": JSON.stringify(item), "data-id": id, children: _jsxs("g", { transform: `rotate(${rotation} ${x + width / 2} ${y + height / 2})`, children: [_createElement("polygon", Object.assign({}, commonProps, { key: id, points: pointsFormat })), points.map((_, index) => {
@@ -84,16 +76,7 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
                                 return (_createElement("text", Object.assign({}, omit(commonProps, ["opacity", "stroke", "strokeWidth"]), { 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: `rotate(${rotation} ${x + width / 2} ${y + height / 2})` }), _ === null || _ === void 0 ? void 0 : _.label));
                             })] }) }, id));
             case "circle":
-                return (_jsx("g", { "data-id": id, transform: `translate(${x}, ${y})`, children: _jsxs("g", { transform: `rotate(${rotation}, 0, 0)`, children: [_jsx("circle", Object.assign({ cx: width / 2, cy: height / 2, r: Math.min(height, width) / 2, fill: fill }, commonProps), id), _jsx("g", { "data-text": `${id}-text`, 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));
+                return (_jsx("g", { "data-id": id, transform: `translate(${x}, ${y})`, children: _jsxs("g", { transform: `rotate(${rotation}, 0, 0)`, children: [_jsx("circle", Object.assign({ cx: width / 2, cy: height / 2, r: Math.min(height, width) / 2, fill: fill }, commonProps), id), _jsx("g", { "data-text": `${id}-text`, transform: `rotate(${-rotation}, ${width / 2}, ${height / 2})`, children: _jsx(LabelItem, Object.assign({}, labelProps)) })] }) }, id));
             case "diamond":
                 return (_jsxs("g", { "data-table": JSON.stringify(item), children: [_jsx("rect", Object.assign({ x: x, y: y, width: width, height: height, transform: `rotate(${rotation}, ${x}, ${y})` }, commonProps, { fill: fill }), id), _jsx("text", { x: x + width / 2, y: y + height / 2, fill: fontColor !== null && fontColor !== void 0 ? fontColor : "black", fontSize: `${fontSize !== null && fontSize !== void 0 ? fontSize : 10}px`, fontWeight: "bold", textAnchor: "middle", dominantBaseline: "middle", children: label })] }, id));
             case "table-seat-circle": {
@@ -116,16 +99,7 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
                     const cy = centerY + (tableRadius + seatRadius) * Math.sin(angle);
                     return { cx, cy };
                 });
-                return (_jsx("g", { "data-id": id, transform: `translate(${x}, ${y})`, children: _jsxs("g", { transform: `rotate(${rotation}, 0, 0)`, children: [_jsx("circle", Object.assign({ cx: centerX, cy: centerY, r: tableRadius, fill: fill }, commonProps)), _jsx("g", { "data-seat": `${id}-seats`, children: seatCircles.map(({ cx, cy }, i) => (_jsx("circle", Object.assign({ cx: cx, cy: cy, r: seatRadius, fill: seatFill }, omit(commonProps, ["fill"])), `${id}-seat-${i}`))) }), _jsx("g", { "data-text": `${id}-text`, 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));
+                return (_jsx("g", { "data-id": id, transform: `translate(${x}, ${y})`, children: _jsxs("g", { transform: `rotate(${rotation}, 0, 0)`, children: [_jsx("circle", Object.assign({ cx: centerX, cy: centerY, r: tableRadius, fill: fill }, commonProps)), _jsx("g", { "data-seat": `${id}-seats`, children: seatCircles.map(({ cx, cy }, i) => (_jsx("circle", Object.assign({ cx: cx, cy: cy, r: seatRadius, fill: seatFill }, omit(commonProps, ["fill"])), `${id}-seat-${i}`))) }), _jsx("g", { "data-text": `${id}-text`, 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));
@@ -210,16 +184,7 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
                     ...leftSeats,
                     ...rightSeats,
                 ];
-                return (_jsx("g", { transform: `translate(${x}, ${y})`, "data-id": id, children: _jsxs("g", { transform: `rotate(${rotation}, 0, 0)`, children: [_jsx("circle", Object.assign({ cx: width / 2, cy: height / 2, r: tableRadius }, commonProps, { fill: fill })), _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 }, `${id}-seat-${i}`))) }, `${id}-seats`), _jsx("g", { "data-text": `${id}-text`, 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));
+                return (_jsx("g", { transform: `translate(${x}, ${y})`, "data-id": id, children: _jsxs("g", { transform: `rotate(${rotation}, 0, 0)`, children: [_jsx("circle", Object.assign({ cx: width / 2, cy: height / 2, r: tableRadius }, commonProps, { fill: fill })), _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 }, `${id}-seat-${i}`))) }, `${id}-seats`), _jsx("g", { "data-text": `${id}-text`, 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
@@ -275,16 +240,7 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
                     cy,
                     id: "right",
                 }));
-                return (_jsx("g", { "data-id": id, transform: `translate(${x}, ${y})`, children: _jsxs("g", { transform: `rotate(${rotation}, 0, 0)`, children: [_jsx("rect", Object.assign({ width: width, height: height }, commonProps, { rx: radius, fill: fill })), _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 }, `${id}-seat-${i}`))) }, `${id}-seats`), _jsx("g", { "data-text": `${id}-text`, 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));
+                return (_jsx("g", { "data-id": id, transform: `translate(${x}, ${y})`, children: _jsxs("g", { transform: `rotate(${rotation}, 0, 0)`, children: [_jsx("rect", Object.assign({ width: width, height: height }, commonProps, { rx: radius, fill: fill })), _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 }, `${id}-seat-${i}`))) }, `${id}-seats`), _jsx("g", { "data-text": `${id}-text`, transform: `rotate(${-rotation}, ${width / 2}, ${height / 2})`, children: _jsx(LabelItem, Object.assign({}, labelProps)) })] }) }, id));
             }
             case "table-seat-half-square": {
                 const openSpace = item.openSpace || 0;
@@ -344,16 +300,7 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
                         direction: seat.id,
                         fraction: 0.4,
                     }) })));
-                return (_jsx("g", { transform: `translate(${x}, ${y})`, "data-id": id, children: _jsxs("g", { transform: `rotate(${rotation}, 0, 0)`, children: [_jsx("rect", Object.assign({ width: width, height: height, rx: radius }, commonProps, { fill: fill })), _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 }, `${id}-seat-${i}`))) }, `${id}-seats`), _jsx("g", { "data-text": `${id}-text`, 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));
+                return (_jsx("g", { transform: `translate(${x}, ${y})`, "data-id": id, children: _jsxs("g", { transform: `rotate(${rotation}, 0, 0)`, children: [_jsx("rect", Object.assign({ width: width, height: height, rx: radius }, commonProps, { fill: fill })), _jsx("g", { "data-seat": `${id}-seats`, transform: `translate(${0}, ${0})`, children: seats === null || seats === void 0 ? void 0 : seats.map(({ d, id }, i) => (_jsx("path", { id: `seat-${id}`, d: d, fill: seatFill }, `${id}-seat-${i}`))) }, `${id}-seats`), _jsx("g", { "data-text": `${id}-text`, 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));
@@ -437,16 +384,7 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
                     ...leftSeats,
                     ...rightSeats,
                 ];
-                return (_jsx("g", { transform: `translate(${x}, ${y})`, "data-id": id, children: _jsxs("g", { transform: `rotate(${rotation}, 0, 0)`, children: [_jsx("rect", Object.assign({ width: width, height: height, rx: radius }, commonProps, { fill: fill })), _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`), _jsx("g", { "data-text": `${id}-text`, 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));
+                return (_jsx("g", { transform: `translate(${x}, ${y})`, "data-id": id, children: _jsxs("g", { transform: `rotate(${rotation}, 0, 0)`, children: [_jsx("rect", Object.assign({ width: width, height: height, rx: radius }, commonProps, { fill: fill })), _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`), _jsx("g", { "data-text": `${id}-text`, transform: `rotate(${-rotation}, ${width / 2}, ${height / 2})`, children: _jsx(LabelItem, Object.assign({}, labelProps)) })] }) }, id));
             }
             case "text":
                 return (_jsx("g", { "data-id": id, transform: `translate(${x}, ${y})`, children: _jsxs("g", { transform: `rotate(${rotation}, 0, 0)`, children: [_jsx("rect", Object.assign({ width: width, height: height, fill: "transparent", opacity: opacity }, omit(commonProps, ["fill", "opacity"]))), _jsx("text", Object.assign({ "data-text-raw": `${id}-text`, 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, [
@@ -456,19 +394,11 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
                                 "strokeWidth",
                             ]), { children: text }))] }) }, id));
             case "image-table":
+                return (_jsx("g", { id: `${id}`, "data-id": id, 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)) }), _jsx("rect", Object.assign({ width: width, height: height, fill: "transparent", opacity: opacity }, omit(commonProps, ["fill", "opacity"])))] }) }, id));
             case "background":
                 return (_jsx("g", { id: `${id}`, "data-id": id, transform: `translate(${x}, ${y})`, style: {
                         pointerEvents: lockBackground ? "none" : "auto",
-                    }, 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: 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));
-                                }) }), _jsx("rect", Object.assign({ width: width, height: height, fill: "transparent", opacity: opacity }, omit(commonProps, ["fill", "opacity"])))] }) }, id));
+                    }, 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)) }), _jsx("rect", Object.assign({ width: width, height: height, fill: "transparent", opacity: opacity }, omit(commonProps, ["fill", "opacity"])))] }) }, id));
             case "bounding-box": {
                 const topLine = `${0},${0} ${width},${0}`;
                 const rightLine = `${width},${0} ${width},${height}`;
@@ -494,10 +424,6 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
     };
     // let date = new Date();
     const nodesRaw = rectToPolygonNodes(selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.width, selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.height);
-    // const nodesRawNew = rectToPolygonNodes(
-    //   selectionLinesPoints?.width,
-    //   selectionLinesPoints?.height
-    // );
     return (_jsxs("g", { id: "selection-layer", children: [components === null || components === void 0 ? void 0 : components.map(renderShape), !isEmpty(selectionLines) && activeTool === "select" && (_jsxs(_Fragment, { children: [nodesRaw.map((p1, index) => {
                         const p2 = nodesRaw[(index + 2) % nodesRaw.length];
                         const side = index === 0
@@ -536,4 +462,48 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
                                         return (_jsxs(React.Fragment, { children: [_jsx("circle", { "data-position": corner(index), r: 5, cx: node.x, cy: node.y, fill: "transparent", style: { cursor: "pointer" } }, `circle-${index}`), _jsx("circle", { "data-position": corner(index), r: 5, cx: node.x, cy: node.y, fill: "#4a90e2", id: `circle-corner-${selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id}`, style: { cursor: "pointer" } }, `circle-${index}`)] }, `corner-${index}`));
                                     }))] }) }, `selection-${Date.now()}`)] }))] }, `${selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id}`));
 };
+export const LabelItem = ({ id, width, height, labels, commonProps, rotation = 0, }) => {
+    // const getEffectiveDimensions = (width: number, height: number, rotation: number) => {
+    //   const rad = (rotation * Math.PI) / 180;
+    //   const cos = Math.abs(Math.cos(rad));
+    //   const sin = Math.abs(Math.sin(rad));
+    //   return {
+    //     effectiveWidth: width * cos + height * sin,
+    //     effectiveHeight: width * sin + height * cos,
+    //   };
+    // };
+    const PADDING = 0;
+    const getX = (labelX = 0, horizontalAlign = "middle") => {
+        // const { effectiveWidth } = getEffectiveDimensions(width, height, rotation);
+        if (horizontalAlign === "start")
+            return PADDING + labelX;
+        if (horizontalAlign === "end")
+            return width - PADDING + labelX;
+        return width / 2 + labelX;
+    };
+    const getY = (labelY = 0, verticalAlign = "middle") => {
+        // const { effectiveHeight } = getEffectiveDimensions(width, height, rotation);
+        if (verticalAlign === "hanging")
+            return PADDING + labelY;
+        if (verticalAlign === "auto")
+            return height - PADDING + labelY;
+        return height / 2 + labelY;
+    };
+    const textAnchorMap = {
+        start: "start",
+        middle: "middle",
+        end: "end",
+    };
+    const dominantBaselineMap = {
+        hanging: "hanging",
+        middle: "middle",
+        bottom: "auto",
+    };
+    return (_jsx(_Fragment, { children: labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
+            var _a, _b, _c, _d, _e;
+            const x = getX(_ === null || _ === void 0 ? void 0 : _.x, _ === null || _ === void 0 ? void 0 : _.horizontalAlign);
+            const y = getY(_ === null || _ === void 0 ? void 0 : _.y, _ === null || _ === void 0 ? void 0 : _.verticalAlign);
+            return (_createElement("text", Object.assign({}, omit(commonProps, ["opacity", "stroke", "strokeWidth"]), { transform: `rotate(${(_a = _ === null || _ === void 0 ? void 0 : _.rotation) !== null && _a !== void 0 ? _a : 0}, ${x}, ${y})`, key: `${id}-label-${index}`, x: x, y: y, fill: (_b = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _b !== void 0 ? _b : "black", fontSize: `${(_c = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _c !== void 0 ? _c : 10}px`, fontWeight: "bold", textAnchor: textAnchorMap[(_d = _ === null || _ === void 0 ? void 0 : _.horizontalAlign) !== null && _d !== void 0 ? _d : "middle"], dominantBaseline: dominantBaselineMap[(_e = _ === null || _ === void 0 ? void 0 : _.verticalAlign) !== null && _e !== void 0 ? _e : "middle"] }), _ === null || _ === void 0 ? void 0 : _.label));
+        }) }));
+};
 export default Layers;