embroidery-qc-image 1.0.31 → 1.0.33

package/dist/index.js

@@ -391,6 +391,14 @@ const preloadImages = async (config, imageRefs) => {
                         seen.add(characterColorUrl);
                     }
                 });
+                // Load layer_colors for TEXT (used in stroke_patches and template_custom_text_patches)
+                position.layer_colors?.forEach((color) => {
+                    const layerColorUrl = getImageUrl("threadColor", color);
+                    if (!seen.has(layerColorUrl)) {
+                        entries.push({ url: layerColorUrl });
+                        seen.add(layerColorUrl);
+                    }
+                });
             }
         });
     });
@@ -584,6 +592,10 @@ const EmbroideryQCImage = ({ config, className = "", style = {}, }) => {
                     position.character_colors?.forEach((color) => {
                         loadImage(getImageUrl("threadColor", color), imageRefs, incrementCounter);
                     });
+                    // Load layer_colors for TEXT (used in stroke_patches and template_custom_text_patches)
+                    position.layer_colors?.forEach((color) => {
+                        loadImage(getImageUrl("threadColor", color), imageRefs, incrementCounter);
+                    });
                 }
             });
         });
@@ -626,36 +638,21 @@ const renderStrokePatchesCanvas = (ctx, canvas, config, imageRefs) => {
         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")}`);
+    if (!position.layer_colors || position.layer_colors.length < 3) {
+        renderErrorState(ctx, canvas, "Không có đủ màu cho stroke patches");
         return;
     }
+    // Get layer colors with empty check (don't use fallback)
+    const textColor = position.layer_colors[0];
+    const borderColor = position.layer_colors[1];
+    const backgroundColor = position.layer_colors[2];
+    const fabricColor = position.layer_colors?.[3]; // Màu vải
+    // For rendering, use fallback colors (fabricColor không cần fallback vì chỉ hiển thị)
+    const textColorForRender = textColor;
+    const borderColorForRender = borderColor;
+    const backgroundColorForRender = backgroundColor;
+    // Check if font is missing (but continue rendering)
+    const isFontMissing = !position.font || position.font.trim() === "";
     // ============================================================================
     // TOP SECTION (2/3): Hiển thị mẫu preview
     // ============================================================================
@@ -671,7 +668,8 @@ const renderStrokePatchesCanvas = (ctx, canvas, config, imageRefs) => {
     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 fontToUse = isFontMissing ? LAYOUT.FONT_FAMILY : position.font;
+    ctx.font = `${previewFontSize}px ${fontToUse}`;
     const text = position.text || "";
     const maxTextWidth = usableWidth * 0.9; // Use 75% of width for better padding
     const maxTextHeight = actualTopSectionHeight; // Use 60% of height
@@ -679,23 +677,23 @@ const renderStrokePatchesCanvas = (ctx, canvas, config, imageRefs) => {
     let textWidth = ctx.measureText(text).width;
     while (textWidth > maxTextWidth && previewFontSize > 50) {
         previewFontSize *= 0.95;
-        ctx.font = `${previewFontSize}px ${position.font}`;
+        ctx.font = `${previewFontSize}px ${fontToUse}`;
         textWidth = ctx.measureText(text).width;
     }
     // Ensure text height also fits
     while (previewFontSize > maxTextHeight && previewFontSize > 50) {
         previewFontSize *= 0.95;
-        ctx.font = `${previewFontSize}px ${position.font}`;
+        ctx.font = `${previewFontSize}px ${fontToUse}`;
     }
     // 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";
+    // Get color hex values (use render colors with fallback)
+    const textColorHex = COLOR_MAP[textColorForRender] || LAYOUT.LABEL_COLOR;
+    const borderColorHex = COLOR_MAP[borderColorForRender] || LAYOUT.LABEL_COLOR;
+    const bgColorHex = COLOR_MAP[backgroundColorForRender] || "#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
@@ -755,62 +753,507 @@ const renderStrokePatchesCanvas = (ctx, canvas, config, imageRefs) => {
     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);
+    if (isFontMissing) {
+        // Hiển thị warning màu đỏ nếu thiếu font
+        ctx.fillStyle = "#CC0000"; // Red color
+        ctx.fillText("(Đang thiếu font chữ)", startX + ctx.measureText(fontPrefix).width, infoY);
+        ctx.fillStyle = LAYOUT.LABEL_COLOR; // Reset color
+    }
+    else {
+        // Render font name với chính font đó
+        const prefixWidth = ctx.measureText(fontPrefix).width;
+        const fontName = position.font || LAYOUT.FONT_FAMILY;
+        ctx.font = `${infoFontSize}px ${fontName}`;
+        ctx.fillText(fontName, 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) - layer_colors[0]
+    drawAsterisk(padding, infoY);
+    const textColorPrefix = "Màu chữ: ";
+    ctx.fillText(textColorPrefix, startX, infoY);
+    if (!textColor || textColor.trim() === "") {
+        // Hiển thị warning màu đỏ nếu thiếu màu
+        const prefixWidth = ctx.measureText(textColorPrefix).width;
+        ctx.fillStyle = "#CC0000";
+        ctx.fillText("(Chưa có màu)", startX + prefixWidth, infoY);
+        ctx.fillStyle = LAYOUT.LABEL_COLOR; // Reset color
+    }
+    else {
+        // Hiển thị tên màu
+        const prefixWidth = ctx.measureText(textColorPrefix).width;
+        ctx.fillText(textColor, startX + prefixWidth, infoY);
+        // Draw text color swatch
+        const swatchSize = infoFontSize * 1.3;
+        const swatchX = startX +
+            ctx.measureText(textColorPrefix + textColor).width +
+            LAYOUT.ELEMENT_SPACING * 0.3;
+        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) - layer_colors[2]
+    drawAsterisk(padding, infoY);
+    const bgColorPrefix = "Màu nền: ";
+    ctx.fillText(bgColorPrefix, startX, infoY);
+    if (!backgroundColor || backgroundColor.trim() === "") {
+        // Hiển thị warning màu đỏ nếu thiếu màu
+        const prefixWidth = ctx.measureText(bgColorPrefix).width;
+        ctx.fillStyle = "#CC0000";
+        ctx.fillText("(Chưa có màu)", startX + prefixWidth, infoY);
+        ctx.fillStyle = LAYOUT.LABEL_COLOR; // Reset color
+    }
+    else {
+        // Hiển thị tên màu
+        const prefixWidth = ctx.measureText(bgColorPrefix).width;
+        ctx.fillText(backgroundColor, startX + prefixWidth, infoY);
+        // Draw background color swatch
+        const swatchSize = infoFontSize * 1.3;
+        const bgSwatchX = startX +
+            ctx.measureText(bgColorPrefix + backgroundColor).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) - layer_colors[1]
+    drawAsterisk(padding, infoY);
+    const borderColorPrefix = "Màu viền: ";
+    ctx.fillText(borderColorPrefix, startX, infoY);
+    if (!borderColor || borderColor.trim() === "") {
+        // Hiển thị warning màu đỏ nếu thiếu màu
+        const prefixWidth = ctx.measureText(borderColorPrefix).width;
+        ctx.fillStyle = "#CC0000";
+        ctx.fillText("(Chưa có màu)", startX + prefixWidth, infoY);
+        ctx.fillStyle = LAYOUT.LABEL_COLOR; // Reset color
+    }
+    else {
+        // Hiển thị tên màu
+        const prefixWidth = ctx.measureText(borderColorPrefix).width;
+        ctx.fillText(borderColor, startX + prefixWidth, infoY);
+        // Draw border color swatch
+        const swatchSize = infoFontSize * 1.3;
+        const borderSwatchX = startX +
+            ctx.measureText(borderColorPrefix + borderColor).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;
+    // Màu vải (Fabric Color) - layer_colors[3]
+    drawAsterisk(padding, infoY);
+    const fabricColorPrefix = "Màu vải: ";
+    ctx.fillText(fabricColorPrefix, startX, infoY);
+    if (!fabricColor || fabricColor.trim() === "") {
+        // Hiển thị warning màu đỏ nếu thiếu màu
+        const prefixWidth = ctx.measureText(fabricColorPrefix).width;
+        ctx.fillStyle = "#CC0000";
+        ctx.fillText("(Chưa có màu)", startX + prefixWidth, infoY);
+        ctx.fillStyle = LAYOUT.LABEL_COLOR; // Reset color
+    }
+    else {
+        // Hiển thị tên màu
+        const prefixWidth = ctx.measureText(fabricColorPrefix).width;
+        ctx.fillText(fabricColor, startX + prefixWidth, infoY);
+        // Draw fabric color swatch
+        const swatchSize = infoFontSize * 1.3;
+        const fabricSwatchX = startX +
+            ctx.measureText(fabricColorPrefix + fabricColor).width +
+            LAYOUT.ELEMENT_SPACING * 0.3;
+        const fabricSwatchY = infoY + infoFontSize / 2 - swatchSize / 2;
+        const fabricColorSwatchUrl = getImageUrl("threadColor", fabricColor);
+        const fabricColorSwatchImg = imageRefs.current.get(fabricColorSwatchUrl);
+        if (fabricColorSwatchImg?.complete &&
+            fabricColorSwatchImg.naturalHeight > 0) {
+            const ratio = fabricColorSwatchImg.naturalWidth / fabricColorSwatchImg.naturalHeight;
+            const swatchW = Math.max(1, Math.floor(swatchSize * ratio));
+            ctx.drawImage(fabricColorSwatchImg, fabricSwatchX, fabricSwatchY, 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();
+};
+// Helper function để parse size từ string như "3 X 3 INCHES"
+const parseSize = (sizeStr) => {
+    if (!sizeStr || typeof sizeStr !== "string")
+        return null;
+    // Pattern để match "3 X 3 INCHES" hoặc "3x3" hoặc "3 X 3"
+    const match = sizeStr.match(/(\d+(?:\.\d+)?)\s*[xX]\s*(\d+(?:\.\d+)?)/i);
+    if (!match)
+        return null;
+    const width = parseFloat(match[1]);
+    const height = parseFloat(match[2]);
+    if (isNaN(width) || isNaN(height) || width <= 0 || height <= 0)
+        return null;
+    return { width, height };
+};
+const renderTemplateCustomTextPatchesCanvas = (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 (template_custom_text_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;
+    }
+    if (!position.layer_colors || position.layer_colors.length < 3) {
+        renderErrorState(ctx, canvas, "Không có đủ màu cho template custom text patches");
+        return;
+    }
+    // Parse size từ side.size
+    const parsedSize = side.size ? parseSize(side.size) : null;
+    if (!parsedSize) {
+        renderErrorState(ctx, canvas, "Không thể parse size từ dữ liệu");
+        return;
+    }
+    // Get layer colors
+    const textColor = position.layer_colors[0];
+    const borderColor = position.layer_colors[1];
+    const backgroundColor = position.layer_colors[2];
+    const fabricColor = position.layer_colors?.[3]; // Màu vải
+    // Check if font is missing (but continue rendering)
+    const isFontMissing = !position.font || position.font.trim() === "";
+    // ============================================================================
+    // TOP SECTION (2/3): Hiển thị mẫu preview với khung hình chữ nhật
+    // ============================================================================
+    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;
+    // Tính kích thước khung hình chữ nhật dựa trên tỉ lệ size
+    // Sử dụng tỉ lệ width/height từ parsedSize để giữ đúng aspect ratio
+    const sizeAspectRatio = parsedSize.width / parsedSize.height;
+    // Tính kích thước khung để fit trong top section
+    let rectWidth = Math.min(usableWidth * 0.9, actualTopSectionHeight * sizeAspectRatio);
+    let rectHeight = rectWidth / sizeAspectRatio;
+    if (rectHeight > actualTopSectionHeight * 0.9) {
+        rectHeight = actualTopSectionHeight * 0.9;
+        rectWidth = rectHeight * sizeAspectRatio;
+    }
+    // Center the rectangle in top section
+    const rectX = padding + usableWidth / 2 - rectWidth / 2;
+    const rectY = actualTopSectionY + actualTopSectionHeight / 2 - rectHeight / 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";
+    // Border width gấp đôi: 4% của rectWidth, tối thiểu 40px
+    const borderWidth = Math.max(40, rectWidth * 0.04);
+    // Border radius để bo tròn góc
+    const borderRadius = Math.min(rectWidth, rectHeight) * 0.08; // 8% của cạnh nhỏ hơn
+    // Draw rectangle background với border radius
+    ctx.fillStyle = bgColorHex;
+    ctx.beginPath();
+    ctx.roundRect(rectX, rectY, rectWidth, rectHeight, borderRadius);
+    ctx.fill();
+    // Draw rectangle border với border radius
+    ctx.strokeStyle = borderColorHex;
+    ctx.lineWidth = borderWidth;
+    ctx.beginPath();
+    ctx.roundRect(rectX, rectY, rectWidth, rectHeight, borderRadius);
+    ctx.stroke();
+    // Calculate text size to fit inside rectangle (với padding rất nhỏ)
+    // Padding chỉ chừa một chút để tránh text chạm border
+    const textPadding = Math.max(30, rectWidth * 0.03); // 3% padding, tối thiểu 30px
+    const maxTextWidth = rectWidth - textPadding * 2 - borderWidth;
+    const maxTextHeight = rectHeight - textPadding * 2 - borderWidth;
+    const text = position.text || "";
+    const textLines = text.split("\n");
+    const fontToUse = isFontMissing ? LAYOUT.FONT_FAMILY : position.font;
+    // Tìm font size tối đa để text vừa trong khung
+    // Bắt đầu với kích thước lớn và giảm dần
+    let previewFontSize = Math.min(rectWidth, rectHeight) * 0.8; // Start với 80% của cạnh nhỏ hơn
+    let bestFontSize = 30; // Minimum font size
+    // Binary search để tìm font size tối đa
+    let low = 30;
+    let high = previewFontSize;
+    while (high - low > 1) {
+        const mid = (low + high) / 2;
+        ctx.font = `${mid}px ${fontToUse}`;
+        // Kiểm tra width của tất cả các dòng
+        const maxLineWidth = Math.max(...textLines.map(line => ctx.measureText(line).width));
+        // Kiểm tra height với line height = 1.1 (giảm từ 1.2 để text to hơn)
+        const lineHeight = mid * 1.1;
+        const totalTextHeight = textLines.length * lineHeight;
+        if (maxLineWidth <= maxTextWidth && totalTextHeight <= maxTextHeight) {
+            // Font size này vừa, thử tăng lên
+            bestFontSize = mid;
+            low = mid;
+        }
+        else {
+            // Font size này quá lớn, giảm xuống
+            high = mid;
+        }
+    }
+    previewFontSize = bestFontSize;
+    ctx.font = `${previewFontSize}px ${fontToUse}`;
+    // Center the text inside rectangle
+    const finalLineHeight = previewFontSize * 1.1;
+    const totalTextHeightFinal = textLines.length * finalLineHeight;
+    const textStartY = rectY + rectHeight / 2 - totalTextHeightFinal / 2;
+    // Draw text inside rectangle
+    ctx.fillStyle = textColorHex;
+    ctx.textAlign = "center";
+    ctx.textBaseline = "top";
+    textLines.forEach((line, index) => {
+        const lineY = textStartY + index * finalLineHeight;
+        ctx.fillText(line, rectX + rectWidth / 2, lineY);
+    });
+    ctx.restore();
+    // ============================================================================
+    // BOTTOM SECTION (1/3): Flex layout with info (left) and image (right)
+    // ============================================================================
+    ctx.save();
+    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;
+    const infoLineHeight = infoFontSize * 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);
+    if (isFontMissing) {
+        // Hiển thị warning màu đỏ nếu thiếu font
+        ctx.fillStyle = "#CC0000"; // Red color
+        ctx.fillText("(Đang thiếu font chữ)", startX + ctx.measureText(fontPrefix).width, infoY);
+        ctx.fillStyle = LAYOUT.LABEL_COLOR; // Reset color
+    }
+    else {
+        // Render font name với chính font đó
+        const prefixWidth = ctx.measureText(fontPrefix).width;
+        const fontName = position.font || LAYOUT.FONT_FAMILY;
+        ctx.font = `${infoFontSize}px ${fontName}`;
+        ctx.fillText(fontName, 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)
+    // Màu chữ (Text Color) - layer_colors[0]
     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);
+    const textColorPrefix = "Màu chữ: ";
+    ctx.fillText(textColorPrefix, startX, infoY);
+    if (!textColor || textColor.trim() === "") {
+        // Hiển thị warning màu đỏ nếu thiếu màu
+        const prefixWidth = ctx.measureText(textColorPrefix).width;
+        ctx.fillStyle = "#CC0000";
+        ctx.fillText("(Chưa có màu)", startX + prefixWidth, infoY);
+        ctx.fillStyle = LAYOUT.LABEL_COLOR; // Reset color
+    }
+    else {
+        // Hiển thị tên màu
+        const prefixWidth = ctx.measureText(textColorPrefix).width;
+        ctx.fillText(textColor, startX + prefixWidth, infoY);
+        // Draw text color swatch
+        const swatchSize = infoFontSize * 1.3;
+        const swatchX = startX +
+            ctx.measureText(textColorPrefix + textColor).width +
+            LAYOUT.ELEMENT_SPACING * 0.3;
+        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);
+    // Màu nền (Background Color) - layer_colors[2]
+    drawAsterisk(padding, infoY);
+    const bgColorPrefix = "Màu nền: ";
+    ctx.fillText(bgColorPrefix, startX, infoY);
+    if (!backgroundColor || backgroundColor.trim() === "") {
+        // Hiển thị warning màu đỏ nếu thiếu màu
+        const prefixWidth = ctx.measureText(bgColorPrefix).width;
+        ctx.fillStyle = "#CC0000";
+        ctx.fillText("(Chưa có màu)", startX + prefixWidth, infoY);
+        ctx.fillStyle = LAYOUT.LABEL_COLOR; // Reset color
+    }
+    else {
+        // Hiển thị tên màu
+        const prefixWidth = ctx.measureText(bgColorPrefix).width;
+        ctx.fillText(backgroundColor, startX + prefixWidth, infoY);
+        // Draw background color swatch
+        const swatchSize = infoFontSize * 1.3;
+        const bgSwatchX = startX +
+            ctx.measureText(bgColorPrefix + backgroundColor).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);
+    // Màu viền (Border Color) - layer_colors[1]
+    drawAsterisk(padding, infoY);
+    const borderColorPrefix = "Màu viền: ";
+    ctx.fillText(borderColorPrefix, startX, infoY);
+    if (!borderColor || borderColor.trim() === "") {
+        // Hiển thị warning màu đỏ nếu thiếu màu
+        const prefixWidth = ctx.measureText(borderColorPrefix).width;
+        ctx.fillStyle = "#CC0000";
+        ctx.fillText("(Chưa có màu)", startX + prefixWidth, infoY);
+        ctx.fillStyle = LAYOUT.LABEL_COLOR; // Reset color
+    }
+    else {
+        // Hiển thị tên màu
+        const prefixWidth = ctx.measureText(borderColorPrefix).width;
+        ctx.fillText(borderColor, startX + prefixWidth, infoY);
+        // Draw border color swatch
+        const swatchSize = infoFontSize * 1.3;
+        const borderSwatchX = startX +
+            ctx.measureText(borderColorPrefix + borderColor).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;
+    // Màu vải (Fabric Color) - layer_colors[3]
+    drawAsterisk(padding, infoY);
+    const fabricColorPrefix = "Màu vải: ";
+    ctx.fillText(fabricColorPrefix, startX, infoY);
+    if (!fabricColor || fabricColor.trim() === "") {
+        // Hiển thị warning màu đỏ nếu thiếu màu
+        const prefixWidth = ctx.measureText(fabricColorPrefix).width;
+        ctx.fillStyle = "#CC0000";
+        ctx.fillText("(Chưa có màu)", startX + prefixWidth, infoY);
+        ctx.fillStyle = LAYOUT.LABEL_COLOR; // Reset color
+    }
+    else {
+        // Hiển thị tên màu
+        const prefixWidth = ctx.measureText(fabricColorPrefix).width;
+        ctx.fillText(fabricColor, startX + prefixWidth, infoY);
+        // Draw fabric color swatch
+        const swatchSize = infoFontSize * 1.3;
+        const fabricSwatchX = startX +
+            ctx.measureText(fabricColorPrefix + fabricColor).width +
+            LAYOUT.ELEMENT_SPACING * 0.3;
+        const fabricSwatchY = infoY + infoFontSize / 2 - swatchSize / 2;
+        const fabricColorSwatchUrl = getImageUrl("threadColor", fabricColor);
+        const fabricColorSwatchImg = imageRefs.current.get(fabricColorSwatchUrl);
+        if (fabricColorSwatchImg?.complete &&
+            fabricColorSwatchImg.naturalHeight > 0) {
+            const ratio = fabricColorSwatchImg.naturalWidth / fabricColorSwatchImg.naturalHeight;
+            const swatchW = Math.max(1, Math.floor(swatchSize * ratio));
+            ctx.drawImage(fabricColorSwatchImg, fabricSwatchX, fabricSwatchY, swatchW, swatchSize);
+        }
     }
     infoY += infoLineHeight;
     // Attachment
@@ -879,6 +1322,12 @@ const renderEmbroideryCanvas = (canvas, config, canvasSize, imageRefs) => {
         renderStrokePatchesCanvas(ctx, canvas, config, imageRefs);
         return;
     }
+    // Check if this is a template_custom_text_patches layout
+    const hasTemplateCustomTextPatches = config.sides.some((side) => side.item_type && side.item_type.includes("template_custom_text_patches"));
+    if (hasTemplateCustomTextPatches) {
+        renderTemplateCustomTextPatchesCanvas(ctx, canvas, config, imageRefs);
+        return;
+    }
     ctx.textAlign = LAYOUT.TEXT_ALIGN;
     ctx.textBaseline = LAYOUT.TEXT_BASELINE;
     if (config.image_url) {