embroidery-qc-image 1.0.29 → 1.0.31

package/dist/index.esm.js

@@ -31,6 +31,71 @@ function styleInject(css, ref) {
 var css_248z = ".render-embroidery {\r\n  display: inline-block;\r\n  position: relative;\r\n  width: 100%;\r\n  max-width: 100%;\r\n}\r\n\r\n.render-embroidery-canvas {\r\n  display: block;\r\n  width: 100%;\r\n  height: auto;\r\n  image-rendering: high-quality;\r\n  background: transparent;\r\n}\r\n";
 styleInject(css_248z);
 
+// ============================================================================
+// CONSTANTS
+// ============================================================================
+const COLOR_MAP = {
+    "Army (1394)": "#545541",
+    Army: "#545541",
+    "Black (8)": "#060608",
+    Black: "#060608",
+    "Bubblegum (1309)": "#E77B9F",
+    Bubblegum: "#E77B9F",
+    "Carolina Blue (1274)": "#608CC9",
+    "Carolina Blue": "#608CC9",
+    "Celadon (1098)": "#8EAD8D",
+    Celadon: "#8EAD8D",
+    "Coffee Bean (1145)": "#502B23",
+    "Coffee Bean": "#502B23",
+    "Daffodil (1180)": "#FBE30D",
+    Daffodil: "#FBE30D",
+    "Dark Gray (1131)": "#2E272E",
+    "Dark Gray": "#2E272E",
+    "Doe Skin Beige (1344)": "#AE9B8B",
+    "Doe Skin Beige": "#AE9B8B",
+    "Dusty Blue (1373)": "#7B90A9",
+    "Dusty Blue": "#7B90A9",
+    "Forest Green (1397)": "#073020",
+    "Forest Green": "#073020",
+    "Gold (1425)": "#D2920A",
+    Gold: "#D2920A",
+    "Gray (1118)": "#9999A3",
+    Gray: "#9999A3",
+    "Ivory (1072)": "#E3DAC9",
+    Ivory: "#E3DAC9",
+    "Lavender (1032)": "#9274B6",
+    Lavender: "#9274B6",
+    "Light Denim (1133)": "#366696",
+    "Light Denim": "#366696",
+    "Light Salmon (1018)": "#E0A793",
+    "Light Salmon": "#E0A793",
+    "Maroon (1374)": "#480C1C",
+    Maroon: "#480C1C",
+    "Navy Blue (1044)": "#04072A",
+    "Navy Blue": "#04072A",
+    "Olive Green (1157)": "#625E1F",
+    "Olive Green": "#625E1F",
+    "Orange (1278)": "#D45D03",
+    Orange: "#D45D03",
+    "Peach Blush (1053)": "#E2C0B6",
+    "Peach Blush": "#E2C0B6",
+    "Pink (1148)": "#EFAFBF",
+    Pink: "#EFAFBF",
+    "Purple (1412)": "#37196F",
+    Purple: "#37196F",
+    "Red (1037)": "#9D000B",
+    Red: "#9D000B",
+    "Silver Sage (1396)": "#424F45",
+    "Silver Sage": "#424F45",
+    "Summer Sky (1432)": "#65A8D2",
+    "Summer Sky": "#65A8D2",
+    "Terra Cotta (1477)": "#AE3111",
+    "Terra Cotta": "#AE3111",
+    "Sand (1055)": "#D2C2AB",
+    Sand: "#D2C2AB",
+    "White (9)": "#D8D7DC",
+    White: "#D8D7DC",
+};
 const DEFAULT_ERROR_COLOR = "#CC1F1A";
 const DEFAULT_WARNING_COLOR = "#FF8C00";
 const BASE_URLS = {
@@ -71,7 +136,7 @@ const loadFont = (fontName) => {
     // Check if font is already loaded in document.fonts (browser cache)
     const fontFaceSet = document.fonts;
     for (const font of fontFaceSet) {
-        if (font.family === fontName && font.status === 'loaded') {
+        if (font.family === fontName && font.status === "loaded") {
             return Promise.resolve();
         }
     }
@@ -191,7 +256,9 @@ const loadImageAsync = (url, imageRefs, cacheKey) => {
             target.dataset.proxyUsed = attemptedProxy ? "true" : "false";
             finalize();
         };
-        const desiredSrc = attemptedProxy ? getProxyUrl(getResizeUrl(url)) : getResizeUrl(url);
+        const desiredSrc = attemptedProxy
+            ? getProxyUrl(getResizeUrl(url))
+            : getResizeUrl(url);
         if (target.src !== desiredSrc) {
             target.src = desiredSrc;
         }
@@ -204,22 +271,22 @@ const getResizeUrl = (url) => {
     try {
         const urlObj = new URL(url);
         // Xử lý cdn.shopify.com
-        if (urlObj.hostname === 'cdn.shopify.com') {
+        if (urlObj.hostname === "cdn.shopify.com") {
             // Set hoặc update query param width=400
-            urlObj.searchParams.set('width', '400');
+            urlObj.searchParams.set("width", "400");
             return urlObj.toString();
         }
         // Xử lý m.media-amazon.com
-        if (urlObj.hostname === 'm.media-amazon.com') {
+        if (urlObj.hostname === "m.media-amazon.com") {
             const pathname = urlObj.pathname;
             // Split pathname theo dấu /
-            const pathArr = pathname.split('/');
+            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, '');
+            const cleanedFilename = filename.replace(/\._.*_/g, "");
             // Split filename đã clean theo dấu .
-            const parts = cleanedFilename.split('.');
+            const parts = cleanedFilename.split(".");
             if (parts.length >= 2) {
                 // Lấy phần đầu và phần cuối
                 const firstPart = parts[0];
@@ -229,16 +296,16 @@ const getResizeUrl = (url) => {
                 // Thay filename mới vào pathArr
                 pathArr[pathArr.length - 1] = newFilename;
                 // Join lại
-                urlObj.pathname = pathArr.join('/');
+                urlObj.pathname = pathArr.join("/");
                 return urlObj.toString();
             }
         }
         // Xử lý i.etsystatic.com
-        if (urlObj.hostname === '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');
+            if (pathname.includes("il_fullxfull")) {
+                const newPathname = pathname.replace(/il_fullxfull/g, "il_400x400");
                 urlObj.pathname = newPathname;
                 return urlObj.toString();
             }
@@ -362,7 +429,8 @@ const wrapText = (ctx, text, x, y, maxWidth, lineHeight, mockupBounds = null) =>
         let lineToRender = line;
         if (ctx.measureText(line).width > effectiveMaxWidth) {
             // Cắt từng ký tự cho đến khi vừa
-            while (ctx.measureText(lineToRender).width > effectiveMaxWidth && lineToRender.length > 0) {
+            while (ctx.measureText(lineToRender).width > effectiveMaxWidth &&
+                lineToRender.length > 0) {
                 lineToRender = lineToRender.slice(0, -1);
             }
         }
@@ -533,6 +601,262 @@ const EmbroideryQCImage = ({ config, className = "", style = {}, }) => {
 // ============================================================================
 // RENDERING FUNCTIONS
 // ============================================================================
+const renderStrokePatchesCanvas = (ctx, canvas, config, imageRefs) => {
+    // Clear canvas
+    ctx.fillStyle = "#e7e7e7";
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    const padding = LAYOUT.PADDING * 6;
+    const usableWidth = canvas.width - padding * 2;
+    const usableHeight = canvas.height - padding * 2;
+    // Calculate sections
+    const topSectionHeight = Math.floor(usableHeight * (2 / 3)); // 2/3 top
+    const bottomSectionHeight = usableHeight - topSectionHeight; // 1/3 bottom
+    const topSectionY = padding;
+    const bottomSectionY = topSectionY + topSectionHeight;
+    // Get first side (stroke_patches should have only one side)
+    const side = config.sides[0];
+    if (!side || !side.positions.length) {
+        renderErrorState(ctx, canvas, "Không có dữ liệu positions");
+        return;
+    }
+    const position = side.positions[0];
+    if (position.type !== "TEXT") {
+        renderErrorState(ctx, canvas, "Position phải là TEXT");
+        return;
+    }
+    // Validate required fields
+    if (!position.font) {
+        renderErrorState(ctx, canvas, "Thiếu font");
+        return;
+    }
+    // Validate layer_colors
+    if (!position.layer_colors) {
+        renderErrorState(ctx, canvas, "Thiếu layer_colors");
+        return;
+    }
+    if (position.layer_colors.length !== 3) {
+        renderErrorState(ctx, canvas, `layer_colors phải có đúng 3 phần tử, hiện tại có ${position.layer_colors.length}`);
+        return;
+    }
+    // Validate từng màu
+    const [textColor, borderColor, backgroundColor] = position.layer_colors;
+    const missingColors = [];
+    if (!textColor || textColor.trim() === "") {
+        missingColors.push("Màu text (vị trí 1)");
+    }
+    if (!borderColor || borderColor.trim() === "") {
+        missingColors.push("Màu border (vị trí 2)");
+    }
+    if (!backgroundColor || backgroundColor.trim() === "") {
+        missingColors.push("Màu background (vị trí 3)");
+    }
+    if (missingColors.length > 0) {
+        renderErrorState(ctx, canvas, `Thiếu màu trong layer_colors:\n${missingColors.join("\n")}`);
+        return;
+    }
+    // ============================================================================
+    // TOP SECTION (2/3): Hiển thị mẫu preview
+    // ============================================================================
+    ctx.save();
+    // Draw "Hình mẫu:" label at the top
+    const titleFontSize = LAYOUT.HEADER_FONT_SIZE * 0.8;
+    ctx.font = `bold ${titleFontSize}px ${LAYOUT.FONT_FAMILY}`;
+    ctx.fillStyle = "#CC0000"; // Red color
+    ctx.fillText("Hình mẫu:", padding, topSectionY);
+    // Adjust top section Y to account for title + extra spacing (40px)
+    const extraSpacing = 40;
+    const actualTopSectionY = topSectionY + titleFontSize + LAYOUT.LINE_GAP + extraSpacing;
+    const actualTopSectionHeight = topSectionHeight - titleFontSize - LAYOUT.LINE_GAP - extraSpacing;
+    // Calculate text size to fit top section
+    let previewFontSize = LAYOUT.HEADER_FONT_SIZE * 3; // Start with large size
+    ctx.font = `${previewFontSize}px ${position.font}`;
+    const text = position.text || "";
+    const maxTextWidth = usableWidth * 0.9; // Use 75% of width for better padding
+    const maxTextHeight = actualTopSectionHeight; // Use 60% of height
+    // Scale down font size to fit
+    let textWidth = ctx.measureText(text).width;
+    while (textWidth > maxTextWidth && previewFontSize > 50) {
+        previewFontSize *= 0.95;
+        ctx.font = `${previewFontSize}px ${position.font}`;
+        textWidth = ctx.measureText(text).width;
+    }
+    // Ensure text height also fits
+    while (previewFontSize > maxTextHeight && previewFontSize > 50) {
+        previewFontSize *= 0.95;
+        ctx.font = `${previewFontSize}px ${position.font}`;
+    }
+    // Update textWidth after final scaling
+    textWidth = ctx.measureText(text).width;
+    // Center the text in top section
+    const textX = padding + usableWidth / 2 - textWidth / 2;
+    const textY = actualTopSectionY + actualTopSectionHeight / 2 - previewFontSize / 2;
+    // Get color hex values
+    const textColorHex = COLOR_MAP[textColor] || LAYOUT.LABEL_COLOR;
+    const borderColorHex = COLOR_MAP[borderColor] || LAYOUT.LABEL_COLOR;
+    const bgColorHex = COLOR_MAP[backgroundColor] || "#FFFFFF";
+    // Calculate stroke widths
+    // Background needs to be MUCH thicker to create spacing from text
+    // Border needs to be even thicker to wrap around background
+    const bgWidth = Math.max(80, previewFontSize / 2); // Background - rất dày để tạo khoảng cách lớn
+    const borderWidth = Math.max(100, previewFontSize / 1.58); // Border - dày hơn để bọc background
+    // Layer 1: Draw border stroke (outermost)
+    ctx.strokeStyle = borderColorHex;
+    ctx.lineWidth = borderWidth;
+    ctx.lineJoin = "round";
+    ctx.lineCap = "round";
+    ctx.strokeText(text, textX, textY);
+    // Layer 2: Draw background color stroke (middle - creates spacing from text)
+    ctx.strokeStyle = bgColorHex;
+    ctx.lineWidth = bgWidth;
+    ctx.lineJoin = "round";
+    ctx.lineCap = "round";
+    ctx.strokeText(text, textX, textY);
+    // Layer 3: Draw text fill ONLY (no stroke on text itself)
+    ctx.fillStyle = textColorHex;
+    ctx.fillText(text, textX, textY);
+    ctx.restore();
+    // ============================================================================
+    // BOTTOM SECTION (1/3): Flex layout with info (left) and image (right)
+    // ============================================================================
+    ctx.save();
+    // Draw border around bottom section for debugging
+    // ctx.strokeStyle = "#ccc";
+    // ctx.lineWidth = 2;
+    // ctx.strokeRect(padding, bottomSectionY, usableWidth, bottomSectionHeight);
+    const bottomPadding = 0; // Không padding ngang, sát lề
+    const bottomUsableWidth = usableWidth; // Sử dụng toàn bộ width
+    const bottomUsableHeight = bottomSectionHeight - LAYOUT.PADDING * 2; // Chỉ padding dọc
+    // Split bottom section: 60% left for info, 40% right for image
+    const infoSectionWidth = Math.floor(bottomUsableWidth * 0.6);
+    const imageSectionWidth = bottomUsableWidth - infoSectionWidth;
+    const imageSectionX = padding + infoSectionWidth;
+    // Left side: Info list
+    const infoFontSize = LAYOUT.OTHER_FONT_SIZE * 0.9; // Giảm từ 1.2 xuống 0.9
+    const infoLineHeight = infoFontSize * 1.4; // Giảm từ 1.5 xuống 1.4
+    let infoY = bottomSectionY + LAYOUT.PADDING;
+    ctx.font = `${infoFontSize}px ${LAYOUT.FONT_FAMILY}`;
+    ctx.fillStyle = LAYOUT.LABEL_COLOR;
+    ctx.textAlign = "left";
+    ctx.textBaseline = "top";
+    // Asterisk prefix style
+    const drawAsterisk = (x, y) => {
+        ctx.save();
+        ctx.fillStyle = "#CC0000"; // Red asterisk
+        ctx.font = `bold ${infoFontSize}px ${LAYOUT.FONT_FAMILY}`;
+        ctx.fillText("*", x, y);
+        ctx.restore();
+    };
+    const asteriskWidth = ctx.measureText("*").width + 5;
+    const startX = padding + asteriskWidth;
+    // Font - render "Font: " với font mặc định, tên font với font đó
+    drawAsterisk(padding, infoY);
+    const fontPrefix = "Font: ";
+    ctx.font = `${infoFontSize}px ${LAYOUT.FONT_FAMILY}`;
+    ctx.fillText(fontPrefix, startX, infoY);
+    // Render font name với chính font đó
+    const prefixWidth = ctx.measureText(fontPrefix).width;
+    ctx.font = `${infoFontSize}px ${position.font}`;
+    ctx.fillText(position.font, startX + prefixWidth, infoY);
+    infoY += infoLineHeight;
+    // Reset font về mặc định cho các dòng tiếp theo
+    ctx.font = `${infoFontSize}px ${LAYOUT.FONT_FAMILY}`;
+    // Màu chữ (Text Color)
+    drawAsterisk(padding, infoY);
+    const textColorLabel = `Màu chữ: ${textColor}`;
+    ctx.fillText(textColorLabel, startX, infoY);
+    // Draw text color swatch
+    const swatchSize = infoFontSize * 1.3; // Giảm từ 1.5 xuống 1.3
+    const swatchX = startX +
+        ctx.measureText(textColorLabel).width +
+        LAYOUT.ELEMENT_SPACING * 0.3; // Giảm spacing
+    const swatchY = infoY + infoFontSize / 2 - swatchSize / 2;
+    const textColorSwatchUrl = getImageUrl("threadColor", textColor);
+    const textColorSwatchImg = imageRefs.current.get(textColorSwatchUrl);
+    if (textColorSwatchImg?.complete && textColorSwatchImg.naturalHeight > 0) {
+        const ratio = textColorSwatchImg.naturalWidth / textColorSwatchImg.naturalHeight;
+        const swatchW = Math.max(1, Math.floor(swatchSize * ratio));
+        ctx.drawImage(textColorSwatchImg, swatchX, swatchY, swatchW, swatchSize);
+    }
+    infoY += infoLineHeight;
+    // Màu nền (Background Color)
+    drawAsterisk(padding + bottomPadding, infoY);
+    const bgColorLabel = `Màu nền: ${backgroundColor}`;
+    ctx.fillText(bgColorLabel, startX, infoY);
+    // Draw background color swatch
+    const bgSwatchX = startX + ctx.measureText(bgColorLabel).width + LAYOUT.ELEMENT_SPACING * 0.3;
+    const bgSwatchY = infoY + infoFontSize / 2 - swatchSize / 2;
+    const bgColorSwatchUrl = getImageUrl("threadColor", backgroundColor);
+    const bgColorSwatchImg = imageRefs.current.get(bgColorSwatchUrl);
+    if (bgColorSwatchImg?.complete && bgColorSwatchImg.naturalHeight > 0) {
+        const ratio = bgColorSwatchImg.naturalWidth / bgColorSwatchImg.naturalHeight;
+        const swatchW = Math.max(1, Math.floor(swatchSize * ratio));
+        ctx.drawImage(bgColorSwatchImg, bgSwatchX, bgSwatchY, swatchW, swatchSize);
+    }
+    infoY += infoLineHeight;
+    // Màu viền (Border Color)
+    drawAsterisk(padding + bottomPadding, infoY);
+    const borderColorLabel = `Màu viền: ${borderColor}`;
+    ctx.fillText(borderColorLabel, startX, infoY);
+    // Draw border color swatch
+    const borderSwatchX = startX +
+        ctx.measureText(borderColorLabel).width +
+        LAYOUT.ELEMENT_SPACING * 0.3;
+    const borderSwatchY = infoY + infoFontSize / 2 - swatchSize / 2;
+    const borderColorSwatchUrl = getImageUrl("threadColor", borderColor);
+    const borderColorSwatchImg = imageRefs.current.get(borderColorSwatchUrl);
+    if (borderColorSwatchImg?.complete &&
+        borderColorSwatchImg.naturalHeight > 0) {
+        const ratio = borderColorSwatchImg.naturalWidth / borderColorSwatchImg.naturalHeight;
+        const swatchW = Math.max(1, Math.floor(swatchSize * ratio));
+        ctx.drawImage(borderColorSwatchImg, borderSwatchX, borderSwatchY, swatchW, swatchSize);
+    }
+    infoY += infoLineHeight;
+    // Attachment
+    if (position.attachment) {
+        drawAsterisk(padding + bottomPadding, infoY);
+        const attachmentLabel = `Attachment: ${position.attachment}`;
+        ctx.fillText(attachmentLabel, startX, infoY);
+        infoY += infoLineHeight;
+    }
+    // Size
+    if (side.size) {
+        drawAsterisk(padding + bottomPadding, infoY);
+        const sizeLabel = `Size: ${side.size}`;
+        ctx.fillText(sizeLabel, startX, infoY);
+        infoY += infoLineHeight;
+    }
+    // Right side: Image from config.image_url
+    if (config.image_url) {
+        // Draw "Mockup" label
+        ctx.font = `bold ${infoFontSize * 1.2}px ${LAYOUT.FONT_FAMILY}`;
+        ctx.fillStyle = "#000000";
+        const mockupLabel = "Mockup";
+        const mockupLabelWidth = ctx.measureText(mockupLabel).width;
+        const mockupLabelX = imageSectionX + (imageSectionWidth - mockupLabelWidth) / 1.2;
+        ctx.fillText(mockupLabel, mockupLabelX, bottomSectionY + LAYOUT.PADDING);
+        const mockupLabelHeight = infoFontSize * 1.2 + LAYOUT.LINE_GAP * 0.5;
+        const img = imageRefs.current.get(config.image_url) ??
+            imageRefs.current.get("mockup");
+        if (img?.complete && img.naturalWidth > 0) {
+            const maxImgWidth = imageSectionWidth; // Sử dụng toàn bộ width, sát lề phải
+            const maxImgHeight = bottomUsableHeight - mockupLabelHeight;
+            const imgAspectRatio = img.naturalWidth / img.naturalHeight;
+            let drawWidth = maxImgWidth;
+            let drawHeight = drawWidth / imgAspectRatio;
+            if (drawHeight > maxImgHeight) {
+                drawHeight = maxImgHeight;
+                drawWidth = drawHeight * imgAspectRatio;
+            }
+            const imgX = imageSectionX + (imageSectionWidth - drawWidth) / 0.8;
+            const imgY = bottomSectionY +
+                LAYOUT.PADDING +
+                mockupLabelHeight +
+                (bottomUsableHeight - mockupLabelHeight - drawHeight) / 2;
+            ctx.drawImage(img, imgX, imgY, drawWidth, drawHeight);
+        }
+    }
+    ctx.restore();
+};
 const renderEmbroideryCanvas = (canvas, config, canvasSize, imageRefs) => {
     const ctx = canvas.getContext("2d");
     if (!ctx)
@@ -547,6 +871,12 @@ const renderEmbroideryCanvas = (canvas, config, canvasSize, imageRefs) => {
     }
     if (!config.sides?.length)
         return;
+    // Check if this is a stroke_patches layout
+    const hasStrokePatches = config.sides.some((side) => side.item_type && side.item_type.includes("stroke_patches"));
+    if (hasStrokePatches) {
+        renderStrokePatchesCanvas(ctx, canvas, config, imageRefs);
+        return;
+    }
     ctx.textAlign = LAYOUT.TEXT_ALIGN;
     ctx.textBaseline = LAYOUT.TEXT_BASELINE;
     if (config.image_url) {
@@ -719,7 +1049,8 @@ const getEffectiveMaxWidth = (x, y, lineHeight, originalMaxWidth, mockupBounds)
     // Kiểm tra xem dòng text có nằm trong phạm vi Y của mockup không
     const lineTopY = y;
     const lineBottomY = y + lineHeight;
-    const overlapsY = lineTopY < mockupBounds.y + mockupBounds.height && lineBottomY > mockupBounds.y;
+    const overlapsY = lineTopY < mockupBounds.y + mockupBounds.height &&
+        lineBottomY > mockupBounds.y;
     if (overlapsY) {
         // Nếu overlap theo Y, giới hạn maxWidth để text không vượt quá mockup.x
         const maxAllowedWidth = mockupBounds.x - x;
@@ -766,15 +1097,17 @@ const renderSide = (ctx, side, startY, width, height, scaleFactor, imageRefs, mo
     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() === "";
-    });
+    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;
-    });
+    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();
@@ -788,7 +1121,8 @@ const renderSide = (ctx, side, startY, width, height, scaleFactor, imageRefs, mo
         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 iconColorPositions = side.positions.filter((p) => p.type === "ICON" &&
+        (!p.layer_colors?.length || p.layer_colors.length === 1));
     const iconColorValues = iconColorPositions
         .map((p) => {
         if (p.layer_colors?.length === 1)
@@ -910,7 +1244,8 @@ const computeUniformProperties = (textPositions, options) => {
         ...(options?.additionalColorValues?.map((color) => color ?? "None") ?? []),
     ];
     if (textPositions.length === 0 &&
-        (!options?.additionalColorValues || options.additionalColorValues.length === 0)) {
+        (!options?.additionalColorValues ||
+            options.additionalColorValues.length === 0)) {
         return defaults;
     }
     const colors = new Set(colorSources);
@@ -1011,7 +1346,9 @@ const renderUniformLabels = (ctx, uniformProps, x, y, maxWidth, scaleFactor, ima
         }
         rendered++;
     }
-    if (values.floral && values.floral !== "None" && shouldRenderField("floral")) {
+    if (values.floral &&
+        values.floral !== "None" &&
+        shouldRenderField("floral")) {
         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)
@@ -1075,9 +1412,7 @@ displayIndex, showLabels, scaleFactor, imageRefs, mockupBounds = null) => {
     let currentY = y;
     // 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");
+    const normalizeNewlines = (text) => text.replace(/\r\n/g, "\n").replace(/\r/g, "\n");
     // Get display text (handle empty/null/undefined) sau khi normalize
     const rawOriginalText = position.text ?? "";
     const normalizedText = normalizeNewlines(rawOriginalText);
@@ -1114,7 +1449,9 @@ displayIndex, showLabels, scaleFactor, imageRefs, mockupBounds = null) => {
         let minShrinkRatio = 1;
         ctx.font = `${textFontSize}px ${LAYOUT.FONT_FAMILY}`;
         lines.forEach((line, idx) => {
-            const lineY = textCenterY - (lines.length - 1) / 2 * valueLineHeight + idx * valueLineHeight;
+            const lineY = textCenterY -
+                ((lines.length - 1) / 2) * valueLineHeight +
+                idx * valueLineHeight;
             // Tính effectiveMaxWidth cho dòng này
             const effectiveMaxWidth = mockupBounds
                 ? getEffectiveMaxWidth(valueStartX, lineY, valueLineHeight, availableWidth, mockupBounds)
@@ -1142,7 +1479,9 @@ displayIndex, showLabels, scaleFactor, imageRefs, mockupBounds = null) => {
     // Vẽ từ trên xuống: căn giữa mỗi dòng
     // Font size đã được tính để vừa với effectiveMaxWidth của từng dòng, nên không cần cắt text
     lines.forEach((line, idx) => {
-        const lineY = textCenterY - (lines.length - 1) / 2 * valueLineHeight + idx * valueLineHeight;
+        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
@@ -1160,25 +1499,127 @@ displayIndex, showLabels, scaleFactor, imageRefs, mockupBounds = null) => {
             currentY += result.height;
         }
         if (showLabels.font && position.font) {
-            // Render "Font: " với font mặc định
             const prefix = "Font: ";
-            ctx.font = `${otherFontSize}px ${LAYOUT.FONT_FAMILY}`;
-            const prefixWidth = ctx.measureText(prefix).width;
-            let currentX = x + prefixWidth;
-            ctx.fillText(prefix, x, currentY);
-            // Render tên font với font từ config
-            ctx.font = `${otherFontSize}px ${position.font}`;
-            const fontNameWidth = ctx.measureText(position.font).width;
-            ctx.fillText(position.font, currentX, currentY);
-            currentX += fontNameWidth;
-            // Render "(Mặc định)" hoặc "(Custom)" với font mặc định
             const suffix = position.is_font_default === true ? " (Mặc định)" : " (Custom)";
-            ctx.font = `${otherFontSize}px ${LAYOUT.FONT_FAMILY}`;
-            ctx.measureText(suffix).width;
-            ctx.fillText(suffix, currentX, currentY);
-            // Tính toán height và di chuyển cursorY
+            const fontName = position.font;
+            const fullText = `${prefix}${fontName}${suffix}`;
             const lineHeight = otherFontSize + lineGap;
-            currentY += lineHeight;
+            const textTopY = currentY;
+            const effectiveMaxWidth = mockupBounds
+                ? getEffectiveMaxWidth(x, textTopY, lineHeight, maxWidth, mockupBounds)
+                : maxWidth;
+            const MIN_FONT_FONT_SIZE = otherFontSize * 0.5;
+            const measureFontTextWidth = (fontSize) => {
+                ctx.font = `${fontSize}px ${LAYOUT.FONT_FAMILY}`;
+                const prefixWidth = ctx.measureText(prefix).width;
+                ctx.font = `${fontSize}px ${position.font}`;
+                const fontNameWidth = ctx.measureText(fontName).width;
+                ctx.font = `${fontSize}px ${LAYOUT.FONT_FAMILY}`;
+                const suffixWidth = ctx.measureText(suffix).width;
+                return prefixWidth + fontNameWidth + suffixWidth;
+            };
+            const checkFontSizeFits = (fontSize) => {
+                const textTopY = currentY;
+                const lineHeight = fontSize + lineGap;
+                const effectiveMaxWidth = mockupBounds
+                    ? getEffectiveMaxWidth(x, textTopY, lineHeight, maxWidth, mockupBounds)
+                    : maxWidth;
+                const textWidth = measureFontTextWidth(fontSize);
+                return textWidth <= effectiveMaxWidth;
+            };
+            let effectiveFontSize = otherFontSize;
+            let needsWrap = false;
+            // Bước 1: Thử giảm font size, kiểm tra xem có vừa chiều ngang không
+            const baseMaxWidth = measureFontTextWidth(otherFontSize);
+            if (baseMaxWidth > effectiveMaxWidth) {
+                // Binary search để tìm font size lớn nhất mà vẫn vừa
+                let left = MIN_FONT_FONT_SIZE;
+                let right = otherFontSize;
+                let bestFontSize = MIN_FONT_FONT_SIZE;
+                while (right - left > 0.1) {
+                    const mid = (left + right) / 2;
+                    if (checkFontSizeFits(mid)) {
+                        bestFontSize = mid;
+                        left = mid;
+                    }
+                    else {
+                        right = mid;
+                    }
+                }
+                if (checkFontSizeFits(bestFontSize)) {
+                    // Bước 1 thành công: font size đã shrink vừa chiều ngang
+                    effectiveFontSize = Math.floor(bestFontSize);
+                }
+                else {
+                    // Bước 1 thất bại: đã shrink đến MIN nhưng vẫn không vừa, sang bước 2
+                    needsWrap = true;
+                    effectiveFontSize = otherFontSize;
+                }
+            }
+            if (needsWrap) {
+                // Bước 2: Xuống dòng với font size gốc
+                ctx.font = `${effectiveFontSize}px ${LAYOUT.FONT_FAMILY}`;
+                const wrappedLines = buildWrappedLines(ctx, fullText, effectiveMaxWidth, x, textTopY, lineHeight, mockupBounds);
+                wrappedLines.forEach((line, index) => {
+                    const lineY = textTopY + index * lineHeight;
+                    const lineEffectiveMaxWidth = mockupBounds
+                        ? getEffectiveMaxWidth(x, lineY, lineHeight, maxWidth, mockupBounds)
+                        : maxWidth;
+                    let lineToRender = line;
+                    const lineWidth = ctx.measureText(lineToRender).width;
+                    if (lineWidth > lineEffectiveMaxWidth) {
+                        while (ctx.measureText(lineToRender).width > lineEffectiveMaxWidth &&
+                            lineToRender.length > 0) {
+                            lineToRender = lineToRender.slice(0, -1);
+                        }
+                    }
+                    ctx.fillText(lineToRender, x, lineY);
+                });
+                currentY += wrappedLines.length * lineHeight;
+            }
+            else {
+                // Bước 1 thành công: Render với font size đã shrink (1 dòng)
+                const shrunkTextTopY = currentY;
+                const shrunkLineHeight = effectiveFontSize + lineGap;
+                const shrunkEffectiveMaxWidth = mockupBounds
+                    ? getEffectiveMaxWidth(x, shrunkTextTopY, shrunkLineHeight, maxWidth, mockupBounds)
+                    : maxWidth;
+                ctx.font = `${effectiveFontSize}px ${LAYOUT.FONT_FAMILY}`;
+                const prefixWidth = ctx.measureText(prefix).width;
+                let currentX = x + prefixWidth;
+                ctx.fillText(prefix, x, currentY);
+                ctx.font = `${effectiveFontSize}px ${position.font}`;
+                const fontNameWidth = ctx.measureText(fontName).width;
+                const totalWidth = prefixWidth + fontNameWidth;
+                if (totalWidth > shrunkEffectiveMaxWidth) {
+                    // Cần cắt font name
+                    let truncatedFontName = fontName;
+                    while (ctx.measureText(truncatedFontName).width >
+                        shrunkEffectiveMaxWidth - prefixWidth &&
+                        truncatedFontName.length > 0) {
+                        truncatedFontName = truncatedFontName.slice(0, -1);
+                    }
+                    ctx.fillText(truncatedFontName, currentX, currentY);
+                    currentX += ctx.measureText(truncatedFontName).width;
+                }
+                else {
+                    ctx.fillText(fontName, currentX, currentY);
+                    currentX += fontNameWidth;
+                }
+                ctx.font = `${effectiveFontSize}px ${LAYOUT.FONT_FAMILY}`;
+                const remainingWidth = shrunkEffectiveMaxWidth - (currentX - x);
+                if (remainingWidth > 0) {
+                    let truncatedSuffix = suffix;
+                    while (ctx.measureText(truncatedSuffix).width > remainingWidth &&
+                        truncatedSuffix.length > 0) {
+                        truncatedSuffix = truncatedSuffix.slice(0, -1);
+                    }
+                    if (truncatedSuffix.length > 0) {
+                        ctx.fillText(truncatedSuffix, currentX, currentY);
+                    }
+                }
+                currentY += shrunkLineHeight;
+            }
         }
         if (showLabels.color) {
             const colorValue = position.character_colors?.join(", ") || position.color;
@@ -1211,7 +1652,8 @@ displayIndex, showLabels, scaleFactor, imageRefs, mockupBounds = null) => {
                 else {
                     // Đủ chỗ, vẽ swatches ngay sau text trên cùng dòng
                     swatchX = swatchesStartX;
-                    swatchY = result.lastLineY + Math.floor(otherFontSize / 2 - swatchH / 2);
+                    swatchY =
+                        result.lastLineY + Math.floor(otherFontSize / 2 - swatchH / 2);
                     currentY += result.height;
                 }
                 drawSwatches(ctx, colors, swatchX, swatchY, swatchH, scaleFactor, imageRefs);
@@ -1320,130 +1762,122 @@ const renderIconPosition = (ctx, position, x, y, maxWidth, scaleFactor, imageRef
                 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;
+                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 textCenterY = cursorY + iconImageHeight / 2;
+    const valueStartX = x + labelWidth;
+    const textTopY = textCenterY - iconFontSize / 2;
+    const lineHeight = iconFontSize;
+    const effectiveMaxWidth = mockupBounds
+        ? getEffectiveMaxWidth(valueStartX, textTopY, lineHeight, availableWidth, mockupBounds)
+        : availableWidth;
     const MIN_ICON_VALUE_FONT_SIZE = iconFontSize * 0.5;
     const measureIconValueWidth = (fontSize) => {
         ctx.font = `${fontSize}px ${LAYOUT.FONT_FAMILY}`;
         return ctx.measureText(` ${iconValue}`).width;
     };
+    const checkFontSizeFits = (fontSize) => {
+        const textTopY = textCenterY - fontSize / 2;
+        const lineHeight = fontSize;
+        const effectiveMaxWidth = mockupBounds
+            ? getEffectiveMaxWidth(valueStartX, textTopY, lineHeight, availableWidth, mockupBounds)
+            : availableWidth;
+        const textWidth = measureIconValueWidth(fontSize);
+        return textWidth <= effectiveMaxWidth;
+    };
     let effectiveIconValueFontSize = iconFontSize;
-    const baseMaxWidth = measureIconValueWidth(iconFontSize);
     let needsWrap = false;
-    if (baseMaxWidth > availableWidth) {
-        const shrinkRatio = availableWidth / baseMaxWidth;
-        effectiveIconValueFontSize = Math.max(MIN_ICON_VALUE_FONT_SIZE, iconFontSize * shrinkRatio);
-        // Kiểm tra xem sau khi thu nhỏ đến 50% có vẫn overflow không
-        const minMaxWidth = measureIconValueWidth(MIN_ICON_VALUE_FONT_SIZE);
-        if (minMaxWidth > availableWidth) {
-            // Vẫn overflow, cần dùng wrap text
+    // Bước 1: Thử giảm font size, kiểm tra xem có vừa chiều ngang không
+    const baseMaxWidth = measureIconValueWidth(iconFontSize);
+    if (baseMaxWidth > effectiveMaxWidth) {
+        // Binary search để tìm font size lớn nhất mà vẫn vừa
+        let left = MIN_ICON_VALUE_FONT_SIZE;
+        let right = iconFontSize;
+        let bestFontSize = MIN_ICON_VALUE_FONT_SIZE;
+        while (right - left > 0.1) {
+            const mid = (left + right) / 2;
+            if (checkFontSizeFits(mid)) {
+                bestFontSize = mid;
+                left = mid;
+            }
+            else {
+                right = mid;
+            }
+        }
+        if (checkFontSizeFits(bestFontSize)) {
+            // Bước 1 thành công: font size đã shrink vừa chiều ngang
+            effectiveIconValueFontSize = Math.floor(bestFontSize);
+        }
+        else {
+            // Bước 1 thất bại: đã shrink đến MIN nhưng vẫn không vừa, sang bước 2
             needsWrap = true;
-            effectiveIconValueFontSize = MIN_ICON_VALUE_FONT_SIZE;
+            effectiveIconValueFontSize = iconFontSize;
         }
     }
-    // Tính line height và block height cho icon value
-    const valueLineHeight = effectiveIconValueFontSize;
-    let allWrappedLines = [];
-    // Text align center: căn giữa theo chiều dọc trong block
-    const textCenterY = cursorY + iconImageHeight / 2;
-    const valueStartX = x + labelWidth;
-    if (needsWrap) {
-        // Dùng wrap text logic
-        const wrappedLines = buildWrappedLines(ctx, iconValue, availableWidth, valueStartX, textCenterY, valueLineHeight, mockupBounds);
-        allWrappedLines = wrappedLines;
-        wrappedLines.length * valueLineHeight;
-    }
-    else {
-        // Không cần wrap, chỉ một dòng
-        allWrappedLines = [iconValue];
-    }
-    // Vẽ label với textBaseline = middle để align center với value
+    // Bước 2: Nếu bước 1 thất bại, xuống dòng với font size gốc
     ctx.textBaseline = "middle";
     ctx.font = `bold ${iconFontSize}px ${LAYOUT.FONT_FAMILY}`;
     ctx.fillStyle = LAYOUT.LABEL_COLOR;
     ctx.fillText(iconLabel, x, textCenterY);
-    // Vẽ icon value với align center
     ctx.font = `${effectiveIconValueFontSize}px ${LAYOUT.FONT_FAMILY}`;
     ctx.fillStyle = DEFAULT_ERROR_COLOR;
     let maxValueLineWidth = 0;
-    // Vẽ icon value, căn giữa theo chiều dọc
+    let totalTextHeight = iconImageHeight;
     if (needsWrap) {
-        // Có nhiều dòng sau khi wrap
-        allWrappedLines.forEach((line, index) => {
-            const lineY = textCenterY - (allWrappedLines.length - 1) / 2 * valueLineHeight + index * valueLineHeight;
-            // Kiểm tra overlap với mockup và điều chỉnh text nếu cần
-            if (mockupBounds) {
-                const effectiveMaxWidth = getEffectiveMaxWidth(valueStartX, lineY, valueLineHeight, availableWidth, mockupBounds);
-                const lineWidth = ctx.measureText(line).width;
-                if (lineWidth > effectiveMaxWidth) {
-                    // Cắt text cho đến khi vừa với effectiveMaxWidth
-                    let truncatedLine = line;
-                    while (ctx.measureText(truncatedLine).width > effectiveMaxWidth && truncatedLine.length > 0) {
-                        truncatedLine = truncatedLine.slice(0, -1);
-                    }
-                    ctx.fillText(truncatedLine, valueStartX, lineY);
-                    const w = ctx.measureText(truncatedLine).width;
-                    if (w > maxValueLineWidth)
-                        maxValueLineWidth = w;
-                }
-                else {
-                    ctx.fillText(line, valueStartX, lineY);
-                    const w = ctx.measureText(line).width;
-                    if (w > maxValueLineWidth)
-                        maxValueLineWidth = w;
+        // Bước 2: Xuống dòng với font size gốc
+        const wrappedLines = buildWrappedLines(ctx, iconValue, effectiveMaxWidth, valueStartX, textTopY, lineHeight, mockupBounds);
+        // Tính height dựa trên số dòng thực tế
+        totalTextHeight = Math.max(iconImageHeight, wrappedLines.length * lineHeight);
+        wrappedLines.forEach((line, index) => {
+            const lineTopY = textTopY + index * lineHeight;
+            const lineCenterY = lineTopY + lineHeight / 2;
+            const lineEffectiveMaxWidth = mockupBounds
+                ? getEffectiveMaxWidth(valueStartX, lineTopY, lineHeight, availableWidth, mockupBounds)
+                : availableWidth;
+            let lineToRender = line;
+            const lineWidth = ctx.measureText(lineToRender).width;
+            if (lineWidth > lineEffectiveMaxWidth) {
+                while (ctx.measureText(lineToRender).width > lineEffectiveMaxWidth &&
+                    lineToRender.length > 0) {
+                    lineToRender = lineToRender.slice(0, -1);
                 }
             }
-            else {
-                ctx.fillText(line, valueStartX, lineY);
-                const w = ctx.measureText(line).width;
-                if (w > maxValueLineWidth)
-                    maxValueLineWidth = w;
-            }
+            ctx.fillText(lineToRender, valueStartX, lineCenterY);
+            const w = ctx.measureText(lineToRender).width;
+            if (w > maxValueLineWidth)
+                maxValueLineWidth = w;
         });
     }
     else {
-        // Chỉ một dòng, căn giữa
+        // Bước 1 thành công: Render với font size đã shrink (1 dòng)
+        const shrunkTextTopY = textCenterY - effectiveIconValueFontSize / 2;
+        const shrunkLineHeight = effectiveIconValueFontSize;
+        const shrunkEffectiveMaxWidth = mockupBounds
+            ? getEffectiveMaxWidth(valueStartX, shrunkTextTopY, shrunkLineHeight, availableWidth, mockupBounds)
+            : availableWidth;
         const lineText = ` ${iconValue}`;
-        // Kiểm tra overlap với mockup và điều chỉnh text nếu cần
-        if (mockupBounds) {
-            const effectiveMaxWidth = getEffectiveMaxWidth(valueStartX, textCenterY, valueLineHeight, availableWidth, mockupBounds);
-            const lineWidth = ctx.measureText(lineText).width;
-            if (lineWidth > effectiveMaxWidth) {
-                // Cắt text cho đến khi vừa với effectiveMaxWidth
-                let truncatedLine = lineText;
-                while (ctx.measureText(truncatedLine).width > effectiveMaxWidth && truncatedLine.length > 0) {
-                    truncatedLine = truncatedLine.slice(0, -1);
-                }
-                ctx.fillText(truncatedLine, valueStartX, textCenterY);
-                const w = ctx.measureText(truncatedLine).width;
-                if (w > maxValueLineWidth)
-                    maxValueLineWidth = w;
-            }
-            else {
-                ctx.fillText(lineText, valueStartX, textCenterY);
-                const w = ctx.measureText(lineText).width;
-                if (w > maxValueLineWidth)
-                    maxValueLineWidth = w;
+        let lineToRender = lineText;
+        const lineWidth = ctx.measureText(lineToRender).width;
+        if (lineWidth > shrunkEffectiveMaxWidth) {
+            while (ctx.measureText(lineToRender).width > shrunkEffectiveMaxWidth &&
+                lineToRender.length > 0) {
+                lineToRender = lineToRender.slice(0, -1);
             }
         }
-        else {
-            ctx.fillText(lineText, valueStartX, textCenterY);
-            const w = ctx.measureText(lineText).width;
-            if (w > maxValueLineWidth)
-                maxValueLineWidth = w;
-        }
+        ctx.fillText(lineToRender, valueStartX, textCenterY);
+        const w = ctx.measureText(lineToRender).width;
+        if (w > maxValueLineWidth)
+            maxValueLineWidth = w;
     }
     ctx.fillStyle = LAYOUT.LABEL_COLOR;
     // Reset textBaseline về top cho các phần tiếp theo
     ctx.textBaseline = LAYOUT.TEXT_BASELINE;
     const iconResult = {
-        height: iconImageHeight + lineGap,
+        height: totalTextHeight + lineGap,
         // tổng width của cả label + value, dùng để canh icon image lệch sang phải
         lastLineWidth: labelWidth + maxValueLineWidth};
     // Kiểm tra xem phần icon image có vượt quá canvas không trước khi render
@@ -1493,7 +1927,7 @@ const renderIconPosition = (ctx, position, x, y, maxWidth, scaleFactor, imageRef
         const testLines = buildWrappedLines(ctx, testText, effectiveMaxWidth, x, cursorY, lineHeight, mockupBounds);
         testLines.length * lineHeight;
         // Kiểm tra xem có đủ chỗ cho swatches trên cùng dòng không
-        const testTextWidth = Math.max(...testLines.map(line => ctx.measureText(line).width));
+        const testTextWidth = Math.max(...testLines.map((line) => ctx.measureText(line).width));
         const textEndX = x + testTextWidth;
         const spacing = LAYOUT.ELEMENT_SPACING * scaleFactor;
         const swatchesStartX = textEndX + spacing;
@@ -1522,7 +1956,8 @@ const renderIconPosition = (ctx, position, x, y, maxWidth, scaleFactor, imageRef
         else {
             // Đủ chỗ, vẽ swatches ngay sau text trên cùng dòng
             swatchX = swatchesStartX;
-            swatchY = colorResult.lastLineY + Math.floor(otherFontSize / 2 - swatchH / 2);
+            swatchY =
+                colorResult.lastLineY + Math.floor(otherFontSize / 2 - swatchH / 2);
             // Render swatches (đã kiểm tra overflow ở trên)
             drawSwatches(ctx, iconColors, swatchX, swatchY, swatchH, scaleFactor, imageRefs);
             // cursorY đã được cập nhật ở trên
@@ -1538,10 +1973,7 @@ const prepareExportCanvas = async (config, options = {}) => {
         current: new Map(),
     };
     // Load fonts and images in parallel
-    await Promise.all([
-        preloadFonts(config),
-        preloadImages(config, imageRefs)
-    ]);
+    await Promise.all([preloadFonts(config), preloadImages(config, imageRefs)]);
     renderEmbroideryCanvas(canvas, config, { width, height }, imageRefs);
     if (!canvas.width || !canvas.height) {
         return null;