embroidery-qc-image 1.0.7 → 1.0.9

package/dist/index.esm.js

@@ -35,37 +35,68 @@ styleInject(css_248z);
 // CONSTANTS
 // ============================================================================
 const COLOR_MAP = {
-    "Army (1394)": "#4B5320", Army: "#4B5320",
-    "Black (8)": "#000000", Black: "#000000",
-    "Bubblegum (1309)": "#FFC1CC", Bubblegum: "#FFC1CC",
-    "Carolina Blue (1274)": "#7BAFD4", "Carolina Blue": "#7BAFD4",
-    "Celadon (1098)": "#ACE1AF", Celadon: "#ACE1AF",
-    "Coffee Bean (1145)": "#6F4E37", "Coffee Bean": "#6F4E37",
-    "Daffodil (1180)": "#FFFF31", Daffodil: "#FFFF31",
-    "Dark Gray (1131)": "#A9A9A9", "Dark Gray": "#A9A9A9",
-    "Doe Skin Beige (1344)": "#F5E6D3", "Doe Skin Beige": "#F5E6D3",
-    "Dusty Blue (1373)": "#6699CC", "Dusty Blue": "#6699CC",
-    "Forest Green (1397)": "#228B22", "Forest Green": "#228B22",
-    "Gold (1425)": "#FFD700", Gold: "#FFD700",
-    "Gray (1118)": "#808080", Gray: "#808080",
-    "Ivory (1072)": "#FFFFF0", Ivory: "#FFFFF0",
-    "Lavender (1032)": "#E6E6FA", Lavender: "#E6E6FA",
-    "Light Denim (1133)": "#B0C4DE", "Light Denim": "#B0C4DE",
-    "Light Salmon (1018)": "#FFA07A", "Light Salmon": "#FFA07A",
-    "Maroon (1374)": "#800000", Maroon: "#800000",
-    "Navy Blue (1044)": "#000080", "Navy Blue": "#000080",
-    "Olive Green (1157)": "#556B2F", "Olive Green": "#556B2F",
-    "Orange (1278)": "#FFA500", Orange: "#FFA500",
-    "Peach Blush (1053)": "#FFCCCB", "Peach Blush": "#FFCCCB",
-    "Pink (1148)": "#FFC0CB", Pink: "#FFC0CB",
-    "Purple (1412)": "#800080", Purple: "#800080",
-    "Red (1037)": "#FF0000", Red: "#FF0000",
-    "Silver Sage (1396)": "#A8A8A8", "Silver Sage": "#A8A8A8",
-    "Summer Sky (1432)": "#87CEEB", "Summer Sky": "#87CEEB",
-    "Terra Cotta (1477)": "#E2725B", "Terra Cotta": "#E2725B",
-    "Sand (1055)": "#F4A460", Sand: "#F4A460",
-    "White (9)": "#FFFFFF", White: "#FFFFFF",
+    "Army (1394)": "#4B5320",
+    Army: "#4B5320",
+    "Black (8)": "#000000",
+    Black: "#000000",
+    "Bubblegum (1309)": "#FFC1CC",
+    Bubblegum: "#FFC1CC",
+    "Carolina Blue (1274)": "#7BAFD4",
+    "Carolina Blue": "#7BAFD4",
+    "Celadon (1098)": "#ACE1AF",
+    Celadon: "#ACE1AF",
+    "Coffee Bean (1145)": "#6F4E37",
+    "Coffee Bean": "#6F4E37",
+    "Daffodil (1180)": "#FFFF31",
+    Daffodil: "#FFFF31",
+    "Dark Gray (1131)": "#A9A9A9",
+    "Dark Gray": "#A9A9A9",
+    "Doe Skin Beige (1344)": "#F5E6D3",
+    "Doe Skin Beige": "#F5E6D3",
+    "Dusty Blue (1373)": "#6699CC",
+    "Dusty Blue": "#6699CC",
+    "Forest Green (1397)": "#228B22",
+    "Forest Green": "#228B22",
+    "Gold (1425)": "#FFD700",
+    Gold: "#FFD700",
+    "Gray (1118)": "#808080",
+    Gray: "#808080",
+    "Ivory (1072)": "#FFFFF0",
+    Ivory: "#FFFFF0",
+    "Lavender (1032)": "#E6E6FA",
+    Lavender: "#E6E6FA",
+    "Light Denim (1133)": "#B0C4DE",
+    "Light Denim": "#B0C4DE",
+    "Light Salmon (1018)": "#FFA07A",
+    "Light Salmon": "#FFA07A",
+    "Maroon (1374)": "#800000",
+    Maroon: "#800000",
+    "Navy Blue (1044)": "#000080",
+    "Navy Blue": "#000080",
+    "Olive Green (1157)": "#556B2F",
+    "Olive Green": "#556B2F",
+    "Orange (1278)": "#FFA500",
+    Orange: "#FFA500",
+    "Peach Blush (1053)": "#FFCCCB",
+    "Peach Blush": "#FFCCCB",
+    "Pink (1148)": "#FFC0CB",
+    Pink: "#FFC0CB",
+    "Purple (1412)": "#800080",
+    Purple: "#800080",
+    "Red (1037)": "#FF0000",
+    Red: "#FF0000",
+    "Silver Sage (1396)": "#A8A8A8",
+    "Silver Sage": "#A8A8A8",
+    "Summer Sky (1432)": "#87CEEB",
+    "Summer Sky": "#87CEEB",
+    "Terra Cotta (1477)": "#E2725B",
+    "Terra Cotta": "#E2725B",
+    "Sand (1055)": "#F4A460",
+    Sand: "#F4A460",
+    "White (9)": "#FFFFFF",
+    White: "#FFFFFF",
 };
+const DEFAULT_ERROR_COLOR = "#CC1F1A";
 const BASE_URLS = {
     FONT: "https://s3.hn-1.cloud.cmctelecom.vn/god-system-images/embroidery/fonts",
     ICON: "https://s3.hn-1.cloud.cmctelecom.vn/god-system-images/embroidery/icons",
@@ -128,14 +159,170 @@ const getImageUrl = (type, value) => {
         return `${BASE_URLS.FLORAL}/${value}.png`;
     return `${BASE_URLS.THREAD_COLOR}/${value}.png`;
 };
-const loadImage = (url, imageRefs, onLoad) => {
-    if (imageRefs.current.has(url))
-        return;
+const getProxyUrl = (url) => `https://proxy-img.c8p.workers.dev?url=${encodeURIComponent(url)}`;
+const ensureImage = (existing) => {
+    if (existing && existing.crossOrigin === "anonymous") {
+        return existing;
+    }
     const img = new Image();
     img.crossOrigin = "anonymous";
-    img.src = url;
-    img.onload = onLoad;
+    img.decoding = "async";
+    return img;
+};
+const loadImage = (url, imageRefs, onLoad) => {
+    const existing = imageRefs.current.get(url);
+    if (existing?.complete &&
+        existing.naturalWidth > 0 &&
+        existing.crossOrigin === "anonymous") {
+        return;
+    }
+    const img = ensureImage(existing);
     imageRefs.current.set(url, img);
+    let attemptedProxy = existing?.dataset?.proxyUsed === "true";
+    const cleanup = () => {
+        img.onload = null;
+        img.onerror = null;
+    };
+    img.onload = () => {
+        img.dataset.proxyUsed = attemptedProxy ? "true" : "false";
+        cleanup();
+        onLoad();
+    };
+    img.onerror = () => {
+        if (!attemptedProxy) {
+            attemptedProxy = true;
+            img.src = getProxyUrl(url);
+            return;
+        }
+        img.dataset.proxyUsed = attemptedProxy ? "true" : "false";
+        cleanup();
+        onLoad();
+    };
+    img.src = attemptedProxy ? getProxyUrl(url) : url;
+};
+const loadImageAsync = (url, imageRefs, cacheKey) => {
+    const key = cacheKey ?? url;
+    const existing = imageRefs.current.get(key) ?? imageRefs.current.get(url);
+    if (existing?.complete &&
+        existing.naturalWidth > 0 &&
+        existing.crossOrigin === "anonymous" &&
+        existing.dataset?.proxyUsed !== undefined) {
+        if (existing !== imageRefs.current.get(key)) {
+            imageRefs.current.set(key, existing);
+        }
+        if (existing !== imageRefs.current.get(url)) {
+            imageRefs.current.set(url, existing);
+        }
+        return Promise.resolve(existing);
+    }
+    return new Promise((resolve) => {
+        const target = ensureImage(existing);
+        if (target !== existing) {
+            imageRefs.current.set(key, target);
+            imageRefs.current.set(url, target);
+        }
+        let attemptedProxy = target.dataset.proxyUsed === "true";
+        const finalize = () => {
+            target.onload = null;
+            target.onerror = null;
+            if (target.complete && target.naturalWidth > 0) {
+                imageRefs.current.set(key, target);
+                imageRefs.current.set(url, target);
+            }
+            target.dataset.proxyUsed = attemptedProxy ? "true" : "false";
+            resolve(target);
+        };
+        target.onload = finalize;
+        target.onerror = () => {
+            if (!attemptedProxy) {
+                attemptedProxy = true;
+                target.src = getProxyUrl(url);
+                return;
+            }
+            target.dataset.proxyUsed = attemptedProxy ? "true" : "false";
+            finalize();
+        };
+        const desiredSrc = attemptedProxy ? getProxyUrl(url) : url;
+        if (target.src !== desiredSrc) {
+            target.src = desiredSrc;
+        }
+        else if (target.complete && target.naturalWidth > 0) {
+            finalize();
+        }
+    });
+};
+const preloadFonts = async (config) => {
+    if (config.error_message || !config.sides?.length)
+        return;
+    const fonts = new Set();
+    config.sides.forEach((side) => {
+        side.positions.forEach((position) => {
+            if (position.type === "TEXT" && position.font) {
+                fonts.add(position.font);
+            }
+        });
+    });
+    if (fonts.size === 0)
+        return;
+    await Promise.all([...fonts].map((font) => loadFont(font)));
+};
+const preloadImages = async (config, imageRefs) => {
+    const entries = [];
+    const seen = new Set();
+    if (config.image_url) {
+        entries.push({ url: config.image_url, cacheKey: "mockup" });
+        seen.add(config.image_url);
+    }
+    if (!config.sides?.length) {
+        await Promise.all(entries.map(({ url, cacheKey }) => loadImageAsync(url, imageRefs, cacheKey)));
+        return;
+    }
+    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);
+                    }
+                }
+                position.layer_colors?.forEach((color) => {
+                    const colorUrl = getImageUrl("threadColor", color);
+                    if (!seen.has(colorUrl)) {
+                        entries.push({ url: colorUrl });
+                        seen.add(colorUrl);
+                    }
+                });
+            }
+            if (position.type === "TEXT") {
+                if (position.floral_pattern) {
+                    const floralUrl = getImageUrl("floral", position.floral_pattern);
+                    if (!seen.has(floralUrl)) {
+                        entries.push({ url: floralUrl });
+                        seen.add(floralUrl);
+                    }
+                }
+                if (position.color) {
+                    const threadUrl = getImageUrl("threadColor", position.color);
+                    if (!seen.has(threadUrl)) {
+                        entries.push({ url: threadUrl });
+                        seen.add(threadUrl);
+                    }
+                }
+                position.character_colors?.forEach((color) => {
+                    const characterColorUrl = getImageUrl("threadColor", color);
+                    if (!seen.has(characterColorUrl)) {
+                        entries.push({ url: characterColorUrl });
+                        seen.add(characterColorUrl);
+                    }
+                });
+            }
+        });
+    });
+    if (entries.length === 0)
+        return;
+    await Promise.all(entries.map(({ url, cacheKey }) => loadImageAsync(url, imageRefs, cacheKey)));
 };
 const wrapText = (ctx, text, x, y, maxWidth, lineHeight) => {
     const words = text.split(" ");
@@ -163,6 +350,31 @@ const wrapText = (ctx, text, x, y, maxWidth, lineHeight) => {
         lastLineY: y + (lines.length - 1) * 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 isLightColor = (colorName) => {
+    return (colorName === "White" ||
+        colorName === "White (9)" ||
+        colorName === "Ivory" ||
+        colorName === "Ivory (1072)");
+};
 const wrapTextMultiColor = (ctx, text, colors, x, y, maxWidth, lineHeight) => {
     const words = text.split(" ");
     const lines = [];
@@ -183,6 +395,7 @@ const wrapTextMultiColor = (ctx, text, colors, x, y, maxWidth, lineHeight) => {
         }
     }
     lines.push(currentLine);
+    const hasLightColor = colors.some(isLightColor);
     let currentY = y;
     lines.forEach((line, lineIdx) => {
         let currentX = x;
@@ -192,7 +405,12 @@ const wrapTextMultiColor = (ctx, text, colors, x, y, maxWidth, lineHeight) => {
             const globalCharIdx = startCharIdx + i;
             const colorIndex = globalCharIdx % colors.length;
             const color = colors[colorIndex];
-            ctx.fillStyle = COLOR_MAP[color] || "#000000";
+            if (hasLightColor) {
+                ctx.fillStyle = LAYOUT.LABEL_COLOR;
+            }
+            else {
+                ctx.fillStyle = COLOR_MAP[color] || LAYOUT.LABEL_COLOR;
+            }
             ctx.fillText(char, currentX, currentY);
             currentX += ctx.measureText(char).width;
         }
@@ -225,7 +443,7 @@ const EmbroideryQCImage = ({ config, className = "", style = {}, }) => {
     // Load fonts
     useEffect(() => {
         const loadFonts = async () => {
-            if (!config.sides?.length)
+            if (config.error_message || !config.sides?.length)
                 return;
             const fontsToLoad = new Set();
             config.sides.forEach((side) => {
@@ -251,23 +469,12 @@ const EmbroideryQCImage = ({ config, className = "", style = {}, }) => {
     }, [config.sides, loadedFonts]);
     // Load images
     useEffect(() => {
-        if (!config.sides?.length)
+        if (config.error_message || !config.sides?.length)
             return;
         const incrementCounter = () => setImagesLoaded((prev) => prev + 1);
         // Load mockup
         if (config.image_url) {
-            const loadMockup = (useCors) => {
-                const img = new Image();
-                if (useCors)
-                    img.crossOrigin = "anonymous";
-                img.onload = () => {
-                    imageRefs.current.set("mockup", img);
-                    incrementCounter();
-                };
-                img.onerror = () => useCors && loadMockup(false);
-                img.src = config.image_url;
-            };
-            loadMockup(true);
+            loadImage(config.image_url, imageRefs, incrementCounter);
         }
         // Load all other images
         config.sides.forEach((side) => {
@@ -297,61 +504,9 @@ const EmbroideryQCImage = ({ config, className = "", style = {}, }) => {
     // Render canvas
     useEffect(() => {
         const renderCanvas = () => {
-            if (!canvasRef.current || !config.sides?.length)
-                return;
-            const canvas = canvasRef.current;
-            const ctx = canvas.getContext("2d");
-            if (!ctx)
-                return;
-            canvas.width = canvasSize.width;
-            canvas.height = canvasSize.height;
-            // Set text alignment once
-            ctx.textAlign = LAYOUT.TEXT_ALIGN;
-            ctx.textBaseline = LAYOUT.TEXT_BASELINE;
-            // Clear background
-            ctx.fillStyle = LAYOUT.BACKGROUND_COLOR;
-            ctx.fillRect(0, 0, canvas.width, canvas.height);
-            // Collect floral assets
-            const floralAssets = [];
-            const seenFlorals = new Set();
-            config.sides.forEach((side) => {
-                side.positions.forEach((position) => {
-                    if (position.type === "TEXT" && position.floral_pattern) {
-                        const url = getImageUrl("floral", position.floral_pattern);
-                        if (!seenFlorals.has(url)) {
-                            const img = imageRefs.current.get(url);
-                            if (img?.complete && img.naturalWidth > 0) {
-                                floralAssets.push(img);
-                                seenFlorals.add(url);
-                            }
-                        }
-                    }
-                });
-            });
-            // Calculate scale factor
-            const measureCanvas = document.createElement("canvas");
-            measureCanvas.width = canvas.width;
-            measureCanvas.height = canvas.height;
-            const measureCtx = measureCanvas.getContext("2d");
-            if (!measureCtx)
+            if (!canvasRef.current)
                 return;
-            measureCtx.textAlign = LAYOUT.TEXT_ALIGN;
-            measureCtx.textBaseline = LAYOUT.TEXT_BASELINE;
-            let measureY = LAYOUT.PADDING;
-            const measureSpacing = LAYOUT.ELEMENT_SPACING;
-            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) / measureY));
-            // Draw mockup and florals
-            drawMockupAndFlorals(ctx, canvas, floralAssets, imageRefs);
-            // Draw content
-            let currentY = LAYOUT.PADDING * scaleFactor;
-            config.sides.forEach((side) => {
-                const sideHeight = renderSide(ctx, side, currentY, canvas.width, scaleFactor, imageRefs);
-                currentY += sideHeight + measureSpacing * scaleFactor;
-            });
+            renderEmbroideryCanvas(canvasRef.current, config, canvasSize, imageRefs);
         };
         const timer = setTimeout(renderCanvas, 100);
         return () => clearTimeout(timer);
@@ -361,6 +516,102 @@ const EmbroideryQCImage = ({ config, className = "", style = {}, }) => {
 // ============================================================================
 // RENDERING FUNCTIONS
 // ============================================================================
+const renderEmbroideryCanvas = (canvas, config, canvasSize, imageRefs) => {
+    const ctx = canvas.getContext("2d");
+    if (!ctx)
+        return;
+    canvas.width = canvasSize.width;
+    canvas.height = canvasSize.height;
+    ctx.fillStyle = LAYOUT.BACKGROUND_COLOR;
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    if (config.error_message) {
+        renderErrorState(ctx, canvas, config.error_message);
+        return;
+    }
+    if (!config.sides?.length)
+        return;
+    ctx.textAlign = LAYOUT.TEXT_ALIGN;
+    ctx.textBaseline = LAYOUT.TEXT_BASELINE;
+    if (config.image_url) {
+        const mockupImage = imageRefs.current.get(config.image_url);
+        if (mockupImage) {
+            imageRefs.current.set("mockup", mockupImage);
+        }
+    }
+    const floralAssets = [];
+    const seenFlorals = new Set();
+    config.sides.forEach((side) => {
+        side.positions.forEach((position) => {
+            if (position.type === "TEXT" && position.floral_pattern) {
+                const url = getImageUrl("floral", position.floral_pattern);
+                if (!seenFlorals.has(url)) {
+                    const img = imageRefs.current.get(url);
+                    if (img?.complete && img.naturalWidth > 0) {
+                        floralAssets.push(img);
+                        seenFlorals.add(url);
+                    }
+                }
+            }
+        });
+    });
+    const measureCanvas = document.createElement("canvas");
+    measureCanvas.width = canvas.width;
+    measureCanvas.height = canvas.height;
+    const measureCtx = measureCanvas.getContext("2d");
+    if (!measureCtx)
+        return;
+    measureCtx.textAlign = LAYOUT.TEXT_ALIGN;
+    measureCtx.textBaseline = LAYOUT.TEXT_BASELINE;
+    let measureY = LAYOUT.PADDING;
+    const measureSpacing = LAYOUT.ELEMENT_SPACING;
+    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) / measureY));
+    drawMockupAndFlorals(ctx, canvas, floralAssets, imageRefs);
+    let currentY = LAYOUT.PADDING * scaleFactor;
+    config.sides.forEach((side) => {
+        const sideHeight = renderSide(ctx, side, currentY, canvas.width, scaleFactor, imageRefs);
+        currentY += sideHeight + measureSpacing * scaleFactor;
+    });
+};
+const renderErrorState = (ctx, canvas, message) => {
+    const sanitizedMessage = message.trim() || "Đã xảy ra lỗi";
+    const horizontalPadding = LAYOUT.PADDING * 3;
+    const maxWidth = canvas.width - horizontalPadding * 2;
+    const baseFontSize = LAYOUT.HEADER_FONT_SIZE;
+    const minFontSize = 60;
+    const centerX = canvas.width / 2;
+    ctx.save();
+    ctx.textAlign = "center";
+    ctx.textBaseline = "top";
+    ctx.fillStyle = DEFAULT_ERROR_COLOR;
+    let fontSize = baseFontSize;
+    let lineGap = LAYOUT.LINE_GAP;
+    let lineHeight = fontSize + lineGap;
+    const adjustMetrics = () => {
+        ctx.font = `bold ${fontSize}px ${LAYOUT.FONT_FAMILY}`;
+        lineGap = LAYOUT.LINE_GAP * (fontSize / baseFontSize);
+        lineHeight = fontSize + lineGap;
+    };
+    adjustMetrics();
+    let lines = buildWrappedLines(ctx, sanitizedMessage, maxWidth);
+    let longestLineWidth = Math.max(...lines.map((line) => ctx.measureText(line).width));
+    while (longestLineWidth > maxWidth && fontSize > minFontSize) {
+        fontSize = Math.max(minFontSize, Math.floor(fontSize * 0.9));
+        adjustMetrics();
+        lines = buildWrappedLines(ctx, sanitizedMessage, maxWidth);
+        longestLineWidth = Math.max(...lines.map((line) => ctx.measureText(line).width));
+    }
+    const totalHeight = lines.length * lineHeight;
+    const startY = Math.max(LAYOUT.PADDING * 2, canvas.height / 2 - totalHeight / 2);
+    lines.forEach((line, index) => {
+        const y = startY + index * lineHeight;
+        ctx.fillText(line, centerX, y);
+    });
+    ctx.restore();
+};
 const drawMockupAndFlorals = (ctx, canvas, floralAssets, imageRefs) => {
     const mockupImg = imageRefs.current.get("mockup");
     if (!mockupImg?.complete || !mockupImg.naturalWidth)
@@ -446,7 +697,7 @@ const renderSide = (ctx, side, startY, width, scaleFactor, imageRefs) => {
     side.positions.forEach((position) => {
         if (position.type === "ICON") {
             currentY += renderIconPosition(ctx, position, padding, currentY, sideWidth, scaleFactor, imageRefs);
-            currentY += LAYOUT.LINE_GAP / 3 * scaleFactor;
+            currentY += (LAYOUT.LINE_GAP / 3) * scaleFactor;
         }
     });
     return currentY - startY;
@@ -492,7 +743,9 @@ const computeUniformProperties = (textPositions) => {
     const fonts = new Set(textPositions.map((p) => p.font));
     const shapes = new Set(textPositions.map((p) => p.text_shape));
     const florals = new Set(textPositions.map((p) => p.floral_pattern ?? "None"));
-    const colors = new Set(textPositions.map((p) => p.character_colors?.length ? p.character_colors.join(",") : p.color ?? "None"));
+    const colors = new Set(textPositions.map((p) => p.character_colors?.length
+        ? p.character_colors.join(",")
+        : p.color ?? "None"));
     return {
         values: {
             font: fonts.size === 1 ? [...fonts][0] : null,
@@ -531,9 +784,13 @@ const renderUniformLabels = (ctx, uniformProps, x, y, maxWidth, scaleFactor, ima
         const textMaxWidth = Math.max(LAYOUT.MIN_TEXT_WIDTH * scaleFactor, maxWidth - LAYOUT.SWATCH_RESERVED_SPACE * scaleFactor);
         const result = wrapText(ctx, `Màu chỉ: ${values.color}`, x, cursorY, textMaxWidth, fontSize + lineGap);
         const swatchH = Math.floor(fontSize * LAYOUT.SWATCH_HEIGHT_RATIO);
-        const swatchX = x + Math.ceil(result.lastLineWidth) + LAYOUT.ELEMENT_SPACING * scaleFactor;
+        const swatchX = x +
+            Math.ceil(result.lastLineWidth) +
+            LAYOUT.ELEMENT_SPACING * scaleFactor;
         const swatchY = result.lastLineY + Math.floor(fontSize / 2 - swatchH / 2);
-        const colors = values.color.includes(",") ? values.color.split(",").map((s) => s.trim()) : [values.color];
+        const colors = values.color.includes(",")
+            ? values.color.split(",").map((s) => s.trim())
+            : [values.color];
         drawSwatches(ctx, colors, swatchX, swatchY, swatchH, scaleFactor, imageRefs);
         cursorY += result.height;
         rendered++;
@@ -568,7 +825,7 @@ const renderTextPosition = (ctx, position, x, y, maxWidth, displayIndex, showLab
     if (isEmptyText) {
         ctx.font = `${textFontSize}px ${LAYOUT.FONT_FAMILY}`;
         ctx.fillStyle = LAYOUT.LABEL_COLOR;
-        const textResult = wrapText(ctx, "không thay đổi", x + labelWidth, currentY, textMaxWidth, textFontSize);
+        const textResult = wrapText(ctx, "(không có text)", x + labelWidth, currentY, textMaxWidth, textFontSize);
         currentY += textResult.height;
         drawnHeight += textResult.height;
     }
@@ -580,7 +837,8 @@ const renderTextPosition = (ctx, position, x, y, maxWidth, displayIndex, showLab
     }
     else {
         ctx.font = `${textFontSize}px ${position.font}`;
-        ctx.fillStyle = COLOR_MAP[position.color ?? "None"] || "#000000";
+        const isLight = isLightColor(position.color ?? "");
+        ctx.fillStyle = isLight ? LAYOUT.LABEL_COLOR : (COLOR_MAP[position.color ?? "None"] || "#000000");
         const textResult = wrapText(ctx, position.text, x + labelWidth, currentY, textMaxWidth, textFontSize);
         currentY += textResult.height;
         drawnHeight += textResult.height;
@@ -605,7 +863,9 @@ const renderTextPosition = (ctx, position, x, y, maxWidth, displayIndex, showLab
             const textMaxWidth = Math.max(LAYOUT.MIN_TEXT_WIDTH * scaleFactor, maxWidth - LAYOUT.SWATCH_RESERVED_SPACE * scaleFactor);
             const result = wrapText(ctx, `Màu chỉ: ${colorValue}`, x, currentY, textMaxWidth, otherFontSize + lineGap);
             const swatchH = Math.floor(otherFontSize * LAYOUT.SWATCH_HEIGHT_RATIO);
-            const swatchX = x + Math.ceil(result.lastLineWidth) + LAYOUT.ELEMENT_SPACING * scaleFactor;
+            const swatchX = x +
+                Math.ceil(result.lastLineWidth) +
+                LAYOUT.ELEMENT_SPACING * scaleFactor;
             const swatchY = result.lastLineY + Math.floor(otherFontSize / 2 - swatchH / 2);
             const colors = position.character_colors || [position.color];
             drawSwatches(ctx, colors, swatchX, swatchY, swatchH, scaleFactor, imageRefs);
@@ -628,7 +888,9 @@ const renderIconPosition = (ctx, position, x, y, maxWidth, scaleFactor, imageRef
     ctx.font = `${iconFontSize}px ${LAYOUT.FONT_FAMILY}`;
     ctx.fillStyle = LAYOUT.LABEL_COLOR;
     let cursorY = y;
-    const iconText = position.icon === 0 ? `Icon: icon mặc định theo file thêu` : `Icon: ${position.icon}`;
+    const iconText = 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);
     // Draw icon image
     if (position.icon !== 0) {
@@ -637,7 +899,9 @@ const renderIconPosition = (ctx, position, x, y, maxWidth, scaleFactor, imageRef
         if (img?.complete && img.naturalHeight > 0) {
             const ratio = img.naturalWidth / img.naturalHeight;
             const swatchW = Math.max(1, Math.floor(iconFontSize * ratio));
-            const iconX = x + Math.ceil(iconResult.lastLineWidth) + LAYOUT.ELEMENT_SPACING * scaleFactor;
+            const iconX = x +
+                Math.ceil(iconResult.lastLineWidth) +
+                LAYOUT.ELEMENT_SPACING * scaleFactor;
             const iconY = iconResult.lastLineY + Math.floor(iconFontSize / 2 - iconFontSize / 2);
             ctx.drawImage(img, iconX, iconY, swatchW, iconFontSize);
         }
@@ -648,7 +912,9 @@ const renderIconPosition = (ctx, position, x, y, maxWidth, scaleFactor, imageRef
         const textMaxWidth = Math.max(LAYOUT.MIN_TEXT_WIDTH * scaleFactor, maxWidth - LAYOUT.SWATCH_RESERVED_SPACE * scaleFactor);
         const colorResult = wrapText(ctx, `Màu chỉ: ${position.layer_colors.join(", ")}`, x, cursorY, textMaxWidth, iconFontSize + lineGap);
         const swatchH = Math.floor(iconFontSize * LAYOUT.SWATCH_HEIGHT_RATIO);
-        const swatchX = x + Math.ceil(colorResult.lastLineWidth) + LAYOUT.ELEMENT_SPACING * scaleFactor;
+        const swatchX = x +
+            Math.ceil(colorResult.lastLineWidth) +
+            LAYOUT.ELEMENT_SPACING * scaleFactor;
         const swatchY = colorResult.lastLineY + Math.floor(iconFontSize / 2 - swatchH / 2);
         drawSwatches(ctx, position.layer_colors, swatchX, swatchY, swatchH, scaleFactor, imageRefs);
         cursorY += colorResult.height;
@@ -656,6 +922,48 @@ const renderIconPosition = (ctx, position, x, y, maxWidth, scaleFactor, imageRef
     ctx.restore();
     return cursorY - y;
 };
+const prepareExportCanvas = async (config, options = {}) => {
+    const { width = 4200, height = 4800 } = options;
+    const canvas = document.createElement("canvas");
+    const imageRefs = {
+        current: new Map(),
+    };
+    await preloadFonts(config);
+    await preloadImages(config, imageRefs);
+    renderEmbroideryCanvas(canvas, config, { width, height }, imageRefs);
+    if (!canvas.width || !canvas.height) {
+        return null;
+    }
+    return canvas;
+};
+const generateEmbroideryQCImageBlob = async (config, options = {}) => {
+    if (typeof document === "undefined") {
+        throw new Error("generateEmbroideryQCImageBlob requires a browser environment.");
+    }
+    const { mimeType = "image/png", quality } = options;
+    const canvas = await prepareExportCanvas(config, options);
+    if (!canvas || typeof canvas.toBlob !== "function") {
+        return null;
+    }
+    const blob = await new Promise((resolve) => {
+        canvas.toBlob((result) => resolve(result), mimeType, quality);
+    });
+    return blob;
+};
+const generateEmbroideryQCImageData = async (config, options = {}) => {
+    if (typeof document === "undefined") {
+        throw new Error("generateEmbroideryQCImageData requires a browser environment.");
+    }
+    const { mimeType = "image/png", quality } = options;
+    const canvas = await prepareExportCanvas(config, options);
+    if (!canvas) {
+        return null;
+    }
+    if (mimeType === "image/png" || typeof quality === "undefined") {
+        return canvas.toDataURL(mimeType);
+    }
+    return canvas.toDataURL(mimeType, quality);
+};
 
-export { EmbroideryQCImage };
+export { EmbroideryQCImage, generateEmbroideryQCImageBlob, generateEmbroideryQCImageData };
 //# sourceMappingURL=index.esm.js.map