embroidery-qc-image 1.0.24 → 1.0.25

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;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"}
+{"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;AAibD,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAmHvD,CAAC;AAugCF,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.d.ts

@@ -13,6 +13,9 @@ interface TextPosition {
 interface IconPosition {
     type: 'ICON';
     icon: number;
+    icon_name?: string | null;
+    icon_image?: string | null;
+    is_delete_icon?: boolean | null;
     note?: string | null;
     color?: string | null;
     layer_colors: string[];
@@ -20,10 +23,12 @@ interface IconPosition {
 type Position = TextPosition | IconPosition;
 interface Side {
     print_side: string;
+    item_type?: string | null;
     positions: Position[];
 }
 interface EmbroideryQCConfig {
     image_url?: string;
+    message?: string | null;
     error_message?: string | null;
     warning_message?: string | null;
     sides: Side[];

package/dist/index.esm.js

@@ -46,7 +46,7 @@ const LAYOUT = {
     // Font sizes (base values, will be multiplied by scaleFactor)
     HEADER_FONT_SIZE: 220,
     TEXT_FONT_SIZE: 200,
-    OTHER_FONT_SIZE: 160,
+    OTHER_FONT_SIZE: 180,
     // Colors
     HEADER_COLOR: "#000000",
     LABEL_COLOR: "#444444",
@@ -55,12 +55,12 @@ const LAYOUT = {
     TEXT_ALIGN: "left",
     TEXT_BASELINE: "top",
     // Spacing
-    LINE_GAP: 40,
-    PADDING: 40,
+    LINE_GAP: 50,
+    PADDING: 50,
     SECTION_SPACING: 60,
     ELEMENT_SPACING: 100,
     SWATCH_SPACING: 25,
-    FLORAL_SPACING: 300,
+    FLORAL_SPACING: 100,
     // Visual styling
     SWATCH_HEIGHT_RATIO: 2.025,
     UNDERLINE_POSITION: 0.9,
@@ -103,6 +103,17 @@ const getImageUrl = (type, value) => {
     return `${BASE_URLS.THREAD_COLOR}/${value}.webp`;
 };
 const getProxyUrl = (url) => `https://proxy-img.c8p.workers.dev?url=${encodeURIComponent(url)}`;
+const getIconImageUrl = (position) => {
+    if (position.is_delete_icon)
+        return null;
+    if (position.icon_image && position.icon_image.trim().length > 0) {
+        return position.icon_image;
+    }
+    if (position.icon !== 0) {
+        return getImageUrl("icon", position.icon);
+    }
+    return null;
+};
 const ensureImage = (existing) => {
     if (existing && existing.crossOrigin === "anonymous") {
         return existing;
@@ -134,14 +145,14 @@ const loadImage = (url, imageRefs, onLoad) => {
     img.onerror = () => {
         if (!attemptedProxy) {
             attemptedProxy = true;
-            img.src = getProxyUrl(url);
+            img.src = getProxyUrl(getResizeUrl(url));
             return;
         }
         img.dataset.proxyUsed = attemptedProxy ? "true" : "false";
         cleanup();
         onLoad();
     };
-    img.src = attemptedProxy ? getProxyUrl(url) : url;
+    img.src = attemptedProxy ? getProxyUrl(getResizeUrl(url)) : getResizeUrl(url);
 };
 const loadImageAsync = (url, imageRefs, cacheKey) => {
     const key = cacheKey ?? url;
@@ -179,13 +190,13 @@ const loadImageAsync = (url, imageRefs, cacheKey) => {
         target.onerror = () => {
             if (!attemptedProxy) {
                 attemptedProxy = true;
-                target.src = getProxyUrl(url);
+                target.src = getProxyUrl(getResizeUrl(url));
                 return;
             }
             target.dataset.proxyUsed = attemptedProxy ? "true" : "false";
             finalize();
         };
-        const desiredSrc = attemptedProxy ? getProxyUrl(url) : url;
+        const desiredSrc = attemptedProxy ? getProxyUrl(getResizeUrl(url)) : getResizeUrl(url);
         if (target.src !== desiredSrc) {
             target.src = desiredSrc;
         }
@@ -194,6 +205,57 @@ const loadImageAsync = (url, imageRefs, cacheKey) => {
         }
     });
 };
+const getResizeUrl = (url) => {
+    try {
+        const urlObj = new URL(url);
+        // Xử lý cdn.shopify.com
+        if (urlObj.hostname === 'cdn.shopify.com') {
+            // Set hoặc update query param width=400
+            urlObj.searchParams.set('width', '400');
+            return urlObj.toString();
+        }
+        // Xử lý m.media-amazon.com
+        if (urlObj.hostname === 'm.media-amazon.com') {
+            const pathname = urlObj.pathname;
+            // Split pathname theo dấu /
+            const pathArr = pathname.split('/');
+            // Lấy filename (phần cuối cùng)
+            const filename = pathArr[pathArr.length - 1];
+            // Xóa pattern ._.*_ (ví dụ: ._AC_SX569_)
+            const cleanedFilename = filename.replace(/\._.*_/g, '');
+            // Split filename đã clean theo dấu .
+            const parts = cleanedFilename.split('.');
+            if (parts.length >= 2) {
+                // Lấy phần đầu và phần cuối
+                const firstPart = parts[0];
+                const lastPart = parts[parts.length - 1];
+                // Chèn _AC_SX400_ vào giữa và join lại
+                const newFilename = `${firstPart}._AC_SX400_.${lastPart}`;
+                // Thay filename mới vào pathArr
+                pathArr[pathArr.length - 1] = newFilename;
+                // Join lại
+                urlObj.pathname = pathArr.join('/');
+                return urlObj.toString();
+            }
+        }
+        // Xử lý i.etsystatic.com
+        if (urlObj.hostname === 'i.etsystatic.com') {
+            const pathname = urlObj.pathname;
+            // Thay il_fullxfull bằng il_400x400
+            if (pathname.includes('il_fullxfull')) {
+                const newPathname = pathname.replace(/il_fullxfull/g, 'il_400x400');
+                urlObj.pathname = newPathname;
+                return urlObj.toString();
+            }
+        }
+        // Nếu không phải các domain cần xử lý, return URL gốc
+        return url;
+    }
+    catch (error) {
+        // Nếu URL không hợp lệ, return URL gốc
+        return url;
+    }
+};
 const preloadFonts = async (config) => {
     if (config.error_message || !config.sides?.length)
         return;
@@ -223,12 +285,10 @@ const preloadImages = async (config, imageRefs) => {
     config.sides.forEach((side) => {
         side.positions.forEach((position) => {
             if (position.type === "ICON") {
-                if (position.icon !== 0) {
-                    const iconUrl = getImageUrl("icon", position.icon);
-                    if (!seen.has(iconUrl)) {
-                        entries.push({ url: iconUrl });
-                        seen.add(iconUrl);
-                    }
+                const iconUrl = getIconImageUrl(position);
+                if (iconUrl && !seen.has(iconUrl)) {
+                    entries.push({ url: iconUrl });
+                    seen.add(iconUrl);
                 }
                 if (position.color) {
                     const threadUrl = getImageUrl("threadColor", position.color);
@@ -301,23 +361,30 @@ const wrapText = (ctx, text, x, y, maxWidth, lineHeight) => {
     };
 };
 const buildWrappedLines = (ctx, text, maxWidth) => {
-    const words = text.split(" ").filter((word) => word.length > 0);
-    if (words.length === 0)
-        return [""];
-    const lines = [];
-    let currentLine = words[0];
-    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);
-            currentLine = words[i];
+    // Mỗi '\n' tương đương với một line break giống như khi wrap tự động.
+    const segments = text.split("\n");
+    const result = [];
+    segments.forEach((segment) => {
+        const words = segment.split(" ").filter((word) => word.length > 0);
+        if (words.length === 0) {
+            // Nếu đoạn rỗng, thêm một dòng trống (break đúng 1 line)
+            result.push("");
+            return;
         }
-        else {
-            currentLine = testLine;
+        let currentLine = words[0];
+        for (let i = 1; i < words.length; i++) {
+            const testLine = `${currentLine} ${words[i]}`;
+            if (ctx.measureText(testLine).width > maxWidth && currentLine.length > 0) {
+                result.push(currentLine);
+                currentLine = words[i];
+            }
+            else {
+                currentLine = testLine;
+            }
         }
-    }
-    lines.push(currentLine);
-    return lines;
+        result.push(currentLine);
+    });
+    return result.length ? result : [""];
 };
 const drawSwatches = (ctx, colors, startX, startY, swatchHeight, scaleFactor, imageRefs) => {
     let swatchX = startX;
@@ -381,8 +448,9 @@ const EmbroideryQCImage = ({ config, className = "", style = {}, }) => {
         config.sides.forEach((side) => {
             side.positions.forEach((position) => {
                 if (position.type === "ICON") {
-                    if (position.icon !== 0) {
-                        loadImage(getImageUrl("icon", position.icon), imageRefs, incrementCounter);
+                    const iconUrl = getIconImageUrl(position);
+                    if (iconUrl) {
+                        loadImage(iconUrl, imageRefs, incrementCounter);
                     }
                     position.layer_colors?.forEach((color) => {
                         loadImage(getImageUrl("threadColor", color), imageRefs, incrementCounter);
@@ -433,7 +501,7 @@ const renderEmbroideryCanvas = (canvas, config, canvasSize, imageRefs) => {
         return;
     ctx.textAlign = LAYOUT.TEXT_ALIGN;
     ctx.textBaseline = LAYOUT.TEXT_BASELINE;
-    // Calculate warning height (with scaleFactor = 1 for measurement)
+    // Calculate warning & message height (with scaleFactor = 1 for measurement)
     let warningHeight = 0;
     let warningLineHeight = 0;
     let warningLineCount = 0;
@@ -452,6 +520,24 @@ const renderEmbroideryCanvas = (canvas, config, canvasSize, imageRefs) => {
             warningHeight = warningLineCount * warningLineHeight + LAYOUT.PADDING;
         }
     }
+    let messageHeight = 0;
+    let messageLineHeight = 0;
+    let messageLineCount = 0;
+    if (config.message) {
+        const measureMessageCanvas = document.createElement("canvas");
+        measureMessageCanvas.width = canvas.width;
+        measureMessageCanvas.height = canvas.height;
+        const measureMessageCtx = measureMessageCanvas.getContext("2d");
+        if (measureMessageCtx) {
+            measureMessageCtx.textAlign = "left";
+            measureMessageCtx.textBaseline = "top";
+            measureMessageCtx.font = `${LAYOUT.HEADER_FONT_SIZE * 0.7}px ${LAYOUT.FONT_FAMILY}`;
+            const messageLines = buildWrappedLines(measureMessageCtx, config.message.trim(), canvas.width - LAYOUT.PADDING * 4);
+            messageLineCount = messageLines.length;
+            messageLineHeight = LAYOUT.HEADER_FONT_SIZE * 0.7 + LAYOUT.LINE_GAP;
+            messageHeight = messageLineCount * messageLineHeight + LAYOUT.PADDING;
+        }
+    }
     if (config.image_url) {
         const mockupImage = imageRefs.current.get(config.image_url);
         if (mockupImage) {
@@ -484,27 +570,40 @@ const renderEmbroideryCanvas = (canvas, config, canvasSize, imageRefs) => {
     measureCtx.textBaseline = LAYOUT.TEXT_BASELINE;
     let measureY = LAYOUT.PADDING;
     const measureSpacing = LAYOUT.ELEMENT_SPACING;
-    // Add warning text height (without bottom padding, no spacing)
+    // Add warning & message text height (without bottom padding, no spacing)
     if (config.warning_message) {
         const warningTextHeight = warningHeight - LAYOUT.PADDING;
         measureY += warningTextHeight;
     }
+    if (config.message) {
+        const messageTextHeight = messageHeight - LAYOUT.PADDING;
+        measureY += messageTextHeight;
+    }
     config.sides.forEach((side) => {
         const sideHeight = renderSide(measureCtx, side, measureY, canvas.width, 1, imageRefs);
         measureY += sideHeight + measureSpacing;
     });
-    const scaleFactor = Math.max(0.5, Math.min(1, (canvas.height - LAYOUT.PADDING - warningHeight) / measureY));
+    const scaleFactor = Math.max(0.5, Math.min(1, (canvas.height - LAYOUT.PADDING - warningHeight - messageHeight) / measureY));
     drawMockupAndFlorals(ctx, canvas, floralAssets, imageRefs);
-    // Render warning with scaleFactor and get actual height
+    // Render warning & message with scaleFactor and get actual heights
     let actualWarningHeight = 0;
+    let actualMessageHeight = 0;
     if (config.warning_message) {
         actualWarningHeight = renderWarning(ctx, canvas, config.warning_message, scaleFactor);
     }
-    // Calculate currentY: padding top + actual warning height (no spacing)
+    if (config.message) {
+        actualMessageHeight = renderWarning(ctx, canvas, config.message, scaleFactor, actualWarningHeight, "", // message: không cần prefix "Note"
+        DEFAULT_ERROR_COLOR // message: hiển thị màu đỏ
+        );
+    }
+    // Calculate currentY: padding top + actual warning & message height (no spacing)
     let currentY = LAYOUT.PADDING * scaleFactor;
     if (config.warning_message && actualWarningHeight > 0) {
         currentY += actualWarningHeight;
     }
+    if (config.message && actualMessageHeight > 0) {
+        currentY += actualMessageHeight;
+    }
     config.sides.forEach((side) => {
         const sideHeight = renderSide(ctx, side, currentY, canvas.width, scaleFactor, imageRefs);
         currentY += sideHeight + measureSpacing * scaleFactor;
@@ -546,8 +645,8 @@ const renderErrorState = (ctx, canvas, message) => {
     });
     ctx.restore();
 };
-const renderWarning = (ctx, canvas, message, scaleFactor = 1) => {
-    const sanitizedMessage = `Note: ${message.trim()}`;
+const renderWarning = (ctx, canvas, message, scaleFactor = 1, offsetY = 0, prefix = "Note: ", color = DEFAULT_WARNING_COLOR) => {
+    const sanitizedMessage = `${prefix}${message.trim()}`;
     const horizontalPadding = LAYOUT.PADDING * 2 * scaleFactor;
     const maxWidth = canvas.width - horizontalPadding * 2;
     const baseFontSize = LAYOUT.HEADER_FONT_SIZE * 0.7 * scaleFactor;
@@ -556,7 +655,7 @@ const renderWarning = (ctx, canvas, message, scaleFactor = 1) => {
     ctx.save();
     ctx.textAlign = "left";
     ctx.textBaseline = "top";
-    ctx.fillStyle = DEFAULT_WARNING_COLOR;
+    ctx.fillStyle = color;
     ctx.font = `${baseFontSize}px ${LAYOUT.FONT_FAMILY}`;
     let fontSize = baseFontSize;
     let lineGap = LAYOUT.LINE_GAP * scaleFactor;
@@ -575,7 +674,7 @@ const renderWarning = (ctx, canvas, message, scaleFactor = 1) => {
         lines = buildWrappedLines(ctx, sanitizedMessage, maxWidth);
         longestLineWidth = Math.max(...lines.map((line) => ctx.measureText(line).width));
     }
-    const startY = LAYOUT.PADDING * scaleFactor;
+    const startY = LAYOUT.PADDING * scaleFactor + offsetY;
     lines.forEach((line, index) => {
         const y = startY + index * lineHeight;
         ctx.fillText(line, leftX, y);
@@ -599,7 +698,7 @@ const drawMockupAndFlorals = (ctx, canvas, floralAssets, imageRefs) => {
     ctx.drawImage(mockupImg, x, y, width, height);
     // Draw florals
     if (floralAssets.length > 0) {
-        const floralH = Math.min(900, height);
+        const floralH = Math.min(500, height);
         let currentX = x - LAYOUT.FLORAL_SPACING;
         for (let i = floralAssets.length - 1; i >= 0; i--) {
             const img = floralAssets[i];
@@ -928,21 +1027,56 @@ const renderTextPosition = (ctx, position, x, y, maxWidth, displayIndex, showLab
     return drawnHeight;
 };
 const renderIconPosition = (ctx, position, x, y, maxWidth, scaleFactor, imageRefs, options) => {
-    const iconFontSize = LAYOUT.OTHER_FONT_SIZE * scaleFactor;
+    // Dùng cùng font size với Text cho label và value icon
+    const iconFontSize = LAYOUT.TEXT_FONT_SIZE * scaleFactor;
     const lineGap = LAYOUT.LINE_GAP * scaleFactor;
     ctx.save();
-    ctx.font = `${iconFontSize}px ${LAYOUT.FONT_FAMILY}`;
     ctx.fillStyle = LAYOUT.LABEL_COLOR;
     let cursorY = y;
-    const iconText = position.note ? `Icon: ${position.note}` :
-        position.icon === 0
-            ? `Icon: (icon mặc định theo file thêu)`
-            : `Icon: ${position.icon}`;
-    const iconResult = wrapText(ctx, iconText, x, cursorY, maxWidth, iconFontSize + lineGap);
+    // Tách label "Icon:" (in đậm) và phần value (thường)
+    const iconLabel = "Icon:";
+    let iconValue;
+    if (position.is_delete_icon) {
+        // Ưu tiên hiển thị không có icon nếu được đánh dấu xóa
+        iconValue = "(không có icon)";
+    }
+    else if (position.note) {
+        iconValue = position.note;
+    }
+    else if (position.icon_name && position.icon_name.trim().length > 0) {
+        // Nếu có icon_name thì hiển thị tên đó
+        iconValue = position.icon_name;
+    }
+    else if (position.icon === 0) {
+        // Icon mặc định theo file thêu
+        iconValue = "(icon mặc định theo file thêu)";
+    }
+    else {
+        // Fallback: hiển thị mã icon (ép sang string)
+        iconValue = String(position.icon);
+    }
+    // Vẽ label Icon: (bold, màu label mặc định)
+    ctx.font = `bold ${iconFontSize}px ${LAYOUT.FONT_FAMILY}`;
+    ctx.fillText(iconLabel, x, cursorY);
+    const labelWidth = ctx.measureText(iconLabel).width;
+    // Vẽ value kế bên, font thường, màu đỏ giống text value
+    ctx.font = `${iconFontSize}px ${LAYOUT.FONT_FAMILY}`;
+    ctx.fillStyle = DEFAULT_ERROR_COLOR;
+    const valueText = ` ${iconValue}`;
+    ctx.fillText(valueText, x + labelWidth, cursorY);
+    // Reset lại màu về label color cho các phần text tiếp theo (màu chỉ, v.v.)
+    ctx.fillStyle = LAYOUT.LABEL_COLOR;
+    const valueWidth = ctx.measureText(valueText).width;
+    const iconResult = {
+        height: iconFontSize + lineGap,
+        // tổng width của cả label + value, dùng để canh icon image lệch sang phải
+        lastLineWidth: labelWidth + valueWidth,
+        lastLineY: cursorY,
+    };
     // Draw icon image
-    if (position.icon !== 0) {
-        const url = getImageUrl("icon", position.icon);
-        const img = imageRefs.current.get(url);
+    const iconUrl = getIconImageUrl(position);
+    if (iconUrl) {
+        const img = imageRefs.current.get(iconUrl);
         if (img?.complete && img.naturalHeight > 0) {
             const ratio = img.naturalWidth / img.naturalHeight;
             const swatchW = Math.max(1, Math.floor(iconFontSize * ratio));
@@ -955,11 +1089,14 @@ const renderIconPosition = (ctx, position, x, y, maxWidth, scaleFactor, imageRef
     }
     cursorY += iconResult.height;
     // Draw color swatches (prefer layer_colors, fallback to single color)
-    const iconColors = position.layer_colors?.length
-        ? position.layer_colors
-        : position.color
-            ? [position.color]
-            : null;
+    // 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;