embroidery-qc-image 1.0.32 → 1.0.34

package/dist/components/EmbroideryQCImage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EmbroideryQCImage.d.ts","sourceRoot":"","sources":["../../src/components/EmbroideryQCImage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAE,kBAAkB,EAAE,sBAAsB,EAAY,MAAM,UAAU,CAAC;AAChF,OAAO,yBAAyB,CAAC;AAiKjC,MAAM,WAAW,8BAA8B;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,WAAW,GAAG,YAAY,GAAG,YAAY,CAAC;IACrD,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAwhBD,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAmHvD,CAAC;AA+oEF,eAAO,MAAM,6BAA6B,GACxC,QAAQ,kBAAkB,EAC1B,UAAS,8BAAmC,KAC3C,OAAO,CAAC,IAAI,GAAG,IAAI,CAuBrB,CAAC;AAEF,eAAO,MAAM,6BAA6B,GACxC,QAAQ,kBAAkB,EAC1B,UAAS,8BAAmC,KAC3C,OAAO,CAAC,MAAM,GAAG,IAAI,CAuBvB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"EmbroideryQCImage.d.ts","sourceRoot":"","sources":["../../src/components/EmbroideryQCImage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAE,kBAAkB,EAAE,sBAAsB,EAAY,MAAM,UAAU,CAAC;AAChF,OAAO,yBAAyB,CAAC;AAgLjC,MAAM,WAAW,8BAA8B;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,WAAW,GAAG,YAAY,GAAG,YAAY,CAAC;IACrD,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAiiBD,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA2HvD,CAAC;AA8nFF,eAAO,MAAM,6BAA6B,GACxC,QAAQ,kBAAkB,EAC1B,UAAS,8BAAmC,KAC3C,OAAO,CAAC,IAAI,GAAG,IAAI,CAuBrB,CAAC;AAEF,eAAO,MAAM,6BAA6B,GACxC,QAAQ,kBAAkB,EAC1B,UAAS,8BAAmC,KAC3C,OAAO,CAAC,MAAM,GAAG,IAAI,CAuBvB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/index.esm.js

@@ -141,18 +141,30 @@ const loadFont = (fontName) => {
         }
     }
     return new Promise((resolve) => {
-        const fontUrl = `${BASE_URLS.FONT}/${encodeURIComponent(fontName)}.woff2`;
-        const fontFace = new FontFace(fontName, `url(${fontUrl})`);
-        fontFace
-            .load()
-            .then((loadedFont) => {
-            document.fonts.add(loadedFont);
-            resolve();
-        })
-            .catch(() => {
-            console.warn(`Could not load font ${fontName} from CDN`);
-            resolve();
-        });
+        const fontFormats = ['woff2', 'ttf', 'otf'];
+        let currentFormatIndex = 0;
+        const tryLoadFont = () => {
+            if (currentFormatIndex >= fontFormats.length) {
+                console.warn(`Could not load font ${fontName} from CDN (tried all formats)`);
+                resolve();
+                return;
+            }
+            const format = fontFormats[currentFormatIndex];
+            const fontUrl = `${BASE_URLS.FONT}/${encodeURIComponent(fontName)}.${format}`;
+            const fontFace = new FontFace(fontName, `url(${fontUrl})`);
+            fontFace
+                .load()
+                .then((loadedFont) => {
+                document.fonts.add(loadedFont);
+                resolve();
+            })
+                .catch(() => {
+                // Try next format
+                currentFormatIndex++;
+                tryLoadFont();
+            });
+        };
+        tryLoadFont();
     });
 };
 const getImageUrl = (type, value) => {
@@ -389,6 +401,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);
+                    }
+                });
             }
         });
     });
@@ -582,6 +602,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);
+                    });
                 }
             });
         });
@@ -624,10 +648,14 @@ const renderStrokePatchesCanvas = (ctx, canvas, config, imageRefs) => {
         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 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 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;
@@ -919,6 +947,371 @@ const renderStrokePatchesCanvas = (ctx, canvas, config, imageRefs) => {
     }
     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) - 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();
+};
 const renderEmbroideryCanvas = (canvas, config, canvasSize, imageRefs) => {
     const ctx = canvas.getContext("2d");
     if (!ctx)
@@ -939,6 +1332,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) {