embroidery-qc-image 1.0.23 → 1.0.25

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;AAoWD,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAqHvD,CAAC;AA27BF,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;AAibD,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAmHvD,CAAC;AAugCF,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

@@ -13,6 +13,9 @@ interface TextPosition {
 interface IconPosition {
     type: 'ICON';
     icon: number;
+    icon_name?: string | null;
+    icon_image?: string | null;
+    is_delete_icon?: boolean | null;
     note?: string | null;
     color?: string | null;
     layer_colors: string[];
@@ -20,10 +23,12 @@ interface IconPosition {
 type Position = TextPosition | IconPosition;
 interface Side {
     print_side: string;
+    item_type?: string | null;
     positions: Position[];
 }
 interface EmbroideryQCConfig {
     image_url?: string;
+    message?: string | null;
     error_message?: string | null;
     warning_message?: string | null;
     sides: Side[];

package/dist/index.esm.js

@@ -31,71 +31,6 @@ 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 = {
@@ -111,7 +46,7 @@ const LAYOUT = {
     // Font sizes (base values, will be multiplied by scaleFactor)
     HEADER_FONT_SIZE: 220,
     TEXT_FONT_SIZE: 200,
-    OTHER_FONT_SIZE: 160,
+    OTHER_FONT_SIZE: 180,
     // Colors
     HEADER_COLOR: "#000000",
     LABEL_COLOR: "#444444",
@@ -120,12 +55,12 @@ const LAYOUT = {
     TEXT_ALIGN: "left",
     TEXT_BASELINE: "top",
     // Spacing
-    LINE_GAP: 40,
-    PADDING: 40,
+    LINE_GAP: 50,
+    PADDING: 50,
     SECTION_SPACING: 60,
     ELEMENT_SPACING: 100,
     SWATCH_SPACING: 25,
-    FLORAL_SPACING: 300,
+    FLORAL_SPACING: 100,
     // Visual styling
     SWATCH_HEIGHT_RATIO: 2.025,
     UNDERLINE_POSITION: 0.9,
@@ -168,6 +103,17 @@ const getImageUrl = (type, value) => {
     return `${BASE_URLS.THREAD_COLOR}/${value}.webp`;
 };
 const getProxyUrl = (url) => `https://proxy-img.c8p.workers.dev?url=${encodeURIComponent(url)}`;
+const getIconImageUrl = (position) => {
+    if (position.is_delete_icon)
+        return null;
+    if (position.icon_image && position.icon_image.trim().length > 0) {
+        return position.icon_image;
+    }
+    if (position.icon !== 0) {
+        return getImageUrl("icon", position.icon);
+    }
+    return null;
+};
 const ensureImage = (existing) => {
     if (existing && existing.crossOrigin === "anonymous") {
         return existing;
@@ -199,14 +145,14 @@ const loadImage = (url, imageRefs, onLoad) => {
     img.onerror = () => {
         if (!attemptedProxy) {
             attemptedProxy = true;
-            img.src = getProxyUrl(url);
+            img.src = getProxyUrl(getResizeUrl(url));
             return;
         }
         img.dataset.proxyUsed = attemptedProxy ? "true" : "false";
         cleanup();
         onLoad();
     };
-    img.src = attemptedProxy ? getProxyUrl(url) : url;
+    img.src = attemptedProxy ? getProxyUrl(getResizeUrl(url)) : getResizeUrl(url);
 };
 const loadImageAsync = (url, imageRefs, cacheKey) => {
     const key = cacheKey ?? url;
@@ -244,13 +190,13 @@ const loadImageAsync = (url, imageRefs, cacheKey) => {
         target.onerror = () => {
             if (!attemptedProxy) {
                 attemptedProxy = true;
-                target.src = getProxyUrl(url);
+                target.src = getProxyUrl(getResizeUrl(url));
                 return;
             }
             target.dataset.proxyUsed = attemptedProxy ? "true" : "false";
             finalize();
         };
-        const desiredSrc = attemptedProxy ? getProxyUrl(url) : url;
+        const desiredSrc = attemptedProxy ? getProxyUrl(getResizeUrl(url)) : getResizeUrl(url);
         if (target.src !== desiredSrc) {
             target.src = desiredSrc;
         }
@@ -259,6 +205,57 @@ const loadImageAsync = (url, imageRefs, cacheKey) => {
         }
     });
 };
+const getResizeUrl = (url) => {
+    try {
+        const urlObj = new URL(url);
+        // Xử lý cdn.shopify.com
+        if (urlObj.hostname === 'cdn.shopify.com') {
+            // Set hoặc update query param width=400
+            urlObj.searchParams.set('width', '400');
+            return urlObj.toString();
+        }
+        // Xử lý m.media-amazon.com
+        if (urlObj.hostname === 'm.media-amazon.com') {
+            const pathname = urlObj.pathname;
+            // Split pathname theo dấu /
+            const pathArr = pathname.split('/');
+            // Lấy filename (phần cuối cùng)
+            const filename = pathArr[pathArr.length - 1];
+            // Xóa pattern ._.*_ (ví dụ: ._AC_SX569_)
+            const cleanedFilename = filename.replace(/\._.*_/g, '');
+            // Split filename đã clean theo dấu .
+            const parts = cleanedFilename.split('.');
+            if (parts.length >= 2) {
+                // Lấy phần đầu và phần cuối
+                const firstPart = parts[0];
+                const lastPart = parts[parts.length - 1];
+                // Chèn _AC_SX400_ vào giữa và join lại
+                const newFilename = `${firstPart}._AC_SX400_.${lastPart}`;
+                // Thay filename mới vào pathArr
+                pathArr[pathArr.length - 1] = newFilename;
+                // Join lại
+                urlObj.pathname = pathArr.join('/');
+                return urlObj.toString();
+            }
+        }
+        // Xử lý i.etsystatic.com
+        if (urlObj.hostname === 'i.etsystatic.com') {
+            const pathname = urlObj.pathname;
+            // Thay il_fullxfull bằng il_400x400
+            if (pathname.includes('il_fullxfull')) {
+                const newPathname = pathname.replace(/il_fullxfull/g, 'il_400x400');
+                urlObj.pathname = newPathname;
+                return urlObj.toString();
+            }
+        }
+        // Nếu không phải các domain cần xử lý, return URL gốc
+        return url;
+    }
+    catch (error) {
+        // Nếu URL không hợp lệ, return URL gốc
+        return url;
+    }
+};
 const preloadFonts = async (config) => {
     if (config.error_message || !config.sides?.length)
         return;
@@ -288,12 +285,10 @@ const preloadImages = async (config, imageRefs) => {
     config.sides.forEach((side) => {
         side.positions.forEach((position) => {
             if (position.type === "ICON") {
-                if (position.icon !== 0) {
-                    const iconUrl = getImageUrl("icon", position.icon);
-                    if (!seen.has(iconUrl)) {
-                        entries.push({ url: iconUrl });
-                        seen.add(iconUrl);
-                    }
+                const iconUrl = getIconImageUrl(position);
+                if (iconUrl && !seen.has(iconUrl)) {
+                    entries.push({ url: iconUrl });
+                    seen.add(iconUrl);
                 }
                 if (position.color) {
                     const threadUrl = getImageUrl("threadColor", position.color);
@@ -366,60 +361,30 @@ const wrapText = (ctx, text, x, y, maxWidth, lineHeight) => {
     };
 };
 const buildWrappedLines = (ctx, text, maxWidth) => {
-    const words = text.split(" ").filter((word) => word.length > 0);
-    if (words.length === 0)
-        return [""];
-    const lines = [];
-    let currentLine = words[0];
-    for (let i = 1; i < words.length; i++) {
-        const testLine = `${currentLine} ${words[i]}`;
-        if (ctx.measureText(testLine).width > maxWidth && currentLine.length > 0) {
-            lines.push(currentLine);
-            currentLine = words[i];
-        }
-        else {
-            currentLine = testLine;
-        }
-    }
-    lines.push(currentLine);
-    return lines;
-};
-const wrapTextMultiColor = (ctx, text, colors, x, y, maxWidth, lineHeight) => {
-    const words = text.split(" ");
-    const lines = [];
-    const lineStartIndices = [0];
-    let currentLine = words[0];
-    let currentCharIndex = words[0].length;
-    for (let i = 1; i < words.length; i++) {
-        const testLine = currentLine + " " + words[i];
-        if (ctx.measureText(testLine).width > maxWidth && currentLine.length > 0) {
-            lines.push(currentLine);
-            lineStartIndices.push(currentCharIndex + 1);
-            currentLine = words[i];
-            currentCharIndex += words[i].length + 1;
-        }
-        else {
-            currentLine = testLine;
-            currentCharIndex += words[i].length + 1;
+    // Mỗi '\n' tương đương với một line break giống như khi wrap tự động.
+    const segments = text.split("\n");
+    const result = [];
+    segments.forEach((segment) => {
+        const words = segment.split(" ").filter((word) => word.length > 0);
+        if (words.length === 0) {
+            // Nếu đoạn rỗng, thêm một dòng trống (break đúng 1 line)
+            result.push("");
+            return;
         }
-    }
-    lines.push(currentLine);
-    let currentY = y;
-    lines.forEach((line, lineIdx) => {
-        let currentX = x;
-        const startCharIdx = lineIdx > 0 ? lineStartIndices[lineIdx] : 0;
-        for (let i = 0; i < line.length; i++) {
-            const char = line[i];
-            const globalCharIdx = startCharIdx + i;
-            const colorIndex = globalCharIdx % colors.length;
-            const color = colors[colorIndex];
-            ctx.fillStyle = COLOR_MAP[color] || LAYOUT.LABEL_COLOR;
-            ctx.fillText(char, currentX, currentY);
-            currentX += ctx.measureText(char).width;
+        let currentLine = words[0];
+        for (let i = 1; i < words.length; i++) {
+            const testLine = `${currentLine} ${words[i]}`;
+            if (ctx.measureText(testLine).width > maxWidth && currentLine.length > 0) {
+                result.push(currentLine);
+                currentLine = words[i];
+            }
+            else {
+                currentLine = testLine;
+            }
         }
-        currentY += lineHeight;
+        result.push(currentLine);
     });
-    return lines.length * lineHeight;
+    return result.length ? result : [""];
 };
 const drawSwatches = (ctx, colors, startX, startY, swatchHeight, scaleFactor, imageRefs) => {
     let swatchX = startX;
@@ -483,8 +448,9 @@ const EmbroideryQCImage = ({ config, className = "", style = {}, }) => {
         config.sides.forEach((side) => {
             side.positions.forEach((position) => {
                 if (position.type === "ICON") {
-                    if (position.icon !== 0) {
-                        loadImage(getImageUrl("icon", position.icon), imageRefs, incrementCounter);
+                    const iconUrl = getIconImageUrl(position);
+                    if (iconUrl) {
+                        loadImage(iconUrl, imageRefs, incrementCounter);
                     }
                     position.layer_colors?.forEach((color) => {
                         loadImage(getImageUrl("threadColor", color), imageRefs, incrementCounter);
@@ -535,7 +501,7 @@ const renderEmbroideryCanvas = (canvas, config, canvasSize, imageRefs) => {
         return;
     ctx.textAlign = LAYOUT.TEXT_ALIGN;
     ctx.textBaseline = LAYOUT.TEXT_BASELINE;
-    // Calculate warning height (with scaleFactor = 1 for measurement)
+    // Calculate warning & message height (with scaleFactor = 1 for measurement)
     let warningHeight = 0;
     let warningLineHeight = 0;
     let warningLineCount = 0;
@@ -554,6 +520,24 @@ const renderEmbroideryCanvas = (canvas, config, canvasSize, imageRefs) => {
             warningHeight = warningLineCount * warningLineHeight + LAYOUT.PADDING;
         }
     }
+    let messageHeight = 0;
+    let messageLineHeight = 0;
+    let messageLineCount = 0;
+    if (config.message) {
+        const measureMessageCanvas = document.createElement("canvas");
+        measureMessageCanvas.width = canvas.width;
+        measureMessageCanvas.height = canvas.height;
+        const measureMessageCtx = measureMessageCanvas.getContext("2d");
+        if (measureMessageCtx) {
+            measureMessageCtx.textAlign = "left";
+            measureMessageCtx.textBaseline = "top";
+            measureMessageCtx.font = `${LAYOUT.HEADER_FONT_SIZE * 0.7}px ${LAYOUT.FONT_FAMILY}`;
+            const messageLines = buildWrappedLines(measureMessageCtx, config.message.trim(), canvas.width - LAYOUT.PADDING * 4);
+            messageLineCount = messageLines.length;
+            messageLineHeight = LAYOUT.HEADER_FONT_SIZE * 0.7 + LAYOUT.LINE_GAP;
+            messageHeight = messageLineCount * messageLineHeight + LAYOUT.PADDING;
+        }
+    }
     if (config.image_url) {
         const mockupImage = imageRefs.current.get(config.image_url);
         if (mockupImage) {
@@ -586,27 +570,40 @@ const renderEmbroideryCanvas = (canvas, config, canvasSize, imageRefs) => {
     measureCtx.textBaseline = LAYOUT.TEXT_BASELINE;
     let measureY = LAYOUT.PADDING;
     const measureSpacing = LAYOUT.ELEMENT_SPACING;
-    // Add warning text height (without bottom padding, no spacing)
+    // Add warning & message text height (without bottom padding, no spacing)
     if (config.warning_message) {
         const warningTextHeight = warningHeight - LAYOUT.PADDING;
         measureY += warningTextHeight;
     }
+    if (config.message) {
+        const messageTextHeight = messageHeight - LAYOUT.PADDING;
+        measureY += messageTextHeight;
+    }
     config.sides.forEach((side) => {
         const sideHeight = renderSide(measureCtx, side, measureY, canvas.width, 1, imageRefs);
         measureY += sideHeight + measureSpacing;
     });
-    const scaleFactor = Math.max(0.5, Math.min(1, (canvas.height - LAYOUT.PADDING - warningHeight) / measureY));
+    const scaleFactor = Math.max(0.5, Math.min(1, (canvas.height - LAYOUT.PADDING - warningHeight - messageHeight) / measureY));
     drawMockupAndFlorals(ctx, canvas, floralAssets, imageRefs);
-    // Render warning with scaleFactor and get actual height
+    // Render warning & message with scaleFactor and get actual heights
     let actualWarningHeight = 0;
+    let actualMessageHeight = 0;
     if (config.warning_message) {
         actualWarningHeight = renderWarning(ctx, canvas, config.warning_message, scaleFactor);
     }
-    // Calculate currentY: padding top + actual warning height (no spacing)
+    if (config.message) {
+        actualMessageHeight = renderWarning(ctx, canvas, config.message, scaleFactor, actualWarningHeight, "", // message: không cần prefix "Note"
+        DEFAULT_ERROR_COLOR // message: hiển thị màu đỏ
+        );
+    }
+    // Calculate currentY: padding top + actual warning & message height (no spacing)
     let currentY = LAYOUT.PADDING * scaleFactor;
     if (config.warning_message && actualWarningHeight > 0) {
         currentY += actualWarningHeight;
     }
+    if (config.message && actualMessageHeight > 0) {
+        currentY += actualMessageHeight;
+    }
     config.sides.forEach((side) => {
         const sideHeight = renderSide(ctx, side, currentY, canvas.width, scaleFactor, imageRefs);
         currentY += sideHeight + measureSpacing * scaleFactor;
@@ -648,8 +645,8 @@ const renderErrorState = (ctx, canvas, message) => {
     });
     ctx.restore();
 };
-const renderWarning = (ctx, canvas, message, scaleFactor = 1) => {
-    const sanitizedMessage = `Note: ${message.trim()}`;
+const renderWarning = (ctx, canvas, message, scaleFactor = 1, offsetY = 0, prefix = "Note: ", color = DEFAULT_WARNING_COLOR) => {
+    const sanitizedMessage = `${prefix}${message.trim()}`;
     const horizontalPadding = LAYOUT.PADDING * 2 * scaleFactor;
     const maxWidth = canvas.width - horizontalPadding * 2;
     const baseFontSize = LAYOUT.HEADER_FONT_SIZE * 0.7 * scaleFactor;
@@ -658,7 +655,7 @@ const renderWarning = (ctx, canvas, message, scaleFactor = 1) => {
     ctx.save();
     ctx.textAlign = "left";
     ctx.textBaseline = "top";
-    ctx.fillStyle = DEFAULT_WARNING_COLOR;
+    ctx.fillStyle = color;
     ctx.font = `${baseFontSize}px ${LAYOUT.FONT_FAMILY}`;
     let fontSize = baseFontSize;
     let lineGap = LAYOUT.LINE_GAP * scaleFactor;
@@ -677,7 +674,7 @@ const renderWarning = (ctx, canvas, message, scaleFactor = 1) => {
         lines = buildWrappedLines(ctx, sanitizedMessage, maxWidth);
         longestLineWidth = Math.max(...lines.map((line) => ctx.measureText(line).width));
     }
-    const startY = LAYOUT.PADDING * scaleFactor;
+    const startY = LAYOUT.PADDING * scaleFactor + offsetY;
     lines.forEach((line, index) => {
         const y = startY + index * lineHeight;
         ctx.fillText(line, leftX, y);
@@ -701,7 +698,7 @@ const drawMockupAndFlorals = (ctx, canvas, floralAssets, imageRefs) => {
     ctx.drawImage(mockupImg, x, y, width, height);
     // Draw florals
     if (floralAssets.length > 0) {
-        const floralH = Math.min(900, height);
+        const floralH = Math.min(500, height);
         let currentX = x - LAYOUT.FLORAL_SPACING;
         for (let i = floralAssets.length - 1; i >= 0; i--) {
             const img = floralAssets[i];
@@ -892,9 +889,25 @@ const renderUniformLabels = (ctx, uniformProps, x, y, maxWidth, scaleFactor, ima
     let rendered = 0;
     if (values.font && shouldRenderField("font")) {
         const allDefault = textPositions.every((p) => p.is_font_default === true);
-        const fontLabel = allDefault ? `Font: ${values.font} (Mặc định)` : `Font: ${values.font} (Custom)`;
-        const result = wrapText(ctx, fontLabel, x, cursorY, maxWidth, fontSize + lineGap);
-        cursorY += result.height;
+        // Render "Font: " với font mặc định
+        const prefix = "Font: ";
+        ctx.font = `${fontSize}px ${LAYOUT.FONT_FAMILY}`;
+        const prefixWidth = ctx.measureText(prefix).width;
+        let currentX = x + prefixWidth;
+        ctx.fillText(prefix, x, cursorY);
+        // Render tên font với font từ config
+        ctx.font = `${fontSize}px ${values.font}`;
+        const fontNameWidth = ctx.measureText(values.font).width;
+        ctx.fillText(values.font, currentX, cursorY);
+        currentX += fontNameWidth;
+        // Render "(Mặc định)" hoặc "(Custom)" với font mặc định
+        const suffix = allDefault ? " (Mặc định)" : " (Custom)";
+        ctx.font = `${fontSize}px ${LAYOUT.FONT_FAMILY}`;
+        ctx.measureText(suffix).width;
+        ctx.fillText(suffix, currentX, cursorY);
+        // Tính toán height và di chuyển cursorY
+        const lineHeight = fontSize + lineGap;
+        cursorY += lineHeight;
         rendered++;
     }
     if (values.shape && values.shape !== "None" && shouldRenderField("shape")) {
@@ -943,31 +956,15 @@ const renderTextPosition = (ctx, position, x, y, maxWidth, displayIndex, showLab
     const textMaxWidth = maxWidth - labelWidth;
     // Get display text (handle empty/null/undefined)
     const isEmptyText = !position.text || position.text.trim() === "";
-    // Draw text content
+    // Draw text content - dùng font mặc định và màu đỏ
+    ctx.font = `${textFontSize}px ${LAYOUT.FONT_FAMILY}`;
+    ctx.fillStyle = DEFAULT_ERROR_COLOR;
     if (isEmptyText) {
-        ctx.font = `${textFontSize}px ${LAYOUT.FONT_FAMILY}`;
-        ctx.fillStyle = LAYOUT.LABEL_COLOR;
         const textResult = wrapText(ctx, "(không có text)", x + labelWidth, currentY, textMaxWidth, textFontSize);
         currentY += textResult.height;
         drawnHeight += textResult.height;
     }
-    else if (position.floral_pattern) {
-        // Khi có floral_pattern, dùng màu mặc định như label
-        ctx.font = `${textFontSize}px ${position.font}`;
-        ctx.fillStyle = LAYOUT.LABEL_COLOR;
-        const textResult = wrapText(ctx, position.text, x + labelWidth, currentY, textMaxWidth, textFontSize);
-        currentY += textResult.height;
-        drawnHeight += textResult.height;
-    }
-    else if (position.character_colors?.length) {
-        ctx.font = `${textFontSize}px ${position.font}`;
-        const textHeight = wrapTextMultiColor(ctx, position.text, position.character_colors, x + labelWidth, currentY, textMaxWidth, textFontSize);
-        currentY += textHeight;
-        drawnHeight += textHeight;
-    }
     else {
-        ctx.font = `${textFontSize}px ${position.font}`;
-        ctx.fillStyle = COLOR_MAP[position.color ?? "None"] || LAYOUT.LABEL_COLOR;
         const textResult = wrapText(ctx, position.text, x + labelWidth, currentY, textMaxWidth, textFontSize);
         currentY += textResult.height;
         drawnHeight += textResult.height;
@@ -983,12 +980,26 @@ const renderTextPosition = (ctx, position, x, y, maxWidth, displayIndex, showLab
             drawnHeight += result.height;
         }
         if (showLabels.font && position.font) {
-            const fontLabel = position.is_font_default === true
-                ? `Font: ${position.font} (Mặc định)`
-                : `Font: ${position.font} (Custom)`;
-            const result = wrapText(ctx, fontLabel, x, currentY, maxWidth, otherFontSize + lineGap);
-            currentY += result.height;
-            drawnHeight += result.height;
+            // Render "Font: " với font mặc định
+            const prefix = "Font: ";
+            ctx.font = `${otherFontSize}px ${LAYOUT.FONT_FAMILY}`;
+            const prefixWidth = ctx.measureText(prefix).width;
+            let currentX = x + prefixWidth;
+            ctx.fillText(prefix, x, currentY);
+            // Render tên font với font từ config
+            ctx.font = `${otherFontSize}px ${position.font}`;
+            const fontNameWidth = ctx.measureText(position.font).width;
+            ctx.fillText(position.font, currentX, currentY);
+            currentX += fontNameWidth;
+            // Render "(Mặc định)" hoặc "(Custom)" với font mặc định
+            const suffix = position.is_font_default === true ? " (Mặc định)" : " (Custom)";
+            ctx.font = `${otherFontSize}px ${LAYOUT.FONT_FAMILY}`;
+            ctx.measureText(suffix).width;
+            ctx.fillText(suffix, currentX, currentY);
+            // Tính toán height và di chuyển cursorY
+            const lineHeight = otherFontSize + lineGap;
+            currentY += lineHeight;
+            drawnHeight += lineHeight;
         }
         if (showLabels.color) {
             const colorValue = position.character_colors?.join(", ") || position.color;
@@ -1016,21 +1027,56 @@ const renderTextPosition = (ctx, position, x, y, maxWidth, displayIndex, showLab
     return drawnHeight;
 };
 const renderIconPosition = (ctx, position, x, y, maxWidth, scaleFactor, imageRefs, options) => {
-    const iconFontSize = LAYOUT.OTHER_FONT_SIZE * scaleFactor;
+    // Dùng cùng font size với Text cho label và value icon
+    const iconFontSize = LAYOUT.TEXT_FONT_SIZE * scaleFactor;
     const lineGap = LAYOUT.LINE_GAP * scaleFactor;
     ctx.save();
-    ctx.font = `${iconFontSize}px ${LAYOUT.FONT_FAMILY}`;
     ctx.fillStyle = LAYOUT.LABEL_COLOR;
     let cursorY = y;
-    const iconText = position.note ? `Icon: ${position.note}` :
-        position.icon === 0
-            ? `Icon: (icon mặc định theo file thêu)`
-            : `Icon: ${position.icon}`;
-    const iconResult = wrapText(ctx, iconText, x, cursorY, maxWidth, iconFontSize + lineGap);
+    // Tách label "Icon:" (in đậm) và phần value (thường)
+    const iconLabel = "Icon:";
+    let iconValue;
+    if (position.is_delete_icon) {
+        // Ưu tiên hiển thị không có icon nếu được đánh dấu xóa
+        iconValue = "(không có icon)";
+    }
+    else if (position.note) {
+        iconValue = position.note;
+    }
+    else if (position.icon_name && position.icon_name.trim().length > 0) {
+        // Nếu có icon_name thì hiển thị tên đó
+        iconValue = position.icon_name;
+    }
+    else if (position.icon === 0) {
+        // Icon mặc định theo file thêu
+        iconValue = "(icon mặc định theo file thêu)";
+    }
+    else {
+        // Fallback: hiển thị mã icon (ép sang string)
+        iconValue = String(position.icon);
+    }
+    // Vẽ label Icon: (bold, màu label mặc định)
+    ctx.font = `bold ${iconFontSize}px ${LAYOUT.FONT_FAMILY}`;
+    ctx.fillText(iconLabel, x, cursorY);
+    const labelWidth = ctx.measureText(iconLabel).width;
+    // Vẽ value kế bên, font thường, màu đỏ giống text value
+    ctx.font = `${iconFontSize}px ${LAYOUT.FONT_FAMILY}`;
+    ctx.fillStyle = DEFAULT_ERROR_COLOR;
+    const valueText = ` ${iconValue}`;
+    ctx.fillText(valueText, x + labelWidth, cursorY);
+    // Reset lại màu về label color cho các phần text tiếp theo (màu chỉ, v.v.)
+    ctx.fillStyle = LAYOUT.LABEL_COLOR;
+    const valueWidth = ctx.measureText(valueText).width;
+    const iconResult = {
+        height: iconFontSize + lineGap,
+        // tổng width của cả label + value, dùng để canh icon image lệch sang phải
+        lastLineWidth: labelWidth + valueWidth,
+        lastLineY: cursorY,
+    };
     // Draw icon image
-    if (position.icon !== 0) {
-        const url = getImageUrl("icon", position.icon);
-        const img = imageRefs.current.get(url);
+    const iconUrl = getIconImageUrl(position);
+    if (iconUrl) {
+        const img = imageRefs.current.get(iconUrl);
         if (img?.complete && img.naturalHeight > 0) {
             const ratio = img.naturalWidth / img.naturalHeight;
             const swatchW = Math.max(1, Math.floor(iconFontSize * ratio));
@@ -1043,11 +1089,14 @@ const renderIconPosition = (ctx, position, x, y, maxWidth, scaleFactor, imageRef
     }
     cursorY += iconResult.height;
     // Draw color swatches (prefer layer_colors, fallback to single color)
-    const iconColors = position.layer_colors?.length
-        ? position.layer_colors
-        : position.color
-            ? [position.color]
-            : null;
+    // Nếu icon đã bị xóa thì không cần hiển thị màu chỉ nữa
+    const iconColors = position.is_delete_icon
+        ? null
+        : position.layer_colors?.length
+            ? position.layer_colors
+            : position.color
+                ? [position.color]
+                : null;
     const layerCount = position.layer_colors?.length ?? 0;
     const hasMultiLayerColors = layerCount > 1;
     const shouldSkipColorSection = options?.hideColor && !hasMultiLayerColors;