embroidery-qc-image 1.0.25 → 1.0.26

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,82 @@ 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;
+        }
     }
+    // Vẽ phần value với font hiệu dụng, màu đỏ
+    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;
+    lines.forEach((line, idx) => {
+        ctx.fillText(line, valueStartX, localY);
+        localY += valueLineHeight;
+    });
+    const textBlockHeight = lines.length * valueLineHeight;
+    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 +1120,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 +1238,46 @@ 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;
+    // Text align bottom: đặt text ở dưới cùng của dòng
+    const textBottomY = cursorY + iconImageHeight;
+    // Đo width trước khi vẽ
     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}`;
-    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.)
-    ctx.fillStyle = LAYOUT.LABEL_COLOR;
     const valueWidth = ctx.measureText(valueText).width;
+    // Vẽ text với textBaseline = bottom
+    ctx.textBaseline = "bottom";
+    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.fillStyle = DEFAULT_ERROR_COLOR;
+    ctx.fillText(valueText, x + labelWidth, textBottomY);
+    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: 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 + valueWidth};
     // 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 = textBottomY - iconHeight; // Align bottom với text
+            ctx.drawImage(img, iconX, iconY, swatchW, iconHeight);
         }
     }
     cursorY += iconResult.height;
@@ -1103,15 +1294,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;