embroidery-qc-image 1.0.24 → 1.0.26

package/dist/index.esm.js

@@ -55,20 +55,15 @@ const LAYOUT = {
     TEXT_ALIGN: "left",
     TEXT_BASELINE: "top",
     // Spacing
-    LINE_GAP: 40,
-    PADDING: 40,
+    LINE_GAP: 50,
+    PADDING: 50,
     SECTION_SPACING: 60,
     ELEMENT_SPACING: 100,
     SWATCH_SPACING: 25,
-    FLORAL_SPACING: 300,
     // 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
 // ============================================================================
@@ -103,6 +98,17 @@ const getImageUrl = (type, value) => {
     return `${BASE_URLS.THREAD_COLOR}/${value}.webp`;
 };
 const getProxyUrl = (url) => `https://proxy-img.c8p.workers.dev?url=${encodeURIComponent(url)}`;
+const getIconImageUrl = (position) => {
+    if (position.is_delete_icon)
+        return null;
+    if (position.icon_image && position.icon_image.trim().length > 0) {
+        return position.icon_image;
+    }
+    if (position.icon !== 0) {
+        return getImageUrl("icon", position.icon);
+    }
+    return null;
+};
 const ensureImage = (existing) => {
     if (existing && existing.crossOrigin === "anonymous") {
         return existing;
@@ -134,14 +140,14 @@ const loadImage = (url, imageRefs, onLoad) => {
     img.onerror = () => {
         if (!attemptedProxy) {
             attemptedProxy = true;
-            img.src = getProxyUrl(url);
+            img.src = getProxyUrl(getResizeUrl(url));
             return;
         }
         img.dataset.proxyUsed = attemptedProxy ? "true" : "false";
         cleanup();
         onLoad();
     };
-    img.src = attemptedProxy ? getProxyUrl(url) : url;
+    img.src = attemptedProxy ? getProxyUrl(getResizeUrl(url)) : getResizeUrl(url);
 };
 const loadImageAsync = (url, imageRefs, cacheKey) => {
     const key = cacheKey ?? url;
@@ -179,13 +185,13 @@ const loadImageAsync = (url, imageRefs, cacheKey) => {
         target.onerror = () => {
             if (!attemptedProxy) {
                 attemptedProxy = true;
-                target.src = getProxyUrl(url);
+                target.src = getProxyUrl(getResizeUrl(url));
                 return;
             }
             target.dataset.proxyUsed = attemptedProxy ? "true" : "false";
             finalize();
         };
-        const desiredSrc = attemptedProxy ? getProxyUrl(url) : url;
+        const desiredSrc = attemptedProxy ? getProxyUrl(getResizeUrl(url)) : getResizeUrl(url);
         if (target.src !== desiredSrc) {
             target.src = desiredSrc;
         }
@@ -194,6 +200,57 @@ const loadImageAsync = (url, imageRefs, cacheKey) => {
         }
     });
 };
+const getResizeUrl = (url) => {
+    try {
+        const urlObj = new URL(url);
+        // Xử lý cdn.shopify.com
+        if (urlObj.hostname === 'cdn.shopify.com') {
+            // Set hoặc update query param width=400
+            urlObj.searchParams.set('width', '400');
+            return urlObj.toString();
+        }
+        // Xử lý m.media-amazon.com
+        if (urlObj.hostname === 'm.media-amazon.com') {
+            const pathname = urlObj.pathname;
+            // Split pathname theo dấu /
+            const pathArr = pathname.split('/');
+            // Lấy filename (phần cuối cùng)
+            const filename = pathArr[pathArr.length - 1];
+            // Xóa pattern ._.*_ (ví dụ: ._AC_SX569_)
+            const cleanedFilename = filename.replace(/\._.*_/g, '');
+            // Split filename đã clean theo dấu .
+            const parts = cleanedFilename.split('.');
+            if (parts.length >= 2) {
+                // Lấy phần đầu và phần cuối
+                const firstPart = parts[0];
+                const lastPart = parts[parts.length - 1];
+                // Chèn _AC_SX400_ vào giữa và join lại
+                const newFilename = `${firstPart}._AC_SX400_.${lastPart}`;
+                // Thay filename mới vào pathArr
+                pathArr[pathArr.length - 1] = newFilename;
+                // Join lại
+                urlObj.pathname = pathArr.join('/');
+                return urlObj.toString();
+            }
+        }
+        // Xử lý i.etsystatic.com
+        if (urlObj.hostname === 'i.etsystatic.com') {
+            const pathname = urlObj.pathname;
+            // Thay il_fullxfull bằng il_400x400
+            if (pathname.includes('il_fullxfull')) {
+                const newPathname = pathname.replace(/il_fullxfull/g, 'il_400x400');
+                urlObj.pathname = newPathname;
+                return urlObj.toString();
+            }
+        }
+        // Nếu không phải các domain cần xử lý, return URL gốc
+        return url;
+    }
+    catch (error) {
+        // Nếu URL không hợp lệ, return URL gốc
+        return url;
+    }
+};
 const preloadFonts = async (config) => {
     if (config.error_message || !config.sides?.length)
         return;
@@ -223,12 +280,10 @@ const preloadImages = async (config, imageRefs) => {
     config.sides.forEach((side) => {
         side.positions.forEach((position) => {
             if (position.type === "ICON") {
-                if (position.icon !== 0) {
-                    const iconUrl = getImageUrl("icon", position.icon);
-                    if (!seen.has(iconUrl)) {
-                        entries.push({ url: iconUrl });
-                        seen.add(iconUrl);
-                    }
+                const iconUrl = getIconImageUrl(position);
+                if (iconUrl && !seen.has(iconUrl)) {
+                    entries.push({ url: iconUrl });
+                    seen.add(iconUrl);
                 }
                 if (position.color) {
                     const threadUrl = getImageUrl("threadColor", position.color);
@@ -301,23 +356,46 @@ const wrapText = (ctx, text, x, y, maxWidth, lineHeight) => {
     };
 };
 const buildWrappedLines = (ctx, text, maxWidth) => {
-    const words = text.split(" ").filter((word) => word.length > 0);
-    if (words.length === 0)
-        return [""];
-    const lines = [];
-    let currentLine = words[0];
-    for (let i = 1; i < words.length; i++) {
-        const testLine = `${currentLine} ${words[i]}`;
-        if (ctx.measureText(testLine).width > maxWidth && currentLine.length > 0) {
-            lines.push(currentLine);
-            currentLine = words[i];
+    // Mỗi '\n' tương đương với một line break giống như khi wrap tự động.
+    const segments = text.split("\n");
+    const result = [];
+    segments.forEach((segment) => {
+        const words = segment.split(" ").filter((word) => word.length > 0);
+        if (words.length === 0) {
+            // Nếu đoạn rỗng, thêm một dòng trống (break đúng 1 line)
+            result.push("");
+            return;
         }
-        else {
-            currentLine = testLine;
+        let currentLine = words[0];
+        for (let i = 1; i < words.length; i++) {
+            const testLine = `${currentLine} ${words[i]}`;
+            if (ctx.measureText(testLine).width > maxWidth && currentLine.length > 0) {
+                result.push(currentLine);
+                currentLine = words[i];
+            }
+            else {
+                currentLine = testLine;
+            }
         }
-    }
-    lines.push(currentLine);
-    return lines;
+        result.push(currentLine);
+    });
+    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;
@@ -381,8 +459,9 @@ const EmbroideryQCImage = ({ config, className = "", style = {}, }) => {
         config.sides.forEach((side) => {
             side.positions.forEach((position) => {
                 if (position.type === "ICON") {
-                    if (position.icon !== 0) {
-                        loadImage(getImageUrl("icon", position.icon), imageRefs, incrementCounter);
+                    const iconUrl = getIconImageUrl(position);
+                    if (iconUrl) {
+                        loadImage(iconUrl, imageRefs, incrementCounter);
                     }
                     position.layer_colors?.forEach((color) => {
                         loadImage(getImageUrl("threadColor", color), imageRefs, incrementCounter);
@@ -433,7 +512,7 @@ const renderEmbroideryCanvas = (canvas, config, canvasSize, imageRefs) => {
         return;
     ctx.textAlign = LAYOUT.TEXT_ALIGN;
     ctx.textBaseline = LAYOUT.TEXT_BASELINE;
-    // Calculate warning height (with scaleFactor = 1 for measurement)
+    // Calculate warning & message height (with scaleFactor = 1 for measurement)
     let warningHeight = 0;
     let warningLineHeight = 0;
     let warningLineCount = 0;
@@ -452,28 +531,30 @@ const renderEmbroideryCanvas = (canvas, config, canvasSize, imageRefs) => {
             warningHeight = warningLineCount * warningLineHeight + LAYOUT.PADDING;
         }
     }
+    let messageHeight = 0;
+    let messageLineHeight = 0;
+    let messageLineCount = 0;
+    if (config.message) {
+        const measureMessageCanvas = document.createElement("canvas");
+        measureMessageCanvas.width = canvas.width;
+        measureMessageCanvas.height = canvas.height;
+        const measureMessageCtx = measureMessageCanvas.getContext("2d");
+        if (measureMessageCtx) {
+            measureMessageCtx.textAlign = "left";
+            measureMessageCtx.textBaseline = "top";
+            measureMessageCtx.font = `${LAYOUT.HEADER_FONT_SIZE * 0.7}px ${LAYOUT.FONT_FAMILY}`;
+            const messageLines = buildWrappedLines(measureMessageCtx, config.message.trim(), canvas.width - LAYOUT.PADDING * 4);
+            messageLineCount = messageLines.length;
+            messageLineHeight = LAYOUT.HEADER_FONT_SIZE * 0.7 + LAYOUT.LINE_GAP;
+            messageHeight = messageLineCount * messageLineHeight + LAYOUT.PADDING;
+        }
+    }
     if (config.image_url) {
         const mockupImage = imageRefs.current.get(config.image_url);
         if (mockupImage) {
             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;
@@ -484,27 +565,40 @@ const renderEmbroideryCanvas = (canvas, config, canvasSize, imageRefs) => {
     measureCtx.textBaseline = LAYOUT.TEXT_BASELINE;
     let measureY = LAYOUT.PADDING;
     const measureSpacing = LAYOUT.ELEMENT_SPACING;
-    // Add warning text height (without bottom padding, no spacing)
+    // Add warning & message text height (without bottom padding, no spacing)
     if (config.warning_message) {
         const warningTextHeight = warningHeight - LAYOUT.PADDING;
         measureY += warningTextHeight;
     }
+    if (config.message) {
+        const messageTextHeight = messageHeight - LAYOUT.PADDING;
+        measureY += messageTextHeight;
+    }
     config.sides.forEach((side) => {
         const sideHeight = renderSide(measureCtx, side, measureY, canvas.width, 1, imageRefs);
         measureY += sideHeight + measureSpacing;
     });
-    const scaleFactor = Math.max(0.5, Math.min(1, (canvas.height - LAYOUT.PADDING - warningHeight) / measureY));
-    drawMockupAndFlorals(ctx, canvas, floralAssets, imageRefs);
-    // Render warning with scaleFactor and get actual height
+    const scaleFactor = Math.max(0.5, Math.min(1, (canvas.height - LAYOUT.PADDING - warningHeight - messageHeight) / measureY));
+    drawMockupAndFlorals(ctx, canvas, imageRefs);
+    // Render warning & message with scaleFactor and get actual heights
     let actualWarningHeight = 0;
+    let actualMessageHeight = 0;
     if (config.warning_message) {
         actualWarningHeight = renderWarning(ctx, canvas, config.warning_message, scaleFactor);
     }
-    // Calculate currentY: padding top + actual warning height (no spacing)
+    if (config.message) {
+        actualMessageHeight = renderWarning(ctx, canvas, config.message, scaleFactor, actualWarningHeight, "", // message: không cần prefix "Note"
+        DEFAULT_ERROR_COLOR // message: hiển thị màu đỏ
+        );
+    }
+    // Calculate currentY: padding top + actual warning & message height (no spacing)
     let currentY = LAYOUT.PADDING * scaleFactor;
     if (config.warning_message && actualWarningHeight > 0) {
         currentY += actualWarningHeight;
     }
+    if (config.message && actualMessageHeight > 0) {
+        currentY += actualMessageHeight;
+    }
     config.sides.forEach((side) => {
         const sideHeight = renderSide(ctx, side, currentY, canvas.width, scaleFactor, imageRefs);
         currentY += sideHeight + measureSpacing * scaleFactor;
@@ -546,8 +640,8 @@ const renderErrorState = (ctx, canvas, message) => {
     });
     ctx.restore();
 };
-const renderWarning = (ctx, canvas, message, scaleFactor = 1) => {
-    const sanitizedMessage = `Note: ${message.trim()}`;
+const renderWarning = (ctx, canvas, message, scaleFactor = 1, offsetY = 0, prefix = "Note: ", color = DEFAULT_WARNING_COLOR) => {
+    const sanitizedMessage = `${prefix}${message.trim()}`;
     const horizontalPadding = LAYOUT.PADDING * 2 * scaleFactor;
     const maxWidth = canvas.width - horizontalPadding * 2;
     const baseFontSize = LAYOUT.HEADER_FONT_SIZE * 0.7 * scaleFactor;
@@ -556,7 +650,7 @@ const renderWarning = (ctx, canvas, message, scaleFactor = 1) => {
     ctx.save();
     ctx.textAlign = "left";
     ctx.textBaseline = "top";
-    ctx.fillStyle = DEFAULT_WARNING_COLOR;
+    ctx.fillStyle = color;
     ctx.font = `${baseFontSize}px ${LAYOUT.FONT_FAMILY}`;
     let fontSize = baseFontSize;
     let lineGap = LAYOUT.LINE_GAP * scaleFactor;
@@ -575,7 +669,7 @@ const renderWarning = (ctx, canvas, message, scaleFactor = 1) => {
         lines = buildWrappedLines(ctx, sanitizedMessage, maxWidth);
         longestLineWidth = Math.max(...lines.map((line) => ctx.measureText(line).width));
     }
-    const startY = LAYOUT.PADDING * scaleFactor;
+    const startY = LAYOUT.PADDING * scaleFactor + offsetY;
     lines.forEach((line, index) => {
         const y = startY + index * lineHeight;
         ctx.fillText(line, leftX, y);
@@ -584,7 +678,7 @@ const renderWarning = (ctx, canvas, message, scaleFactor = 1) => {
     // 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;
@@ -597,19 +691,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(900, 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;
@@ -631,8 +713,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) => {
@@ -817,23 +924,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)
@@ -841,40 +1012,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;
@@ -905,74 +1118,213 @@ 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();
     return drawnHeight;
 };
 const renderIconPosition = (ctx, position, x, y, maxWidth, scaleFactor, imageRefs, options) => {
-    const iconFontSize = LAYOUT.OTHER_FONT_SIZE * scaleFactor;
+    // Dùng cùng font size với Text cho label và value icon
+    const iconFontSize = LAYOUT.TEXT_FONT_SIZE * scaleFactor;
     const lineGap = LAYOUT.LINE_GAP * scaleFactor;
     ctx.save();
-    ctx.font = `${iconFontSize}px ${LAYOUT.FONT_FAMILY}`;
     ctx.fillStyle = LAYOUT.LABEL_COLOR;
     let cursorY = y;
-    const iconText = position.note ? `Icon: ${position.note}` :
-        position.icon === 0
-            ? `Icon: (icon mặc định theo file thêu)`
-            : `Icon: ${position.icon}`;
-    const iconResult = wrapText(ctx, iconText, x, cursorY, maxWidth, iconFontSize + lineGap);
+    // Tách label "Icon:" (in đậm) và phần value (thường)
+    const iconLabel = "Icon:";
+    let iconValue;
+    if (position.is_delete_icon) {
+        // Ưu tiên hiển thị không có icon nếu được đánh dấu xóa
+        iconValue = "(không có icon)";
+    }
+    else if (position.note) {
+        iconValue = position.note;
+    }
+    else if (position.icon_name && position.icon_name.trim().length > 0) {
+        // Nếu có icon_name thì hiển thị tên đó
+        iconValue = position.icon_name;
+    }
+    else if (position.icon === 0) {
+        // Icon mặc định theo file thêu
+        iconValue = "(icon mặc định theo file thêu)";
+    }
+    else {
+        // Fallback: hiển thị mã icon (ép sang string)
+        iconValue = String(position.icon);
+    }
+    // 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}`;
+    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";
+    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: iconImageHeight + lineGap,
+        // tổng width của cả label + value, dùng để canh icon image lệch sang phải
+        lastLineWidth: labelWidth + valueWidth};
     // Draw icon image
-    if (position.icon !== 0) {
-        const url = getImageUrl("icon", position.icon);
-        const img = imageRefs.current.get(url);
+    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;
     // Draw color swatches (prefer layer_colors, fallback to single color)
-    const iconColors = position.layer_colors?.length
-        ? position.layer_colors
-        : position.color
-            ? [position.color]
-            : null;
+    // Nếu icon đã bị xóa thì không cần hiển thị màu chỉ nữa
+    const iconColors = position.is_delete_icon
+        ? null
+        : position.layer_colors?.length
+            ? position.layer_colors
+            : position.color
+                ? [position.color]
+                : null;
     const layerCount = position.layer_colors?.length ?? 0;
     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;