embroidery-qc-image 1.0.30 → 1.0.31

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;AAofD,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAmHvD,CAAC;AA2kDF,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;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;AAqkEF,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.d.ts

@@ -1,7 +1,7 @@
 import React$1 from 'react';
 
 interface TextPosition {
-    type: 'TEXT';
+    type: "TEXT";
     text: string;
     text_shape?: string | null;
     color?: string | null;
@@ -9,9 +9,11 @@ interface TextPosition {
     is_font_default?: boolean | null;
     character_colors?: string[] | null;
     floral_pattern?: string | null;
+    layer_colors?: string[] | null;
+    attachment?: string | null;
 }
 interface IconPosition {
-    type: 'ICON';
+    type: "ICON";
     icon: number;
     icon_name?: string | null;
     icon_image?: string | null;
@@ -24,6 +26,8 @@ type Position = TextPosition | IconPosition;
 interface Side {
     print_side: string;
     item_type?: string | null;
+    link?: string | null;
+    size?: string | null;
     positions: Position[];
 }
 interface EmbroideryQCConfig {

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
@@ -1229,7 +1568,8 @@ displayIndex, showLabels, scaleFactor, imageRefs, mockupBounds = null) => {
                     let lineToRender = line;
                     const lineWidth = ctx.measureText(lineToRender).width;
                     if (lineWidth > lineEffectiveMaxWidth) {
-                        while (ctx.measureText(lineToRender).width > lineEffectiveMaxWidth && lineToRender.length > 0) {
+                        while (ctx.measureText(lineToRender).width > lineEffectiveMaxWidth &&
+                            lineToRender.length > 0) {
                             lineToRender = lineToRender.slice(0, -1);
                         }
                     }
@@ -1254,7 +1594,9 @@ displayIndex, showLabels, scaleFactor, imageRefs, mockupBounds = null) => {
                 if (totalWidth > shrunkEffectiveMaxWidth) {
                     // Cần cắt font name
                     let truncatedFontName = fontName;
-                    while (ctx.measureText(truncatedFontName).width > shrunkEffectiveMaxWidth - prefixWidth && truncatedFontName.length > 0) {
+                    while (ctx.measureText(truncatedFontName).width >
+                        shrunkEffectiveMaxWidth - prefixWidth &&
+                        truncatedFontName.length > 0) {
                         truncatedFontName = truncatedFontName.slice(0, -1);
                     }
                     ctx.fillText(truncatedFontName, currentX, currentY);
@@ -1268,7 +1610,8 @@ displayIndex, showLabels, scaleFactor, imageRefs, mockupBounds = null) => {
                 const remainingWidth = shrunkEffectiveMaxWidth - (currentX - x);
                 if (remainingWidth > 0) {
                     let truncatedSuffix = suffix;
-                    while (ctx.measureText(truncatedSuffix).width > remainingWidth && truncatedSuffix.length > 0) {
+                    while (ctx.measureText(truncatedSuffix).width > remainingWidth &&
+                        truncatedSuffix.length > 0) {
                         truncatedSuffix = truncatedSuffix.slice(0, -1);
                     }
                     if (truncatedSuffix.length > 0) {
@@ -1309,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);
@@ -1418,7 +1762,8 @@ 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;
             }
         }
     }
@@ -1496,7 +1841,8 @@ const renderIconPosition = (ctx, position, x, y, maxWidth, scaleFactor, imageRef
             let lineToRender = line;
             const lineWidth = ctx.measureText(lineToRender).width;
             if (lineWidth > lineEffectiveMaxWidth) {
-                while (ctx.measureText(lineToRender).width > lineEffectiveMaxWidth && lineToRender.length > 0) {
+                while (ctx.measureText(lineToRender).width > lineEffectiveMaxWidth &&
+                    lineToRender.length > 0) {
                     lineToRender = lineToRender.slice(0, -1);
                 }
             }
@@ -1517,7 +1863,8 @@ const renderIconPosition = (ctx, position, x, y, maxWidth, scaleFactor, imageRef
         let lineToRender = lineText;
         const lineWidth = ctx.measureText(lineToRender).width;
         if (lineWidth > shrunkEffectiveMaxWidth) {
-            while (ctx.measureText(lineToRender).width > shrunkEffectiveMaxWidth && lineToRender.length > 0) {
+            while (ctx.measureText(lineToRender).width > shrunkEffectiveMaxWidth &&
+                lineToRender.length > 0) {
                 lineToRender = lineToRender.slice(0, -1);
             }
         }
@@ -1580,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;
@@ -1609,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
@@ -1625,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;