embroidery-qc-image 1.0.26 → 1.0.28

package/dist/index.esm.js

@@ -329,24 +329,44 @@ const preloadImages = async (config, imageRefs) => {
         return;
     await Promise.all(entries.map(({ url, cacheKey }) => loadImageAsync(url, imageRefs, cacheKey)));
 };
-const wrapText = (ctx, text, x, y, maxWidth, lineHeight) => {
+const wrapText = (ctx, text, x, y, maxWidth, lineHeight, mockupBounds = null) => {
     const words = text.split(" ");
     const lines = [];
     let currentLine = words[0];
+    let currentY = y;
     for (let i = 1; i < words.length; i++) {
         const testLine = currentLine + " " + words[i];
-        if (ctx.measureText(testLine).width > maxWidth && currentLine.length > 0) {
+        // Tính maxWidth hiệu dụng cho dòng hiện tại
+        const effectiveMaxWidth = getEffectiveMaxWidth(x, currentY, lineHeight, maxWidth, mockupBounds);
+        const testWidth = ctx.measureText(testLine).width;
+        // Kiểm tra overlap với mockup
+        let shouldWrap = false;
+        if (testWidth > effectiveMaxWidth && currentLine.length > 0) {
+            shouldWrap = true;
+        }
+        if (shouldWrap) {
             lines.push(currentLine);
             currentLine = words[i];
+            currentY += lineHeight;
         }
         else {
             currentLine = testLine;
         }
     }
     lines.push(currentLine);
-    let currentY = y;
+    currentY = y;
     lines.forEach((line) => {
-        ctx.fillText(line, x, currentY);
+        // Tính maxWidth hiệu dụng cho từng dòng khi render
+        const effectiveMaxWidth = getEffectiveMaxWidth(x, currentY, lineHeight, maxWidth, mockupBounds);
+        // Nếu dòng quá dài, cắt bớt
+        let lineToRender = line;
+        if (ctx.measureText(line).width > effectiveMaxWidth) {
+            // Cắt từng ký tự cho đến khi vừa
+            while (ctx.measureText(lineToRender).width > effectiveMaxWidth && lineToRender.length > 0) {
+                lineToRender = lineToRender.slice(0, -1);
+            }
+        }
+        ctx.fillText(lineToRender, x, currentY);
         currentY += lineHeight;
     });
     return {
@@ -355,29 +375,46 @@ const wrapText = (ctx, text, x, y, maxWidth, lineHeight) => {
         lastLineY: y + (lines.length - 1) * lineHeight,
     };
 };
-const buildWrappedLines = (ctx, text, maxWidth) => {
+const buildWrappedLines = (ctx, text, maxWidth, startX = 0, startY = 0, lineHeight = 0, mockupBounds = null) => {
     // 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 = [];
+    let currentY = startY;
     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("");
+            if (lineHeight > 0)
+                currentY += lineHeight;
             return;
         }
         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) {
+            // Tính maxWidth hiệu dụng cho dòng hiện tại
+            const effectiveMaxWidth = lineHeight > 0
+                ? getEffectiveMaxWidth(startX, currentY, lineHeight, maxWidth, mockupBounds)
+                : maxWidth;
+            const testWidth = ctx.measureText(testLine).width;
+            // Kiểm tra overlap với mockup
+            let shouldWrap = false;
+            if (testWidth > effectiveMaxWidth && currentLine.length > 0) {
+                shouldWrap = true;
+            }
+            if (shouldWrap) {
                 result.push(currentLine);
                 currentLine = words[i];
+                if (lineHeight > 0)
+                    currentY += lineHeight;
             }
             else {
                 currentLine = testLine;
             }
         }
         result.push(currentLine);
+        if (lineHeight > 0)
+            currentY += lineHeight;
     });
     return result.length ? result : [""];
 };
@@ -512,49 +549,14 @@ const renderEmbroideryCanvas = (canvas, config, canvasSize, imageRefs) => {
         return;
     ctx.textAlign = LAYOUT.TEXT_ALIGN;
     ctx.textBaseline = LAYOUT.TEXT_BASELINE;
-    // Calculate warning & message height (with scaleFactor = 1 for measurement)
-    let warningHeight = 0;
-    let warningLineHeight = 0;
-    let warningLineCount = 0;
-    if (config.warning_message) {
-        const measureWarningCanvas = document.createElement("canvas");
-        measureWarningCanvas.width = canvas.width;
-        measureWarningCanvas.height = canvas.height;
-        const measureWarningCtx = measureWarningCanvas.getContext("2d");
-        if (measureWarningCtx) {
-            measureWarningCtx.textAlign = "left";
-            measureWarningCtx.textBaseline = "top";
-            measureWarningCtx.font = `${LAYOUT.HEADER_FONT_SIZE * 0.7}px ${LAYOUT.FONT_FAMILY}`;
-            const warningLines = buildWrappedLines(measureWarningCtx, `Note: ${config.warning_message.trim()}`, canvas.width - LAYOUT.PADDING * 4);
-            warningLineCount = warningLines.length;
-            warningLineHeight = LAYOUT.HEADER_FONT_SIZE * 0.7 + LAYOUT.LINE_GAP;
-            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) {
             imageRefs.current.set("mockup", mockupImage);
         }
     }
+    // Tính mockup bounds để tránh text overlap
+    const mockupBounds = getMockupBounds(canvas, imageRefs);
     const measureCanvas = document.createElement("canvas");
     measureCanvas.width = canvas.width;
     measureCanvas.height = canvas.height;
@@ -563,23 +565,48 @@ const renderEmbroideryCanvas = (canvas, config, canvasSize, imageRefs) => {
         return;
     measureCtx.textAlign = LAYOUT.TEXT_ALIGN;
     measureCtx.textBaseline = LAYOUT.TEXT_BASELINE;
-    let measureY = LAYOUT.PADDING;
     const measureSpacing = LAYOUT.ELEMENT_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;
+    // Tìm scaleFactor tối ưu bằng binary search trong [0, 1]
+    const maxIterations = 12;
+    const epsilon = 0.001; // độ chính xác cho khoảng cách low-high
+    const contentHeight = canvas.height - LAYOUT.PADDING;
+    let low = 0;
+    let high = 1;
+    for (let i = 0; i < maxIterations; i++) {
+        const testScale = (low + high) / 2;
+        // (Không cần clear measureCanvas vì chỉ dùng để đo chiều cao, nhưng làm sạch cho dễ debug)
+        measureCtx.clearRect(0, 0, measureCanvas.width, measureCanvas.height);
+        // Đo warning & message đúng theo renderWarning, không cộng padding ở đây
+        let testMeasureY = 0;
+        if (config.warning_message) {
+            const testWarningHeight = renderWarning(measureCtx, measureCanvas, config.warning_message, testScale);
+            testMeasureY += testWarningHeight;
+        }
+        if (config.message) {
+            const testMessageHeight = renderWarning(measureCtx, measureCanvas, config.message, testScale, 0, "", DEFAULT_ERROR_COLOR);
+            testMeasureY += testMessageHeight;
+        }
+        // Đo lại chiều cao của các sides với scaleFactor, tiếp nối sau warning/message
+        config.sides.forEach((side) => {
+            const sideHeight = renderSide(measureCtx, side, testMeasureY, canvas.width, canvas.height, testScale, imageRefs, mockupBounds);
+            testMeasureY += sideHeight + measureSpacing * testScale;
+        });
+        // Tổng chiều cao content (không gồm padding)
+        const totalHeight = testMeasureY;
+        if (totalHeight > contentHeight) {
+            // Content đang cao hơn vùng cho phép -> giảm scale
+            high = testScale;
+        }
+        else {
+            // Content vẫn fit trong vùng cho phép -> có thể tăng scale
+            low = testScale;
+        }
+        if (high - low < epsilon) {
+            break;
+        }
     }
-    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 - messageHeight) / measureY));
-    drawMockupAndFlorals(ctx, canvas, imageRefs);
+    const scaleFactor = low;
+    drawMockup(ctx, canvas, imageRefs);
     // Render warning & message with scaleFactor and get actual heights
     let actualWarningHeight = 0;
     let actualMessageHeight = 0;
@@ -592,7 +619,7 @@ const renderEmbroideryCanvas = (canvas, config, canvasSize, imageRefs) => {
         );
     }
     // Calculate currentY: padding top + actual warning & message height (no spacing)
-    let currentY = LAYOUT.PADDING * scaleFactor;
+    let currentY = LAYOUT.PADDING;
     if (config.warning_message && actualWarningHeight > 0) {
         currentY += actualWarningHeight;
     }
@@ -600,7 +627,7 @@ const renderEmbroideryCanvas = (canvas, config, canvasSize, imageRefs) => {
         currentY += actualMessageHeight;
     }
     config.sides.forEach((side) => {
-        const sideHeight = renderSide(ctx, side, currentY, canvas.width, scaleFactor, imageRefs);
+        const sideHeight = renderSide(ctx, side, currentY, canvas.width, canvas.height, scaleFactor, imageRefs, mockupBounds);
         currentY += sideHeight + measureSpacing * scaleFactor;
     });
 };
@@ -678,10 +705,10 @@ const renderWarning = (ctx, canvas, message, scaleFactor = 1, offsetY = 0, prefi
     // Return the actual height of the warning (number of lines * lineHeight)
     return lines.length * lineHeight;
 };
-const drawMockupAndFlorals = (ctx, canvas, imageRefs) => {
+const getMockupBounds = (canvas, imageRefs) => {
     const mockupImg = imageRefs.current.get("mockup");
     if (!mockupImg?.complete || !mockupImg.naturalWidth)
-        return;
+        return null;
     const margin = LAYOUT.PADDING;
     const maxWidth = Math.min(1800, canvas.width * 0.375);
     const maxHeight = canvas.height * 0.375;
@@ -690,10 +717,38 @@ const drawMockupAndFlorals = (ctx, canvas, imageRefs) => {
     const height = Math.max(1, Math.floor(mockupImg.naturalHeight * scale));
     const x = canvas.width - margin - width;
     const y = canvas.height - margin - height;
-    ctx.drawImage(mockupImg, x, y, width, height);
-    // Bỏ phần vẽ florals cạnh mockup vì đã hiển thị cạnh text rồi
+    return { x, y, width, height };
+};
+// Helper function để tính maxWidth hiệu dụng dựa trên vị trí Y và mockupBounds
+const getEffectiveMaxWidth = (x, y, lineHeight, originalMaxWidth, mockupBounds) => {
+    if (!mockupBounds)
+        return originalMaxWidth;
+    // Kiểm tra xem dòng text có nằm trong phạm vi Y của mockup không
+    const lineTopY = y;
+    const lineBottomY = y + lineHeight;
+    const overlapsY = lineTopY < mockupBounds.y + mockupBounds.height && lineBottomY > mockupBounds.y;
+    if (overlapsY) {
+        // Nếu overlap theo Y, giới hạn maxWidth để text không vượt quá mockup.x
+        const maxAllowedWidth = mockupBounds.x - x;
+        // Chỉ giới hạn nếu maxAllowedWidth > 0 và nhỏ hơn originalMaxWidth
+        if (maxAllowedWidth > 0 && maxAllowedWidth < originalMaxWidth) {
+            return maxAllowedWidth;
+        }
+        // Nếu x >= mockupBounds.x, text đã nằm sau mockup, không cần giới hạn
+        // Hoặc nếu maxAllowedWidth >= originalMaxWidth, không cần giới hạn
+    }
+    return originalMaxWidth;
 };
-const renderSide = (ctx, side, startY, width, scaleFactor, imageRefs) => {
+const drawMockup = (ctx, canvas, imageRefs) => {
+    const mockupBounds = getMockupBounds(canvas, imageRefs);
+    if (!mockupBounds)
+        return;
+    const mockupImg = imageRefs.current.get("mockup");
+    if (!mockupImg)
+        return;
+    ctx.drawImage(mockupImg, mockupBounds.x, mockupBounds.y, mockupBounds.width, mockupBounds.height);
+};
+const renderSide = (ctx, side, startY, width, height, scaleFactor, imageRefs, mockupBounds = null) => {
     let currentY = startY;
     const padding = LAYOUT.PADDING * scaleFactor;
     const sideWidth = width - 2 * padding;
@@ -702,7 +757,7 @@ const renderSide = (ctx, side, startY, width, scaleFactor, imageRefs) => {
     const headerFontSize = LAYOUT.HEADER_FONT_SIZE * scaleFactor;
     ctx.font = `bold ${headerFontSize}px ${LAYOUT.HEADER_FONT_FAMILY}`;
     ctx.fillStyle = LAYOUT.HEADER_COLOR;
-    const headerResult = wrapText(ctx, side.print_side.toUpperCase(), padding, currentY, sideWidth, headerFontSize);
+    const headerResult = wrapText(ctx, side.print_side.toUpperCase(), padding, currentY, sideWidth, headerFontSize, mockupBounds);
     // Draw underline
     const underlineY = headerResult.lastLineY + headerFontSize * LAYOUT.UNDERLINE_POSITION;
     ctx.strokeStyle = LAYOUT.HEADER_COLOR;
@@ -763,7 +818,7 @@ const renderSide = (ctx, side, startY, width, scaleFactor, imageRefs) => {
         : { color: true };
     // Render uniform labels (when applicable)
     if (shouldShowUniformLabels) {
-        currentY += renderUniformLabels(ctx, uniformProps, padding, currentY, sideWidth, scaleFactor, imageRefs, textPositions, uniformLabelFields);
+        currentY += renderUniformLabels(ctx, uniformProps, padding, currentY, sideWidth, scaleFactor, imageRefs, textPositions, uniformLabelFields, mockupBounds);
     }
     // Group text positions by common properties
     const textGroups = groupTextPositions(textPositions);
@@ -789,7 +844,7 @@ const renderSide = (ctx, side, startY, width, scaleFactor, imageRefs) => {
                     floral: !uniformProps.isUniform.floral,
                     color: !uniformProps.isUniform.color,
                 };
-            const height = renderTextPosition(ctx, position, padding, currentY, sideWidth, textCounter, showLabels, scaleFactor, imageRefs);
+            const height = renderTextPosition(ctx, position, padding, currentY, sideWidth, textCounter, showLabels, scaleFactor, imageRefs, mockupBounds);
             if (height > 0) {
                 currentY += height + LAYOUT.PADDING * scaleFactor;
                 textCounter++;
@@ -810,7 +865,7 @@ const renderSide = (ctx, side, startY, width, scaleFactor, imageRefs) => {
                 iconColorValue !== null &&
                 uniformProps.values.color === iconColorValue &&
                 iconUsesSingleColor;
-            currentY += renderIconPosition(ctx, position, padding, currentY, sideWidth, scaleFactor, imageRefs, { hideColor });
+            currentY += renderIconPosition(ctx, position, padding, currentY, sideWidth, scaleFactor, imageRefs, { hideColor }, mockupBounds);
             currentY += (LAYOUT.LINE_GAP / 3) * scaleFactor;
         }
     });
@@ -881,7 +936,7 @@ const computeUniformProperties = (textPositions, options) => {
         },
     };
 };
-const renderUniformLabels = (ctx, uniformProps, x, y, maxWidth, scaleFactor, imageRefs, textPositions, fields) => {
+const renderUniformLabels = (ctx, uniformProps, x, y, maxWidth, scaleFactor, imageRefs, textPositions, fields, mockupBounds = null) => {
     const { values } = uniformProps;
     const fontSize = LAYOUT.OTHER_FONT_SIZE * scaleFactor;
     const lineGap = LAYOUT.LINE_GAP * scaleFactor;
@@ -919,7 +974,7 @@ const renderUniformLabels = (ctx, uniformProps, x, y, maxWidth, scaleFactor, ima
         rendered++;
     }
     if (values.shape && values.shape !== "None" && shouldRenderField("shape")) {
-        const result = wrapText(ctx, `Kiểu chữ: ${values.shape}`, x, cursorY, maxWidth, fontSize + lineGap);
+        const result = wrapText(ctx, `Kiểu chữ: ${values.shape}`, x, cursorY, maxWidth, fontSize + lineGap, mockupBounds);
         cursorY += result.height;
         rendered++;
     }
@@ -929,14 +984,20 @@ const renderUniformLabels = (ctx, uniformProps, x, y, maxWidth, scaleFactor, ima
             : [values.color];
         const swatchH = Math.floor(fontSize * LAYOUT.SWATCH_HEIGHT_RATIO);
         const totalSwatchWidth = calculateSwatchesWidth(colors, swatchH, scaleFactor, imageRefs);
-        // Vẽ text với maxWidth bình thường (không trừ SWATCH_RESERVED_SPACE)
-        const result = wrapText(ctx, `Màu chỉ: ${values.color}`, x, cursorY, maxWidth, fontSize + lineGap);
+        // Tính effectiveMaxWidth cho dòng này để tránh mockup
+        const lineHeight = fontSize + lineGap;
+        const effectiveMaxWidth = mockupBounds
+            ? getEffectiveMaxWidth(x, cursorY, lineHeight, maxWidth, mockupBounds)
+            : maxWidth;
+        // Vẽ text với effectiveMaxWidth
+        const result = wrapText(ctx, `Màu chỉ: ${values.color}`, x, cursorY, effectiveMaxWidth, lineHeight, mockupBounds);
         // Kiểm tra xem có đủ chỗ cho swatches trên cùng dòng không
+        // Sử dụng effectiveMaxWidth thay vì maxWidth
         const textEndX = x + Math.ceil(result.lastLineWidth);
         const spacing = LAYOUT.ELEMENT_SPACING * scaleFactor;
         const swatchesStartX = textEndX + spacing;
         const swatchesEndX = swatchesStartX + totalSwatchWidth;
-        const shouldWrapSwatches = swatchesEndX > x + maxWidth;
+        const shouldWrapSwatches = swatchesEndX > x + effectiveMaxWidth;
         let swatchX;
         let swatchY;
         if (shouldWrapSwatches) {
@@ -969,16 +1030,16 @@ const renderUniformLabels = (ctx, uniformProps, x, y, maxWidth, scaleFactor, ima
         }
         // Line height giống icon_image: floralH + lineGap
         const floralLineHeight = floralH + lineGap;
-        // Text align bottom: đặt text ở dưới cùng của dòng
-        const textBottomY = cursorY + floralH;
+        // Text align center: căn giữa theo chiều dọc trong block
+        const textCenterY = cursorY + floralH / 2;
         // Đo width trước khi vẽ
         ctx.font = `${fontSize}px ${LAYOUT.FONT_FAMILY}`;
         const labelText = `Mẫu hoa: ${values.floral}`;
         const labelWidth = ctx.measureText(labelText).width;
-        // Vẽ text với textBaseline = bottom
-        ctx.textBaseline = "bottom";
+        // Vẽ text với textBaseline = middle để align center
+        ctx.textBaseline = "middle";
         ctx.fillStyle = LAYOUT.LABEL_COLOR;
-        ctx.fillText(labelText, x, textBottomY);
+        ctx.fillText(labelText, x, textCenterY);
         // Reset textBaseline về top cho các phần tiếp theo
         ctx.textBaseline = LAYOUT.TEXT_BASELINE;
         // Kiểm tra xem có đủ chỗ cho ảnh floral trên cùng dòng không
@@ -992,13 +1053,13 @@ const renderUniformLabels = (ctx, uniformProps, x, y, maxWidth, scaleFactor, ima
         if (shouldWrapFloral) {
             // Không đủ chỗ, cho ảnh floral xuống dòng mới
             floralX = x;
-            floralY = textBottomY + lineGap;
+            floralY = cursorY + floralH + lineGap;
             cursorY += floralLineHeight;
         }
         else {
-            // Đủ chỗ, vẽ ảnh floral ngay sau text trên cùng dòng
+            // Đủ chỗ, vẽ ảnh floral ngay sau text trên cùng dòng, align center
             floralX = floralStartX;
-            floralY = textBottomY - floralH; // Align bottom với text
+            floralY = textCenterY - floralH / 2; // Align center với text
             cursorY += floralLineHeight;
         }
         // Vẽ ảnh floral
@@ -1013,19 +1074,17 @@ const renderUniformLabels = (ctx, uniformProps, x, y, maxWidth, scaleFactor, ima
     return cursorY - y;
 };
 const renderTextPosition = (ctx, position, x, y, maxWidth, // tổng chiều rộng usable (không tính padding ngoài)
-displayIndex, showLabels, scaleFactor, imageRefs) => {
+displayIndex, showLabels, scaleFactor, imageRefs, mockupBounds = null) => {
     ctx.save();
     const textFontSize = LAYOUT.TEXT_FONT_SIZE * scaleFactor;
     const otherFontSize = LAYOUT.OTHER_FONT_SIZE * scaleFactor;
     const lineGap = LAYOUT.LINE_GAP * scaleFactor;
     let currentY = y;
-    let drawnHeight = 0;
     // Chuẩn hóa xuống dòng:
     // - Hỗ trợ cả newline thật (\n) và chuỗi literal "\\n" từ JSON
     const normalizeNewlines = (text) => text
         .replace(/\r\n/g, "\n")
-        .replace(/\r/g, "\n")
-        .replace(/\\n/g, "\n");
+        .replace(/\r/g, "\n");
     // Get display text (handle empty/null/undefined) sau khi normalize
     const rawOriginalText = position.text ?? "";
     const normalizedText = normalizeNewlines(rawOriginalText);
@@ -1050,37 +1109,52 @@ displayIndex, showLabels, scaleFactor, imageRefs) => {
     const lines = rawText.split("\n");
     // Tính font-size hiệu dụng cho phần value sao cho:
     // - Không vượt quá availableWidth
+    // - Tính đến mockup bounds cho từng dòng
     // - Có thể thu nhỏ tùy ý (theo yêu cầu, không giới hạn tối thiểu)
-    const measureMaxLineWidth = (fontSize) => {
-        ctx.font = `${fontSize}px ${LAYOUT.FONT_FAMILY}`;
-        let maxLineWidth = 0;
-        lines.forEach((line) => {
-            const w = ctx.measureText(line).width;
-            if (w > maxLineWidth)
-                maxLineWidth = w;
-        });
-        return maxLineWidth;
-    };
     let effectiveTextFontSize = textFontSize;
     if (!isEmptyText) {
-        const baseMaxWidth = measureMaxLineWidth(textFontSize);
-        if (baseMaxWidth > availableWidth) {
-            const shrinkRatio = availableWidth / baseMaxWidth;
-            effectiveTextFontSize = textFontSize * shrinkRatio;
-        }
+        // Tính vị trí Y của từng dòng (textCenterY và lineY)
+        const valueLineHeight = textFontSize;
+        const textBlockHeight = lines.length * valueLineHeight;
+        const textCenterY = currentY + textBlockHeight / 2;
+        // Tính font size cần thiết cho từng dòng dựa trên effectiveMaxWidth của nó
+        let minShrinkRatio = 1;
+        ctx.font = `${textFontSize}px ${LAYOUT.FONT_FAMILY}`;
+        lines.forEach((line, idx) => {
+            const lineY = textCenterY - (lines.length - 1) / 2 * valueLineHeight + idx * valueLineHeight;
+            // Tính effectiveMaxWidth cho dòng này
+            const effectiveMaxWidth = mockupBounds
+                ? getEffectiveMaxWidth(valueStartX, lineY, valueLineHeight, availableWidth, mockupBounds)
+                : availableWidth;
+            const lineWidth = ctx.measureText(line).width;
+            if (lineWidth > effectiveMaxWidth) {
+                // Cần thu nhỏ font cho dòng này
+                const shrinkRatio = effectiveMaxWidth / lineWidth;
+                if (shrinkRatio < minShrinkRatio) {
+                    minShrinkRatio = shrinkRatio;
+                }
+            }
+        });
+        effectiveTextFontSize = textFontSize * minShrinkRatio;
     }
-    // Vẽ phần value với font hiệu dụng, màu đỏ
+    // Line height luôn theo Text label (textFontSize), không theo effectiveTextFontSize
+    const valueLineHeight = textFontSize;
+    const textBlockHeight = lines.length * valueLineHeight;
+    // Text align center: căn giữa theo chiều dọc trong block
+    const textCenterY = currentY + textBlockHeight / 2;
+    // Vẽ phần value với font hiệu dụng, màu đỏ, align center
+    ctx.textBaseline = "middle";
     ctx.font = `${effectiveTextFontSize}px ${LAYOUT.FONT_FAMILY}`;
     ctx.fillStyle = DEFAULT_ERROR_COLOR;
-    const valueLineHeight = effectiveTextFontSize; // giữ giống wrapText cũ (lineHeight = fontSize)
-    let localY = currentY;
+    // Vẽ từ trên xuống: căn giữa mỗi dòng
+    // Font size đã được tính để vừa với effectiveMaxWidth của từng dòng, nên không cần cắt text
     lines.forEach((line, idx) => {
-        ctx.fillText(line, valueStartX, localY);
-        localY += valueLineHeight;
+        const lineY = textCenterY - (lines.length - 1) / 2 * valueLineHeight + idx * valueLineHeight;
+        ctx.fillText(line, valueStartX, lineY);
     });
-    const textBlockHeight = lines.length * valueLineHeight;
+    // Reset textBaseline về top cho các phần tiếp theo
+    ctx.textBaseline = LAYOUT.TEXT_BASELINE;
     currentY += textBlockHeight;
-    drawnHeight += textBlockHeight;
     // Draw additional labels (skip when text is empty)
     if (!isEmptyText) {
         currentY += lineGap;
@@ -1089,9 +1163,8 @@ displayIndex, showLabels, scaleFactor, imageRefs) => {
         // Lưu ý: phần dưới này vẫn có thể wrap theo maxWidth vì đây chỉ là label mô tả,
         // không phải nội dung Text chính cần giữ nguyên format.
         if (showLabels.shape && position.text_shape) {
-            const result = wrapText(ctx, `Kiểu chữ: ${position.text_shape}`, x, currentY, maxWidth, otherFontSize + lineGap);
+            const result = wrapText(ctx, `Kiểu chữ: ${position.text_shape}`, x, currentY, maxWidth, otherFontSize + lineGap, mockupBounds);
             currentY += result.height;
-            drawnHeight += result.height;
         }
         if (showLabels.font && position.font) {
             // Render "Font: " với font mặc định
@@ -1113,7 +1186,6 @@ displayIndex, showLabels, scaleFactor, imageRefs) => {
             // Tính toán height và di chuyển cursorY
             const lineHeight = otherFontSize + lineGap;
             currentY += lineHeight;
-            drawnHeight += lineHeight;
         }
         if (showLabels.color) {
             const colorValue = position.character_colors?.join(", ") || position.color;
@@ -1121,14 +1193,20 @@ displayIndex, showLabels, scaleFactor, imageRefs) => {
                 const colors = position.character_colors || [position.color];
                 const swatchH = Math.floor(otherFontSize * LAYOUT.SWATCH_HEIGHT_RATIO);
                 const totalSwatchWidth = calculateSwatchesWidth(colors, swatchH, scaleFactor, imageRefs);
-                // Vẽ text với maxWidth bình thường (không trừ SWATCH_RESERVED_SPACE)
-                const result = wrapText(ctx, `Màu chỉ: ${colorValue}`, x, currentY, maxWidth, otherFontSize + lineGap);
+                // Tính effectiveMaxWidth cho dòng này để tránh mockup
+                const lineHeight = otherFontSize + lineGap;
+                const effectiveMaxWidth = mockupBounds
+                    ? getEffectiveMaxWidth(x, currentY, lineHeight, maxWidth, mockupBounds)
+                    : maxWidth;
+                // Vẽ text với effectiveMaxWidth
+                const result = wrapText(ctx, `Màu chỉ: ${colorValue}`, x, currentY, effectiveMaxWidth, lineHeight, mockupBounds);
                 // Kiểm tra xem có đủ chỗ cho swatches trên cùng dòng không
+                // Sử dụng effectiveMaxWidth thay vì maxWidth
                 const textEndX = x + Math.ceil(result.lastLineWidth);
                 const spacing = LAYOUT.ELEMENT_SPACING * scaleFactor;
                 const swatchesStartX = textEndX + spacing;
                 const swatchesEndX = swatchesStartX + totalSwatchWidth;
-                const shouldWrapSwatches = swatchesEndX > x + maxWidth;
+                const shouldWrapSwatches = swatchesEndX > x + effectiveMaxWidth;
                 let swatchX;
                 let swatchY;
                 if (shouldWrapSwatches) {
@@ -1136,19 +1214,16 @@ displayIndex, showLabels, scaleFactor, imageRefs) => {
                     swatchX = x;
                     swatchY = result.lastLineY + otherFontSize + lineGap;
                     currentY += result.height + otherFontSize + lineGap;
-                    drawnHeight += result.height + otherFontSize + lineGap;
                 }
                 else {
                     // Đủ chỗ, vẽ swatches ngay sau text trên cùng dòng
                     swatchX = swatchesStartX;
                     swatchY = result.lastLineY + Math.floor(otherFontSize / 2 - swatchH / 2);
                     currentY += result.height;
-                    drawnHeight += result.height;
                 }
                 drawSwatches(ctx, colors, swatchX, swatchY, swatchH, scaleFactor, imageRefs);
                 if (shouldWrapSwatches) {
                     currentY += swatchH;
-                    drawnHeight += swatchH;
                 }
             }
         }
@@ -1164,16 +1239,16 @@ displayIndex, showLabels, scaleFactor, imageRefs) => {
             }
             // Line height giống icon_image: floralH + lineGap
             const floralLineHeight = floralH + lineGap;
-            // Text align bottom: đặt text ở dưới cùng của dòng
-            const textBottomY = currentY + floralH;
+            // Text align center: căn giữa theo chiều dọc trong block
+            const textCenterY = currentY + floralH / 2;
             // Đo width trước khi vẽ
             ctx.font = `${otherFontSize}px ${LAYOUT.FONT_FAMILY}`;
             const labelText = `Mẫu hoa: ${position.floral_pattern}`;
             const labelWidth = ctx.measureText(labelText).width;
-            // Vẽ text với textBaseline = bottom
-            ctx.textBaseline = "bottom";
+            // Vẽ text với textBaseline = middle để align center
+            ctx.textBaseline = "middle";
             ctx.fillStyle = LAYOUT.LABEL_COLOR;
-            ctx.fillText(labelText, x, textBottomY);
+            ctx.fillText(labelText, x, textCenterY);
             // Reset textBaseline về top cho các phần tiếp theo
             ctx.textBaseline = LAYOUT.TEXT_BASELINE;
             // Kiểm tra xem có đủ chỗ cho ảnh floral trên cùng dòng không
@@ -1187,16 +1262,14 @@ displayIndex, showLabels, scaleFactor, imageRefs) => {
             if (shouldWrapFloral) {
                 // Không đủ chỗ, cho ảnh floral xuống dòng mới
                 floralX = x;
-                floralY = textBottomY + lineGap;
+                floralY = currentY + floralH + lineGap;
                 currentY += floralLineHeight;
-                drawnHeight += floralLineHeight;
             }
             else {
-                // Đủ chỗ, vẽ ảnh floral ngay sau text trên cùng dòng
+                // Đủ chỗ, vẽ ảnh floral ngay sau text trên cùng dòng, align center
                 floralX = floralStartX;
-                floralY = textBottomY - floralH; // Align bottom với text
+                floralY = textCenterY - floralH / 2; // Align center với text
                 currentY += floralLineHeight;
-                drawnHeight += floralLineHeight;
             }
             // Vẽ ảnh floral
             if (floralImg?.complete && floralImg.naturalHeight > 0) {
@@ -1205,9 +1278,10 @@ displayIndex, showLabels, scaleFactor, imageRefs) => {
         }
     }
     ctx.restore();
-    return drawnHeight;
+    // Trả về toàn bộ chiều cao đã sử dụng trong block này
+    return currentY - y;
 };
-const renderIconPosition = (ctx, position, x, y, maxWidth, scaleFactor, imageRefs, options) => {
+const renderIconPosition = (ctx, position, x, y, maxWidth, scaleFactor, imageRefs, options, mockupBounds = null) => {
     // 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;
@@ -1239,30 +1313,148 @@ const renderIconPosition = (ctx, position, x, y, maxWidth, scaleFactor, imageRef
     // Kiểm tra xem có icon_image không để tính height phù hợp
     const hasIconImage = position.icon_image && position.icon_image.trim().length > 0;
     const iconImageHeight = hasIconImage ? iconFontSize * 2 : iconFontSize;
-    // Text align bottom: đặt text ở dưới cùng của dòng
-    const textBottomY = cursorY + iconImageHeight;
-    // Đo width trước khi vẽ
+    // Đo width của label
     ctx.font = `bold ${iconFontSize}px ${LAYOUT.FONT_FAMILY}`;
     const labelWidth = ctx.measureText(iconLabel).width;
-    ctx.font = `${iconFontSize}px ${LAYOUT.FONT_FAMILY}`;
-    const valueText = ` ${iconValue}`;
-    const valueWidth = ctx.measureText(valueText).width;
-    // Vẽ text với textBaseline = bottom
-    ctx.textBaseline = "bottom";
+    // Icon value không cần chuẩn hóa xuống dòng, xử lý như một dòng text đơn giản
+    // Tính kích thước icon_image nếu có để chừa khoảng trống
+    let iconImageReservedWidth = 0;
+    if (hasIconImage) {
+        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 iconHeight = iconFontSize * 2;
+                const iconWidth = Math.max(1, Math.floor(iconHeight * ratio));
+                iconImageReservedWidth = iconWidth + LAYOUT.ELEMENT_SPACING * scaleFactor;
+            }
+        }
+    }
+    // Tính available width cho icon value (trừ đi khoảng trống cho icon_image)
+    const availableWidth = Math.max(1, maxWidth - labelWidth - iconImageReservedWidth);
+    // Tính font-size hiệu dụng cho icon value
+    // Giới hạn thu nhỏ tối đa 50% (tối thiểu = iconFontSize * 0.5)
+    const MIN_ICON_VALUE_FONT_SIZE = iconFontSize * 0.5;
+    const measureIconValueWidth = (fontSize) => {
+        ctx.font = `${fontSize}px ${LAYOUT.FONT_FAMILY}`;
+        return ctx.measureText(` ${iconValue}`).width;
+    };
+    let effectiveIconValueFontSize = iconFontSize;
+    const baseMaxWidth = measureIconValueWidth(iconFontSize);
+    let needsWrap = false;
+    if (baseMaxWidth > availableWidth) {
+        const shrinkRatio = availableWidth / baseMaxWidth;
+        effectiveIconValueFontSize = Math.max(MIN_ICON_VALUE_FONT_SIZE, iconFontSize * shrinkRatio);
+        // Kiểm tra xem sau khi thu nhỏ đến 50% có vẫn overflow không
+        const minMaxWidth = measureIconValueWidth(MIN_ICON_VALUE_FONT_SIZE);
+        if (minMaxWidth > availableWidth) {
+            // Vẫn overflow, cần dùng wrap text
+            needsWrap = true;
+            effectiveIconValueFontSize = MIN_ICON_VALUE_FONT_SIZE;
+        }
+    }
+    // Tính line height và block height cho icon value
+    const valueLineHeight = effectiveIconValueFontSize;
+    let allWrappedLines = [];
+    // Text align center: căn giữa theo chiều dọc trong block
+    const textCenterY = cursorY + iconImageHeight / 2;
+    const valueStartX = x + labelWidth;
+    if (needsWrap) {
+        // Dùng wrap text logic
+        const wrappedLines = buildWrappedLines(ctx, iconValue, availableWidth, valueStartX, textCenterY, valueLineHeight, mockupBounds);
+        allWrappedLines = wrappedLines;
+        wrappedLines.length * valueLineHeight;
+    }
+    else {
+        // Không cần wrap, chỉ một dòng
+        allWrappedLines = [iconValue];
+    }
+    // Vẽ label với textBaseline = middle để align center với value
+    ctx.textBaseline = "middle";
     ctx.font = `bold ${iconFontSize}px ${LAYOUT.FONT_FAMILY}`;
     ctx.fillStyle = LAYOUT.LABEL_COLOR;
-    ctx.fillText(iconLabel, x, textBottomY);
-    ctx.font = `${iconFontSize}px ${LAYOUT.FONT_FAMILY}`;
+    ctx.fillText(iconLabel, x, textCenterY);
+    // Vẽ icon value với align center
+    ctx.font = `${effectiveIconValueFontSize}px ${LAYOUT.FONT_FAMILY}`;
     ctx.fillStyle = DEFAULT_ERROR_COLOR;
-    ctx.fillText(valueText, x + labelWidth, textBottomY);
+    let maxValueLineWidth = 0;
+    // Vẽ icon value, căn giữa theo chiều dọc
+    if (needsWrap) {
+        // Có nhiều dòng sau khi wrap
+        allWrappedLines.forEach((line, index) => {
+            const lineY = textCenterY - (allWrappedLines.length - 1) / 2 * valueLineHeight + index * valueLineHeight;
+            // Kiểm tra overlap với mockup và điều chỉnh text nếu cần
+            if (mockupBounds) {
+                const effectiveMaxWidth = getEffectiveMaxWidth(valueStartX, lineY, valueLineHeight, availableWidth, mockupBounds);
+                const lineWidth = ctx.measureText(line).width;
+                if (lineWidth > effectiveMaxWidth) {
+                    // Cắt text cho đến khi vừa với effectiveMaxWidth
+                    let truncatedLine = line;
+                    while (ctx.measureText(truncatedLine).width > effectiveMaxWidth && truncatedLine.length > 0) {
+                        truncatedLine = truncatedLine.slice(0, -1);
+                    }
+                    ctx.fillText(truncatedLine, valueStartX, lineY);
+                    const w = ctx.measureText(truncatedLine).width;
+                    if (w > maxValueLineWidth)
+                        maxValueLineWidth = w;
+                }
+                else {
+                    ctx.fillText(line, valueStartX, lineY);
+                    const w = ctx.measureText(line).width;
+                    if (w > maxValueLineWidth)
+                        maxValueLineWidth = w;
+                }
+            }
+            else {
+                ctx.fillText(line, valueStartX, lineY);
+                const w = ctx.measureText(line).width;
+                if (w > maxValueLineWidth)
+                    maxValueLineWidth = w;
+            }
+        });
+    }
+    else {
+        // Chỉ một dòng, căn giữa
+        const lineText = ` ${iconValue}`;
+        // Kiểm tra overlap với mockup và điều chỉnh text nếu cần
+        if (mockupBounds) {
+            const effectiveMaxWidth = getEffectiveMaxWidth(valueStartX, textCenterY, valueLineHeight, availableWidth, mockupBounds);
+            const lineWidth = ctx.measureText(lineText).width;
+            if (lineWidth > effectiveMaxWidth) {
+                // Cắt text cho đến khi vừa với effectiveMaxWidth
+                let truncatedLine = lineText;
+                while (ctx.measureText(truncatedLine).width > effectiveMaxWidth && truncatedLine.length > 0) {
+                    truncatedLine = truncatedLine.slice(0, -1);
+                }
+                ctx.fillText(truncatedLine, valueStartX, textCenterY);
+                const w = ctx.measureText(truncatedLine).width;
+                if (w > maxValueLineWidth)
+                    maxValueLineWidth = w;
+            }
+            else {
+                ctx.fillText(lineText, valueStartX, textCenterY);
+                const w = ctx.measureText(lineText).width;
+                if (w > maxValueLineWidth)
+                    maxValueLineWidth = w;
+            }
+        }
+        else {
+            ctx.fillText(lineText, valueStartX, textCenterY);
+            const w = ctx.measureText(lineText).width;
+            if (w > maxValueLineWidth)
+                maxValueLineWidth = w;
+        }
+    }
     ctx.fillStyle = LAYOUT.LABEL_COLOR;
     // Reset textBaseline về top cho các phần tiếp theo
     ctx.textBaseline = LAYOUT.TEXT_BASELINE;
     const iconResult = {
         height: iconImageHeight + lineGap,
         // tổng width của cả label + value, dùng để canh icon image lệch sang phải
-        lastLineWidth: labelWidth + valueWidth};
-    // Draw icon image
+        lastLineWidth: labelWidth + maxValueLineWidth};
+    // Kiểm tra xem phần icon image có vượt quá canvas không trước khi render
+    // Draw icon image (không tự cắt theo canvasHeight, việc đảm bảo fit do scaleFactor xử lý)
     const iconUrl = getIconImageUrl(position);
     if (iconUrl) {
         const img = imageRefs.current.get(iconUrl);
@@ -1274,7 +1466,7 @@ const renderIconPosition = (ctx, position, x, y, maxWidth, scaleFactor, imageRef
             const iconX = x +
                 Math.ceil(iconResult.lastLineWidth) +
                 LAYOUT.ELEMENT_SPACING * scaleFactor;
-            const iconY = textBottomY - iconHeight; // Align bottom với text
+            const iconY = textCenterY - iconHeight / 2; // Align center với text
             ctx.drawImage(img, iconX, iconY, swatchW, iconHeight);
         }
     }
@@ -1296,34 +1488,51 @@ const renderIconPosition = (ctx, position, x, y, maxWidth, scaleFactor, imageRef
         const otherFontSize = LAYOUT.OTHER_FONT_SIZE * scaleFactor;
         const swatchH = Math.floor(otherFontSize * LAYOUT.SWATCH_HEIGHT_RATIO);
         const totalSwatchWidth = calculateSwatchesWidth(iconColors, swatchH, scaleFactor, imageRefs);
-        // Set font về OTHER_FONT_SIZE trước khi vẽ text "Màu chỉ:"
+        // Tính effectiveMaxWidth cho dòng này để tránh mockup
+        const lineHeight = otherFontSize + lineGap;
+        const effectiveMaxWidth = mockupBounds
+            ? getEffectiveMaxWidth(x, cursorY, lineHeight, maxWidth, mockupBounds)
+            : maxWidth;
+        // Tính toán trước để kiểm tra xem có đủ chỗ không
+        // Đo chiều cao của text "Màu chỉ:" trước
         ctx.font = `${otherFontSize}px ${LAYOUT.FONT_FAMILY}`;
-        ctx.fillStyle = LAYOUT.LABEL_COLOR;
-        // Vẽ text với maxWidth bình thường (không trừ SWATCH_RESERVED_SPACE)
-        const colorResult = wrapText(ctx, `Màu chỉ: ${iconColors.join(", ")}`, x, cursorY, maxWidth, otherFontSize + lineGap);
+        const testText = `Màu chỉ: ${iconColors.join(", ")}`;
+        const testLines = buildWrappedLines(ctx, testText, effectiveMaxWidth, x, cursorY, lineHeight, mockupBounds);
+        testLines.length * lineHeight;
         // Kiểm tra xem có đủ chỗ cho swatches trên cùng dòng không
-        const textEndX = x + Math.ceil(colorResult.lastLineWidth);
+        const testTextWidth = Math.max(...testLines.map(line => ctx.measureText(line).width));
+        const textEndX = x + testTextWidth;
         const spacing = LAYOUT.ELEMENT_SPACING * scaleFactor;
         const swatchesStartX = textEndX + spacing;
         const swatchesEndX = swatchesStartX + totalSwatchWidth;
-        const shouldWrapSwatches = swatchesEndX > x + maxWidth;
+        const shouldWrapSwatches = swatchesEndX > x + effectiveMaxWidth;
+        if (shouldWrapSwatches) ;
+        else {
+            // Swatches trên cùng dòng với text
+            cursorY + (testLines.length - 1) * lineHeight;
+        }
+        // Luôn render text và swatches; đảm bảo fit bằng scaleFactor ở tầng trên
+        ctx.fillStyle = LAYOUT.LABEL_COLOR;
+        const colorResult = wrapText(ctx, testText, x, cursorY, effectiveMaxWidth, lineHeight, mockupBounds);
+        // Cập nhật cursorY sau khi render text
+        cursorY += colorResult.height;
         let swatchX;
         let swatchY;
         if (shouldWrapSwatches) {
             // Không đủ chỗ, cho TẤT CẢ swatches xuống dòng mới
             swatchX = x;
-            swatchY = colorResult.lastLineY + otherFontSize + lineGap;
-            cursorY += colorResult.height + otherFontSize + lineGap;
+            swatchY = cursorY;
+            // Render swatches (đã kiểm tra overflow ở trên)
+            drawSwatches(ctx, iconColors, swatchX, swatchY, swatchH, scaleFactor, imageRefs);
+            cursorY = swatchY + swatchH;
         }
         else {
             // Đủ chỗ, vẽ swatches ngay sau text trên cùng dòng
             swatchX = swatchesStartX;
             swatchY = colorResult.lastLineY + Math.floor(otherFontSize / 2 - swatchH / 2);
-            cursorY += colorResult.height;
-        }
-        drawSwatches(ctx, iconColors, swatchX, swatchY, swatchH, scaleFactor, imageRefs);
-        if (shouldWrapSwatches) {
-            cursorY += swatchH;
+            // Render swatches (đã kiểm tra overflow ở trên)
+            drawSwatches(ctx, iconColors, swatchX, swatchY, swatchH, scaleFactor, imageRefs);
+            // cursorY đã được cập nhật ở trên
         }
     }
     ctx.restore();