seat-editor 3.5.66 → 3.6.0

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

@@ -4,6 +4,7 @@ import { arcByDirection, distributeWithSpacing, getBoundingBoxFromPoints, } from
 import { PRIVILEGED_TAGS, tagsDummy } from "./constant";
 import { useAppSelector } from "../../hooks/use-redux";
 import { RsvpIcons } from "../../features/board-v3/icons";
+import { LabelItem } from "../layer-v3";
 const toKebabCase = (str) => str.replace(/[A-Z]/g, (m) => "-" + m.toLowerCase());
 const iconNames = [
     "upcoming",
@@ -33,131 +34,117 @@ const getIconFromId = (data) => {
 };
 const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighlightGroup, onForceRestoreGroup, selectedTableColor, privilegedTags = [], }) => {
     const { isShowTagType } = useAppSelector((state) => state.board);
-    const showLabels = !["type-1", "type-2"].includes(isShowTagType) && !iconTags;
+    const showLabels = !["type-1", "type-2", "type-3"].includes(isShowTagType) && !iconTags;
     const renderShape = (item) => {
         var _a, _b, _c, _d, _e, _f, _g;
-        const { id, x, y, width, height, fill, opacity, rotate = 0, rotation, shape, text, stroke, strokeWidth, labels, fontSize, fontColor, seatFill, src, tags, gapTags, label, points, seatPositions, radius, } = item;
+        const { id, x, y, width, height, fill, opacity, rotate = 0, rotation, shape, text, stroke, strokeWidth, labels, fontSize, fontColor, seatFill, src, tags, gapTags, label, points, seatPositions, radius, horizontalAlign, verticalAlign, fontSizeType1, fontSizeType2, fontSizeType3, } = item;
         const fontSizeFromLabel = (_a = labels === null || labels === void 0 ? void 0 : labels[0]) === null || _a === void 0 ? void 0 : _a.fontSize;
+        const fontTypeSize = {
+            "type-1": fontSizeType1,
+            "type-2": fontSizeType2,
+            "type-3": fontSizeType3,
+        };
         const renderTags = (data) => {
             var _a;
             const tags = data !== null && data !== void 0 ? data : tagsDummy(((_a = labels === null || labels === void 0 ? void 0 : labels[0]) === null || _a === void 0 ? void 0 : _a.label) || "Table", getIconFromId(id));
+            const scaleFontSize = Number(fontTypeSize[isShowTagType] || 1);
             const privileged = !isEmpty(privilegedTags)
                 ? privilegedTags
                 : isShowTagType === "type-1"
                     ? PRIVILEGED_TAGS["CURRENT_TIME"]
                     : isShowTagType === "type-2"
                         ? PRIVILEGED_TAGS["NEXT_3_RESERVATION"]
-                        : undefined;
-            if (tags && (tags === null || tags === void 0 ? void 0 : tags.length) > 0) {
-                const scaleDefault = Number(fontSize || fontSizeFromLabel || 12) / 12;
-                const gapBetweenTags = Number(gapTags || 20) * scaleDefault;
-                const defaultFontSize = Number(fontSize || fontSizeFromLabel || 12);
-                // Hitung total tinggi semua grup tag (buat center vertikal)
-                const totalTagHeight = (tags === null || tags === void 0 ? void 0 : tags.filter((tag) => privileged === null || privileged === void 0 ? void 0 : privileged.find((p) => p.key === tag.key)).reduce((sum, tag) => {
-                    var _a;
-                    const items = tag.items || [];
-                    const isColumn = (_a = tag.direction) === null || _a === void 0 ? void 0 : _a.includes("column");
-                    const tagHeight = isColumn
-                        ? items.length * defaultFontSize + 2 * (Number(tag.gap) || 2)
-                        : defaultFontSize; // horizontal = 1 line
-                    return sum + tagHeight + gapBetweenTags;
-                }, 0)) - gapBetweenTags;
-                const startY = Number(height) / 4 - totalTagHeight / 3; // titik awal supaya semua di tengah
-                let currentY = startY;
-                return tags
-                    .filter((tag) => privileged === null || privileged === void 0 ? void 0 : privileged.find((p) => p.key === tag.key))
-                    .map((tag, tagIndex) => {
-                    var _a;
-                    const itemsPriv = privileged[tagIndex].items;
-                    const direction = ((_a = tag.direction) === null || _a === void 0 ? void 0 : _a.includes("column"))
-                        ? "column"
-                        : "flex";
-                    const gap = Number(tag.gap || 2) * scaleDefault;
-                    const items = tag.items || [];
-                    const fontSize = Number(defaultFontSize);
-                    const isColumn = direction === "column";
-                    const groupHeight = isColumn
-                        ? items.length * fontSize + 2 * gap
-                        : fontSize;
-                    const centerX = width / 2;
-                    const centerY = currentY + groupHeight;
-                    // naikkan posisi Y untuk grup berikutnya
-                    currentY += groupHeight + gapBetweenTags;
-                    const elements = items
-                        .filter((item) => itemsPriv.includes(item.type))
-                        .map((item, i) => {
-                        var _a, _b;
-                        const offsetY = isColumn
-                            ? i * (fontSize + gap) - groupHeight / 2 + fontSize / 2
-                            : 0;
-                        const offsetX = !isColumn
-                            ? i * (fontSize + gap) - (1 * (fontSize + gap)) / 2
-                            : 0;
-                        const posX = centerX + offsetX + Number((_a = tag.offsetX) !== null && _a !== void 0 ? _a : 0);
-                        const posY = centerY + offsetY + Number((_b = tag.offsetY) !== null && _b !== void 0 ? _b : 0);
-                        const renderSymbol = (symbol) => {
-                            if (!symbol)
-                                return null;
-                            const { position = "right", size = (item === null || item === void 0 ? void 0 : item.fontSize) || Number(fontSize), gap: symbolGap = 0, } = symbol;
-                            const sizeFont = (item === null || item === void 0 ? void 0 : item.fontSize) || Number(fontSize) / 3;
-                            let offsetSymbolX = 0;
-                            let offsetSymbolY = 0;
-                            switch (position) {
-                                case "right":
-                                    offsetSymbolX = size + symbolGap;
-                                    break;
-                                case "left":
-                                    offsetSymbolX = -(size + symbolGap);
-                                    break;
-                                case "top":
-                                    offsetSymbolY = -(size + symbolGap);
-                                    break;
-                                case "bottom":
-                                    offsetSymbolY = size + symbolGap;
-                                    break;
-                                case "right-top":
-                                    offsetSymbolX = size + symbolGap;
-                                    offsetSymbolY = -(size / 4);
-                                    break;
-                                case "right-bottom":
-                                    offsetSymbolX = size + symbolGap;
-                                    offsetSymbolY = size / 4;
-                                    break;
-                                case "left-top":
-                                    offsetSymbolX = -size - symbolGap;
-                                    offsetSymbolY = -(size / 4);
-                                    break;
-                                case "left-bottom":
-                                    offsetSymbolX = -size - symbolGap;
-                                    offsetSymbolY = size / 4;
-                                    break;
-                            }
-                            return (<tspan {...symbol} key={`symbol-${tagIndex}-${i}`} x={posX + offsetSymbolX} y={posY + offsetSymbolY} textAnchor="middle" dominantBaseline="middle" fontSize={`${sizeFont}px`}>
-                      {symbol.value}
-                    </tspan>);
+                        : isShowTagType === "type-3"
+                            ? PRIVILEGED_TAGS["POS_VIEW"]
+                            : undefined;
+            if (!(tags === null || tags === void 0 ? void 0 : tags.length))
+                return null;
+            const scaleDefault = Number(scaleFontSize || fontSize || fontSizeFromLabel || 12);
+            const postViewTagDummy = isShowTagType === "type-3";
+            const gapBetweenTags = Number((postViewTagDummy ? 1 : gapTags) || 20) * scaleDefault;
+            const defaultFontSize = Number(fontSize || fontSizeFromLabel || 12) * scaleDefault;
+            const filteredTags = tags.filter((tag) => privileged === null || privileged === void 0 ? void 0 : privileged.find((p) => p.key === tag.key));
+            // hitung tinggi tiap group
+            const groupHeights = filteredTags.map((tag) => {
+                var _a;
+                const isColumn = (_a = tag.direction) === null || _a === void 0 ? void 0 : _a.includes("column");
+                const gap = Number(tag.gap || 2) * scaleDefault;
+                const items = tag.items || [];
+                return isColumn
+                    ? (items.length - 1) * (defaultFontSize + gap) + defaultFontSize
+                    : defaultFontSize;
+            });
+            // total tinggi semua group + gap antar group
+            const totalTagHeight = groupHeights.reduce((sum, h) => sum + h, 0) +
+                (filteredTags.length - 1) * gapBetweenTags;
+            // startY supaya center vertikal
+            let currentY = height / 2 - totalTagHeight / 2;
+            return filteredTags.map((tag, tagIndex) => {
+                var _a;
+                const itemsPriv = privileged[tagIndex].items;
+                const isColumn = (_a = tag.direction) === null || _a === void 0 ? void 0 : _a.includes("column");
+                const gap = Number(tag.gap || 2) * scaleDefault;
+                const items = tag.items || [];
+                const groupHeight = groupHeights[tagIndex];
+                const centerX = width / 2;
+                const centerY = currentY + groupHeight / 2;
+                currentY += groupHeight + gapBetweenTags;
+                const elements = items
+                    .filter((item) => itemsPriv.includes(item.type))
+                    .map((item, i) => {
+                    var _a, _b, _c;
+                    const offsetY = isColumn
+                        ? i * (defaultFontSize + gap) - groupHeight / 2 + defaultFontSize / 2
+                        : 0;
+                    const offsetX = !isColumn
+                        ? i * (defaultFontSize + gap) - ((items.length - 1) * (defaultFontSize + gap)) / 2
+                        : 0;
+                    const posX = centerX + offsetX + Number((_a = tag.offsetX) !== null && _a !== void 0 ? _a : 0);
+                    const posY = centerY + offsetY + Number((_b = tag.offsetY) !== null && _b !== void 0 ? _b : 0);
+                    const renderSymbol = (symbol, width) => {
+                        var _a;
+                        if (!symbol)
+                            return null;
+                        const { position = "right", size = Number(item === null || item === void 0 ? void 0 : item.fontSize) || defaultFontSize / 3, gap: symbolGap = 0, } = symbol;
+                        const sizeFont = defaultFontSize / 3;
+                        const offsets = {
+                            right: { x: size + (symbolGap * scaleFontSize) + width / 2.3, y: 0 },
+                            left: { x: -(size + (symbolGap * scaleFontSize) + width / 2.3), y: 0 },
+                            top: { x: 0, y: -(size + (symbolGap * scaleFontSize) + width / 2.3) },
+                            bottom: { x: 0, y: size + (symbolGap * scaleFontSize) + width / 2.3 },
+                            "right-top": { x: size + (symbolGap * scaleFontSize) + width / 2.3, y: -(defaultFontSize / 4) },
+                            "right-bottom": { x: size + (symbolGap * scaleFontSize) + width / 2.3, y: defaultFontSize / 4 },
+                            "left-top": { x: -(size + (symbolGap * scaleFontSize) + width / 2.3), y: -(defaultFontSize / 4) },
+                            "left-bottom": { x: -(size + (symbolGap * scaleFontSize) + width / 2.3), y: defaultFontSize / 4 },
                         };
-                        if (item.type === "icon") {
-                            const icons = iconTags !== null && iconTags !== void 0 ? iconTags : dummyIconTags;
-                            const iconTag = icons === null || icons === void 0 ? void 0 : icons.find((icon) => icon.key === item.value);
-                            if (!iconTag)
-                                return null;
-                            const scale = defaultFontSize / 12;
-                            return (<g {...item} key={`icon-${tagIndex}-${i}`} transform={`translate(${posX - defaultFontSize}, ${posY - defaultFontSize / 2}) scale(${scale})`}>
-                      {iconTag.icon}
-                    </g>);
-                        }
-                        if (item.type === "text") {
-                            return (<text {...item} key={`text-${tagIndex}-${i}`} x={posX} y={posY} textAnchor="middle" dominantBaseline="middle" fontSize={defaultFontSize}>
-                      {item.value} {renderSymbol(item === null || item === void 0 ? void 0 : item.symbol)}
-                    </text>);
-                        }
-                        return null;
-                    });
-                    return (<g key={`group-${tagIndex}`} pointerEvents="none">
-                {elements}
-              </g>);
+                        const { x: sx, y: sy } = (_a = offsets[position]) !== null && _a !== void 0 ? _a : offsets.right;
+                        return (<tspan key={`symbol-${tagIndex}-${i}`} x={posX + sx} y={posY + sy} textAnchor="middle" dominantBaseline="middle" fontSize={`${sizeFont}px`}>
+                  {symbol.value}
+                </tspan>);
+                    };
+                    if (item.type === "icon") {
+                        const icons = iconTags !== null && iconTags !== void 0 ? iconTags : dummyIconTags;
+                        const iconTag = icons === null || icons === void 0 ? void 0 : icons.find((icon) => icon.key === item.value);
+                        if (!iconTag)
+                            return null;
+                        const scale = defaultFontSize / 12;
+                        return (<g {...item} key={`icon-${tagIndex}-${i}`} transform={`translate(${posX - defaultFontSize / 1.3}, ${posY - defaultFontSize / 1.3}) scale(${scale})`}>
+                  {iconTag.icon}
+                </g>);
+                    }
+                    if (item.type === "text") {
+                        const widthText = ((_c = item === null || item === void 0 ? void 0 : item.value) === null || _c === void 0 ? void 0 : _c.length) * defaultFontSize * 0.6;
+                        return (<text {...item} key={`text-${tagIndex}-${i}`} x={posX} y={posY} textAnchor="middle" dominantBaseline="middle" fontSize={defaultFontSize}>
+                  {item.value}
+                  {renderSymbol(item === null || item === void 0 ? void 0 : item.symbol, widthText)}
+                </text>);
+                    }
+                    return null;
                 });
-            }
+                return (<g key={`group-${tagIndex}`} pointerEvents="none" transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
+            {elements}
+          </g>);
+            });
         };
         let commonProps = {
             fill,
@@ -165,6 +152,16 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
             stroke,
             strokeWidth,
         };
+        const labelProps = {
+            labels,
+            id,
+            width,
+            height,
+            commonProps,
+            horizontalAlign,
+            verticalAlign,
+            rotation,
+        };
         const hasSelected = (selectedTable === null || selectedTable === void 0 ? void 0 : selectedTable.id) === id;
         if (hasSelected) {
             const eventSelectedStyles = eventMatchTable === null || eventMatchTable === void 0 ? void 0 : eventMatchTable.find((style) => style.event === "selected");
@@ -298,18 +295,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
                 ])} {...commonProps}/>
               {renderTags(tags)}
               {showLabels && (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`} pointerEvents="none">
-                  {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
-                            var _a, _b, _c, _d, _e, _f, _g;
-                            const cx = width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0);
-                            const cy = height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0);
-                            return (<text pointerEvents="none" {...omit(commonProps, [
-                                "opacity",
-                                "stroke",
-                                "strokeWidth",
-                            ])} transform={`rotate(${(_c = _ === null || _ === void 0 ? void 0 : _.rotation) !== null && _c !== void 0 ? _c : 0}, ${cx},${cy})`} key={`${id}-label-${index}`} x={width / 2 + ((_d = _ === null || _ === void 0 ? void 0 : _.x) !== null && _d !== void 0 ? _d : 0)} y={height / 2 + ((_e = _ === null || _ === void 0 ? void 0 : _.y) !== null && _e !== void 0 ? _e : 0)} fill={(_f = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _f !== void 0 ? _f : "black"} fontSize={`${(_g = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _g !== void 0 ? _g : 10}px`} fontWeight="bold" textAnchor="middle" dominantBaseline="middle">
-                        {_ === null || _ === void 0 ? void 0 : _.label}
-                      </text>);
-                        })}
+                  <LabelItem {...labelProps}/>
                 </g>)}
             </g>
           </g>);
@@ -324,18 +310,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
             <g transform={`rotate(${rotation}, 0, 0)`}>
               <polygon {...commonProps} key={id} points={finalPoint} x="0" y="0"/>
               <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>);
@@ -390,18 +365,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
                 ])}/>
               {renderTags(tags)}
               {showLabels && (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
-                  {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
-                            var _a, _b, _c, _d, _e, _f, _g;
-                            const cx = width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0);
-                            const cy = height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0);
-                            return (<text {...omit(commonProps, [
-                                "opacity",
-                                "stroke",
-                                "strokeWidth",
-                            ])} transform={`rotate(${(_c = _ === null || _ === void 0 ? void 0 : _.rotation) !== null && _c !== void 0 ? _c : 0}, ${cx},${cy})`} key={`${id}-label-${index}`} x={width / 2 + ((_d = _ === null || _ === void 0 ? void 0 : _.x) !== null && _d !== void 0 ? _d : 0)} y={height / 2 + ((_e = _ === null || _ === void 0 ? void 0 : _.y) !== null && _e !== void 0 ? _e : 0)} fill={(_f = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _f !== void 0 ? _f : "black"} fontSize={`${(_g = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _g !== void 0 ? _g : 10}px`} fontWeight="bold" textAnchor="middle" dominantBaseline="middle">
-                        {_ === null || _ === void 0 ? void 0 : _.label}
-                      </text>);
-                        })}
+                  <LabelItem {...labelProps}/>
                 </g>)}
             </g>
           </g>);
@@ -478,12 +442,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
 
               {renderTags(tags)}
               {showLabels && (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
-                  {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
-                            var _a, _b, _c, _d;
-                            return (<text key={`${id}-label-${index}`} x={width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0)} y={height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0)} fill={(_c = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _c !== void 0 ? _c : "black"} fontSize={`${(_d = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _d !== void 0 ? _d : 10}px`} fontWeight="bold" textAnchor="middle" dominantBaseline="middle" transform={transformRotate}>
-                        {_ === null || _ === void 0 ? void 0 : _.label}
-                      </text>);
-                        })}
+                  <LabelItem {...labelProps}/>
                 </g>)}
             </g>
           </g>);
@@ -624,18 +583,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
               </g>
               {renderTags(tags)}
               {showLabels && (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
-                  {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
-                            var _a, _b, _c, _d, _e, _f, _g;
-                            const cx = width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0);
-                            const cy = height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0);
-                            return (<text {...omit(commonProps, [
-                                "opacity",
-                                "stroke",
-                                "strokeWidth",
-                            ])} transform={`rotate(${(_c = _ === null || _ === void 0 ? void 0 : _.rotation) !== null && _c !== void 0 ? _c : 0}, ${cx},${cy})`} key={`${id}-label-${index}`} x={width / 2 + ((_d = _ === null || _ === void 0 ? void 0 : _.x) !== null && _d !== void 0 ? _d : 0)} y={height / 2 + ((_e = _ === null || _ === void 0 ? void 0 : _.y) !== null && _e !== void 0 ? _e : 0)} fill={(_f = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _f !== void 0 ? _f : "black"} fontSize={`${(_g = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _g !== void 0 ? _g : 10}px`} fontWeight="bold" textAnchor="middle" dominantBaseline="middle">
-                        {_ === null || _ === void 0 ? void 0 : _.label}
-                      </text>);
-                        })}
+                  <LabelItem {...labelProps}/>
                 </g>)}
             </g>
           </g>);
@@ -749,18 +697,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} className={item === null || item === void 0 ? void 0 : item.className}/>))}
               </g>
               {showLabels && (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
-                  {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
-                            var _a, _b, _c, _d, _e, _f, _g;
-                            const cx = width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0);
-                            const cy = height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0);
-                            return (<text {...omit(commonProps, [
-                                "opacity",
-                                "stroke",
-                                "strokeWidth",
-                            ])} transform={`rotate(${(_c = _ === null || _ === void 0 ? void 0 : _.rotation) !== null && _c !== void 0 ? _c : 0}, ${cx},${cy})`} key={`${id}-label-${index}`} x={width / 2 + ((_d = _ === null || _ === void 0 ? void 0 : _.x) !== null && _d !== void 0 ? _d : 0)} y={height / 2 + ((_e = _ === null || _ === void 0 ? void 0 : _.y) !== null && _e !== void 0 ? _e : 0)} fill={(_f = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _f !== void 0 ? _f : "black"} fontSize={`${(_g = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _g !== void 0 ? _g : 10}px`} fontWeight="bold" textAnchor="middle" dominantBaseline="middle">
-                        {_ === null || _ === void 0 ? void 0 : _.label}
-                      </text>);
-                        })}
+                  <LabelItem {...labelProps}/>
                 </g>)}
             </g>
           </g>);
@@ -876,18 +813,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
               </g>
               {renderTags(tags)}
               {showLabels && (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
-                  {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
-                            var _a, _b, _c, _d, _e, _f, _g;
-                            const cx = width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0);
-                            const cy = height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0);
-                            return (<text {...omit(commonProps, [
-                                "opacity",
-                                "stroke",
-                                "strokeWidth",
-                            ])} transform={`rotate(${(_c = _ === null || _ === void 0 ? void 0 : _.rotation) !== null && _c !== void 0 ? _c : 0}, ${cx},${cy})`} key={`${id}-label-${index}`} x={width / 2 + ((_d = _ === null || _ === void 0 ? void 0 : _.x) !== null && _d !== void 0 ? _d : 0)} y={height / 2 + ((_e = _ === null || _ === void 0 ? void 0 : _.y) !== null && _e !== void 0 ? _e : 0)} fill={(_f = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _f !== void 0 ? _f : "black"} fontSize={`${(_g = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _g !== void 0 ? _g : 10}px`} fontWeight="bold" textAnchor="middle" dominantBaseline="middle">
-                        {_ === null || _ === void 0 ? void 0 : _.label}
-                      </text>);
-                        })}
+                  <LabelItem {...labelProps}/>
                 </g>)}
             </g>
           </g>);
@@ -1027,18 +953,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
               </g>
               {renderTags(tags)}
               {showLabels && (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
-                  {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
-                            var _a, _b, _c, _d, _e, _f, _g;
-                            const cx = width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0);
-                            const cy = height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0);
-                            return (<text {...omit(commonProps, [
-                                "opacity",
-                                "stroke",
-                                "strokeWidth",
-                            ])} transform={`rotate(${(_c = _ === null || _ === void 0 ? void 0 : _.rotation) !== null && _c !== void 0 ? _c : 0}, ${cx},${cy})`} key={`${id}-label-${index}`} x={width / 2 + ((_d = _ === null || _ === void 0 ? void 0 : _.x) !== null && _d !== void 0 ? _d : 0)} y={height / 2 + ((_e = _ === null || _ === void 0 ? void 0 : _.y) !== null && _e !== void 0 ? _e : 0)} fill={(_f = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _f !== void 0 ? _f : "black"} fontSize={`${(_g = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _g !== void 0 ? _g : 10}px`} fontWeight="bold" textAnchor="middle" dominantBaseline="middle">
-                        {_ === null || _ === void 0 ? void 0 : _.label}
-                      </text>);
-                        })}
+                  <LabelItem {...labelProps}/>
                 </g>)}
             </g>
           </g>);
@@ -1088,24 +1003,18 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
               <image href={src} width={width} height={height} transform={transformRotate} {...commonProps}/>
               {renderTags(tags)}
               {showLabels && (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
-                  {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
-                            var _a, _b, _c, _d;
-                            return (<text key={index} x={x + width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0)} y={y + height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0)} fill={(_c = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _c !== void 0 ? _c : "black"} fontSize={`${(_d = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _d !== void 0 ? _d : 10}px`} fontWeight="bold" textAnchor="middle" dominantBaseline="middle" transform={transformRotate}>
-                        {_ === null || _ === void 0 ? void 0 : _.label}
-                      </text>);
-                        })}
+                  <LabelItem {...labelProps}/>
                 </g>)}
             </g>
           </g>);
             case "background":
-                return (<g key={id} onContextMenu={(e) => e.preventDefault()}>
-            <image href={src} x={x} y={y} width={width} height={height} transform={transformRotate} {...commonProps}/>
-            {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
-                        var _a, _b, _c, _d;
-                        return (<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>);
-                    })}
+                return (<g key={id} onContextMenu={(e) => e.preventDefault()} 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>
+            </g>
           </g>);
             default:
                 return <g key={id}/>;

package/dist/components/modal-preview/index.d.ts

@@ -1,4 +1,6 @@
-declare const ModalPreview: ({ children }: {
+import { ModalProps } from "antd";
+declare const ModalPreview: ({ children, modalProps }: {
     children: React.ReactNode;
+    modalProps?: ModalProps;
 }) => import("react/jsx-runtime").JSX.Element;
 export default ModalPreview;

package/dist/components/modal-preview/index.js

@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Modal } from "antd";
 import { useAppSelector, useAppDispatch } from "../../hooks/use-redux";
 import { useEffect } from "react";
-const ModalPreview = ({ children }) => {
+const ModalPreview = ({ children, modalProps }) => {
     const { isPreview } = useAppSelector((state) => state.tool);
     const dispatch = useAppDispatch();
     useEffect(() => {
@@ -14,6 +14,16 @@ const ModalPreview = ({ children }) => {
             });
         }
     }, [isPreview]);
-    return (_jsx(Modal, { open: isPreview, onCancel: () => dispatch({ type: "tool/setTooglePreview", payload: false }), width: 1000, height: 600, title: "Preview Board", centered: true, footer: null, children: _jsx("div", { className: "flex flex-col p-4 h-[500px]", children: children }) }));
+    return (_jsx(Modal, Object.assign({ open: isPreview, onCancel: () => dispatch({ type: "tool/setTooglePreview", payload: false }), width: 900, styles: {
+            content: {
+                padding: 0,
+            },
+            header: {
+                marginBottom: 0,
+            },
+            footer: {
+                marginTop: 0,
+            }
+        }, centered: true }, modalProps, { children: _jsx("div", { className: "h-[400px]", children: children }) })));
 };
 export default ModalPreview;

package/dist/components/modal-preview/index.jsx

@@ -2,7 +2,7 @@
 import { Modal } from "antd";
 import { useAppSelector, useAppDispatch } from "../../hooks/use-redux";
 import { useEffect } from "react";
-const ModalPreview = ({ children }) => {
+const ModalPreview = ({ children, modalProps }) => {
     const { isPreview } = useAppSelector((state) => state.tool);
     const dispatch = useAppDispatch();
     useEffect(() => {
@@ -13,8 +13,18 @@ const ModalPreview = ({ children }) => {
             });
         }
     }, [isPreview]);
-    return (<Modal open={isPreview} onCancel={() => dispatch({ type: "tool/setTooglePreview", payload: false })} width={1000} height={600} title="Preview Board" centered footer={null}>
-      <div className="flex flex-col p-4 h-[500px]">{children}</div>
+    return (<Modal open={isPreview} onCancel={() => dispatch({ type: "tool/setTooglePreview", payload: false })} width={900} styles={{
+            content: {
+                padding: 0,
+            },
+            header: {
+                marginBottom: 0,
+            },
+            footer: {
+                marginTop: 0,
+            }
+        }} centered {...modalProps}>
+      <div className="h-[400px]">{children}</div>
     </Modal>);
 };
 export default ModalPreview;

package/dist/dto/table.d.ts

@@ -9,6 +9,8 @@ export interface Label extends SVGAttributes<SVGElement> {
     y?: number;
     fontColor?: string;
     rotation?: number;
+    horizontalAlign?: "start" | "middle" | "end";
+    verticalAlign?: "hanging" | "middle" | "auto";
 }
 export interface Symbol extends SVGAttributes<SVGElement> {
     value?: string;
@@ -57,6 +59,9 @@ export interface TableProps {
     strokeWidth?: number;
     stroke?: string;
     opacity?: number;
+    fontSizeType1?: number;
+    fontSizeType2?: number;
+    fontSizeType3?: number;
     seatPositions?: {
         top: number;
         right: number;

package/dist/features/board-v3/board-slice.d.ts

@@ -1,3 +1,4 @@
+export type ShowTagType = "default" | "type-1" | "type-2" | "type-3";
 export interface Component {
     id: string;
     [key: string]: any;
@@ -18,7 +19,7 @@ export interface InitialState {
     historyChanges: HistoryEntry[];
     pointer: number;
     updateBy: "global" | "local";
-    isShowTagType: "default" | "type-1" | "type-2";
+    isShowTagType: ShowTagType;
 }
 export declare const addComponent: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, "board/addComponent">, removeComponent: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, "board/removeComponent">, updateComponent: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, "board/updateComponent">, setBackgroundColor: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, "board/setBackgroundColor">, removeExtraComponent: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, "board/removeExtraComponent">;
 declare const _default: import("redux").Reducer<InitialState>;

package/dist/features/board-v3/board-slice.js

@@ -162,13 +162,16 @@ const boardSlice = createSlice({
         },
         setScalingFontSize: (state, action) => {
             state.components = state.components.map((component) => {
-                var _a, _b, _c, _d, _e, _f;
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j;
                 if (((_a = action.payload) === null || _a === void 0 ? void 0 : _a.type) === "type-1") {
                     return Object.assign(Object.assign({}, component), { fontSizeType1: (_c = (_b = action.payload) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : 1 });
                 }
                 if (((_d = action.payload) === null || _d === void 0 ? void 0 : _d.type) === "type-2") {
                     return Object.assign(Object.assign({}, component), { fontSizeType2: (_f = (_e = action.payload) === null || _e === void 0 ? void 0 : _e.value) !== null && _f !== void 0 ? _f : 1 });
                 }
+                if (((_g = action.payload) === null || _g === void 0 ? void 0 : _g.type) === "type-3") {
+                    return Object.assign(Object.assign({}, component), { fontSizeType3: (_j = (_h = action.payload) === null || _h === void 0 ? void 0 : _h.value) !== null && _j !== void 0 ? _j : 1 });
+                }
                 return component;
             });
         },

package/dist/features/board-v3/constant.d.ts

@@ -5,4 +5,8 @@ declare const MIN_Y = 10;
 declare const ZOOM_STEP = 0.2;
 declare const ZOOM_MAX = 2;
 declare const ZOOM_MIN = 0.2;
-export { MIN_HEIGHT, MIN_WIDTH, MIN_X, MIN_Y, ZOOM_STEP, ZOOM_MAX, ZOOM_MIN };
+declare const FONT_SCALES: {
+    value: number;
+    label: string;
+}[];
+export { MIN_HEIGHT, MIN_WIDTH, MIN_X, MIN_Y, ZOOM_STEP, ZOOM_MAX, ZOOM_MIN, FONT_SCALES };

package/dist/features/board-v3/constant.js

@@ -5,4 +5,26 @@ const MIN_Y = 10;
 const ZOOM_STEP = 0.2;
 const ZOOM_MAX = 2;
 const ZOOM_MIN = 0.2;
-export { MIN_HEIGHT, MIN_WIDTH, MIN_X, MIN_Y, ZOOM_STEP, ZOOM_MAX, ZOOM_MIN };
+const FONT_SCALES = [
+    {
+        value: 0.5,
+        label: "Smallest (0,5×)",
+    },
+    {
+        value: 0.75,
+        label: "Smaller (0,75×)",
+    },
+    {
+        value: 1,
+        label: "Normal",
+    },
+    {
+        value: 2,
+        label: "Larger (2×)",
+    },
+    {
+        value: 3,
+        label: "Largest (3×)",
+    }
+];
+export { MIN_HEIGHT, MIN_WIDTH, MIN_X, MIN_Y, ZOOM_STEP, ZOOM_MAX, ZOOM_MIN, FONT_SCALES };