embroidery-qc-image 1.0.31 → 1.0.32

package/dist/index.js

@@ -626,36 +626,17 @@ const renderStrokePatchesCanvas = (ctx, canvas, config, imageRefs) => {
         renderErrorState(ctx, canvas, "Position phải là TEXT");
         return;
     }
-    // Validate required fields
-    if (!position.font) {
-        renderErrorState(ctx, canvas, "Thiếu font");
-        return;
-    }
-    // Validate layer_colors
-    if (!position.layer_colors) {
-        renderErrorState(ctx, canvas, "Thiếu layer_colors");
-        return;
-    }
-    if (position.layer_colors.length !== 3) {
-        renderErrorState(ctx, canvas, `layer_colors phải có đúng 3 phần tử, hiện tại có ${position.layer_colors.length}`);
-        return;
-    }
-    // Validate từng màu
-    const [textColor, borderColor, backgroundColor] = position.layer_colors;
-    const missingColors = [];
-    if (!textColor || textColor.trim() === "") {
-        missingColors.push("Màu text (vị trí 1)");
-    }
-    if (!borderColor || borderColor.trim() === "") {
-        missingColors.push("Màu border (vị trí 2)");
-    }
-    if (!backgroundColor || backgroundColor.trim() === "") {
-        missingColors.push("Màu background (vị trí 3)");
-    }
-    if (missingColors.length > 0) {
-        renderErrorState(ctx, canvas, `Thiếu màu trong layer_colors:\n${missingColors.join("\n")}`);
-        return;
-    }
+    // Get layer colors with empty check (don't use fallback)
+    const textColor = position.layer_colors?.[0];
+    const borderColor = position.layer_colors?.[1];
+    const backgroundColor = position.layer_colors?.[2];
+    const fabricColor = position.layer_colors?.[3]; // Màu vải
+    // For rendering, use fallback colors (fabricColor không cần fallback vì chỉ hiển thị)
+    const textColorForRender = textColor;
+    const borderColorForRender = borderColor;
+    const backgroundColorForRender = backgroundColor;
+    // Check if font is missing (but continue rendering)
+    const isFontMissing = !position.font || position.font.trim() === "";
     // ============================================================================
     // TOP SECTION (2/3): Hiển thị mẫu preview
     // ============================================================================
@@ -671,7 +652,8 @@ const renderStrokePatchesCanvas = (ctx, canvas, config, imageRefs) => {
     const actualTopSectionHeight = topSectionHeight - titleFontSize - LAYOUT.LINE_GAP - extraSpacing;
     // Calculate text size to fit top section
     let previewFontSize = LAYOUT.HEADER_FONT_SIZE * 3; // Start with large size
-    ctx.font = `${previewFontSize}px ${position.font}`;
+    const fontToUse = isFontMissing ? LAYOUT.FONT_FAMILY : position.font;
+    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
@@ -679,23 +661,23 @@ const renderStrokePatchesCanvas = (ctx, canvas, config, imageRefs) => {
     let textWidth = ctx.measureText(text).width;
     while (textWidth > maxTextWidth && previewFontSize > 50) {
         previewFontSize *= 0.95;
-        ctx.font = `${previewFontSize}px ${position.font}`;
+        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 ${position.font}`;
+        ctx.font = `${previewFontSize}px ${fontToUse}`;
     }
     // Update textWidth after final scaling
     textWidth = ctx.measureText(text).width;
     // Center the text in top section
     const textX = padding + usableWidth / 2 - textWidth / 2;
     const textY = actualTopSectionY + actualTopSectionHeight / 2 - previewFontSize / 2;
-    // Get color hex values
-    const textColorHex = COLOR_MAP[textColor] || LAYOUT.LABEL_COLOR;
-    const borderColorHex = COLOR_MAP[borderColor] || LAYOUT.LABEL_COLOR;
-    const bgColorHex = COLOR_MAP[backgroundColor] || "#FFFFFF";
+    // Get color hex values (use render colors with fallback)
+    const textColorHex = COLOR_MAP[textColorForRender] || LAYOUT.LABEL_COLOR;
+    const borderColorHex = COLOR_MAP[borderColorForRender] || LAYOUT.LABEL_COLOR;
+    const bgColorHex = COLOR_MAP[backgroundColorForRender] || "#FFFFFF";
     // Calculate stroke widths
     // Background needs to be MUCH thicker to create spacing from text
     // Border needs to be even thicker to wrap around background
@@ -755,62 +737,142 @@ const renderStrokePatchesCanvas = (ctx, canvas, config, imageRefs) => {
     const fontPrefix = "Font: ";
     ctx.font = `${infoFontSize}px ${LAYOUT.FONT_FAMILY}`;
     ctx.fillText(fontPrefix, startX, infoY);
-    // Render font name với chính font đó
-    const prefixWidth = ctx.measureText(fontPrefix).width;
-    ctx.font = `${infoFontSize}px ${position.font}`;
-    ctx.fillText(position.font, startX + prefixWidth, infoY);
+    if (isFontMissing) {
+        // Hiển thị warning màu đỏ nếu thiếu font
+        ctx.fillStyle = "#CC0000"; // Red color
+        ctx.fillText("(Đang thiếu font chữ)", startX + ctx.measureText(fontPrefix).width, infoY);
+        ctx.fillStyle = LAYOUT.LABEL_COLOR; // Reset color
+    }
+    else {
+        // 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.fillText(fontName, startX + prefixWidth, infoY);
+    }
     infoY += infoLineHeight;
     // Reset font về mặc định cho các dòng tiếp theo
     ctx.font = `${infoFontSize}px ${LAYOUT.FONT_FAMILY}`;
-    // Màu chữ (Text Color)
+    // Màu chữ (Text Color) - layer_colors[0]
     drawAsterisk(padding, infoY);
-    const textColorLabel = `Màu chữ: ${textColor}`;
-    ctx.fillText(textColorLabel, startX, infoY);
-    // Draw text color swatch
-    const swatchSize = infoFontSize * 1.3; // Giảm từ 1.5 xuống 1.3
-    const swatchX = startX +
-        ctx.measureText(textColorLabel).width +
-        LAYOUT.ELEMENT_SPACING * 0.3; // Giảm spacing
-    const swatchY = infoY + infoFontSize / 2 - swatchSize / 2;
-    const textColorSwatchUrl = getImageUrl("threadColor", textColor);
-    const textColorSwatchImg = imageRefs.current.get(textColorSwatchUrl);
-    if (textColorSwatchImg?.complete && textColorSwatchImg.naturalHeight > 0) {
-        const ratio = textColorSwatchImg.naturalWidth / textColorSwatchImg.naturalHeight;
-        const swatchW = Math.max(1, Math.floor(swatchSize * ratio));
-        ctx.drawImage(textColorSwatchImg, swatchX, swatchY, swatchW, swatchSize);
+    const textColorPrefix = "Màu chữ: ";
+    ctx.fillText(textColorPrefix, startX, infoY);
+    if (!textColor || textColor.trim() === "") {
+        // Hiển thị warning màu đỏ nếu thiếu màu
+        const prefixWidth = ctx.measureText(textColorPrefix).width;
+        ctx.fillStyle = "#CC0000";
+        ctx.fillText("(Chưa có màu)", startX + prefixWidth, infoY);
+        ctx.fillStyle = LAYOUT.LABEL_COLOR; // Reset color
+    }
+    else {
+        // Hiển thị tên màu
+        const prefixWidth = ctx.measureText(textColorPrefix).width;
+        ctx.fillText(textColor, startX + prefixWidth, infoY);
+        // Draw text color swatch
+        const swatchSize = infoFontSize * 1.3;
+        const swatchX = startX +
+            ctx.measureText(textColorPrefix + textColor).width +
+            LAYOUT.ELEMENT_SPACING * 0.3;
+        const swatchY = infoY + infoFontSize / 2 - swatchSize / 2;
+        const textColorSwatchUrl = getImageUrl("threadColor", textColor);
+        const textColorSwatchImg = imageRefs.current.get(textColorSwatchUrl);
+        if (textColorSwatchImg?.complete && textColorSwatchImg.naturalHeight > 0) {
+            const ratio = textColorSwatchImg.naturalWidth / textColorSwatchImg.naturalHeight;
+            const swatchW = Math.max(1, Math.floor(swatchSize * ratio));
+            ctx.drawImage(textColorSwatchImg, swatchX, swatchY, swatchW, swatchSize);
+        }
+    }
+    infoY += infoLineHeight;
+    // Màu nền (Background Color) - layer_colors[2]
+    drawAsterisk(padding, infoY);
+    const bgColorPrefix = "Màu nền: ";
+    ctx.fillText(bgColorPrefix, startX, infoY);
+    if (!backgroundColor || backgroundColor.trim() === "") {
+        // Hiển thị warning màu đỏ nếu thiếu màu
+        const prefixWidth = ctx.measureText(bgColorPrefix).width;
+        ctx.fillStyle = "#CC0000";
+        ctx.fillText("(Chưa có màu)", startX + prefixWidth, infoY);
+        ctx.fillStyle = LAYOUT.LABEL_COLOR; // Reset color
+    }
+    else {
+        // Hiển thị tên màu
+        const prefixWidth = ctx.measureText(bgColorPrefix).width;
+        ctx.fillText(backgroundColor, startX + prefixWidth, infoY);
+        // Draw background color swatch
+        const swatchSize = infoFontSize * 1.3;
+        const bgSwatchX = startX +
+            ctx.measureText(bgColorPrefix + backgroundColor).width +
+            LAYOUT.ELEMENT_SPACING * 0.3;
+        const bgSwatchY = infoY + infoFontSize / 2 - swatchSize / 2;
+        const bgColorSwatchUrl = getImageUrl("threadColor", backgroundColor);
+        const bgColorSwatchImg = imageRefs.current.get(bgColorSwatchUrl);
+        if (bgColorSwatchImg?.complete && bgColorSwatchImg.naturalHeight > 0) {
+            const ratio = bgColorSwatchImg.naturalWidth / bgColorSwatchImg.naturalHeight;
+            const swatchW = Math.max(1, Math.floor(swatchSize * ratio));
+            ctx.drawImage(bgColorSwatchImg, bgSwatchX, bgSwatchY, swatchW, swatchSize);
+        }
     }
     infoY += infoLineHeight;
-    // Màu nền (Background Color)
-    drawAsterisk(padding + bottomPadding, infoY);
-    const bgColorLabel = `Màu nền: ${backgroundColor}`;
-    ctx.fillText(bgColorLabel, startX, infoY);
-    // Draw background color swatch
-    const bgSwatchX = startX + ctx.measureText(bgColorLabel).width + LAYOUT.ELEMENT_SPACING * 0.3;
-    const bgSwatchY = infoY + infoFontSize / 2 - swatchSize / 2;
-    const bgColorSwatchUrl = getImageUrl("threadColor", backgroundColor);
-    const bgColorSwatchImg = imageRefs.current.get(bgColorSwatchUrl);
-    if (bgColorSwatchImg?.complete && bgColorSwatchImg.naturalHeight > 0) {
-        const ratio = bgColorSwatchImg.naturalWidth / bgColorSwatchImg.naturalHeight;
-        const swatchW = Math.max(1, Math.floor(swatchSize * ratio));
-        ctx.drawImage(bgColorSwatchImg, bgSwatchX, bgSwatchY, swatchW, swatchSize);
+    // Màu viền (Border Color) - layer_colors[1]
+    drawAsterisk(padding, infoY);
+    const borderColorPrefix = "Màu viền: ";
+    ctx.fillText(borderColorPrefix, startX, infoY);
+    if (!borderColor || borderColor.trim() === "") {
+        // Hiển thị warning màu đỏ nếu thiếu màu
+        const prefixWidth = ctx.measureText(borderColorPrefix).width;
+        ctx.fillStyle = "#CC0000";
+        ctx.fillText("(Chưa có màu)", startX + prefixWidth, infoY);
+        ctx.fillStyle = LAYOUT.LABEL_COLOR; // Reset color
+    }
+    else {
+        // Hiển thị tên màu
+        const prefixWidth = ctx.measureText(borderColorPrefix).width;
+        ctx.fillText(borderColor, startX + prefixWidth, infoY);
+        // Draw border color swatch
+        const swatchSize = infoFontSize * 1.3;
+        const borderSwatchX = startX +
+            ctx.measureText(borderColorPrefix + borderColor).width +
+            LAYOUT.ELEMENT_SPACING * 0.3;
+        const borderSwatchY = infoY + infoFontSize / 2 - swatchSize / 2;
+        const borderColorSwatchUrl = getImageUrl("threadColor", borderColor);
+        const borderColorSwatchImg = imageRefs.current.get(borderColorSwatchUrl);
+        if (borderColorSwatchImg?.complete &&
+            borderColorSwatchImg.naturalHeight > 0) {
+            const ratio = borderColorSwatchImg.naturalWidth / borderColorSwatchImg.naturalHeight;
+            const swatchW = Math.max(1, Math.floor(swatchSize * ratio));
+            ctx.drawImage(borderColorSwatchImg, borderSwatchX, borderSwatchY, swatchW, swatchSize);
+        }
     }
     infoY += infoLineHeight;
-    // Màu viền (Border Color)
-    drawAsterisk(padding + bottomPadding, infoY);
-    const borderColorLabel = `Màu viền: ${borderColor}`;
-    ctx.fillText(borderColorLabel, startX, infoY);
-    // Draw border color swatch
-    const borderSwatchX = startX +
-        ctx.measureText(borderColorLabel).width +
-        LAYOUT.ELEMENT_SPACING * 0.3;
-    const borderSwatchY = infoY + infoFontSize / 2 - swatchSize / 2;
-    const borderColorSwatchUrl = getImageUrl("threadColor", borderColor);
-    const borderColorSwatchImg = imageRefs.current.get(borderColorSwatchUrl);
-    if (borderColorSwatchImg?.complete &&
-        borderColorSwatchImg.naturalHeight > 0) {
-        const ratio = borderColorSwatchImg.naturalWidth / borderColorSwatchImg.naturalHeight;
-        const swatchW = Math.max(1, Math.floor(swatchSize * ratio));
-        ctx.drawImage(borderColorSwatchImg, borderSwatchX, borderSwatchY, swatchW, swatchSize);
+    // Màu vải (Fabric Color) - layer_colors[3]
+    drawAsterisk(padding, infoY);
+    const fabricColorPrefix = "Màu vải: ";
+    ctx.fillText(fabricColorPrefix, startX, infoY);
+    if (!fabricColor || fabricColor.trim() === "") {
+        // Hiển thị warning màu đỏ nếu thiếu màu
+        const prefixWidth = ctx.measureText(fabricColorPrefix).width;
+        ctx.fillStyle = "#CC0000";
+        ctx.fillText("(Chưa có màu)", startX + prefixWidth, infoY);
+        ctx.fillStyle = LAYOUT.LABEL_COLOR; // Reset color
+    }
+    else {
+        // Hiển thị tên màu
+        const prefixWidth = ctx.measureText(fabricColorPrefix).width;
+        ctx.fillText(fabricColor, startX + prefixWidth, infoY);
+        // Draw fabric color swatch
+        const swatchSize = infoFontSize * 1.3;
+        const fabricSwatchX = startX +
+            ctx.measureText(fabricColorPrefix + fabricColor).width +
+            LAYOUT.ELEMENT_SPACING * 0.3;
+        const fabricSwatchY = infoY + infoFontSize / 2 - swatchSize / 2;
+        const fabricColorSwatchUrl = getImageUrl("threadColor", fabricColor);
+        const fabricColorSwatchImg = imageRefs.current.get(fabricColorSwatchUrl);
+        if (fabricColorSwatchImg?.complete &&
+            fabricColorSwatchImg.naturalHeight > 0) {
+            const ratio = fabricColorSwatchImg.naturalWidth / fabricColorSwatchImg.naturalHeight;
+            const swatchW = Math.max(1, Math.floor(swatchSize * ratio));
+            ctx.drawImage(fabricColorSwatchImg, fabricSwatchX, fabricSwatchY, swatchW, swatchSize);
+        }
     }
     infoY += infoLineHeight;
     // Attachment