embroidery-qc-image 1.0.34 → 1.0.36

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;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"}
+{"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;AAspFF,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

@@ -679,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
@@ -687,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;
@@ -773,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;
@@ -1063,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)
@@ -1080,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;
@@ -1138,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;
@@ -1582,13 +1582,13 @@ const renderSide = (ctx, side, startY, width, height, scaleFactor, imageRefs, mo
         return currentY - startY;
     }
     // Compute uniform properties
-    const iconColorPositions = side.positions.filter((p) => p.type === "ICON" &&
-        (!p.layer_colors?.length || p.layer_colors.length === 1));
+    // Lấy màu từ tất cả ICON positions (sử dụng getIconColors để ưu tiên layer_colors)
+    const iconColorPositions = side.positions.filter((p) => p.type === "ICON");
     const iconColorValues = iconColorPositions
         .map((p) => {
-        if (p.layer_colors?.length === 1)
-            return p.layer_colors[0];
-        return p.color ?? null;
+        const iconColors = getIconColors(p);
+        // Join các màu bằng dấu phẩy giống TEXT để so sánh uniform
+        return iconColors?.length ? iconColors.join(",") : null;
     })
         .filter((color) => Boolean(color));
     const uniformProps = computeUniformProperties(textPositions, {
@@ -1643,38 +1643,62 @@ const renderSide = (ctx, side, startY, width, height, scaleFactor, imageRefs, mo
     currentY += LAYOUT.LINE_GAP * scaleFactor;
     side.positions.forEach((position) => {
         if (position.type === "ICON") {
-            const layerCount = position.layer_colors?.length ?? 0;
-            const iconUsesSingleColor = layerCount === 0 || layerCount === 1;
-            const iconColorValue = layerCount === 1
-                ? position.layer_colors?.[0] ?? null
-                : position.color ?? null;
+            const iconColors = getIconColors(position);
+            const iconColorValue = iconColors?.length ? iconColors.join(",") : null;
+            // Icon có thể hide color nếu uniform với TEXT, bất kể số lượng màu
+            // (vì TEXT với layer_colors nhiều màu cũng có thể uniform)
             const hideColor = shouldShowUniformLabels &&
                 uniformProps.isUniform.color &&
                 iconColorValue !== null &&
-                uniformProps.values.color === iconColorValue &&
-                iconUsesSingleColor;
+                uniformProps.values.color === iconColorValue;
             currentY += renderIconPosition(ctx, position, padding, currentY, sideWidth, scaleFactor, imageRefs, { hideColor }, mockupBounds);
             currentY += (LAYOUT.LINE_GAP / 3) * scaleFactor;
         }
     });
     return currentY - startY;
 };
+// Helper function để lấy màu từ TEXT position (ưu tiên layer_colors, fallback về character_colors hoặc color)
+const getTextColors = (position) => {
+    if (position.layer_colors?.length) {
+        return position.layer_colors;
+    }
+    if (position.character_colors?.length) {
+        return position.character_colors;
+    }
+    if (position.color) {
+        return [position.color];
+    }
+    return null;
+};
+// Helper function để lấy màu từ ICON position (ưu tiên layer_colors, fallback về color)
+const getIconColors = (position) => {
+    if (position.layer_colors?.length) {
+        return position.layer_colors;
+    }
+    if (position.color) {
+        return [position.color];
+    }
+    return null;
+};
 const groupTextPositions = (textPositions) => {
     const groups = [];
     let currentGroup = null;
     let currentProps = null;
     textPositions.forEach((position) => {
+        const textColors = getTextColors(position);
         const posProps = {
             font: position.font,
             text_shape: position.text_shape,
             color: position.color,
             character_colors: position.character_colors?.join(","),
+            layer_colors: textColors?.join(","),
         };
         if (!currentGroup ||
             currentProps.font !== posProps.font ||
             currentProps.text_shape !== posProps.text_shape ||
             currentProps.color !== posProps.color ||
-            currentProps.character_colors !== posProps.character_colors) {
+            currentProps.character_colors !== posProps.character_colors ||
+            currentProps.layer_colors !== posProps.layer_colors) {
             if (currentGroup) {
                 groups.push(currentGroup);
             }
@@ -1699,9 +1723,12 @@ const computeUniformProperties = (textPositions, options) => {
     const shapes = new Set(textPositions.map((p) => p.text_shape));
     const florals = new Set(textPositions.map((p) => p.floral_pattern ?? "None"));
     const colorSources = [
-        ...textPositions.map((p) => p.character_colors?.length
-            ? p.character_colors.join(",")
-            : p.color ?? "None"),
+        ...textPositions.map((p) => {
+            const textColors = getTextColors(p);
+            return textColors?.length
+                ? textColors.join(",")
+                : p.color ?? "None";
+        }),
         ...(options?.additionalColorValues?.map((color) => color ?? "None") ?? []),
     ];
     if (textPositions.length === 0 &&
@@ -1748,7 +1775,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;
@@ -1973,7 +2000,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;
@@ -2049,7 +2076,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) {
@@ -2083,9 +2110,11 @@ displayIndex, showLabels, scaleFactor, imageRefs, mockupBounds = null) => {
             }
         }
         if (showLabels.color) {
-            const colorValue = position.character_colors?.join(", ") || position.color;
-            if (colorValue) {
-                const colors = position.character_colors || [position.color];
+            // Ưu tiên layer_colors, fallback về character_colors hoặc color (giống ICON)
+            const textColors = getTextColors(position);
+            if (textColors && textColors.length > 0) {
+                const colorValue = textColors.join(", ");
+                const colors = textColors;
                 const swatchH = Math.floor(otherFontSize * LAYOUT.SWATCH_HEIGHT_RATIO);
                 const totalSwatchWidth = calculateSwatchesWidth(colors, swatchH, scaleFactor, imageRefs);
                 // Tính effectiveMaxWidth cho dòng này để tránh mockup
@@ -2361,16 +2390,9 @@ const renderIconPosition = (ctx, position, x, y, maxWidth, scaleFactor, imageRef
     cursorY += iconResult.height;
     // Draw color swatches (prefer layer_colors, fallback to single color)
     // 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;
+    const iconColors = position.is_delete_icon ? null : getIconColors(position);
+    // Nếu hideColor = true, ẩn màu của ICON (giống TEXT) bất kể số lượng màu
+    const shouldSkipColorSection = options?.hideColor === true;
     if (iconColors?.length && !shouldSkipColorSection) {
         // Dòng "Màu chỉ:" của icon dùng OTHER_FONT_SIZE, không dùng iconFontSize
         const otherFontSize = LAYOUT.OTHER_FONT_SIZE * scaleFactor;