@nasser-sw/fabric 7.0.0-beta1 → 7.0.1-beta10

package/dist/src/shapes/Text/Text.mjs

@@ -8,6 +8,7 @@ import { classRegistry } from '../../ClassRegistry.mjs';
 import { graphemeSplit } from '../../util/lang_string.mjs';
 import { createCanvasElementFor } from '../../util/misc/dom.mjs';
 import { layoutText } from '../../text/layout.mjs';
+import { segmentGraphemes } from '../../text/unicode.mjs';
 import { hasStyleChanged, stylesToArray, stylesFromArray } from '../../util/misc/textStyles.mjs';
 import { getPathSegmentsInfo, getPointOnPath } from '../../util/path/index.mjs';
 import '../Object/FabricObject.mjs';
@@ -149,6 +150,15 @@ class FabricText extends StyledText {
    * Does not return dimensions.
    */
   initDimensions() {
+    // Check if font is ready for accurate measurements
+    // Only block initialization if it's a critical font loading situation
+    const fontReady = this._isFontReady();
+    if (!fontReady && !this.initialized) {
+      // Only schedule font loading on first initialization
+      this._scheduleInitAfterFontLoad();
+      // Continue with fallback measurements for now
+    }
+
     // Use advanced layout if enabled
     if (this.enableAdvancedLayout && !this.path) {
       return this.initDimensionsAdvanced();
@@ -165,7 +175,21 @@ class FabricText extends StyledText {
     }
     if (this.textAlign.includes(JUSTIFY)) {
       // once text is measured we need to make space fatter to make justified text.
-      this.enlargeSpaces();
+      // Ensure __charBounds exists before calling enlargeSpaces
+      if (this.__charBounds && this.__charBounds.length > 0) {
+        this.enlargeSpaces();
+      } else {
+        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) {
+            var _this$canvas;
+            console.log('🔧 Applying deferred justify alignment');
+            this.enlargeSpaces();
+            (_this$canvas = this.canvas) === null || _this$canvas === void 0 || _this$canvas.requestRenderAll();
+          }
+        }, 0);
+      }
     }
   }
 
@@ -174,8 +198,9 @@ class FabricText extends StyledText {
    */
   enlargeSpaces() {
     let diffSpace, currentLineWidth, numberOfSpaces, accumulatedSpace, line, charBound, spaces;
+    const isRtl = this.direction === 'rtl';
     for (let i = 0, len = this._textLines.length; i < len; i++) {
-      if (this.textAlign !== JUSTIFY && (i === len - 1 || this.isEndOfWrapping(i))) {
+      if (!this.textAlign.includes('justify') && (i === len - 1 || this.isEndOfWrapping(i))) {
         continue;
       }
       accumulatedSpace = 0;
@@ -184,15 +209,47 @@ class FabricText extends StyledText {
       if (currentLineWidth < this.width && (spaces = this.textLines[i].match(this._reSpacesAndTabs))) {
         numberOfSpaces = spaces.length;
         diffSpace = (this.width - currentLineWidth) / numberOfSpaces;
-        for (let j = 0; j <= line.length; j++) {
-          charBound = this.__charBounds[i][j];
-          if (this._reSpaceAndTab.test(line[j])) {
-            charBound.width += diffSpace;
-            charBound.kernedWidth += diffSpace;
-            charBound.left += accumulatedSpace;
-            accumulatedSpace += diffSpace;
-          } else {
-            charBound.left += accumulatedSpace;
+        console.log(`🔧 EnlargeSpaces Line ${i}:`);
+        console.log(`   Current width: ${currentLineWidth}, Target: ${this.width}`);
+        console.log(`   Spaces: ${numberOfSpaces}, diffSpace: ${diffSpace.toFixed(2)}`);
+        if (isRtl) {
+          for (let j = 0; j < line.length; j++) {
+            if (this._reSpaceAndTab.test(line[j])) ;
+          }
+
+          // For RTL, we need to work backwards through the visual positions
+          // but still update logical positions correctly
+          let spaceCount = 0;
+          for (let j = 0; j <= line.length; j++) {
+            charBound = this.__charBounds[i][j];
+            if (charBound) {
+              if (this._reSpaceAndTab.test(line[j])) {
+                charBound.width += diffSpace;
+                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;
+              const shiftAmount = remainingSpaces * diffSpace;
+              charBound.left += shiftAmount;
+            }
+          }
+        } else {
+          // LTR processing (original logic)
+          for (let j = 0; j <= line.length; j++) {
+            charBound = this.__charBounds[i][j];
+            if (charBound) {
+              if (this._reSpaceAndTab.test(line[j])) {
+                charBound.width += diffSpace;
+                charBound.kernedWidth += diffSpace;
+                charBound.left += accumulatedSpace;
+                accumulatedSpace += diffSpace;
+              } else {
+                charBound.left += accumulatedSpace;
+              }
+            }
           }
         }
       }
@@ -270,6 +327,18 @@ class FabricText extends StyledText {
 
     // 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
+      setTimeout(() => {
+        if (this.enlargeSpaces) {
+          var _this$canvas2;
+          this.enlargeSpaces();
+          (_this$canvas2 = this.canvas) === null || _this$canvas2 === void 0 || _this$canvas2.renderAll();
+        }
+      }, 0);
+    }
     this.dirty = true;
   }
 
@@ -850,7 +919,15 @@ class FabricText extends StyledText {
     if (currentDirection !== this.direction) {
       ctx.canvas.setAttribute('dir', isLtr ? 'ltr' : 'rtl');
       ctx.direction = isLtr ? 'ltr' : 'rtl';
-      ctx.textAlign = isLtr ? LEFT : RIGHT;
+
+      // 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) {
+        // Justify uses LEFT alignment as a base, letting the character positioning handle justification
+        ctx.textAlign = LEFT;
+      } else {
+        ctx.textAlign = isLtr ? LEFT : RIGHT;
+      }
     }
     top -= lineHeight * this._fontSizeFraction / this.lineHeight;
     if (shortCut) {
@@ -1086,9 +1163,21 @@ class FabricText extends StyledText {
       direction = this.direction,
       isEndOfWrapping = this.isEndOfWrapping(lineIndex);
     let leftOffset = 0;
-    if (textAlign === JUSTIFY || textAlign === JUSTIFY_CENTER && !isEndOfWrapping || textAlign === JUSTIFY_RIGHT && !isEndOfWrapping || textAlign === JUSTIFY_LEFT && !isEndOfWrapping) {
-      return 0;
+
+    // Handle justify alignments (excluding last lines and wrapped line ends)
+    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()
+      if (direction === 'rtl') {
+        // For RTL justify, we need to account for the line being right-aligned
+        return 0;
+      } else {
+        return 0;
+      }
     }
+
+    // Handle non-justify alignments
     if (textAlign === CENTER) {
       leftOffset = lineDiff / 2;
     }
@@ -1101,6 +1190,8 @@ class FabricText extends StyledText {
     if (textAlign === JUSTIFY_RIGHT) {
       leftOffset = lineDiff;
     }
+
+    // Apply RTL adjustments for non-justify alignments
     if (direction === 'rtl') {
       if (textAlign === RIGHT || textAlign === JUSTIFY || textAlign === JUSTIFY_RIGHT) {
         leftOffset = 0;
@@ -1259,7 +1350,19 @@ class FabricText extends StyledText {
       fontSize = this.fontSize
     } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     let forMeasuring = arguments.length > 1 ? arguments[1] : undefined;
-    const parsedFontFamily = fontFamily.includes("'") || fontFamily.includes('"') || fontFamily.includes(',') || FabricText.genericFonts.includes(fontFamily.toLowerCase()) ? fontFamily : `"${fontFamily}"`;
+    let parsedFontFamily = fontFamily.includes("'") || fontFamily.includes('"') || fontFamily.includes(',') || 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'))) {
+      // Add fallback fonts for unsupported characters (spaces, punctuation, etc.)
+      parsedFontFamily = `${parsedFontFamily}, "Arial Unicode MS", Arial, sans-serif`;
+    }
     return [fontStyle, fontWeight, `${forMeasuring ? this.CACHE_FONT_SIZE : fontSize}px`, parsedFontFamily].join(' ');
   }
 
@@ -1303,7 +1406,13 @@ class FabricText extends StyledText {
       newLine = ['\n'];
     let newText = [];
     for (let i = 0; i < lines.length; i++) {
-      newLines[i] = this.graphemeSplit(lines[i]);
+      // 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(', ')}]`);
+      } else {
+        newLines[i] = this.graphemeSplit(lines[i]);
+      }
       newText = newText.concat(newLines[i], newLine);
     }
     newText.pop();
@@ -1315,6 +1424,14 @@ class FabricText extends StyledText {
     };
   }
 
+  /**
+   * Check if text contains Arabic characters
+   * @private
+   */
+  _containsArabicText(text) {
+    return /[\u0600-\u06FF\u0750-\u077F\uFB50-\uFDFF\uFE70-\uFEFF]/.test(text);
+  }
+
   /**
    * Returns object representation of an instance
    * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
@@ -1437,6 +1554,88 @@ class FabricText extends StyledText {
 
   /* _FROM_SVG_END_ */
 
+  /**
+   * Check if the font is ready for accurate measurements
+   * @private
+   */
+  _isFontReady() {
+    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) {
+      return true; // Fallback to assuming ready if check fails
+    }
+  }
+
+  /**
+   * Schedule re-initialization after font loads
+   * @private
+   */
+  _scheduleInitAfterFontLoad() {
+    if (typeof document === 'undefined' || !('fonts' in document)) {
+      return;
+    }
+
+    // Only schedule if not already waiting
+    if (this._fontLoadScheduled) {
+      return;
+    }
+    this._fontLoadScheduled = true;
+    const fontSpec = `${this.fontSize}px ${this.fontFamily}`;
+    document.fonts.load(fontSpec).then(() => {
+      this._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(() => {
+          var _this$canvas3;
+          if (this.enlargeSpaces) {
+            this.enlargeSpaces();
+          }
+          (_this$canvas3 = this.canvas) === null || _this$canvas3 === void 0 || _this$canvas3.requestRenderAll();
+        }, 10);
+      } else {
+        var _this$canvas4;
+        (_this$canvas4 = this.canvas) === null || _this$canvas4 === void 0 || _this$canvas4.requestRenderAll();
+      }
+    }).catch(() => {
+      this._fontLoadScheduled = false;
+    });
+  }
+
+  /**
+   * Force complete text re-initialization (useful after JSON loading)
+   */
+  forceTextReinitialization() {
+    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) {
+          var _this$canvas5;
+          this.enlargeSpaces();
+          (_this$canvas5 = this.canvas) === null || _this$canvas5 === void 0 || _this$canvas5.requestRenderAll();
+        }
+      }, 10);
+    }
+  }
+
   /**
    * Returns FabricText instance from an object representation
    * @param {Object} object plain js Object to create an instance from
@@ -1448,6 +1647,93 @@ class FabricText extends StyledText {
       styles: stylesFromArray(object.styles || {}, object.text)
     }, {
       extraParam: 'text'
+    }).then(textObject => {
+      // 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(() => {
+          var _textObject$fontFamil;
+          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$fontFamil = textObject.fontFamily) === null || _textObject$fontFamil === void 0 ? void 0 : _textObject$fontFamil.toLowerCase().includes('stv');
+          if (isStvFont) {
+            console.log(`🔤 STV font detected, using enhanced reinitialization`);
+
+            // Clear all cached state that might interfere with browser wrapping
+            textObject._browserWrapCache = null;
+            textObject._lastDimensionState = null;
+            textObject._browserWrapInitialized = false;
+            console.log(`🔤 STV font: Cleared all cached states for fresh initialization`);
+
+            // Force browser wrapping flag for STV fonts
+            textObject._usingBrowserWrapping = true;
+            console.log(`🔤 STV font: Forcing browser wrapping flag during JSON load`);
+
+            // Multiple initialization attempts for STV fonts
+            const reinitWithDelay = attempt => {
+              if (textObject.forceTextReinitialization) {
+                textObject.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.forceTextReinitialization) {
+              console.log(`🔤 Using Textbox specialized reinitialization`);
+              textObject.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.forceTextReinitialization) {
+            textObject.forceTextReinitialization();
+          } else {
+            textObject.initDimensions();
+          }
+          return textObject;
+        });
+      } else {
+        // Standard fonts - ensure initialized and use appropriate method
+        textObject.initialized = true;
+        if (textObject.forceTextReinitialization) {
+          console.log(`🔤 Using Textbox specialized reinitialization for standard font`);
+          textObject.forceTextReinitialization();
+        } else {
+          textObject.initDimensions();
+        }
+        return textObject;
+      }
     });
   }
 }