seat-editor 3.5.66 → 3.6.1

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

@@ -17,13 +17,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;
@@ -38,18 +48,7 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
             <g transform={`rotate(${rotation}, 0, 0)`}>
               <rect {...commonProps} key={id} width={width} height={height} rx={radius}/>
               <g data-text={`${id}-text`} 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>);
-                    })}
+                <LabelItem {...labelProps}/>
               </g>
             </g>
           </g>);
@@ -80,18 +79,7 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
                     </>);
                         })}
               <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})`}>
-                {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 (<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={(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}
-                    </text>);
-                    })}
+                <LabelItem {...labelProps}/>
               </g>
             </g>
           </g>);
@@ -117,18 +105,7 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
             <g transform={`rotate(${rotation}, 0, 0)`}>
               <circle key={id} cx={width / 2} cy={height / 2} r={Math.min(height, width) / 2} fill={fill} {...commonProps}/>
               <g data-text={`${id}-text`} 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>);
-                    })}
+                <LabelItem {...labelProps}/>
               </g>
             </g>
           </g>);
@@ -169,18 +146,7 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
               </g>
 
               <g data-text={`${id}-text`} 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>);
-                    })}
+                <LabelItem {...labelProps}/>
               </g>
             </g>
           </g>);
@@ -276,18 +242,7 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
                 {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>
               <g data-text={`${id}-text`} 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>);
-                    })}
+                <LabelItem {...labelProps}/>
               </g>
             </g>
           </g>);
@@ -355,18 +310,7 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
                 {[...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>
               <g data-text={`${id}-text`} 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>);
-                    })}
+                <LabelItem {...labelProps}/>
               </g>
             </g>
           </g>);
@@ -433,22 +377,11 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
             <g transform={`rotate(${rotation}, 0, 0)`}>
               {/* Seats */}
               <rect width={width} height={height} rx={radius} {...commonProps} fill={fill}/>
-              <g key={`${id}-seats`} data-seat={`${id}-seats`}>
+              <g key={`${id}-seats`} data-seat={`${id}-seats`} transform={`translate(${0}, ${0})`}>
                 {seats === null || seats === void 0 ? void 0 : seats.map(({ d, id }, i) => (<path key={`${id}-seat-${i}`} id={`seat-${id}`} d={d} fill={seatFill}/>))}
               </g>
               <g data-text={`${id}-text`} 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>);
-                    })}
+                <LabelItem {...labelProps}/>
               </g>
             </g>
           </g>);
@@ -543,18 +476,7 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
                 {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>
               <g data-text={`${id}-text`} 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>);
-                    })}
+                <LabelItem {...labelProps}/>
               </g>
             </g>
           </g>);
@@ -574,6 +496,15 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
             </g>
           </g>);
             case "image-table":
+                return (<g key={id} id={`${id}`} data-id={id} transform={`translate(${x}, ${y})`}>
+            <g transform={`rotate(${rotation}, 0, 0)`}>
+              <image href={src} width={width} height={height}/>
+              <g data-text={`${id}-text`} transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
+                <LabelItem {...labelProps}/>
+              </g>
+              <rect width={width} height={height} fill="transparent" opacity={opacity} {...omit(commonProps, ["fill", "opacity"])}/>
+            </g>
+          </g>);
             case "background":
                 return (<g key={id} id={`${id}`} data-id={id} transform={`translate(${x}, ${y})`} style={{
                         pointerEvents: lockBackground ? "none" : "auto",
@@ -581,18 +512,7 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
             <g transform={`rotate(${rotation}, 0, 0)`}>
               <image href={src} width={width} height={height}/>
               <g data-text={`${id}-text`} 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>);
-                    })}
+                <LabelItem {...labelProps}/>
               </g>
               <rect width={width} height={height} fill="transparent" opacity={opacity} {...omit(commonProps, ["fill", "opacity"])}/>
             </g>
@@ -632,10 +552,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 (<g key={`${selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id}`} id="selection-layer">
       {components === null || components === void 0 ? void 0 : components.map(renderShape)}
       {!isEmpty(selectionLines) && activeTool === "select" && (<>
@@ -691,11 +607,59 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
                     return (<React.Fragment key={`corner-${index}`}>
                       <circle data-position={corner(index)} key={`circle-${index}`} r={5} cx={node.x} cy={node.y} fill="transparent" style={{ cursor: "pointer" }}/>
                       <circle data-position={corner(index)} key={`circle-${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" }}/>
-                      </React.Fragment>);
+                    </React.Fragment>);
                 }))}
             </g>
           </g>
         </>)}
     </g>);
 };
+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 (<>
+      {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 (<text {...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}
+          </text>);
+        })}
+    </>);
+};
 export default Layers;

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

@@ -6,8 +6,8 @@ export declare const tagsDummy: (name: string, icon: string) => ({
         value: string;
     }[];
     direction: string;
+    offsetY: string;
     offsetX?: undefined;
-    offsetY?: undefined;
 } | {
     gap: string;
     key: string;
@@ -38,7 +38,6 @@ export declare const tagsDummy: (name: string, icon: string) => ({
         value: string;
         symbol: {
             value: string;
-            gap: number;
             position: string;
         };
         fontWeight?: undefined;
@@ -47,6 +46,17 @@ export declare const tagsDummy: (name: string, icon: string) => ({
     direction: string;
     offsetY: number;
     offsetX?: undefined;
+} | {
+    gap: string;
+    key: string;
+    items: {
+        type: string;
+        value: string;
+        fontWeight: string;
+    }[];
+    offsetY: string;
+    direction: string;
+    offsetX?: undefined;
 })[];
 export declare const PRIVILEGED_TAGS: {
     CURRENT_TIME: {
@@ -57,4 +67,8 @@ export declare const PRIVILEGED_TAGS: {
         key: string;
         items: string[];
     }[];
+    POS_VIEW: {
+        key: string;
+        items: string[];
+    }[];
 };

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

@@ -13,6 +13,7 @@ export const tagsDummy = (name, icon) => [
             },
         ],
         direction: "column",
+        offsetY: "5",
     },
     {
         gap: "8",
@@ -50,23 +51,53 @@ export const tagsDummy = (name, icon) => [
                 value: "22:00",
                 symbol: {
                     value: "+1",
-                    gap: 1,
+                    // gap: 1,
                     position: "right-top"
                 },
             },
-            // as Position, // right | right-top | right-bottom | left | left-top | left-bottom | top | bottom
-            // {
-            //   type: "text",
-            //   value: "23:00",
-            //   symbol: {
-            //     value: "+1",
-            //     gap: 1,
-            //     position: "right-top" as Position, // right | right-top | right-bottom | left | left-top | left-bottom | top | bottom
-            //   },
-            // },
         ],
         direction: "column",
-        offsetY: -35,
+        offsetY: -10,
+    },
+    //POST TYPE
+    {
+        gap: "0",
+        key: "table_name",
+        items: [
+            {
+                type: "text",
+                value: name,
+                fontWeight: "bold"
+            }
+        ],
+        offsetY: "0",
+        direction: "column",
+    },
+    {
+        gap: "0",
+        key: "pax_pos",
+        items: [
+            {
+                type: "text",
+                value: "8",
+            },
+        ],
+        offsetX: "0",
+        offsetY: "0",
+        direction: "column",
+    },
+    {
+        gap: "0",
+        key: "price",
+        items: [
+            {
+                type: "text",
+                value: "11.000K",
+            },
+        ],
+        offsetX: "0",
+        offsetY: "0",
+        direction: "column",
     },
 ];
 export const PRIVILEGED_TAGS = {
@@ -90,4 +121,18 @@ export const PRIVILEGED_TAGS = {
             items: ["text"],
         },
     ],
+    POS_VIEW: [
+        {
+            key: "table_name",
+            items: ["text"],
+        },
+        {
+            key: "pax_pos",
+            items: ["text"],
+        },
+        {
+            key: "price",
+            items: ["text"],
+        },
+    ]
 };