embroidery-qc-image 1.0.22 → 1.0.24

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;AAyJjC,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;AAw7BF,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;AAoWD,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAqHvD,CAAC;AAm7BF,eAAO,MAAM,6BAA6B,GACxC,QAAQ,kBAAkB,EAC1B,UAAS,8BAAmC,KAC3C,OAAO,CAAC,IAAI,GAAG,IAAI,CAuBrB,CAAC;AAEF,eAAO,MAAM,6BAA6B,GACxC,QAAQ,kBAAkB,EAC1B,UAAS,8BAAmC,KAC3C,OAAO,CAAC,MAAM,GAAG,IAAI,CAuBvB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/index.esm.js

@@ -31,78 +31,13 @@ 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 = {
     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",
-    FLORAL: "https://s3.hn-1.cloud.cmctelecom.vn/god-system-images/embroidery/florals",
-    THREAD_COLOR: "https://s3.hn-1.cloud.cmctelecom.vn/god-system-images/embroidery/thread-colors",
+    ICON: "https://s3.hn-1.cloud.cmctelecom.vn/god-system-images/embroidery/icons-resized",
+    FLORAL: "https://s3.hn-1.cloud.cmctelecom.vn/god-system-images/embroidery/florals-resized",
+    THREAD_COLOR: "https://s3.hn-1.cloud.cmctelecom.vn/god-system-images/embroidery/thread-colors-resized",
 };
 const LAYOUT = {
     // Font families
@@ -138,6 +73,13 @@ const LAYOUT = {
 // HELPER FUNCTIONS
 // ============================================================================
 const loadFont = (fontName) => {
+    // Check if font is already loaded in document.fonts (browser cache)
+    const fontFaceSet = document.fonts;
+    for (const font of fontFaceSet) {
+        if (font.family === fontName && font.status === 'loaded') {
+            return Promise.resolve();
+        }
+    }
     return new Promise((resolve) => {
         const fontUrl = `${BASE_URLS.FONT}/${encodeURIComponent(fontName)}.woff2`;
         const fontFace = new FontFace(fontName, `url(${fontUrl})`);
@@ -155,10 +97,10 @@ const loadFont = (fontName) => {
 };
 const getImageUrl = (type, value) => {
     if (type === "icon")
-        return `${BASE_URLS.ICON}/Icon ${value}.png`;
+        return `${BASE_URLS.ICON}/Icon ${value}.webp`;
     if (type === "floral")
-        return `${BASE_URLS.FLORAL}/${value}.png`;
-    return `${BASE_URLS.THREAD_COLOR}/${value}.png`;
+        return `${BASE_URLS.FLORAL}/${value}.webp`;
+    return `${BASE_URLS.THREAD_COLOR}/${value}.webp`;
 };
 const getProxyUrl = (url) => `https://proxy-img.c8p.workers.dev?url=${encodeURIComponent(url)}`;
 const ensureImage = (existing) => {
@@ -377,43 +319,6 @@ const buildWrappedLines = (ctx, text, maxWidth) => {
     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;
-        }
-    }
-    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;
-        }
-        currentY += lineHeight;
-    });
-    return lines.length * lineHeight;
-};
 const drawSwatches = (ctx, colors, startX, startY, swatchHeight, scaleFactor, imageRefs) => {
     let swatchX = startX;
     colors.forEach((color) => {
@@ -885,9 +790,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")) {
@@ -936,31 +857,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;
@@ -976,12 +881,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;
@@ -1064,8 +983,11 @@ const prepareExportCanvas = async (config, options = {}) => {
     const imageRefs = {
         current: new Map(),
     };
-    await preloadFonts(config);
-    await preloadImages(config, imageRefs);
+    // Load fonts and images in parallel
+    await Promise.all([
+        preloadFonts(config),
+        preloadImages(config, imageRefs)
+    ]);
     renderEmbroideryCanvas(canvas, config, { width, height }, imageRefs);
     if (!canvas.width || !canvas.height) {
         return null;