embroidery-qc-image 1.0.0

package/dist/index.esm.js

@@ -0,0 +1,753 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+
+// Color mapping
+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",
+};
+const FONT_BASE_URL = "https://s3.hn-1.cloud.cmctelecom.vn/god-system-images/embroidery/fonts";
+const ICON_BASE_URL = "https://s3.hn-1.cloud.cmctelecom.vn/god-system-images/embroidery/icons";
+const FLORAL_BASE_URL = "https://s3.hn-1.cloud.cmctelecom.vn/god-system-images/embroidery/florals";
+const THREAD_COLOR_BASE_URL = "https://s3.hn-1.cloud.cmctelecom.vn/god-system-images/embroidery/thread-colors";
+const EmbroideryQCImage = ({ config, className = "", style = {}, }) => {
+    const [canvasSize] = useState({ width: 4200, height: 4800 });
+    const [loadedFonts, setLoadedFonts] = useState(new Set());
+    const [imagesLoaded, setImagesLoaded] = useState(0);
+    const canvasRef = useRef(null);
+    const imageRefs = useRef(new Map());
+    // Load fonts
+    useEffect(() => {
+        const loadFonts = async () => {
+            if (!config.sides || config.sides.length === 0)
+                return;
+            const fontsToLoad = new Set();
+            config.sides.forEach((side) => {
+                side.postitions.forEach((position) => {
+                    if (position.type === "TEXT" && position.font) {
+                        fontsToLoad.add(position.font);
+                    }
+                });
+            });
+            for (const fontName of fontsToLoad) {
+                if (loadedFonts.has(fontName))
+                    continue;
+                try {
+                    await loadFont(fontName);
+                    setLoadedFonts((prev) => new Set(prev).add(fontName));
+                }
+                catch (error) {
+                    console.warn(`Could not load font ${fontName}:`, error);
+                }
+            }
+        };
+        loadFonts();
+    }, [config.sides, loadedFonts]);
+    // Load images
+    useEffect(() => {
+        const loadImages = async () => {
+            if (!config.sides || config.sides.length === 0)
+                return;
+            // Load mockup image (not background). It will be drawn at bottom-right.
+            if (config.image_url) {
+                // Try with CORS first. If it fails (no CORS headers), retry without CORS
+                const loadMockup = (useCors) => {
+                    const img = new Image();
+                    if (useCors)
+                        img.crossOrigin = "anonymous";
+                    img.onload = () => {
+                        imageRefs.current.set("mockup", img);
+                        setImagesLoaded((prev) => prev + 1);
+                    };
+                    img.onerror = () => {
+                        if (useCors) {
+                            // Retry without CORS; canvas may become tainted on export
+                            loadMockup(false);
+                        }
+                    };
+                    img.src = config.image_url;
+                };
+                loadMockup(true);
+            }
+            // Load icons
+            config.sides.forEach((side) => {
+                side.postitions.forEach((position) => {
+                    if (position.type === "ICON") {
+                        const iconUrl = `${ICON_BASE_URL}/${position.icon}.png`;
+                        if (!imageRefs.current.has(iconUrl)) {
+                            const img = new Image();
+                            img.crossOrigin = "anonymous";
+                            img.src = iconUrl;
+                            img.onload = () => setImagesLoaded((prev) => prev + 1);
+                            imageRefs.current.set(iconUrl, img);
+                        }
+                    }
+                    if (position.type === "TEXT" && position.floral_pattern) {
+                        const floralUrl = `${FLORAL_BASE_URL}/${position.floral_pattern}.png`;
+                        if (!imageRefs.current.has(floralUrl)) {
+                            const img = new Image();
+                            img.crossOrigin = "anonymous";
+                            img.src = floralUrl;
+                            img.onload = () => setImagesLoaded((prev) => prev + 1);
+                            imageRefs.current.set(floralUrl, img);
+                        }
+                    }
+                    // Load thread color images for TEXT positions
+                    if (position.type === "TEXT") {
+                        // Load color image if position has color
+                        if (position.color) {
+                            const threadColorUrl = `${THREAD_COLOR_BASE_URL}/${position.color}.png`;
+                            if (!imageRefs.current.has(threadColorUrl)) {
+                                const img = new Image();
+                                img.crossOrigin = "anonymous";
+                                img.src = threadColorUrl;
+                                img.onload = () => setImagesLoaded((prev) => prev + 1);
+                                imageRefs.current.set(threadColorUrl, img);
+                            }
+                        }
+                        // Load character color images
+                        if (position.character_colors &&
+                            position.character_colors.length > 0) {
+                            position.character_colors.forEach((color) => {
+                                const threadColorUrl = `${THREAD_COLOR_BASE_URL}/${color}.png`;
+                                if (!imageRefs.current.has(threadColorUrl)) {
+                                    const img = new Image();
+                                    img.crossOrigin = "anonymous";
+                                    img.src = threadColorUrl;
+                                    img.onload = () => setImagesLoaded((prev) => prev + 1);
+                                    imageRefs.current.set(threadColorUrl, img);
+                                }
+                            });
+                        }
+                    }
+                    // Load thread color images for ICON positions
+                    if (position.type === "ICON" && position.layer_colors) {
+                        position.layer_colors.forEach((color) => {
+                            const threadColorUrl = `${THREAD_COLOR_BASE_URL}/${color}.png`;
+                            if (!imageRefs.current.has(threadColorUrl)) {
+                                const img = new Image();
+                                img.crossOrigin = "anonymous";
+                                img.src = threadColorUrl;
+                                img.onload = () => setImagesLoaded((prev) => prev + 1);
+                                imageRefs.current.set(threadColorUrl, img);
+                            }
+                        });
+                    }
+                });
+            });
+        };
+        loadImages();
+    }, [config]);
+    // Render canvas
+    useEffect(() => {
+        const renderCanvas = () => {
+            if (!canvasRef.current || !config.sides || config.sides.length === 0) {
+                return;
+            }
+            const canvas = canvasRef.current;
+            const ctx = canvas.getContext("2d");
+            if (!ctx)
+                return;
+            canvas.width = canvasSize.width;
+            canvas.height = canvasSize.height;
+            // Clear with white background
+            ctx.fillStyle = "#FFFFFF";
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            // Collect floral images (for later drawing)
+            const floralAssets = [];
+            const seenFlorals = new Set();
+            if (config.sides) {
+                config.sides.forEach((side) => {
+                    side.postitions.forEach((position) => {
+                        if (position.type === "TEXT" && position.floral_pattern) {
+                            const floralUrl = `${FLORAL_BASE_URL}/${position.floral_pattern}.png`;
+                            if (!seenFlorals.has(floralUrl)) {
+                                const img = imageRefs.current.get(floralUrl);
+                                if (img && img.complete && img.naturalWidth > 0) {
+                                    floralAssets.push(img);
+                                    seenFlorals.add(floralUrl);
+                                }
+                            }
+                        }
+                    });
+                });
+            }
+            // Helper function to draw mockup and florals
+            const drawMockupAndFlorals = () => {
+                const mockupImg = imageRefs.current.get("mockup");
+                const margin = 40; // small padding
+                let mockupBox = null;
+                if (mockupImg && mockupImg.complete && mockupImg.naturalWidth > 0) {
+                    const maxTargetWidth = Math.min(1800, canvas.width * 0.375);
+                    const maxTargetHeight = canvas.height * 0.375;
+                    const scale = Math.min(maxTargetWidth / mockupImg.naturalWidth, maxTargetHeight / mockupImg.naturalHeight);
+                    const targetWidth = Math.max(1, Math.floor(mockupImg.naturalWidth * scale));
+                    const targetHeight = Math.max(1, Math.floor(mockupImg.naturalHeight * scale));
+                    const targetX = canvas.width - margin - targetWidth;
+                    const targetY = canvas.height - margin - targetHeight;
+                    mockupBox = {
+                        x: targetX,
+                        y: targetY,
+                        w: targetWidth,
+                        h: targetHeight,
+                    };
+                    ctx.drawImage(mockupImg, targetX, targetY, targetWidth, targetHeight);
+                }
+                // Draw florals to the left of mockup
+                if (mockupBox && floralAssets.length > 0) {
+                    const spacing = 300;
+                    const targetHeight = mockupBox.h;
+                    const floralFixedH = Math.min(900, targetHeight);
+                    let currentX = mockupBox.x - spacing;
+                    for (let i = floralAssets.length - 1; i >= 0; i--) {
+                        const img = floralAssets[i];
+                        const ratio = img.naturalWidth / Math.max(1, img.naturalHeight);
+                        const h = floralFixedH;
+                        const w = Math.max(1, Math.floor(h * ratio));
+                        currentX -= w;
+                        const y = mockupBox.y + (targetHeight - h);
+                        ctx.drawImage(img, currentX, y, w, h);
+                        currentX -= spacing;
+                    }
+                }
+            };
+            // New approach: Draw images first (bottom layer), then text on top
+            // This allows text to overlay images when needed
+            // Pass 1: Measure actual height with original size (use offscreen canvas for measurement)
+            const measureCanvas = document.createElement("canvas");
+            measureCanvas.width = canvas.width;
+            measureCanvas.height = canvas.height;
+            const measureCtx = measureCanvas.getContext("2d");
+            if (!measureCtx)
+                return;
+            // Set up measurement context
+            measureCtx.font = ctx.font;
+            measureCtx.textAlign = ctx.textAlign;
+            measureCtx.textBaseline = ctx.textBaseline;
+            let measureY = 40;
+            const measureSpacing = 100;
+            config.sides.forEach((side) => {
+                const sideHeight = renderSide(measureCtx, side, measureY, canvas.width, 1);
+                measureY += sideHeight + measureSpacing;
+            });
+            const totalMeasuredHeight = measureY; // Total height used
+            // Calculate scale factor - only scale down when necessary
+            // Keep original font sizes (no scale up) - font size is the maximum
+            const topPadding = 40;
+            // No bottom padding - content can go to bottom, mockup will overlay
+            const targetContentHeight = canvas.height - topPadding;
+            // Only scale down if content exceeds canvas height
+            // Never scale up - preserve original font sizes
+            let scaleFactor = 1;
+            if (totalMeasuredHeight > targetContentHeight) {
+                // Scale down to fit exactly
+                scaleFactor = targetContentHeight / totalMeasuredHeight;
+                scaleFactor = Math.max(0.5, scaleFactor); // Minimum scale to prevent tiny fonts
+            }
+            // If content fits, keep scaleFactor = 1 (original font sizes)
+            // Draw mockup and florals first (bottom layer)
+            drawMockupAndFlorals();
+            // Draw content on top (top layer) - text will overlay images if needed
+            let currentY = topPadding * scaleFactor;
+            config.sides.forEach((side) => {
+                const sideHeight = renderSide(ctx, side, currentY, canvas.width, scaleFactor);
+                currentY += sideHeight + measureSpacing * scaleFactor;
+            });
+        };
+        // Delay rendering to ensure fonts and images are loaded
+        const timer = setTimeout(renderCanvas, 100);
+        return () => clearTimeout(timer);
+    }, [config, canvasSize, loadedFonts, imagesLoaded]);
+    // Helper function to wrap and draw text with word wrapping
+    // Returns: { height: number, lastLineWidth: number, lastLineY: number }
+    const fillTextWrapped = (ctx, text, x, y, maxWidth, lineHeight) => {
+        const words = text.split(" ");
+        const lines = [];
+        let currentLine = words[0];
+        for (let i = 1; i < words.length; i++) {
+            const word = words[i];
+            const testLine = currentLine + " " + word;
+            const metrics = ctx.measureText(testLine);
+            if (metrics.width > maxWidth && currentLine.length > 0) {
+                lines.push(currentLine);
+                currentLine = word;
+            }
+            else {
+                currentLine = testLine;
+            }
+        }
+        lines.push(currentLine);
+        let currentY = y;
+        lines.forEach((line) => {
+            ctx.fillText(line, x, currentY);
+            currentY += lineHeight;
+        });
+        const lastLineWidth = ctx.measureText(lines[lines.length - 1]).width;
+        const lastLineY = y + (lines.length - 1) * lineHeight;
+        return {
+            height: lines.length * lineHeight,
+            lastLineWidth,
+            lastLineY,
+        };
+    };
+    // Helper to wrap and draw multi-color text (for character_colors)
+    const fillTextWrappedMultiColor = (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 word = words[i];
+            const testLine = currentLine + " " + word;
+            const metrics = ctx.measureText(testLine);
+            if (metrics.width > maxWidth && currentLine.length > 0) {
+                lines.push(currentLine);
+                lineStartIndices.push(currentCharIndex + 1); // +1 for space
+                currentLine = word;
+                currentCharIndex += word.length + 1;
+            }
+            else {
+                currentLine = testLine;
+                currentCharIndex += word.length + 1;
+            }
+        }
+        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] || "#000000";
+                ctx.fillText(char, currentX, currentY);
+                currentX += ctx.measureText(char).width;
+            }
+            currentY += lineHeight;
+        });
+        return lines.length * lineHeight;
+    };
+    const renderSide = (ctx, side, startY, width, scaleFactor = 1) => {
+        let currentY = startY;
+        const padding = 40 * scaleFactor;
+        const sideWidth = width - 2 * padding;
+        const sectionHeight = 200 * scaleFactor;
+        // No background section anymore - just white background
+        // Group positions by common properties for optimization
+        const textGroups = [];
+        let currentGroup = null;
+        let currentProps = null;
+        side.postitions.forEach((position) => {
+            if (position.type === "TEXT") {
+                if (!currentGroup ||
+                    currentProps.font !== position.font ||
+                    currentProps.text_shape !== position.text_shape ||
+                    currentProps.color !== position.color ||
+                    currentProps.character_colors?.join(",") !==
+                        position.character_colors?.join(",")) {
+                    // Start new group
+                    if (currentGroup) {
+                        textGroups.push({
+                            positions: currentGroup,
+                            properties: currentProps,
+                        });
+                    }
+                    currentGroup = [position];
+                    currentProps = {
+                        font: position.font,
+                        text_shape: position.text_shape,
+                        color: position.color,
+                        character_colors: position.character_colors,
+                    };
+                }
+                else {
+                    currentGroup.push(position);
+                }
+            }
+        });
+        if (currentGroup) {
+            textGroups.push({ positions: currentGroup, properties: currentProps });
+        }
+        // Draw side header
+        ctx.save();
+        const headerFontSize = 200 * scaleFactor;
+        ctx.font = `bold ${headerFontSize}px Times New Roman`;
+        ctx.fillStyle = "#000000";
+        ctx.textAlign = "left";
+        ctx.textBaseline = "top";
+        const headerResult = fillTextWrapped(ctx, side.print_side.toUpperCase(), padding, currentY, sideWidth, headerFontSize);
+        currentY += headerResult.height + 50 * scaleFactor;
+        ctx.restore();
+        // Compute side-level uniform properties across all TEXT positions
+        const allTextPositions = [];
+        side.postitions.forEach((position) => {
+            if (position.type === "TEXT")
+                allTextPositions.push(position);
+        });
+        const sideFonts = new Set(allTextPositions.map((p) => p.font));
+        const sideShapes = new Set(allTextPositions.map((p) => p.text_shape));
+        const sideFlorals = new Set(allTextPositions.map((p) => p.floral_pattern ?? "None"));
+        const colorKeyOf = (p) => p.character_colors && p.character_colors.length > 0
+            ? p.character_colors.join(",")
+            : p.color ?? "None";
+        const sideColors = new Set(allTextPositions.map((p) => colorKeyOf(p)));
+        const sideUniform = {
+            font: sideFonts.size === 1,
+            shape: sideShapes.size === 1,
+            floral: sideFlorals.size === 1,
+            color: sideColors.size === 1,
+        };
+        // Render side-level labels once for uniform properties
+        currentY += renderSideUniformLabels(ctx, {
+            font: sideUniform.font ? [...sideFonts][0] : null,
+            shape: sideUniform.shape ? [...sideShapes][0] : null,
+            floral: sideUniform.floral ? [...sideFlorals][0] : null,
+            color: sideUniform.color ? [...sideColors][0] : null,
+        }, padding, currentY, sideWidth, scaleFactor);
+        // Render text groups first
+        let sideTextCounter = 1;
+        textGroups.forEach((group, groupIndex) => {
+            group.positions.forEach((position, index) => {
+                if (index === 0 && groupIndex !== 0)
+                    currentY += 50 * scaleFactor;
+                const drawnHeight = renderText(ctx, position, padding, currentY, sideWidth, group.properties, group.positions.length, index, sideTextCounter, {
+                    font: !sideUniform.font,
+                    shape: !sideUniform.shape,
+                    floral: !sideUniform.floral,
+                    color: !sideUniform.color,
+                }, scaleFactor);
+                sideTextCounter += 1;
+                // add padding only if something was actually drawn
+                if (drawnHeight > 0) {
+                    currentY += drawnHeight + 40 * scaleFactor;
+                }
+            });
+        });
+        // Render ICON titles/values (no images here)
+        currentY += 30 * scaleFactor; // minimal spacing before icon labels
+        side.postitions.forEach((position) => {
+            if (position.type === "ICON") {
+                currentY += renderIconLabels(ctx, position, padding, currentY, sideWidth, scaleFactor);
+                currentY += 10 * scaleFactor;
+            }
+        });
+        return Math.max(currentY - startY, sectionHeight);
+    };
+    const renderSideUniformLabels = (ctx, values, x, y, maxWidth, scaleFactor = 1) => {
+        const labelFontFamily = "Arial";
+        const fontSize = 180 * scaleFactor;
+        const lineGap = 20 * scaleFactor;
+        ctx.save();
+        ctx.font = `${fontSize}px ${labelFontFamily}`;
+        ctx.textAlign = "left";
+        ctx.textBaseline = "top";
+        ctx.fillStyle = "#444444";
+        let cursorY = y;
+        let rendered = 0;
+        if (values.font) {
+            const fontText = `Font: ${values.font}`;
+            const result = fillTextWrapped(ctx, fontText, x, cursorY, maxWidth, fontSize + lineGap);
+            cursorY += result.height;
+            rendered++;
+        }
+        if (values.shape && values.shape !== "None") {
+            const shapeText = `Kiểu chữ: ${values.shape}`;
+            const result = fillTextWrapped(ctx, shapeText, x, cursorY, maxWidth, fontSize + lineGap);
+            cursorY += result.height;
+            rendered++;
+        }
+        if (values.color && values.color !== "None") {
+            const colorText = `Màu chỉ: ${values.color}`;
+            // Reserve space for swatches (estimate: max 5 swatches × 200px each = 1000px)
+            const swatchReserved = 1000 * scaleFactor;
+            const textMaxWidth = Math.max(400 * scaleFactor, maxWidth - swatchReserved);
+            const result = fillTextWrapped(ctx, colorText, x, cursorY, textMaxWidth, fontSize + lineGap);
+            // Draw swatches inline for side-level color, preserving aspect ratio; 75% of previous size
+            // Position swatches after the last line of wrapped text
+            const swatchH = Math.floor(fontSize * 2.025);
+            let swatchX = x + Math.ceil(result.lastLineWidth) + 100 * scaleFactor;
+            const swatchY = result.lastLineY + Math.floor(fontSize / 2 - swatchH / 2);
+            const colorTokens = values.color.includes(",")
+                ? values.color.split(",").map((s) => s.trim())
+                : [values.color];
+            colorTokens.forEach((color) => {
+                const threadColorUrl = `${THREAD_COLOR_BASE_URL}/${color}.png`;
+                const img = imageRefs.current.get(threadColorUrl);
+                if (img && img.complete && img.naturalHeight > 0) {
+                    const ratio = img.naturalWidth / img.naturalHeight;
+                    const swatchW = Math.max(1, Math.floor(swatchH * ratio));
+                    ctx.drawImage(img, swatchX, swatchY, swatchW, swatchH);
+                    swatchX += swatchW + 25 * scaleFactor;
+                }
+            });
+            cursorY += result.height;
+            rendered++;
+        }
+        if (values.floral && values.floral !== "None") {
+            const floralText = `Mẫu hoa: ${values.floral}`;
+            const result = fillTextWrapped(ctx, floralText, x, cursorY, maxWidth, fontSize + lineGap);
+            cursorY += result.height;
+            rendered++;
+        }
+        if (rendered > 0)
+            cursorY += 50 * scaleFactor; // extra gap before first text line
+        ctx.restore();
+        return cursorY - y;
+    };
+    const renderText = (ctx, position, x, y, maxWidth, properties, totalTexts, textIndex, displayIndex, showLabels, scaleFactor = 1) => {
+        ctx.save();
+        // Info labels
+        // Unified font sizing for labels and content (side title uses its own larger size)
+        const infoLineGap = 30 * scaleFactor;
+        const labelFontFamily = "Arial";
+        // Use a unified content font size for both labels and text content
+        const fontSize = 180 * scaleFactor;
+        const infoFontSize = fontSize;
+        ctx.font = `${infoFontSize}px ${labelFontFamily}`;
+        ctx.textAlign = "left";
+        ctx.textBaseline = "top";
+        ctx.fillStyle = "#444444";
+        let currentYCursor = y;
+        let drawnHeight = 0; // accumulate only when something is actually drawn
+        // Text value with unified font size
+        let displayText = position.text;
+        if (position.change_character_to_heart && displayText.includes("<3")) {
+            displayText = displayText.replace(/<3/g, "❤");
+        }
+        ctx.textAlign = "left";
+        ctx.textBaseline = "top";
+        // Label for text line
+        const textLabel = `Text ${displayIndex}: `;
+        ctx.font = `${fontSize}px ${labelFontFamily}`;
+        const labelWidth = ctx.measureText(textLabel).width;
+        ctx.fillStyle = "#444444";
+        ctx.fillText(textLabel, x, currentYCursor);
+        // Calculate available width for text content
+        const textMaxWidth = maxWidth - labelWidth;
+        // Handle character_colors (alternating colors)
+        if (position.character_colors && position.character_colors.length > 0) {
+            // Switch to content font
+            ctx.font = `${fontSize}px ${position.font}`;
+            const textHeight = fillTextWrappedMultiColor(ctx, displayText, position.character_colors, x + labelWidth, currentYCursor, textMaxWidth, fontSize);
+            currentYCursor += textHeight;
+            drawnHeight += textHeight;
+        }
+        else {
+            // No color specified
+            // Draw text in content font, black (non-bold)
+            ctx.font = `${fontSize}px ${position.font}`;
+            ctx.fillStyle = COLOR_MAP[position.color ?? "None"] || "#000000";
+            const textResult = fillTextWrapped(ctx, displayText, x + labelWidth, currentYCursor, textMaxWidth, fontSize);
+            currentYCursor += textResult.height;
+            drawnHeight += textResult.height;
+        }
+        // After text, print Kiểu chữ (when not uniform), then Font and Color as needed
+        currentYCursor += infoLineGap;
+        ctx.font = `${infoFontSize}px ${labelFontFamily}`;
+        ctx.fillStyle = "#444444";
+        if (showLabels.shape && position.text_shape) {
+            const shapeLabelAfter = `Kiểu chữ: ${position.text_shape}`;
+            const result = fillTextWrapped(ctx, shapeLabelAfter, x, currentYCursor, maxWidth, infoFontSize + infoLineGap);
+            currentYCursor += result.height;
+            drawnHeight += result.height;
+        }
+        if (showLabels.font && position.font) {
+            const fontLabel = `Font: ${position.font}`;
+            const result = fillTextWrapped(ctx, fontLabel, x, currentYCursor, maxWidth, infoFontSize + infoLineGap);
+            currentYCursor += result.height;
+            drawnHeight += result.height;
+        }
+        if (showLabels.color) {
+            let colorLabelValue = "None";
+            if (position.character_colors && position.character_colors.length > 0) {
+                colorLabelValue = position.character_colors.join(", ");
+            }
+            else if (position.color) {
+                colorLabelValue = position.color;
+            }
+            if (colorLabelValue !== "None") {
+                const colorLabel = `Màu chỉ: ${colorLabelValue}`;
+                // Reserve space for swatches
+                const swatchReserved = 1000 * scaleFactor;
+                const textMaxWidth = Math.max(400 * scaleFactor, maxWidth - swatchReserved);
+                const result = fillTextWrapped(ctx, colorLabel, x, currentYCursor, textMaxWidth, infoFontSize + infoLineGap);
+                // Draw color swatch images inline with Color label for TEXT, preserve aspect ratio; 75% of previous size
+                // Position swatches after the last line of wrapped text
+                const swatchH = Math.floor(infoFontSize * 2.025);
+                let swatchX = x + Math.ceil(result.lastLineWidth) + 100 * scaleFactor; // spacing after text
+                const swatchY = result.lastLineY + Math.floor(infoFontSize / 2 - swatchH / 2);
+                if (position.character_colors && position.character_colors.length > 0) {
+                    position.character_colors.forEach((color) => {
+                        const threadColorUrl = `${THREAD_COLOR_BASE_URL}/${color}.png`;
+                        const img = imageRefs.current.get(threadColorUrl);
+                        if (img && img.complete && img.naturalHeight > 0) {
+                            const ratio = img.naturalWidth / img.naturalHeight;
+                            const swatchW = Math.max(1, Math.floor(swatchH * ratio));
+                            ctx.drawImage(img, swatchX, swatchY, swatchW, swatchH);
+                            swatchX += swatchW + 25 * scaleFactor;
+                        }
+                    });
+                }
+                else if (position.color) {
+                    const threadColorUrl = `${THREAD_COLOR_BASE_URL}/${position.color}.png`;
+                    const img = imageRefs.current.get(threadColorUrl);
+                    if (img && img.complete && img.naturalHeight > 0) {
+                        const ratio = img.naturalWidth / img.naturalHeight;
+                        const swatchW = Math.max(1, Math.floor(swatchH * ratio));
+                        ctx.drawImage(img, swatchX, swatchY, swatchW, swatchH);
+                    }
+                }
+                currentYCursor += result.height;
+                drawnHeight += result.height;
+            }
+        }
+        // Show floral label after color block when not uniform at side level
+        if (showLabels.floral && position.floral_pattern) {
+            const floralText = `Mẫu hoa: ${position.floral_pattern}`;
+            const result = fillTextWrapped(ctx, floralText, x, currentYCursor, maxWidth, infoFontSize + infoLineGap);
+            currentYCursor += result.height;
+            drawnHeight += result.height;
+        }
+        // (Floral per-position label is printed above the text when needed; avoid duplicate after text)
+        ctx.restore();
+        return drawnHeight;
+    };
+    const renderIconLabels = (ctx, position, x, y, maxWidth, scaleFactor = 1) => {
+        const labelFontFamily = "Arial";
+        const fontSize = 180 * scaleFactor;
+        const lineGap = 30 * scaleFactor;
+        ctx.save();
+        ctx.font = `${fontSize}px ${labelFontFamily}`;
+        ctx.textAlign = "left";
+        ctx.textBaseline = "top";
+        ctx.fillStyle = "#444444";
+        let cursorY = y;
+        const iconText = `Icon: ${position.icon}`;
+        const iconResult = fillTextWrapped(ctx, iconText, x, cursorY, maxWidth, fontSize + lineGap);
+        // draw icon image inline with text, preserve aspect ratio; match line height
+        const iconUrl = `${ICON_BASE_URL}/${position.icon}.png`;
+        {
+            const img = imageRefs.current.get(iconUrl);
+            if (img && img.complete && img.naturalHeight > 0) {
+                const swatchH = fontSize;
+                const ratio = img.naturalWidth / img.naturalHeight;
+                const swatchW = Math.max(1, Math.floor(swatchH * ratio));
+                // Put icon on last line of wrapped text
+                const iconX = x + Math.ceil(iconResult.lastLineWidth) + 100 * scaleFactor;
+                const iconY = iconResult.lastLineY + Math.floor(fontSize / 2 - swatchH / 2);
+                ctx.drawImage(img, iconX, iconY, swatchW, swatchH);
+            }
+        }
+        cursorY += iconResult.height;
+        // Draw color line only when there are layer colors
+        if (position.layer_colors && position.layer_colors.length > 0) {
+            const colorLabelValue = position.layer_colors.join(", ");
+            const colorText = `Màu chỉ: ${colorLabelValue}`;
+            // Reserve space for swatches
+            const swatchReserved = 1000 * scaleFactor;
+            const textMaxWidth = Math.max(400 * scaleFactor, maxWidth - swatchReserved);
+            const colorResult = fillTextWrapped(ctx, colorText, x, cursorY, textMaxWidth, fontSize + lineGap);
+            // Draw color swatch images (only for icon)
+            // Position swatches after the last line of wrapped text
+            const swatchH = Math.floor(fontSize * 2.025); // 75% of previous size
+            let swatchX = x + Math.ceil(colorResult.lastLineWidth) + 100 * scaleFactor; // spacing after text
+            const swatchY = colorResult.lastLineY + Math.floor(fontSize / 2 - swatchH / 2);
+            position.layer_colors.forEach((color) => {
+                const threadColorUrl = `${THREAD_COLOR_BASE_URL}/${color}.png`;
+                const img = imageRefs.current.get(threadColorUrl);
+                if (img && img.complete && img.naturalHeight > 0) {
+                    const ratio = img.naturalWidth / img.naturalHeight;
+                    const swatchW = Math.max(1, Math.floor(swatchH * ratio));
+                    ctx.drawImage(img, swatchX, swatchY, swatchW, swatchH);
+                    swatchX += swatchW + 25 * scaleFactor; // spacing between swatches
+                }
+            });
+            cursorY += colorResult.height;
+        }
+        ctx.restore();
+        return cursorY - y;
+    };
+    const loadFont = (fontName) => {
+        return new Promise((resolve, reject) => {
+            // Try to load from CDN
+            const fontUrl = `${FONT_BASE_URL}/${fontName}.woff2`;
+            const fontFace = new FontFace(fontName, `url(${fontUrl})`);
+            fontFace
+                .load()
+                .then((loadedFont) => {
+                document.fonts.add(loadedFont);
+                resolve();
+            })
+                .catch(() => {
+                // Font loading failed, will use fallback
+                console.warn(`Could not load font ${fontName} from CDN`);
+                resolve(); // Still resolve to not block rendering
+            });
+        });
+    };
+    return (jsx("div", { className: `render-embroidery ${className}`, style: style, children: jsx("canvas", { ref: canvasRef, className: "render-embroidery-canvas" }) }));
+};
+
+export { EmbroideryQCImage };
+//# sourceMappingURL=index.esm.js.map