embroidery-qc-image 1.0.25 → 1.0.27

package/dist/index.js

@@ -48,7 +48,7 @@ const LAYOUT = {
     // Font sizes (base values, will be multiplied by scaleFactor)
     HEADER_FONT_SIZE: 220,
     TEXT_FONT_SIZE: 200,
-    OTHER_FONT_SIZE: 180,
+    OTHER_FONT_SIZE: 160,
     // Colors
     HEADER_COLOR: "#000000",
     LABEL_COLOR: "#444444",
@@ -62,15 +62,10 @@ const LAYOUT = {
     SECTION_SPACING: 60,
     ELEMENT_SPACING: 100,
     SWATCH_SPACING: 25,
-    FLORAL_SPACING: 100,
     // Visual styling
     SWATCH_HEIGHT_RATIO: 2.025,
     UNDERLINE_POSITION: 0.9,
-    UNDERLINE_WIDTH: 10,
-    // Swatch reserved space
-    SWATCH_RESERVED_SPACE: 1000,
-    MIN_TEXT_WIDTH: 400,
-};
+    UNDERLINE_WIDTH: 10};
 // ============================================================================
 // HELPER FUNCTIONS
 // ============================================================================
@@ -388,6 +383,22 @@ const buildWrappedLines = (ctx, text, maxWidth) => {
     });
     return result.length ? result : [""];
 };
+const calculateSwatchesWidth = (colors, swatchHeight, scaleFactor, imageRefs) => {
+    let totalWidth = 0;
+    colors.forEach((color, index) => {
+        const url = getImageUrl("threadColor", color);
+        const img = imageRefs.current.get(url);
+        if (img && img.complete && img.naturalHeight > 0) {
+            const ratio = img.naturalWidth / img.naturalHeight;
+            const swatchW = Math.max(1, Math.floor(swatchHeight * ratio));
+            totalWidth += swatchW;
+            if (index < colors.length - 1) {
+                totalWidth += LAYOUT.SWATCH_SPACING * scaleFactor;
+            }
+        }
+    });
+    return totalWidth;
+};
 const drawSwatches = (ctx, colors, startX, startY, swatchHeight, scaleFactor, imageRefs) => {
     let swatchX = startX;
     colors.forEach((color) => {
@@ -546,22 +557,6 @@ const renderEmbroideryCanvas = (canvas, config, canvasSize, imageRefs) => {
             imageRefs.current.set("mockup", mockupImage);
         }
     }
-    const floralAssets = [];
-    const seenFlorals = new Set();
-    config.sides.forEach((side) => {
-        side.positions.forEach((position) => {
-            if (position.type === "TEXT" && position.floral_pattern) {
-                const url = getImageUrl("floral", position.floral_pattern);
-                if (!seenFlorals.has(url)) {
-                    const img = imageRefs.current.get(url);
-                    if (img?.complete && img.naturalWidth > 0) {
-                        floralAssets.push(img);
-                        seenFlorals.add(url);
-                    }
-                }
-            }
-        });
-    });
     const measureCanvas = document.createElement("canvas");
     measureCanvas.width = canvas.width;
     measureCanvas.height = canvas.height;
@@ -586,7 +581,7 @@ const renderEmbroideryCanvas = (canvas, config, canvasSize, imageRefs) => {
         measureY += sideHeight + measureSpacing;
     });
     const scaleFactor = Math.max(0.5, Math.min(1, (canvas.height - LAYOUT.PADDING - warningHeight - messageHeight) / measureY));
-    drawMockupAndFlorals(ctx, canvas, floralAssets, imageRefs);
+    drawMockupAndFlorals(ctx, canvas, imageRefs);
     // Render warning & message with scaleFactor and get actual heights
     let actualWarningHeight = 0;
     let actualMessageHeight = 0;
@@ -685,7 +680,7 @@ const renderWarning = (ctx, canvas, message, scaleFactor = 1, offsetY = 0, prefi
     // Return the actual height of the warning (number of lines * lineHeight)
     return lines.length * lineHeight;
 };
-const drawMockupAndFlorals = (ctx, canvas, floralAssets, imageRefs) => {
+const drawMockupAndFlorals = (ctx, canvas, imageRefs) => {
     const mockupImg = imageRefs.current.get("mockup");
     if (!mockupImg?.complete || !mockupImg.naturalWidth)
         return;
@@ -698,19 +693,7 @@ const drawMockupAndFlorals = (ctx, canvas, floralAssets, imageRefs) => {
     const x = canvas.width - margin - width;
     const y = canvas.height - margin - height;
     ctx.drawImage(mockupImg, x, y, width, height);
-    // Draw florals
-    if (floralAssets.length > 0) {
-        const floralH = Math.min(500, height);
-        let currentX = x - LAYOUT.FLORAL_SPACING;
-        for (let i = floralAssets.length - 1; i >= 0; i--) {
-            const img = floralAssets[i];
-            const ratio = img.naturalWidth / Math.max(1, img.naturalHeight);
-            const w = Math.max(1, Math.floor(floralH * ratio));
-            currentX -= w;
-            ctx.drawImage(img, currentX, y + height - floralH, w, floralH);
-            currentX -= LAYOUT.FLORAL_SPACING;
-        }
-    }
+    // Bỏ phần vẽ florals cạnh mockup vì đã hiển thị cạnh text rồi
 };
 const renderSide = (ctx, side, startY, width, scaleFactor, imageRefs) => {
     let currentY = startY;
@@ -732,8 +715,33 @@ const renderSide = (ctx, side, startY, width, scaleFactor, imageRefs) => {
     ctx.stroke();
     currentY += headerResult.height + LAYOUT.SECTION_SPACING * scaleFactor;
     ctx.restore();
-    // Compute uniform properties
+    // Kiểm tra xem có phải trường hợp "không thêu gì" không
     const textPositions = side.positions.filter((p) => p.type === "TEXT");
+    const iconPositions = side.positions.filter((p) => p.type === "ICON");
+    // Kiểm tra tất cả TEXT positions có trống không
+    // Nếu không có TEXT positions, coi như "tất cả TEXT trống" = true
+    const allTextEmpty = textPositions.length === 0 || textPositions.every((p) => {
+        const text = p.text ?? "";
+        return text.trim() === "";
+    });
+    // Kiểm tra tất cả ICON positions có is_delete_icon = true không
+    // Nếu không có ICON positions, coi như "tất cả ICON bị xóa" = true
+    const allIconsDeleted = iconPositions.length === 0 || iconPositions.every((p) => {
+        return p.is_delete_icon === true;
+    });
+    // Nếu tất cả TEXT trống và tất cả ICON bị xóa, chỉ render dòng "(không thêu gì)"
+    if (allTextEmpty && allIconsDeleted && side.positions.length > 0) {
+        ctx.save();
+        const otherFontSize = LAYOUT.OTHER_FONT_SIZE * scaleFactor;
+        const lineGap = LAYOUT.LINE_GAP * scaleFactor;
+        ctx.font = `${otherFontSize}px ${LAYOUT.FONT_FAMILY}`;
+        ctx.fillStyle = DEFAULT_ERROR_COLOR;
+        ctx.fillText("(không thêu gì)", padding, currentY);
+        currentY += otherFontSize + lineGap;
+        ctx.restore();
+        return currentY - startY;
+    }
+    // Compute uniform properties
     const iconColorPositions = side.positions.filter((p) => p.type === "ICON" && (!p.layer_colors?.length || p.layer_colors.length === 1));
     const iconColorValues = iconColorPositions
         .map((p) => {
@@ -918,23 +926,87 @@ const renderUniformLabels = (ctx, uniformProps, x, y, maxWidth, scaleFactor, ima
         rendered++;
     }
     if (values.color && values.color !== "None" && shouldRenderField("color")) {
-        const textMaxWidth = Math.max(LAYOUT.MIN_TEXT_WIDTH * scaleFactor, maxWidth - LAYOUT.SWATCH_RESERVED_SPACE * scaleFactor);
-        const result = wrapText(ctx, `Màu chỉ: ${values.color}`, x, cursorY, textMaxWidth, fontSize + lineGap);
-        const swatchH = Math.floor(fontSize * LAYOUT.SWATCH_HEIGHT_RATIO);
-        const swatchX = x +
-            Math.ceil(result.lastLineWidth) +
-            LAYOUT.ELEMENT_SPACING * scaleFactor;
-        const swatchY = result.lastLineY + Math.floor(fontSize / 2 - swatchH / 2);
         const colors = values.color.includes(",")
             ? values.color.split(",").map((s) => s.trim())
             : [values.color];
+        const swatchH = Math.floor(fontSize * LAYOUT.SWATCH_HEIGHT_RATIO);
+        const totalSwatchWidth = calculateSwatchesWidth(colors, swatchH, scaleFactor, imageRefs);
+        // Vẽ text với maxWidth bình thường (không trừ SWATCH_RESERVED_SPACE)
+        const result = wrapText(ctx, `Màu chỉ: ${values.color}`, x, cursorY, maxWidth, fontSize + lineGap);
+        // Kiểm tra xem có đủ chỗ cho swatches trên cùng dòng không
+        const textEndX = x + Math.ceil(result.lastLineWidth);
+        const spacing = LAYOUT.ELEMENT_SPACING * scaleFactor;
+        const swatchesStartX = textEndX + spacing;
+        const swatchesEndX = swatchesStartX + totalSwatchWidth;
+        const shouldWrapSwatches = swatchesEndX > x + maxWidth;
+        let swatchX;
+        let swatchY;
+        if (shouldWrapSwatches) {
+            // Không đủ chỗ, cho TẤT CẢ swatches xuống dòng mới
+            swatchX = x;
+            swatchY = result.lastLineY + fontSize + lineGap;
+            cursorY += result.height + fontSize + lineGap;
+        }
+        else {
+            // Đủ chỗ, vẽ swatches ngay sau text trên cùng dòng
+            swatchX = swatchesStartX;
+            swatchY = result.lastLineY + Math.floor(fontSize / 2 - swatchH / 2);
+            cursorY += result.height;
+        }
         drawSwatches(ctx, colors, swatchX, swatchY, swatchH, scaleFactor, imageRefs);
-        cursorY += result.height;
+        if (shouldWrapSwatches) {
+            cursorY += swatchH;
+        }
         rendered++;
     }
     if (values.floral && values.floral !== "None" && shouldRenderField("floral")) {
-        const result = wrapText(ctx, `Mẫu hoa: ${values.floral}`, x, cursorY, maxWidth, fontSize + lineGap);
-        cursorY += result.height;
+        const floralUrl = getImageUrl("floral", values.floral);
+        const floralImg = imageRefs.current.get(floralUrl);
+        // Tính kích thước ảnh floral (thêm 50% = 2.5x fontSize)
+        const floralH = fontSize * 2.5;
+        let totalFloralWidth = 0;
+        if (floralImg?.complete && floralImg.naturalHeight > 0) {
+            const ratio = floralImg.naturalWidth / floralImg.naturalHeight;
+            totalFloralWidth = Math.max(1, Math.floor(floralH * ratio));
+        }
+        // Line height giống icon_image: floralH + lineGap
+        const floralLineHeight = floralH + lineGap;
+        // Text align bottom: đặt text ở dưới cùng của dòng
+        const textBottomY = cursorY + floralH;
+        // Đo width trước khi vẽ
+        ctx.font = `${fontSize}px ${LAYOUT.FONT_FAMILY}`;
+        const labelText = `Mẫu hoa: ${values.floral}`;
+        const labelWidth = ctx.measureText(labelText).width;
+        // Vẽ text với textBaseline = bottom
+        ctx.textBaseline = "bottom";
+        ctx.fillStyle = LAYOUT.LABEL_COLOR;
+        ctx.fillText(labelText, x, textBottomY);
+        // Reset textBaseline về top cho các phần tiếp theo
+        ctx.textBaseline = LAYOUT.TEXT_BASELINE;
+        // Kiểm tra xem có đủ chỗ cho ảnh floral trên cùng dòng không
+        const textEndX = x + labelWidth;
+        const spacing = LAYOUT.ELEMENT_SPACING * scaleFactor;
+        const floralStartX = textEndX + spacing;
+        const floralEndX = floralStartX + totalFloralWidth;
+        const shouldWrapFloral = floralEndX > x + maxWidth;
+        let floralX;
+        let floralY;
+        if (shouldWrapFloral) {
+            // Không đủ chỗ, cho ảnh floral xuống dòng mới
+            floralX = x;
+            floralY = textBottomY + lineGap;
+            cursorY += floralLineHeight;
+        }
+        else {
+            // Đủ chỗ, vẽ ảnh floral ngay sau text trên cùng dòng
+            floralX = floralStartX;
+            floralY = textBottomY - floralH; // Align bottom với text
+            cursorY += floralLineHeight;
+        }
+        // Vẽ ảnh floral
+        if (floralImg?.complete && floralImg.naturalHeight > 0) {
+            ctx.drawImage(floralImg, floralX, floralY, totalFloralWidth, floralH);
+        }
         rendered++;
     }
     if (rendered > 0)
@@ -942,40 +1014,88 @@ const renderUniformLabels = (ctx, uniformProps, x, y, maxWidth, scaleFactor, ima
     ctx.restore();
     return cursorY - y;
 };
-const renderTextPosition = (ctx, position, x, y, maxWidth, displayIndex, showLabels, scaleFactor, imageRefs) => {
+const renderTextPosition = (ctx, position, x, y, maxWidth, // tổng chiều rộng usable (không tính padding ngoài)
+displayIndex, showLabels, scaleFactor, imageRefs) => {
     ctx.save();
     const textFontSize = LAYOUT.TEXT_FONT_SIZE * scaleFactor;
     const otherFontSize = LAYOUT.OTHER_FONT_SIZE * scaleFactor;
     const lineGap = LAYOUT.LINE_GAP * scaleFactor;
     let currentY = y;
     let drawnHeight = 0;
-    // Draw label
+    // Chuẩn hóa xuống dòng:
+    // - Hỗ trợ cả newline thật (\n) và chuỗi literal "\\n" từ JSON
+    const normalizeNewlines = (text) => text
+        .replace(/\r\n/g, "\n")
+        .replace(/\r/g, "\n")
+        .replace(/\\n/g, "\n");
+    // Get display text (handle empty/null/undefined) sau khi normalize
+    const rawOriginalText = position.text ?? "";
+    const normalizedText = normalizeNewlines(rawOriginalText);
+    const isEmptyText = normalizedText.trim() === "";
+    // ===========================================================================
+    // PHẦN TEXT CHÍNH
+    // - Giữ nguyên format: chỉ xuống dòng khi có '\n'
+    // - Không tự wrap theo maxWidth
+    // - Nếu tổng chiều ngang > maxWidth, tự động giảm font-size để vừa
+    // ===========================================================================
+    // Label "Text N: " luôn là font mặc định (không bị co theo nội dung)
     const textLabel = `Text ${displayIndex}: `;
     ctx.font = `bold ${textFontSize}px ${LAYOUT.FONT_FAMILY}`;
     ctx.fillStyle = LAYOUT.LABEL_COLOR;
     const labelWidth = ctx.measureText(textLabel).width;
     ctx.fillText(textLabel, x, currentY);
-    const textMaxWidth = maxWidth - labelWidth;
-    // Get display text (handle empty/null/undefined)
-    const isEmptyText = !position.text || position.text.trim() === "";
-    // Draw text content - dùng font mặc định và màu đỏ
-    ctx.font = `${textFontSize}px ${LAYOUT.FONT_FAMILY}`;
-    ctx.fillStyle = DEFAULT_ERROR_COLOR;
-    if (isEmptyText) {
-        const textResult = wrapText(ctx, "(không có text)", x + labelWidth, currentY, textMaxWidth, textFontSize);
-        currentY += textResult.height;
-        drawnHeight += textResult.height;
-    }
-    else {
-        const textResult = wrapText(ctx, position.text, x + labelWidth, currentY, textMaxWidth, textFontSize);
-        currentY += textResult.height;
-        drawnHeight += textResult.height;
+    // Phần text value bắt đầu sau label
+    const valueStartX = x + labelWidth;
+    const availableWidth = Math.max(1, maxWidth - labelWidth);
+    // Chuẩn hóa nội dung text để render
+    const rawText = isEmptyText ? "(không có text)" : normalizedText;
+    const lines = rawText.split("\n");
+    // Tính font-size hiệu dụng cho phần value sao cho:
+    // - Không vượt quá availableWidth
+    // - Có thể thu nhỏ tùy ý (theo yêu cầu, không giới hạn tối thiểu)
+    const measureMaxLineWidth = (fontSize) => {
+        ctx.font = `${fontSize}px ${LAYOUT.FONT_FAMILY}`;
+        let maxLineWidth = 0;
+        lines.forEach((line) => {
+            const w = ctx.measureText(line).width;
+            if (w > maxLineWidth)
+                maxLineWidth = w;
+        });
+        return maxLineWidth;
+    };
+    let effectiveTextFontSize = textFontSize;
+    if (!isEmptyText) {
+        const baseMaxWidth = measureMaxLineWidth(textFontSize);
+        if (baseMaxWidth > availableWidth) {
+            const shrinkRatio = availableWidth / baseMaxWidth;
+            effectiveTextFontSize = textFontSize * shrinkRatio;
+        }
     }
+    // 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;
+    // Vẽ từ trên xuống: căn giữa mỗi dòng
+    lines.forEach((line, idx) => {
+        const lineY = textCenterY - (lines.length - 1) / 2 * valueLineHeight + idx * valueLineHeight;
+        ctx.fillText(line, valueStartX, lineY);
+    });
+    // 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)
     if (!isEmptyText) {
         currentY += lineGap;
         ctx.font = `${otherFontSize}px ${LAYOUT.FONT_FAMILY}`;
         ctx.fillStyle = LAYOUT.LABEL_COLOR;
+        // Lưu ý: phần dưới này vẫn có thể wrap theo maxWidth vì đây chỉ là label mô tả,
+        // không phải nội dung Text chính cần giữ nguyên format.
         if (showLabels.shape && position.text_shape) {
             const result = wrapText(ctx, `Kiểu chữ: ${position.text_shape}`, x, currentY, maxWidth, otherFontSize + lineGap);
             currentY += result.height;
@@ -1006,23 +1126,90 @@ const renderTextPosition = (ctx, position, x, y, maxWidth, displayIndex, showLab
         if (showLabels.color) {
             const colorValue = position.character_colors?.join(", ") || position.color;
             if (colorValue) {
-                const textMaxWidth = Math.max(LAYOUT.MIN_TEXT_WIDTH * scaleFactor, maxWidth - LAYOUT.SWATCH_RESERVED_SPACE * scaleFactor);
-                const result = wrapText(ctx, `Màu chỉ: ${colorValue}`, x, currentY, textMaxWidth, otherFontSize + lineGap);
-                const swatchH = Math.floor(otherFontSize * LAYOUT.SWATCH_HEIGHT_RATIO);
-                const swatchX = x +
-                    Math.ceil(result.lastLineWidth) +
-                    LAYOUT.ELEMENT_SPACING * scaleFactor;
-                const swatchY = result.lastLineY + Math.floor(otherFontSize / 2 - swatchH / 2);
                 const colors = position.character_colors || [position.color];
+                const swatchH = Math.floor(otherFontSize * LAYOUT.SWATCH_HEIGHT_RATIO);
+                const totalSwatchWidth = calculateSwatchesWidth(colors, swatchH, scaleFactor, imageRefs);
+                // Vẽ text với maxWidth bình thường (không trừ SWATCH_RESERVED_SPACE)
+                const result = wrapText(ctx, `Màu chỉ: ${colorValue}`, x, currentY, maxWidth, otherFontSize + lineGap);
+                // Kiểm tra xem có đủ chỗ cho swatches trên cùng dòng không
+                const textEndX = x + Math.ceil(result.lastLineWidth);
+                const spacing = LAYOUT.ELEMENT_SPACING * scaleFactor;
+                const swatchesStartX = textEndX + spacing;
+                const swatchesEndX = swatchesStartX + totalSwatchWidth;
+                const shouldWrapSwatches = swatchesEndX > x + maxWidth;
+                let swatchX;
+                let swatchY;
+                if (shouldWrapSwatches) {
+                    // Không đủ chỗ, cho TẤT CẢ swatches xuống dòng mới
+                    swatchX = x;
+                    swatchY = result.lastLineY + otherFontSize + lineGap;
+                    currentY += result.height + otherFontSize + lineGap;
+                    drawnHeight += result.height + otherFontSize + lineGap;
+                }
+                else {
+                    // Đủ chỗ, vẽ swatches ngay sau text trên cùng dòng
+                    swatchX = swatchesStartX;
+                    swatchY = result.lastLineY + Math.floor(otherFontSize / 2 - swatchH / 2);
+                    currentY += result.height;
+                    drawnHeight += result.height;
+                }
                 drawSwatches(ctx, colors, swatchX, swatchY, swatchH, scaleFactor, imageRefs);
-                currentY += result.height;
-                drawnHeight += result.height;
+                if (shouldWrapSwatches) {
+                    currentY += swatchH;
+                    drawnHeight += swatchH;
+                }
             }
         }
         if (showLabels.floral && position.floral_pattern) {
-            const result = wrapText(ctx, `Mẫu hoa: ${position.floral_pattern}`, x, currentY, maxWidth, otherFontSize + lineGap);
-            currentY += result.height;
-            drawnHeight += result.height;
+            const floralUrl = getImageUrl("floral", position.floral_pattern);
+            const floralImg = imageRefs.current.get(floralUrl);
+            // Tính kích thước ảnh floral (thêm 50% = 2.5x otherFontSize)
+            const floralH = otherFontSize * 2.5;
+            let totalFloralWidth = 0;
+            if (floralImg?.complete && floralImg.naturalHeight > 0) {
+                const ratio = floralImg.naturalWidth / floralImg.naturalHeight;
+                totalFloralWidth = Math.max(1, Math.floor(floralH * ratio));
+            }
+            // Line height giống icon_image: floralH + lineGap
+            const floralLineHeight = floralH + lineGap;
+            // Text align bottom: đặt text ở dưới cùng của dòng
+            const textBottomY = currentY + floralH;
+            // Đo width trước khi vẽ
+            ctx.font = `${otherFontSize}px ${LAYOUT.FONT_FAMILY}`;
+            const labelText = `Mẫu hoa: ${position.floral_pattern}`;
+            const labelWidth = ctx.measureText(labelText).width;
+            // Vẽ text với textBaseline = bottom
+            ctx.textBaseline = "bottom";
+            ctx.fillStyle = LAYOUT.LABEL_COLOR;
+            ctx.fillText(labelText, x, textBottomY);
+            // Reset textBaseline về top cho các phần tiếp theo
+            ctx.textBaseline = LAYOUT.TEXT_BASELINE;
+            // Kiểm tra xem có đủ chỗ cho ảnh floral trên cùng dòng không
+            const textEndX = x + labelWidth;
+            const spacing = LAYOUT.ELEMENT_SPACING * scaleFactor;
+            const floralStartX = textEndX + spacing;
+            const floralEndX = floralStartX + totalFloralWidth;
+            const shouldWrapFloral = floralEndX > x + maxWidth;
+            let floralX;
+            let floralY;
+            if (shouldWrapFloral) {
+                // Không đủ chỗ, cho ảnh floral xuống dòng mới
+                floralX = x;
+                floralY = textBottomY + lineGap;
+                currentY += floralLineHeight;
+                drawnHeight += floralLineHeight;
+            }
+            else {
+                // Đủ chỗ, vẽ ảnh floral ngay sau text trên cùng dòng
+                floralX = floralStartX;
+                floralY = textBottomY - floralH; // Align bottom với text
+                currentY += floralLineHeight;
+                drawnHeight += floralLineHeight;
+            }
+            // Vẽ ảnh floral
+            if (floralImg?.complete && floralImg.naturalHeight > 0) {
+                ctx.drawImage(floralImg, floralX, floralY, totalFloralWidth, floralH);
+            }
         }
     }
     ctx.restore();
@@ -1057,36 +1244,119 @@ const renderIconPosition = (ctx, position, x, y, maxWidth, scaleFactor, imageRef
         // Fallback: hiển thị mã icon (ép sang string)
         iconValue = String(position.icon);
     }
-    // Vẽ label Icon: (bold, màu label mặc định)
+    // 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;
+    // Đo width của label
     ctx.font = `bold ${iconFontSize}px ${LAYOUT.FONT_FAMILY}`;
-    ctx.fillText(iconLabel, x, cursorY);
     const labelWidth = ctx.measureText(iconLabel).width;
-    // Vẽ value kế bên, font thường, màu đỏ giống text value
-    ctx.font = `${iconFontSize}px ${LAYOUT.FONT_FAMILY}`;
+    // 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, textCenterY);
+    const valueStartX = x + labelWidth;
+    // Vẽ icon value với align center
+    ctx.font = `${effectiveIconValueFontSize}px ${LAYOUT.FONT_FAMILY}`;
     ctx.fillStyle = DEFAULT_ERROR_COLOR;
-    const valueText = ` ${iconValue}`;
-    ctx.fillText(valueText, x + labelWidth, cursorY);
-    // Reset lại màu về label color cho các phần text tiếp theo (màu chỉ, v.v.)
+    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;
-    const valueWidth = ctx.measureText(valueText).width;
+    // Reset textBaseline về top cho các phần tiếp theo
+    ctx.textBaseline = LAYOUT.TEXT_BASELINE;
     const iconResult = {
-        height: iconFontSize + lineGap,
+        height: iconImageHeight + lineGap,
         // tổng width của cả label + value, dùng để canh icon image lệch sang phải
-        lastLineWidth: labelWidth + valueWidth,
-        lastLineY: cursorY,
-    };
+        lastLineWidth: labelWidth + maxValueLineWidth};
     // Draw icon image
     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 swatchW = Math.max(1, Math.floor(iconFontSize * ratio));
+            // Nếu có icon_image thì hiển thị to gấp đôi
+            const iconHeight = hasIconImage ? iconFontSize * 2 : iconFontSize;
+            const swatchW = Math.max(1, Math.floor(iconHeight * ratio));
             const iconX = x +
                 Math.ceil(iconResult.lastLineWidth) +
                 LAYOUT.ELEMENT_SPACING * scaleFactor;
-            const iconY = iconResult.lastLineY + Math.floor(iconFontSize / 2 - iconFontSize / 2);
-            ctx.drawImage(img, iconX, iconY, swatchW, iconFontSize);
+            const iconY = textCenterY - iconHeight / 2; // Align center với text
+            ctx.drawImage(img, iconX, iconY, swatchW, iconHeight);
         }
     }
     cursorY += iconResult.height;
@@ -1103,15 +1373,39 @@ const renderIconPosition = (ctx, position, x, y, maxWidth, scaleFactor, imageRef
     const hasMultiLayerColors = layerCount > 1;
     const shouldSkipColorSection = options?.hideColor && !hasMultiLayerColors;
     if (iconColors?.length && !shouldSkipColorSection) {
-        const textMaxWidth = Math.max(LAYOUT.MIN_TEXT_WIDTH * scaleFactor, maxWidth - LAYOUT.SWATCH_RESERVED_SPACE * scaleFactor);
-        const colorResult = wrapText(ctx, `Màu chỉ: ${iconColors.join(", ")}`, x, cursorY, textMaxWidth, iconFontSize + lineGap);
-        const swatchH = Math.floor(iconFontSize * LAYOUT.SWATCH_HEIGHT_RATIO);
-        const swatchX = x +
-            Math.ceil(colorResult.lastLineWidth) +
-            LAYOUT.ELEMENT_SPACING * scaleFactor;
-        const swatchY = colorResult.lastLineY + Math.floor(iconFontSize / 2 - swatchH / 2);
+        // Dòng "Màu chỉ:" của icon dùng OTHER_FONT_SIZE, không dùng iconFontSize
+        const otherFontSize = LAYOUT.OTHER_FONT_SIZE * scaleFactor;
+        const swatchH = Math.floor(otherFontSize * LAYOUT.SWATCH_HEIGHT_RATIO);
+        const totalSwatchWidth = calculateSwatchesWidth(iconColors, swatchH, scaleFactor, imageRefs);
+        // Set font về OTHER_FONT_SIZE trước khi vẽ text "Màu chỉ:"
+        ctx.font = `${otherFontSize}px ${LAYOUT.FONT_FAMILY}`;
+        ctx.fillStyle = LAYOUT.LABEL_COLOR;
+        // Vẽ text với maxWidth bình thường (không trừ SWATCH_RESERVED_SPACE)
+        const colorResult = wrapText(ctx, `Màu chỉ: ${iconColors.join(", ")}`, x, cursorY, maxWidth, otherFontSize + lineGap);
+        // Kiểm tra xem có đủ chỗ cho swatches trên cùng dòng không
+        const textEndX = x + Math.ceil(colorResult.lastLineWidth);
+        const spacing = LAYOUT.ELEMENT_SPACING * scaleFactor;
+        const swatchesStartX = textEndX + spacing;
+        const swatchesEndX = swatchesStartX + totalSwatchWidth;
+        const shouldWrapSwatches = swatchesEndX > x + maxWidth;
+        let swatchX;
+        let swatchY;
+        if (shouldWrapSwatches) {
+            // Không đủ chỗ, cho TẤT CẢ swatches xuống dòng mới
+            swatchX = x;
+            swatchY = colorResult.lastLineY + otherFontSize + lineGap;
+            cursorY += colorResult.height + otherFontSize + lineGap;
+        }
+        else {
+            // Đủ chỗ, vẽ swatches ngay sau text trên cùng dòng
+            swatchX = swatchesStartX;
+            swatchY = colorResult.lastLineY + Math.floor(otherFontSize / 2 - swatchH / 2);
+            cursorY += colorResult.height;
+        }
         drawSwatches(ctx, iconColors, swatchX, swatchY, swatchH, scaleFactor, imageRefs);
-        cursorY += colorResult.height;
+        if (shouldWrapSwatches) {
+            cursorY += swatchH;
+        }
     }
     ctx.restore();
     return cursorY - y;