embroidery-qc-image 1.0.20 → 1.0.22

package/dist/index.js

@@ -730,10 +730,30 @@ const renderSide = (ctx, side, startY, width, scaleFactor, imageRefs) => {
     ctx.restore();
     // Compute uniform properties
     const textPositions = side.positions.filter((p) => p.type === "TEXT");
-    const uniformProps = computeUniformProperties(textPositions);
-    // Render uniform labels (only if more than 1 TEXT position)
-    if (textPositions.length > 1) {
-        currentY += renderUniformLabels(ctx, uniformProps, padding, currentY, sideWidth, scaleFactor, imageRefs, textPositions);
+    const iconColorPositions = side.positions.filter((p) => p.type === "ICON" && (!p.layer_colors?.length || p.layer_colors.length === 1));
+    const iconColorValues = iconColorPositions
+        .map((p) => {
+        if (p.layer_colors?.length === 1)
+            return p.layer_colors[0];
+        return p.color ?? null;
+    })
+        .filter((color) => Boolean(color));
+    const uniformProps = computeUniformProperties(textPositions, {
+        additionalColorValues: iconColorValues,
+    });
+    const hasMultipleTextPositions = textPositions.length > 1;
+    const hasSharedIconColor = iconColorValues.length > 0;
+    const shouldRenderSharedColorLabel = !hasMultipleTextPositions &&
+        hasSharedIconColor &&
+        uniformProps.isUniform.color &&
+        Boolean(uniformProps.values.color);
+    const shouldShowUniformLabels = hasMultipleTextPositions || shouldRenderSharedColorLabel;
+    const uniformLabelFields = hasMultipleTextPositions
+        ? undefined
+        : { color: true };
+    // Render uniform labels (when applicable)
+    if (shouldShowUniformLabels) {
+        currentY += renderUniformLabels(ctx, uniformProps, padding, currentY, sideWidth, scaleFactor, imageRefs, textPositions, uniformLabelFields);
     }
     // Group text positions by common properties
     const textGroups = groupTextPositions(textPositions);
@@ -747,7 +767,12 @@ const renderSide = (ctx, side, startY, width, scaleFactor, imageRefs) => {
             }
             // If only 1 TEXT position, show all labels (no uniform labels rendered)
             const showLabels = textPositions.length === 1
-                ? { font: true, shape: true, floral: true, color: true }
+                ? {
+                    font: true,
+                    shape: true,
+                    floral: true,
+                    color: !shouldRenderSharedColorLabel,
+                }
                 : {
                     font: !uniformProps.isUniform.font,
                     shape: !uniformProps.isUniform.shape,
@@ -765,7 +790,17 @@ const renderSide = (ctx, side, startY, width, scaleFactor, imageRefs) => {
     currentY += LAYOUT.LINE_GAP * scaleFactor;
     side.positions.forEach((position) => {
         if (position.type === "ICON") {
-            currentY += renderIconPosition(ctx, position, padding, currentY, sideWidth, scaleFactor, imageRefs);
+            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 hideColor = shouldShowUniformLabels &&
+                uniformProps.isUniform.color &&
+                iconColorValue !== null &&
+                uniformProps.values.color === iconColorValue &&
+                iconUsesSingleColor;
+            currentY += renderIconPosition(ctx, position, padding, currentY, sideWidth, scaleFactor, imageRefs, { hideColor });
             currentY += (LAYOUT.LINE_GAP / 3) * scaleFactor;
         }
     });
@@ -802,56 +837,67 @@ const groupTextPositions = (textPositions) => {
     }
     return groups;
 };
-const computeUniformProperties = (textPositions) => {
-    if (textPositions.length === 0) {
-        return {
-            values: { font: null, shape: null, floral: null, color: null },
-            isUniform: { font: false, shape: false, floral: false, color: false },
-        };
-    }
+const computeUniformProperties = (textPositions, options) => {
+    const defaults = {
+        values: { font: null, shape: null, floral: null, color: null },
+        isUniform: { font: false, shape: false, floral: false, color: false },
+    };
     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 colorSources = [
+        ...textPositions.map((p) => p.character_colors?.length
+            ? p.character_colors.join(",")
+            : p.color ?? "None"),
+        ...(options?.additionalColorValues?.map((color) => color ?? "None") ?? []),
+    ];
+    if (textPositions.length === 0 &&
+        (!options?.additionalColorValues || options.additionalColorValues.length === 0)) {
+        return defaults;
+    }
+    const colors = new Set(colorSources);
     return {
         values: {
             font: fonts.size === 1 ? [...fonts][0] : null,
             shape: shapes.size === 1 ? [...shapes][0] : null,
             floral: florals.size === 1 ? [...florals][0] : null,
-            color: colors.size === 1 ? [...colors][0] : null,
+            color: colorSources.length > 0 && colors.size === 1 ? [...colors][0] : null,
         },
         isUniform: {
             font: fonts.size === 1,
             shape: shapes.size === 1,
             floral: florals.size === 1,
-            color: colors.size === 1,
+            color: colorSources.length > 0 && colors.size === 1,
         },
     };
 };
-const renderUniformLabels = (ctx, uniformProps, x, y, maxWidth, scaleFactor, imageRefs, textPositions) => {
+const renderUniformLabels = (ctx, uniformProps, x, y, maxWidth, scaleFactor, imageRefs, textPositions, fields) => {
     const { values } = uniformProps;
     const fontSize = LAYOUT.OTHER_FONT_SIZE * scaleFactor;
     const lineGap = LAYOUT.LINE_GAP * scaleFactor;
+    const shouldRenderField = (field) => {
+        if (!fields)
+            return true;
+        return fields[field] === true;
+    };
     ctx.save();
     ctx.font = `${fontSize}px ${LAYOUT.FONT_FAMILY}`;
     ctx.fillStyle = LAYOUT.LABEL_COLOR;
     let cursorY = y;
     let rendered = 0;
-    if (values.font) {
+    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}`;
+        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;
         rendered++;
     }
-    if (values.shape && values.shape !== "None") {
+    if (values.shape && values.shape !== "None" && shouldRenderField("shape")) {
         const result = wrapText(ctx, `Kiểu chữ: ${values.shape}`, x, cursorY, maxWidth, fontSize + lineGap);
         cursorY += result.height;
         rendered++;
     }
-    if (values.color && values.color !== "None") {
+    if (values.color && values.color !== "None" && shouldRenderField("color")) {
         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);
@@ -866,7 +912,7 @@ const renderUniformLabels = (ctx, uniformProps, x, y, maxWidth, scaleFactor, ima
         cursorY += result.height;
         rendered++;
     }
-    if (values.floral && values.floral !== "None") {
+    if (values.floral && values.floral !== "None" && shouldRenderField("floral")) {
         const result = wrapText(ctx, `Mẫu hoa: ${values.floral}`, x, cursorY, maxWidth, fontSize + lineGap);
         cursorY += result.height;
         rendered++;
@@ -934,7 +980,7 @@ const renderTextPosition = (ctx, position, x, y, maxWidth, displayIndex, showLab
         if (showLabels.font && position.font) {
             const fontLabel = position.is_font_default === true
                 ? `Font: ${position.font} (Mặc định)`
-                : `Font: ${position.font}`;
+                : `Font: ${position.font} (Custom)`;
             const result = wrapText(ctx, fontLabel, x, currentY, maxWidth, otherFontSize + lineGap);
             currentY += result.height;
             drawnHeight += result.height;
@@ -964,7 +1010,7 @@ const renderTextPosition = (ctx, position, x, y, maxWidth, displayIndex, showLab
     ctx.restore();
     return drawnHeight;
 };
-const renderIconPosition = (ctx, position, x, y, maxWidth, scaleFactor, imageRefs) => {
+const renderIconPosition = (ctx, position, x, y, maxWidth, scaleFactor, imageRefs, options) => {
     const iconFontSize = LAYOUT.OTHER_FONT_SIZE * scaleFactor;
     const lineGap = LAYOUT.LINE_GAP * scaleFactor;
     ctx.save();
@@ -997,7 +1043,10 @@ const renderIconPosition = (ctx, position, x, y, maxWidth, scaleFactor, imageRef
         : position.color
             ? [position.color]
             : null;
-    if (iconColors?.length) {
+    const layerCount = position.layer_colors?.length ?? 0;
+    const hasMultiLayerColors = layerCount > 1;
+    const shouldSkipColorSection = options?.hideColor && !hasMultiLayerColors;
+    if (iconColors?.length && !shouldSkipColorSection) {
         const textMaxWidth = Math.max(LAYOUT.MIN_TEXT_WIDTH * scaleFactor, maxWidth - LAYOUT.SWATCH_RESERVED_SPACE * scaleFactor);
         const colorResult = wrapText(ctx, `Màu chỉ: ${iconColors.join(", ")}`, x, cursorY, textMaxWidth, iconFontSize + lineGap);
         const swatchH = Math.floor(iconFontSize * LAYOUT.SWATCH_HEIGHT_RATIO);