embroidery-qc-image 1.0.26 → 1.0.27

package/dist/index.js

@@ -1071,16 +1071,22 @@ displayIndex, showLabels, scaleFactor, imageRefs) => {
             effectiveTextFontSize = textFontSize * shrinkRatio;
         }
     }
-    // Vẽ phần value với font hiệu dụng, màu đỏ
+    // Line height luôn theo Text label (textFontSize), không theo effectiveTextFontSize
+    const valueLineHeight = textFontSize;
+    const textBlockHeight = lines.length * valueLineHeight;
+    // Text align center: căn giữa theo chiều dọc trong block
+    const textCenterY = currentY + textBlockHeight / 2;
+    // Vẽ phần value với font hiệu dụng, màu đỏ, align center
+    ctx.textBaseline = "middle";
     ctx.font = `${effectiveTextFontSize}px ${LAYOUT.FONT_FAMILY}`;
     ctx.fillStyle = DEFAULT_ERROR_COLOR;
-    const valueLineHeight = effectiveTextFontSize; // giữ giống wrapText cũ (lineHeight = fontSize)
-    let localY = currentY;
+    // Vẽ từ trên xuống: căn giữa mỗi dòng
     lines.forEach((line, idx) => {
-        ctx.fillText(line, valueStartX, localY);
-        localY += valueLineHeight;
+        const lineY = textCenterY - (lines.length - 1) / 2 * valueLineHeight + idx * valueLineHeight;
+        ctx.fillText(line, valueStartX, lineY);
     });
-    const textBlockHeight = lines.length * valueLineHeight;
+    // Reset textBaseline về top cho các phần tiếp theo
+    ctx.textBaseline = LAYOUT.TEXT_BASELINE;
     currentY += textBlockHeight;
     drawnHeight += textBlockHeight;
     // Draw additional labels (skip when text is empty)
@@ -1241,29 +1247,102 @@ const renderIconPosition = (ctx, position, x, y, maxWidth, scaleFactor, imageRef
     // Kiểm tra xem có icon_image không để tính height phù hợp
     const hasIconImage = position.icon_image && position.icon_image.trim().length > 0;
     const iconImageHeight = hasIconImage ? iconFontSize * 2 : iconFontSize;
-    // Text align bottom: đặt text ở dưới cùng của dòng
-    const textBottomY = cursorY + iconImageHeight;
-    // Đo width trước khi vẽ
+    // Đo width của label
     ctx.font = `bold ${iconFontSize}px ${LAYOUT.FONT_FAMILY}`;
     const labelWidth = ctx.measureText(iconLabel).width;
-    ctx.font = `${iconFontSize}px ${LAYOUT.FONT_FAMILY}`;
-    const valueText = ` ${iconValue}`;
-    const valueWidth = ctx.measureText(valueText).width;
-    // Vẽ text với textBaseline = bottom
-    ctx.textBaseline = "bottom";
+    // Chuẩn hóa xuống dòng cho icon_value (giống text value)
+    const normalizeNewlines = (text) => text
+        .replace(/\r\n/g, "\n")
+        .replace(/\r/g, "\n")
+        .replace(/\\n/g, "\n");
+    const normalizedIconValue = normalizeNewlines(iconValue);
+    const iconValueLines = normalizedIconValue.split("\n");
+    // Tính kích thước icon_image nếu có để chừa khoảng trống
+    let iconImageReservedWidth = 0;
+    if (hasIconImage) {
+        const iconUrl = getIconImageUrl(position);
+        if (iconUrl) {
+            const img = imageRefs.current.get(iconUrl);
+            if (img?.complete && img.naturalHeight > 0) {
+                const ratio = img.naturalWidth / img.naturalHeight;
+                const iconHeight = iconFontSize * 2;
+                const iconWidth = Math.max(1, Math.floor(iconHeight * ratio));
+                iconImageReservedWidth = iconWidth + LAYOUT.ELEMENT_SPACING * scaleFactor;
+            }
+        }
+    }
+    // Tính available width cho icon value (trừ đi khoảng trống cho icon_image)
+    const availableWidth = Math.max(1, maxWidth - labelWidth - iconImageReservedWidth);
+    // Tính font-size hiệu dụng cho icon value
+    // Giới hạn thu nhỏ tối đa 50% (tối thiểu = iconFontSize * 0.5)
+    const MIN_ICON_VALUE_FONT_SIZE = iconFontSize * 0.5;
+    const measureMaxLineWidth = (fontSize) => {
+        ctx.font = `${fontSize}px ${LAYOUT.FONT_FAMILY}`;
+        let maxLineWidth = 0;
+        iconValueLines.forEach((line) => {
+            const w = ctx.measureText(` ${line}`).width;
+            if (w > maxLineWidth)
+                maxLineWidth = w;
+        });
+        return maxLineWidth;
+    };
+    let effectiveIconValueFontSize = iconFontSize;
+    const baseMaxWidth = measureMaxLineWidth(iconFontSize);
+    let needsWrap = false;
+    if (baseMaxWidth > availableWidth) {
+        const shrinkRatio = availableWidth / baseMaxWidth;
+        effectiveIconValueFontSize = Math.max(MIN_ICON_VALUE_FONT_SIZE, iconFontSize * shrinkRatio);
+        // Kiểm tra xem sau khi thu nhỏ đến 50% có vẫn overflow không
+        const minMaxWidth = measureMaxLineWidth(MIN_ICON_VALUE_FONT_SIZE);
+        if (minMaxWidth > availableWidth) {
+            // Vẫn overflow, cần dùng wrap text
+            needsWrap = true;
+            effectiveIconValueFontSize = MIN_ICON_VALUE_FONT_SIZE;
+        }
+    }
+    // Tính line height và block height cho icon value
+    const valueLineHeight = effectiveIconValueFontSize;
+    let allWrappedLines = [];
+    if (needsWrap) {
+        // Dùng wrap text logic: wrap tất cả các dòng trước
+        iconValueLines.forEach((line) => {
+            const wrappedLines = buildWrappedLines(ctx, line, availableWidth);
+            allWrappedLines.push(...wrappedLines);
+        });
+        allWrappedLines.length * valueLineHeight;
+    }
+    else {
+        allWrappedLines = iconValueLines;
+        iconValueLines.length * valueLineHeight;
+    }
+    // Text align center: căn giữa theo chiều dọc trong block
+    const textCenterY = cursorY + iconImageHeight / 2;
+    // Vẽ label với textBaseline = middle để align center với value
+    ctx.textBaseline = "middle";
     ctx.font = `bold ${iconFontSize}px ${LAYOUT.FONT_FAMILY}`;
     ctx.fillStyle = LAYOUT.LABEL_COLOR;
-    ctx.fillText(iconLabel, x, textBottomY);
-    ctx.font = `${iconFontSize}px ${LAYOUT.FONT_FAMILY}`;
+    ctx.fillText(iconLabel, x, textCenterY);
+    const valueStartX = x + labelWidth;
+    // Vẽ icon value với align center
+    ctx.font = `${effectiveIconValueFontSize}px ${LAYOUT.FONT_FAMILY}`;
     ctx.fillStyle = DEFAULT_ERROR_COLOR;
-    ctx.fillText(valueText, x + labelWidth, textBottomY);
+    let maxValueLineWidth = 0;
+    // Vẽ từng dòng, căn giữa theo chiều dọc
+    allWrappedLines.forEach((line, index) => {
+        const lineY = textCenterY - (allWrappedLines.length - 1) / 2 * valueLineHeight + index * valueLineHeight;
+        const lineText = needsWrap ? line : ` ${line}`;
+        ctx.fillText(lineText, valueStartX, lineY);
+        const w = ctx.measureText(lineText).width;
+        if (w > maxValueLineWidth)
+            maxValueLineWidth = w;
+    });
     ctx.fillStyle = LAYOUT.LABEL_COLOR;
     // Reset textBaseline về top cho các phần tiếp theo
     ctx.textBaseline = LAYOUT.TEXT_BASELINE;
     const iconResult = {
         height: iconImageHeight + lineGap,
         // tổng width của cả label + value, dùng để canh icon image lệch sang phải
-        lastLineWidth: labelWidth + valueWidth};
+        lastLineWidth: labelWidth + maxValueLineWidth};
     // Draw icon image
     const iconUrl = getIconImageUrl(position);
     if (iconUrl) {
@@ -1276,7 +1355,7 @@ const renderIconPosition = (ctx, position, x, y, maxWidth, scaleFactor, imageRef
             const iconX = x +
                 Math.ceil(iconResult.lastLineWidth) +
                 LAYOUT.ELEMENT_SPACING * scaleFactor;
-            const iconY = textBottomY - iconHeight; // Align bottom với text
+            const iconY = textCenterY - iconHeight / 2; // Align center với text
             ctx.drawImage(img, iconX, iconY, swatchW, iconHeight);
         }
     }