embroidery-qc-image 1.0.33 → 1.0.35

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;AAiiBD,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA2HvD,CAAC;AA8nFF,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;AAgLjC,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;AAiiBD,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA2HvD,CAAC;AA8nFF,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

@@ -141,18 +141,30 @@ const loadFont = (fontName) => {
         }
     }
     return new Promise((resolve) => {
-        const fontUrl = `${BASE_URLS.FONT}/${encodeURIComponent(fontName)}.woff2`;
-        const fontFace = new FontFace(fontName, `url(${fontUrl})`);
-        fontFace
-            .load()
-            .then((loadedFont) => {
-            document.fonts.add(loadedFont);
-            resolve();
-        })
-            .catch(() => {
-            console.warn(`Could not load font ${fontName} from CDN`);
-            resolve();
-        });
+        const fontFormats = ['woff2', 'ttf', 'otf'];
+        let currentFormatIndex = 0;
+        const tryLoadFont = () => {
+            if (currentFormatIndex >= fontFormats.length) {
+                console.warn(`Could not load font ${fontName} from CDN (tried all formats)`);
+                resolve();
+                return;
+            }
+            const format = fontFormats[currentFormatIndex];
+            const fontUrl = `${BASE_URLS.FONT}/${encodeURIComponent(fontName)}.${format}`;
+            const fontFace = new FontFace(fontName, `url(${fontUrl})`);
+            fontFace
+                .load()
+                .then((loadedFont) => {
+                document.fonts.add(loadedFont);
+                resolve();
+            })
+                .catch(() => {
+                // Try next format
+                currentFormatIndex++;
+                tryLoadFont();
+            });
+        };
+        tryLoadFont();
     });
 };
 const getImageUrl = (type, value) => {
@@ -667,7 +679,7 @@ const renderStrokePatchesCanvas = (ctx, canvas, config, imageRefs) => {
     // Calculate text size to fit top section
     let previewFontSize = LAYOUT.HEADER_FONT_SIZE * 3; // Start with large size
     const fontToUse = isFontMissing ? LAYOUT.FONT_FAMILY : position.font;
-    ctx.font = `${previewFontSize}px ${fontToUse}`;
+    ctx.font = `${previewFontSize}px "${fontToUse}"`;
     const text = position.text || "";
     const maxTextWidth = usableWidth * 0.9; // Use 75% of width for better padding
     const maxTextHeight = actualTopSectionHeight; // Use 60% of height
@@ -675,13 +687,13 @@ const renderStrokePatchesCanvas = (ctx, canvas, config, imageRefs) => {
     let textWidth = ctx.measureText(text).width;
     while (textWidth > maxTextWidth && previewFontSize > 50) {
         previewFontSize *= 0.95;
-        ctx.font = `${previewFontSize}px ${fontToUse}`;
+        ctx.font = `${previewFontSize}px "${fontToUse}"`;
         textWidth = ctx.measureText(text).width;
     }
     // Ensure text height also fits
     while (previewFontSize > maxTextHeight && previewFontSize > 50) {
         previewFontSize *= 0.95;
-        ctx.font = `${previewFontSize}px ${fontToUse}`;
+        ctx.font = `${previewFontSize}px "${fontToUse}"`;
     }
     // Update textWidth after final scaling
     textWidth = ctx.measureText(text).width;
@@ -761,7 +773,7 @@ const renderStrokePatchesCanvas = (ctx, canvas, config, imageRefs) => {
         // Render font name với chính font đó
         const prefixWidth = ctx.measureText(fontPrefix).width;
         const fontName = position.font || LAYOUT.FONT_FAMILY;
-        ctx.font = `${infoFontSize}px ${fontName}`;
+        ctx.font = `${infoFontSize}px "${fontName}"`;
         ctx.fillText(fontName, startX + prefixWidth, infoY);
     }
     infoY += infoLineHeight;
@@ -1051,7 +1063,7 @@ const renderTemplateCustomTextPatchesCanvas = (ctx, canvas, config, imageRefs) =
     let high = previewFontSize;
     while (high - low > 1) {
         const mid = (low + high) / 2;
-        ctx.font = `${mid}px ${fontToUse}`;
+        ctx.font = `${mid}px "${fontToUse}"`;
         // Kiểm tra width của tất cả các dòng
         const maxLineWidth = Math.max(...textLines.map(line => ctx.measureText(line).width));
         // Kiểm tra height với line height = 1.1 (giảm từ 1.2 để text to hơn)
@@ -1068,7 +1080,7 @@ const renderTemplateCustomTextPatchesCanvas = (ctx, canvas, config, imageRefs) =
         }
     }
     previewFontSize = bestFontSize;
-    ctx.font = `${previewFontSize}px ${fontToUse}`;
+    ctx.font = `${previewFontSize}px "${fontToUse}"`;
     // Center the text inside rectangle
     const finalLineHeight = previewFontSize * 1.1;
     const totalTextHeightFinal = textLines.length * finalLineHeight;
@@ -1126,7 +1138,7 @@ const renderTemplateCustomTextPatchesCanvas = (ctx, canvas, config, imageRefs) =
         // Render font name với chính font đó
         const prefixWidth = ctx.measureText(fontPrefix).width;
         const fontName = position.font || LAYOUT.FONT_FAMILY;
-        ctx.font = `${infoFontSize}px ${fontName}`;
+        ctx.font = `${infoFontSize}px "${fontName}"`;
         ctx.fillText(fontName, startX + prefixWidth, infoY);
     }
     infoY += infoLineHeight;
@@ -1736,7 +1748,7 @@ const renderUniformLabels = (ctx, uniformProps, x, y, maxWidth, scaleFactor, ima
         let currentX = x + prefixWidth;
         ctx.fillText(prefix, x, cursorY);
         // Render tên font với font từ config
-        ctx.font = `${fontSize}px ${values.font}`;
+        ctx.font = `${fontSize}px "${values.font}"`;
         const fontNameWidth = ctx.measureText(values.font).width;
         ctx.fillText(values.font, currentX, cursorY);
         currentX += fontNameWidth;
@@ -1961,7 +1973,7 @@ displayIndex, showLabels, scaleFactor, imageRefs, mockupBounds = null) => {
             const measureFontTextWidth = (fontSize) => {
                 ctx.font = `${fontSize}px ${LAYOUT.FONT_FAMILY}`;
                 const prefixWidth = ctx.measureText(prefix).width;
-                ctx.font = `${fontSize}px ${position.font}`;
+                ctx.font = `${fontSize}px "${position.font}"`;
                 const fontNameWidth = ctx.measureText(fontName).width;
                 ctx.font = `${fontSize}px ${LAYOUT.FONT_FAMILY}`;
                 const suffixWidth = ctx.measureText(suffix).width;
@@ -2037,7 +2049,7 @@ displayIndex, showLabels, scaleFactor, imageRefs, mockupBounds = null) => {
                 const prefixWidth = ctx.measureText(prefix).width;
                 let currentX = x + prefixWidth;
                 ctx.fillText(prefix, x, currentY);
-                ctx.font = `${effectiveFontSize}px ${position.font}`;
+                ctx.font = `${effectiveFontSize}px "${position.font}"`;
                 const fontNameWidth = ctx.measureText(fontName).width;
                 const totalWidth = prefixWidth + fontNameWidth;
                 if (totalWidth > shrunkEffectiveMaxWidth) {