embroidery-qc-image 1.0.29 → 1.0.30

package/dist/components/EmbroideryQCImage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EmbroideryQCImage.d.ts","sourceRoot":"","sources":["../../src/components/EmbroideryQCImage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAE,kBAAkB,EAAE,sBAAsB,EAAY,MAAM,UAAU,CAAC;AAChF,OAAO,yBAAyB,CAAC;AAiKjC,MAAM,WAAW,8BAA8B;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,WAAW,GAAG,YAAY,GAAG,YAAY,CAAC;IACrD,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAofD,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAmHvD,CAAC;AAo9CF,eAAO,MAAM,6BAA6B,GACxC,QAAQ,kBAAkB,EAC1B,UAAS,8BAAmC,KAC3C,OAAO,CAAC,IAAI,GAAG,IAAI,CAuBrB,CAAC;AAEF,eAAO,MAAM,6BAA6B,GACxC,QAAQ,kBAAkB,EAC1B,UAAS,8BAAmC,KAC3C,OAAO,CAAC,MAAM,GAAG,IAAI,CAuBvB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"EmbroideryQCImage.d.ts","sourceRoot":"","sources":["../../src/components/EmbroideryQCImage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAE,kBAAkB,EAAE,sBAAsB,EAAY,MAAM,UAAU,CAAC;AAChF,OAAO,yBAAyB,CAAC;AAiKjC,MAAM,WAAW,8BAA8B;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,WAAW,GAAG,YAAY,GAAG,YAAY,CAAC;IACrD,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAofD,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAmHvD,CAAC;AA2kDF,eAAO,MAAM,6BAA6B,GACxC,QAAQ,kBAAkB,EAC1B,UAAS,8BAAmC,KAC3C,OAAO,CAAC,IAAI,GAAG,IAAI,CAuBrB,CAAC;AAEF,eAAO,MAAM,6BAA6B,GACxC,QAAQ,kBAAkB,EAC1B,UAAS,8BAAmC,KAC3C,OAAO,CAAC,MAAM,GAAG,IAAI,CAuBvB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/index.esm.js

@@ -1160,25 +1160,123 @@ displayIndex, showLabels, scaleFactor, imageRefs, mockupBounds = null) => {
             currentY += result.height;
         }
         if (showLabels.font && position.font) {
-            // Render "Font: " với font mặc định
             const prefix = "Font: ";
-            ctx.font = `${otherFontSize}px ${LAYOUT.FONT_FAMILY}`;
-            const prefixWidth = ctx.measureText(prefix).width;
-            let currentX = x + prefixWidth;
-            ctx.fillText(prefix, x, currentY);
-            // Render tên font với font từ config
-            ctx.font = `${otherFontSize}px ${position.font}`;
-            const fontNameWidth = ctx.measureText(position.font).width;
-            ctx.fillText(position.font, currentX, currentY);
-            currentX += fontNameWidth;
-            // Render "(Mặc định)" hoặc "(Custom)" với font mặc định
             const suffix = position.is_font_default === true ? " (Mặc định)" : " (Custom)";
-            ctx.font = `${otherFontSize}px ${LAYOUT.FONT_FAMILY}`;
-            ctx.measureText(suffix).width;
-            ctx.fillText(suffix, currentX, currentY);
-            // Tính toán height và di chuyển cursorY
+            const fontName = position.font;
+            const fullText = `${prefix}${fontName}${suffix}`;
             const lineHeight = otherFontSize + lineGap;
-            currentY += lineHeight;
+            const textTopY = currentY;
+            const effectiveMaxWidth = mockupBounds
+                ? getEffectiveMaxWidth(x, textTopY, lineHeight, maxWidth, mockupBounds)
+                : maxWidth;
+            const MIN_FONT_FONT_SIZE = otherFontSize * 0.5;
+            const measureFontTextWidth = (fontSize) => {
+                ctx.font = `${fontSize}px ${LAYOUT.FONT_FAMILY}`;
+                const prefixWidth = ctx.measureText(prefix).width;
+                ctx.font = `${fontSize}px ${position.font}`;
+                const fontNameWidth = ctx.measureText(fontName).width;
+                ctx.font = `${fontSize}px ${LAYOUT.FONT_FAMILY}`;
+                const suffixWidth = ctx.measureText(suffix).width;
+                return prefixWidth + fontNameWidth + suffixWidth;
+            };
+            const checkFontSizeFits = (fontSize) => {
+                const textTopY = currentY;
+                const lineHeight = fontSize + lineGap;
+                const effectiveMaxWidth = mockupBounds
+                    ? getEffectiveMaxWidth(x, textTopY, lineHeight, maxWidth, mockupBounds)
+                    : maxWidth;
+                const textWidth = measureFontTextWidth(fontSize);
+                return textWidth <= effectiveMaxWidth;
+            };
+            let effectiveFontSize = otherFontSize;
+            let needsWrap = false;
+            // Bước 1: Thử giảm font size, kiểm tra xem có vừa chiều ngang không
+            const baseMaxWidth = measureFontTextWidth(otherFontSize);
+            if (baseMaxWidth > effectiveMaxWidth) {
+                // Binary search để tìm font size lớn nhất mà vẫn vừa
+                let left = MIN_FONT_FONT_SIZE;
+                let right = otherFontSize;
+                let bestFontSize = MIN_FONT_FONT_SIZE;
+                while (right - left > 0.1) {
+                    const mid = (left + right) / 2;
+                    if (checkFontSizeFits(mid)) {
+                        bestFontSize = mid;
+                        left = mid;
+                    }
+                    else {
+                        right = mid;
+                    }
+                }
+                if (checkFontSizeFits(bestFontSize)) {
+                    // Bước 1 thành công: font size đã shrink vừa chiều ngang
+                    effectiveFontSize = Math.floor(bestFontSize);
+                }
+                else {
+                    // Bước 1 thất bại: đã shrink đến MIN nhưng vẫn không vừa, sang bước 2
+                    needsWrap = true;
+                    effectiveFontSize = otherFontSize;
+                }
+            }
+            if (needsWrap) {
+                // Bước 2: Xuống dòng với font size gốc
+                ctx.font = `${effectiveFontSize}px ${LAYOUT.FONT_FAMILY}`;
+                const wrappedLines = buildWrappedLines(ctx, fullText, effectiveMaxWidth, x, textTopY, lineHeight, mockupBounds);
+                wrappedLines.forEach((line, index) => {
+                    const lineY = textTopY + index * lineHeight;
+                    const lineEffectiveMaxWidth = mockupBounds
+                        ? getEffectiveMaxWidth(x, lineY, lineHeight, maxWidth, mockupBounds)
+                        : maxWidth;
+                    let lineToRender = line;
+                    const lineWidth = ctx.measureText(lineToRender).width;
+                    if (lineWidth > lineEffectiveMaxWidth) {
+                        while (ctx.measureText(lineToRender).width > lineEffectiveMaxWidth && lineToRender.length > 0) {
+                            lineToRender = lineToRender.slice(0, -1);
+                        }
+                    }
+                    ctx.fillText(lineToRender, x, lineY);
+                });
+                currentY += wrappedLines.length * lineHeight;
+            }
+            else {
+                // Bước 1 thành công: Render với font size đã shrink (1 dòng)
+                const shrunkTextTopY = currentY;
+                const shrunkLineHeight = effectiveFontSize + lineGap;
+                const shrunkEffectiveMaxWidth = mockupBounds
+                    ? getEffectiveMaxWidth(x, shrunkTextTopY, shrunkLineHeight, maxWidth, mockupBounds)
+                    : maxWidth;
+                ctx.font = `${effectiveFontSize}px ${LAYOUT.FONT_FAMILY}`;
+                const prefixWidth = ctx.measureText(prefix).width;
+                let currentX = x + prefixWidth;
+                ctx.fillText(prefix, x, currentY);
+                ctx.font = `${effectiveFontSize}px ${position.font}`;
+                const fontNameWidth = ctx.measureText(fontName).width;
+                const totalWidth = prefixWidth + fontNameWidth;
+                if (totalWidth > shrunkEffectiveMaxWidth) {
+                    // Cần cắt font name
+                    let truncatedFontName = fontName;
+                    while (ctx.measureText(truncatedFontName).width > shrunkEffectiveMaxWidth - prefixWidth && truncatedFontName.length > 0) {
+                        truncatedFontName = truncatedFontName.slice(0, -1);
+                    }
+                    ctx.fillText(truncatedFontName, currentX, currentY);
+                    currentX += ctx.measureText(truncatedFontName).width;
+                }
+                else {
+                    ctx.fillText(fontName, currentX, currentY);
+                    currentX += fontNameWidth;
+                }
+                ctx.font = `${effectiveFontSize}px ${LAYOUT.FONT_FAMILY}`;
+                const remainingWidth = shrunkEffectiveMaxWidth - (currentX - x);
+                if (remainingWidth > 0) {
+                    let truncatedSuffix = suffix;
+                    while (ctx.measureText(truncatedSuffix).width > remainingWidth && truncatedSuffix.length > 0) {
+                        truncatedSuffix = truncatedSuffix.slice(0, -1);
+                    }
+                    if (truncatedSuffix.length > 0) {
+                        ctx.fillText(truncatedSuffix, currentX, currentY);
+                    }
+                }
+                currentY += shrunkLineHeight;
+            }
         }
         if (showLabels.color) {
             const colorValue = position.character_colors?.join(", ") || position.color;
@@ -1324,126 +1422,115 @@ const renderIconPosition = (ctx, position, x, y, maxWidth, scaleFactor, imageRef
             }
         }
     }
-    // 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 textCenterY = cursorY + iconImageHeight / 2;
+    const valueStartX = x + labelWidth;
+    const textTopY = textCenterY - iconFontSize / 2;
+    const lineHeight = iconFontSize;
+    const effectiveMaxWidth = mockupBounds
+        ? getEffectiveMaxWidth(valueStartX, textTopY, lineHeight, availableWidth, mockupBounds)
+        : availableWidth;
     const MIN_ICON_VALUE_FONT_SIZE = iconFontSize * 0.5;
     const measureIconValueWidth = (fontSize) => {
         ctx.font = `${fontSize}px ${LAYOUT.FONT_FAMILY}`;
         return ctx.measureText(` ${iconValue}`).width;
     };
+    const checkFontSizeFits = (fontSize) => {
+        const textTopY = textCenterY - fontSize / 2;
+        const lineHeight = fontSize;
+        const effectiveMaxWidth = mockupBounds
+            ? getEffectiveMaxWidth(valueStartX, textTopY, lineHeight, availableWidth, mockupBounds)
+            : availableWidth;
+        const textWidth = measureIconValueWidth(fontSize);
+        return textWidth <= effectiveMaxWidth;
+    };
     let effectiveIconValueFontSize = iconFontSize;
-    const baseMaxWidth = measureIconValueWidth(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 = measureIconValueWidth(MIN_ICON_VALUE_FONT_SIZE);
-        if (minMaxWidth > availableWidth) {
-            // Vẫn overflow, cần dùng wrap text
+    // Bước 1: Thử giảm font size, kiểm tra xem có vừa chiều ngang không
+    const baseMaxWidth = measureIconValueWidth(iconFontSize);
+    if (baseMaxWidth > effectiveMaxWidth) {
+        // Binary search để tìm font size lớn nhất mà vẫn vừa
+        let left = MIN_ICON_VALUE_FONT_SIZE;
+        let right = iconFontSize;
+        let bestFontSize = MIN_ICON_VALUE_FONT_SIZE;
+        while (right - left > 0.1) {
+            const mid = (left + right) / 2;
+            if (checkFontSizeFits(mid)) {
+                bestFontSize = mid;
+                left = mid;
+            }
+            else {
+                right = mid;
+            }
+        }
+        if (checkFontSizeFits(bestFontSize)) {
+            // Bước 1 thành công: font size đã shrink vừa chiều ngang
+            effectiveIconValueFontSize = Math.floor(bestFontSize);
+        }
+        else {
+            // Bước 1 thất bại: đã shrink đến MIN nhưng vẫn không vừa, sang bước 2
             needsWrap = true;
-            effectiveIconValueFontSize = MIN_ICON_VALUE_FONT_SIZE;
+            effectiveIconValueFontSize = iconFontSize;
         }
     }
-    // Tính line height và block height cho icon value
-    const valueLineHeight = effectiveIconValueFontSize;
-    let allWrappedLines = [];
-    // Text align center: căn giữa theo chiều dọc trong block
-    const textCenterY = cursorY + iconImageHeight / 2;
-    const valueStartX = x + labelWidth;
-    if (needsWrap) {
-        // Dùng wrap text logic
-        const wrappedLines = buildWrappedLines(ctx, iconValue, availableWidth, valueStartX, textCenterY, valueLineHeight, mockupBounds);
-        allWrappedLines = wrappedLines;
-        wrappedLines.length * valueLineHeight;
-    }
-    else {
-        // Không cần wrap, chỉ một dòng
-        allWrappedLines = [iconValue];
-    }
-    // Vẽ label với textBaseline = middle để align center với value
+    // Bước 2: Nếu bước 1 thất bại, xuống dòng với font size gốc
     ctx.textBaseline = "middle";
     ctx.font = `bold ${iconFontSize}px ${LAYOUT.FONT_FAMILY}`;
     ctx.fillStyle = LAYOUT.LABEL_COLOR;
     ctx.fillText(iconLabel, x, textCenterY);
-    // Vẽ icon value với align center
     ctx.font = `${effectiveIconValueFontSize}px ${LAYOUT.FONT_FAMILY}`;
     ctx.fillStyle = DEFAULT_ERROR_COLOR;
     let maxValueLineWidth = 0;
-    // Vẽ icon value, căn giữa theo chiều dọc
+    let totalTextHeight = iconImageHeight;
     if (needsWrap) {
-        // Có nhiều dòng sau khi wrap
-        allWrappedLines.forEach((line, index) => {
-            const lineY = textCenterY - (allWrappedLines.length - 1) / 2 * valueLineHeight + index * valueLineHeight;
-            // Kiểm tra overlap với mockup và điều chỉnh text nếu cần
-            if (mockupBounds) {
-                const effectiveMaxWidth = getEffectiveMaxWidth(valueStartX, lineY, valueLineHeight, availableWidth, mockupBounds);
-                const lineWidth = ctx.measureText(line).width;
-                if (lineWidth > effectiveMaxWidth) {
-                    // Cắt text cho đến khi vừa với effectiveMaxWidth
-                    let truncatedLine = line;
-                    while (ctx.measureText(truncatedLine).width > effectiveMaxWidth && truncatedLine.length > 0) {
-                        truncatedLine = truncatedLine.slice(0, -1);
-                    }
-                    ctx.fillText(truncatedLine, valueStartX, lineY);
-                    const w = ctx.measureText(truncatedLine).width;
-                    if (w > maxValueLineWidth)
-                        maxValueLineWidth = w;
-                }
-                else {
-                    ctx.fillText(line, valueStartX, lineY);
-                    const w = ctx.measureText(line).width;
-                    if (w > maxValueLineWidth)
-                        maxValueLineWidth = w;
+        // Bước 2: Xuống dòng với font size gốc
+        const wrappedLines = buildWrappedLines(ctx, iconValue, effectiveMaxWidth, valueStartX, textTopY, lineHeight, mockupBounds);
+        // Tính height dựa trên số dòng thực tế
+        totalTextHeight = Math.max(iconImageHeight, wrappedLines.length * lineHeight);
+        wrappedLines.forEach((line, index) => {
+            const lineTopY = textTopY + index * lineHeight;
+            const lineCenterY = lineTopY + lineHeight / 2;
+            const lineEffectiveMaxWidth = mockupBounds
+                ? getEffectiveMaxWidth(valueStartX, lineTopY, lineHeight, availableWidth, mockupBounds)
+                : availableWidth;
+            let lineToRender = line;
+            const lineWidth = ctx.measureText(lineToRender).width;
+            if (lineWidth > lineEffectiveMaxWidth) {
+                while (ctx.measureText(lineToRender).width > lineEffectiveMaxWidth && lineToRender.length > 0) {
+                    lineToRender = lineToRender.slice(0, -1);
                 }
             }
-            else {
-                ctx.fillText(line, valueStartX, lineY);
-                const w = ctx.measureText(line).width;
-                if (w > maxValueLineWidth)
-                    maxValueLineWidth = w;
-            }
+            ctx.fillText(lineToRender, valueStartX, lineCenterY);
+            const w = ctx.measureText(lineToRender).width;
+            if (w > maxValueLineWidth)
+                maxValueLineWidth = w;
         });
     }
     else {
-        // Chỉ một dòng, căn giữa
+        // Bước 1 thành công: Render với font size đã shrink (1 dòng)
+        const shrunkTextTopY = textCenterY - effectiveIconValueFontSize / 2;
+        const shrunkLineHeight = effectiveIconValueFontSize;
+        const shrunkEffectiveMaxWidth = mockupBounds
+            ? getEffectiveMaxWidth(valueStartX, shrunkTextTopY, shrunkLineHeight, availableWidth, mockupBounds)
+            : availableWidth;
         const lineText = ` ${iconValue}`;
-        // Kiểm tra overlap với mockup và điều chỉnh text nếu cần
-        if (mockupBounds) {
-            const effectiveMaxWidth = getEffectiveMaxWidth(valueStartX, textCenterY, valueLineHeight, availableWidth, mockupBounds);
-            const lineWidth = ctx.measureText(lineText).width;
-            if (lineWidth > effectiveMaxWidth) {
-                // Cắt text cho đến khi vừa với effectiveMaxWidth
-                let truncatedLine = lineText;
-                while (ctx.measureText(truncatedLine).width > effectiveMaxWidth && truncatedLine.length > 0) {
-                    truncatedLine = truncatedLine.slice(0, -1);
-                }
-                ctx.fillText(truncatedLine, valueStartX, textCenterY);
-                const w = ctx.measureText(truncatedLine).width;
-                if (w > maxValueLineWidth)
-                    maxValueLineWidth = w;
-            }
-            else {
-                ctx.fillText(lineText, valueStartX, textCenterY);
-                const w = ctx.measureText(lineText).width;
-                if (w > maxValueLineWidth)
-                    maxValueLineWidth = w;
+        let lineToRender = lineText;
+        const lineWidth = ctx.measureText(lineToRender).width;
+        if (lineWidth > shrunkEffectiveMaxWidth) {
+            while (ctx.measureText(lineToRender).width > shrunkEffectiveMaxWidth && lineToRender.length > 0) {
+                lineToRender = lineToRender.slice(0, -1);
             }
         }
-        else {
-            ctx.fillText(lineText, valueStartX, textCenterY);
-            const w = ctx.measureText(lineText).width;
-            if (w > maxValueLineWidth)
-                maxValueLineWidth = w;
-        }
+        ctx.fillText(lineToRender, valueStartX, textCenterY);
+        const w = ctx.measureText(lineToRender).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,
+        height: totalTextHeight + lineGap,
         // tổng width của cả label + value, dùng để canh icon image lệch sang phải
         lastLineWidth: labelWidth + maxValueLineWidth};
     // Kiểm tra xem phần icon image có vượt quá canvas không trước khi render