@nasser-sw/fabric 7.0.1-beta13 → 7.0.1-beta14

package/src/shapes/Text/Text.ts

@@ -19,9 +19,11 @@ import type {
 import { classRegistry } from '../../ClassRegistry';
 import { graphemeSplit } from '../../util/lang_string';
 import { createCanvasElementFor } from '../../util/misc/dom';
-import { layoutText, type LayoutResult, type TextLayoutOptions } from '../../text/layout';
-import { measureGrapheme, measureGraphemeWithKerning } from '../../text/measure';
-import { applyEllipsis } from '../../text/ellipsis';
+import {
+  layoutText,
+  type LayoutResult,
+  type TextLayoutOptions,
+} from '../../text/layout';
 import { segmentGraphemes } from '../../text/unicode';
 import type { TextStyleArray } from '../../util/misc/textStyles';
 import {
@@ -80,6 +82,7 @@ export type TextLinesInfo = {
   graphemeLines: string[][];
   graphemeText: string[];
   _unwrappedLines: string[][];
+  width?: number;
 };
 
 /**
@@ -501,12 +504,20 @@ export class FabricText<
    * Uses browser lines when available for pixel-perfect consistency.
    */
   _splitText(): TextLinesInfo {
-    // Check if we have valid browser lines and should use them
-    const browserLines = getBrowserLines(this);
-    if (browserLines && this.useOverlayEditing) {
-      return this._splitTextFromBrowserLines(browserLines);
+    // For justify text with overlay editing, always use normal fabric wrapping
+    if (this.textAlign.includes('justify') && this.useOverlayEditing) {
+      console.log('🧹 JUSTIFY OVERLAY: Using fabric wrapping');
+      (this as any).__lastBrowserLines = null;
+      (this as any).__lastBrowserLinesHash = null;
+    } else {
+      // Check if we have valid browser lines for non-justify text
+      const browserLinesInfo = getBrowserLines(this);
+      if (browserLinesInfo && this.useOverlayEditing) {
+        (this as any)._browserWrappingWidth = browserLinesInfo.width;
+        return this._splitTextFromBrowserLines(browserLinesInfo.lines);
+      }
     }
-    
+
     const newLines = this._splitTextIntoLines(this.text);
     this.textLines = newLines.lines;
     this._textLines = newLines.graphemeLines;
@@ -531,7 +542,7 @@ export class FabricText<
       graphemeLines.push(lineGraphemes);
       unwrappedLines.push(lineGraphemes);
       graphemeText = graphemeText.concat(lineGraphemes);
-      
+
       // Add newline separator between lines (except for the last line)
       if (browserLine !== browserLines[browserLines.length - 1]) {
         graphemeText.push('\n');
@@ -568,12 +579,12 @@ export class FabricText<
       this._scheduleInitAfterFontLoad();
       // Continue with fallback measurements for now
     }
-    
+
     // Use advanced layout if enabled
     if (this.enableAdvancedLayout && !this.path) {
       return this.initDimensionsAdvanced();
     }
-    
+
     this._splitText();
     this._clearCache();
     this.dirty = true;
@@ -591,10 +602,16 @@ export class FabricText<
       if (this.__charBounds && this.__charBounds.length > 0) {
         this.enlargeSpaces();
       } else {
-        console.warn('⚠️ __charBounds not ready for justify alignment, deferring enlargeSpaces');
+        console.warn(
+          '⚠️ __charBounds not ready for justify alignment, deferring enlargeSpaces',
+        );
         // Defer the justify calculation until the next frame
         setTimeout(() => {
-          if (this.__charBounds && this.__charBounds.length > 0 && this.enlargeSpaces) {
+          if (
+            this.__charBounds &&
+            this.__charBounds.length > 0 &&
+            this.enlargeSpaces
+          ) {
             console.log('🔧 Applying deferred justify alignment');
             this.enlargeSpaces();
             this.canvas?.requestRenderAll();
@@ -616,11 +633,18 @@ export class FabricText<
       charBound,
       spaces;
     const isRtl = this.direction === 'rtl';
-    
+    // use browser wrapping width if available
+    const justificationWidth =
+      (this as any)._browserWrappingWidth || this.width;
+    if ((this as any)._browserWrappingWidth) {
+      (this as any)._browserWrappingWidth = undefined;
+    }
+
     for (let i = 0, len = this._textLines.length; i < len; i++) {
       if (
         !this.textAlign.includes('justify') ||
-        (i === len - 1 || this.isEndOfWrapping(i))
+        i === len - 1 ||
+        this.isEndOfWrapping(i)
       ) {
         continue;
       }
@@ -628,21 +652,25 @@ export class FabricText<
       line = this._textLines[i];
       currentLineWidth = this.getLineWidth(i);
       if (
-        currentLineWidth < this.width &&
+        currentLineWidth < justificationWidth &&
         (spaces = this.textLines[i].match(this._reSpacesAndTabs))
       ) {
         numberOfSpaces = spaces.length;
-        diffSpace = (this.width - currentLineWidth) / numberOfSpaces;
-        
+        diffSpace = (justificationWidth - currentLineWidth) / numberOfSpaces;
+
         console.log(`🔧 EnlargeSpaces Line ${i}:`);
-        console.log(`   Current width: ${currentLineWidth}, Target: ${this.width}`);
-        console.log(`   Spaces: ${numberOfSpaces}, diffSpace: ${diffSpace.toFixed(2)}`);
-        
+        console.log(
+          `   Current width: ${currentLineWidth}, Target: ${justificationWidth}`,
+        );
+        console.log(
+          `   Spaces: ${numberOfSpaces}, diffSpace: ${diffSpace.toFixed(2)}`,
+        );
+
         if (isRtl) {
           // For RTL text, we need to redistribute spaces while maintaining correct visual order
           // The key insight is that RTL text is stored in logical order but displayed in visual order
           // We need to adjust bounds to account for the visual positioning
-          
+
           // First, collect all space positions
           const spaceIndices = [];
           for (let j = 0; j < line.length; j++) {
@@ -650,10 +678,10 @@ export class FabricText<
               spaceIndices.push(j);
             }
           }
-          
+
           // Calculate total expansion
           const totalExpansion = diffSpace * numberOfSpaces;
-          
+
           // For RTL, we need to work backwards through the visual positions
           // but still update logical positions correctly
           let spaceCount = 0;
@@ -665,7 +693,7 @@ export class FabricText<
                 charBound.kernedWidth += diffSpace;
                 spaceCount++;
               }
-              
+
               // For RTL, shift all characters to the right by the total expansion
               // minus the expansion that comes after this character
               const remainingSpaces = numberOfSpaces - spaceCount;
@@ -730,7 +758,9 @@ export class FabricText<
    * Map Fabric textAlign to Konva align format
    * @private
    */
-  _mapTextAlignToAlign(textAlign: string): 'left' | 'center' | 'right' | 'justify' {
+  _mapTextAlignToAlign(
+    textAlign: string,
+  ): 'left' | 'center' | 'right' | 'justify' {
     switch (textAlign) {
       case 'center':
       case CENTER:
@@ -758,14 +788,14 @@ export class FabricText<
     }
 
     const layout = this._layoutTextAdvanced();
-    
+
     // Update dimensions from layout
     this.width = layout.totalWidth || this.MIN_TEXT_WIDTH;
     this.height = layout.totalHeight;
-    
+
     // Convert layout to legacy format for compatibility
     this._convertLayoutToLegacyFormat(layout);
-    
+
     // Ensure justify alignment is properly applied for compatibility with legacy rendering
     if (this.textAlign.includes(JUSTIFY)) {
       // Force enlarge spaces after advanced layout calculation
@@ -776,7 +806,7 @@ export class FabricText<
         }
       }, 0);
     }
-    
+
     this.dirty = true;
   }
 
@@ -785,24 +815,26 @@ export class FabricText<
    * @private
    */
   _convertLayoutToLegacyFormat(layout: LayoutResult): void {
-    this._textLines = layout.lines.map(line => line.graphemes);
-    (this as any).textLines = layout.lines.map(line => line.text);
-    
+    this._textLines = layout.lines.map((line) => line.graphemes);
+    (this as any).textLines = layout.lines.map((line) => line.text);
+
     // Convert bounds to legacy format
-    this.__charBounds = layout.lines.map(line => 
-      line.bounds.map(bound => ({
+    this.__charBounds = layout.lines.map((line) =>
+      line.bounds.map((bound) => ({
         left: bound.left,
         top: bound.y,
         width: bound.width,
         height: bound.height,
         kernedWidth: bound.kernedWidth,
         deltaY: bound.deltaY || 0,
-      }))
+      })),
     );
-    
+
     // Update grapheme info for compatibility
     if (layout.lines.length > 0) {
-      (this as any)._unwrappedTextLines = layout.lines.map(line => line.graphemes);
+      (this as any)._unwrappedTextLines = layout.lines.map(
+        (line) => line.graphemes,
+      );
     }
   }
 
@@ -1456,7 +1488,7 @@ export class FabricText<
     if (currentDirection !== this.direction) {
       ctx.canvas.setAttribute('dir', isLtr ? 'ltr' : 'rtl');
       ctx.direction = isLtr ? 'ltr' : 'rtl';
-      
+
       // For justify alignments, we need to set the correct canvas text alignment
       // This is crucial for RTL text to render in the correct order
       if (isJustify) {
@@ -1753,14 +1785,14 @@ export class FabricText<
       direction = this.direction,
       isEndOfWrapping = this.isEndOfWrapping(lineIndex);
     let leftOffset = 0;
-    
+
     // Handle justify alignments (excluding last lines and wrapped line ends)
-    const isJustifyLine = 
+    const isJustifyLine =
       textAlign === JUSTIFY ||
       (textAlign === JUSTIFY_CENTER && !isEndOfWrapping) ||
       (textAlign === JUSTIFY_RIGHT && !isEndOfWrapping) ||
       (textAlign === JUSTIFY_LEFT && !isEndOfWrapping);
-    
+
     if (isJustifyLine) {
       // Justify lines should start at the left edge for LTR and right edge for RTL
       // The space distribution is handled by enlargeSpaces()
@@ -1771,7 +1803,7 @@ export class FabricText<
         return 0;
       }
     }
-    
+
     // Handle non-justify alignments
     if (textAlign === CENTER) {
       leftOffset = lineDiff / 2;
@@ -1785,7 +1817,7 @@ export class FabricText<
     if (textAlign === JUSTIFY_RIGHT) {
       leftOffset = lineDiff;
     }
-    
+
     // Apply RTL adjustments for non-justify alignments
     if (direction === 'rtl') {
       if (
@@ -2002,20 +2034,22 @@ export class FabricText<
       FabricText.genericFonts.includes(fontFamily.toLowerCase())
         ? fontFamily
         : `"${fontFamily}"`;
-    
+
     // For fonts like STV that don't support English/Latin characters,
     // add fallback fonts for consistent rendering of unsupported characters
     // Only add fallbacks during actual rendering, not for measurements
-    if (!forMeasuring && // Only during rendering, not measuring
-        !fontFamily.includes(',') && // Don't add fallbacks if already has them
-        (fontFamily.toLowerCase().includes('stv') || 
-         fontFamily.toLowerCase().includes('arabic') ||
-         fontFamily.toLowerCase().includes('naskh') ||
-         fontFamily.toLowerCase().includes('kufi'))) {
+    if (
+      !forMeasuring && // Only during rendering, not measuring
+      !fontFamily.includes(',') && // Don't add fallbacks if already has them
+      (fontFamily.toLowerCase().includes('stv') ||
+        fontFamily.toLowerCase().includes('arabic') ||
+        fontFamily.toLowerCase().includes('naskh') ||
+        fontFamily.toLowerCase().includes('kufi'))
+    ) {
       // Add fallback fonts for unsupported characters (spaces, punctuation, etc.)
       parsedFontFamily = `${parsedFontFamily}, "Arial Unicode MS", Arial, sans-serif`;
     }
-    
+
     return [
       fontStyle,
       fontWeight,
@@ -2072,7 +2106,9 @@ export class FabricText<
       // Use BiDi-aware grapheme splitting for RTL text
       if (this.direction === 'rtl' || this._containsArabicText(lines[i])) {
         newLines[i] = segmentGraphemes(lines[i]);
-        console.log(`🔤 BiDi-aware split line ${i}: "${lines[i]}" -> [${newLines[i].join(', ')}]`);
+        console.log(
+          `🔤 BiDi-aware split line ${i}: "${lines[i]}" -> [${newLines[i].join(', ')}]`,
+        );
       } else {
         newLines[i] = this.graphemeSplit(lines[i]);
       }
@@ -2086,7 +2122,7 @@ export class FabricText<
       graphemeLines: newLines,
     };
   }
-  
+
   /**
    * Check if text contains Arabic characters
    * @private
@@ -2273,7 +2309,7 @@ export class FabricText<
     if (typeof document === 'undefined' || !('fonts' in document)) {
       return true; // Assume ready in non-browser environments
     }
-    
+
     try {
       return document.fonts.check(`${this.fontSize}px ${this.fontFamily}`);
     } catch (e) {
@@ -2289,33 +2325,36 @@ export class FabricText<
     if (typeof document === 'undefined' || !('fonts' in document)) {
       return;
     }
-    
+
     // Only schedule if not already waiting
     if ((this as any)._fontLoadScheduled) {
       return;
     }
     (this as any)._fontLoadScheduled = true;
-    
+
     const fontSpec = `${this.fontSize}px ${this.fontFamily}`;
-    document.fonts.load(fontSpec).then(() => {
-      (this as any)._fontLoadScheduled = false;
-      // Re-initialize dimensions with proper font metrics
-      this.initDimensions();
-      
-      // Extra step for justify alignment after font loading
-      if (this.textAlign && this.textAlign.includes(JUSTIFY)) {
-        setTimeout(() => {
-          if (this.enlargeSpaces) {
-            this.enlargeSpaces();
-          }
+    document.fonts
+      .load(fontSpec)
+      .then(() => {
+        (this as any)._fontLoadScheduled = false;
+        // Re-initialize dimensions with proper font metrics
+        this.initDimensions();
+
+        // Extra step for justify alignment after font loading
+        if (this.textAlign && this.textAlign.includes(JUSTIFY)) {
+          setTimeout(() => {
+            if (this.enlargeSpaces) {
+              this.enlargeSpaces();
+            }
+            this.canvas?.requestRenderAll();
+          }, 10);
+        } else {
           this.canvas?.requestRenderAll();
-        }, 10);
-      } else {
-        this.canvas?.requestRenderAll();
-      }
-    }).catch(() => {
-      (this as any)._fontLoadScheduled = false;
-    });
+        }
+      })
+      .catch(() => {
+        (this as any)._fontLoadScheduled = false;
+      });
   }
 
   /**
@@ -2323,22 +2362,26 @@ export class FabricText<
    */
   forceTextReinitialization(): void {
     console.log('🔄 Force reinitializing text object');
-    
+
     // Clear all caches
     this._clearCache();
     this.dirty = true;
-    
+
     // Force text splitting to rebuild internal structures
     this._splitText();
-    
+
     // Re-initialize dimensions
     this.initDimensions();
-    
+
     // Special handling for justify alignment
     if (this.textAlign && this.textAlign.includes(JUSTIFY)) {
       // Ensure justify is applied after dimensions are set
       setTimeout(() => {
-        if (this.__charBounds && this.__charBounds.length > 0 && this.enlargeSpaces) {
+        if (
+          this.__charBounds &&
+          this.__charBounds.length > 0 &&
+          this.enlargeSpaces
+        ) {
           this.enlargeSpaces();
           this.canvas?.requestRenderAll();
         }
@@ -2367,87 +2410,111 @@ export class FabricText<
       // Ensure text object is properly initialized after JSON deserialization
       // This is critical for justify alignment and other text layout features
       textObject.initialized = true;
-      
+
       // Force reinitialization to ensure proper layout
       if (textObject._clearCache) {
         textObject._clearCache();
       }
       textObject.dirty = true;
-      
+
       // Check if we need to wait for font loading (especially for custom fonts like STV)
       const fontSpec = `${textObject.fontSize}px ${textObject.fontFamily}`;
-      
+
       // For custom fonts, ensure they're loaded before initializing dimensions
-      if (typeof document !== 'undefined' && 'fonts' in document && textObject.fontFamily !== 'Arial' && textObject.fontFamily !== 'Times New Roman') {
-        return document.fonts.load(fontSpec).then(() => {
-          console.log(`🔤 Font loaded for JSON object: ${fontSpec}`);
-          // Ensure initialized flag is set again (in case constructor reset it)
-          textObject.initialized = true;
-          
-          // Special handling for STV fonts which have measurement issues
-          const isStvFont = textObject.fontFamily?.toLowerCase().includes('stv');
-          if (isStvFont) {
-            console.log(`🔤 STV font detected, using enhanced reinitialization`);
-            
-            // Clear all cached state that might interfere with browser wrapping
-            (textObject as any)._browserWrapCache = null;
-            (textObject as any)._lastDimensionState = null;
-            (textObject as any)._browserWrapInitialized = false;
-            console.log(`🔤 STV font: Cleared all cached states for fresh initialization`);
-            
-            // Force browser wrapping flag for STV fonts
-            (textObject as any)._usingBrowserWrapping = true;
-            console.log(`🔤 STV font: Forcing browser wrapping flag during JSON load`);
-            
-            // Enable overlay editing for STV fonts to use native browser text handling
-            (textObject as any).useOverlayEditing = true;
-            console.log(`🔤 STV font: Enabling overlay editing during JSON load`);
-            
-            // Multiple initialization attempts for STV fonts
-            const reinitWithDelay = (attempt: number) => {
+      if (
+        typeof document !== 'undefined' &&
+        'fonts' in document &&
+        textObject.fontFamily !== 'Arial' &&
+        textObject.fontFamily !== 'Times New Roman'
+      ) {
+        return document.fonts
+          .load(fontSpec)
+          .then(() => {
+            console.log(`🔤 Font loaded for JSON object: ${fontSpec}`);
+            // Ensure initialized flag is set again (in case constructor reset it)
+            textObject.initialized = true;
+
+            // Special handling for STV fonts which have measurement issues
+            const isStvFont = textObject.fontFamily
+              ?.toLowerCase()
+              .includes('stv');
+            if (isStvFont) {
+              console.log(
+                `🔤 STV font detected, using enhanced reinitialization`,
+              );
+
+              // Clear all cached state that might interfere with browser wrapping
+              (textObject as any)._browserWrapCache = null;
+              (textObject as any)._lastDimensionState = null;
+              (textObject as any)._browserWrapInitialized = false;
+              console.log(
+                `🔤 STV font: Cleared all cached states for fresh initialization`,
+              );
+
+              // Force browser wrapping flag for STV fonts
+              (textObject as any)._usingBrowserWrapping = true;
+              console.log(
+                `🔤 STV font: Forcing browser wrapping flag during JSON load`,
+              );
+
+              // Enable overlay editing for STV fonts to use native browser text handling
+              (textObject as any).useOverlayEditing = true;
+              console.log(
+                `🔤 STV font: Enabling overlay editing during JSON load`,
+              );
+
+              // Multiple initialization attempts for STV fonts
+              const reinitWithDelay = (attempt: number) => {
+                if ((textObject as any).forceTextReinitialization) {
+                  (textObject as any).forceTextReinitialization();
+                } else {
+                  textObject.initDimensions();
+                }
+
+                // Check if width is still problematic after initialization
+                if (textObject.width < 50 && attempt < 3) {
+                  console.log(
+                    `🔤 STV font width still ${textObject.width}px, retrying in ${100 * attempt}ms (attempt ${attempt + 1}/3)`,
+                  );
+                  setTimeout(() => reinitWithDelay(attempt + 1), 100 * attempt);
+                }
+              };
+              reinitWithDelay(0);
+            } else {
+              // Use specialized reinitialization for Textbox objects
               if ((textObject as any).forceTextReinitialization) {
+                console.log(`🔤 Using Textbox specialized reinitialization`);
                 (textObject as any).forceTextReinitialization();
               } else {
+                // Reinitialize dimensions with proper font metrics
                 textObject.initDimensions();
               }
-              
-              // Check if width is still problematic after initialization
-              if (textObject.width < 50 && attempt < 3) {
-                console.log(`🔤 STV font width still ${textObject.width}px, retrying in ${100 * attempt}ms (attempt ${attempt + 1}/3)`);
-                setTimeout(() => reinitWithDelay(attempt + 1), 100 * attempt);
-              }
-            };
-            reinitWithDelay(0);
-          } else {
-            // Use specialized reinitialization for Textbox objects
+            }
+            return textObject;
+          })
+          .catch(() => {
+            console.warn(
+              `⚠️ Font loading failed for ${fontSpec}, proceeding with fallback`,
+            );
+            // Ensure initialized flag is set again
+            textObject.initialized = true;
+
+            // Still initialize dimensions even if font loading fails
             if ((textObject as any).forceTextReinitialization) {
-              console.log(`🔤 Using Textbox specialized reinitialization`);
               (textObject as any).forceTextReinitialization();
             } else {
-              // Reinitialize dimensions with proper font metrics
               textObject.initDimensions();
             }
-          }
-          return textObject;
-        }).catch(() => {
-          console.warn(`⚠️ Font loading failed for ${fontSpec}, proceeding with fallback`);
-          // Ensure initialized flag is set again
-          textObject.initialized = true;
-          
-          // Still initialize dimensions even if font loading fails
-          if ((textObject as any).forceTextReinitialization) {
-            (textObject as any).forceTextReinitialization();
-          } else {
-            textObject.initDimensions();
-          }
-          return textObject;
-        });
+            return textObject;
+          });
       } else {
         // Standard fonts - ensure initialized and use appropriate method
         textObject.initialized = true;
-        
+
         if ((textObject as any).forceTextReinitialization) {
-          console.log(`🔤 Using Textbox specialized reinitialization for standard font`);
+          console.log(
+            `🔤 Using Textbox specialized reinitialization for standard font`,
+          );
           (textObject as any).forceTextReinitialization();
         } else {
           textObject.initDimensions();