@nasser-sw/fabric 7.0.1-beta1 → 7.0.1-beta11

package/dist/src/text/overlayEditor.mjs

@@ -43,8 +43,8 @@ class OverlayEditor {
     // We don't need to save/restore them here as it would conflict with IText's restoration
   }
 
-  /**
-   * Get the container element for the overlay (parent of upperCanvasEl)
+  /**
+   * Get the container element for the overlay (parent of upperCanvasEl)
    */
   getCanvasContainer() {
     const upperCanvas = this.canvas.upperCanvasEl;
@@ -58,8 +58,8 @@ class OverlayEditor {
     return container;
   }
 
-  /**
-   * Create the overlay DOM structure
+  /**
+   * Create the overlay DOM structure
    */
   createOverlayDOM() {
     // Host div for positioning and overflow control
@@ -114,8 +114,8 @@ class OverlayEditor {
     document.body.appendChild(this.hostDiv);
   }
 
-  /**
-   * Attach all event listeners
+  /**
+   * Attach all event listeners
    */
   attachEventListeners() {
     // Textarea events
@@ -135,8 +135,8 @@ class OverlayEditor {
     this.setupViewportChangeDetection();
   }
 
-  /**
-   * Remove all event listeners
+  /**
+   * Remove all event listeners
    */
   removeEventListeners() {
     this.textarea.removeEventListener('input', this.boundHandlers.onInput);
@@ -153,16 +153,16 @@ class OverlayEditor {
     this.restoreViewportChangeDetection();
   }
 
-  /**
-   * Simple method to refresh positioning when canvas changes
+  /**
+   * Simple method to refresh positioning when canvas changes
    */
   updatePosition() {
     this.applyOverlayStyle();
   }
 
-  /**
-   * Update the Fabric object bounds to match current textarea size
-   * This ensures Fabric.js selection controls follow the growing textbox
+  /**
+   * Update the Fabric object bounds to match current textarea size
+   * This ensures Fabric.js selection controls follow the growing textbox
    */
   updateObjectBounds() {
     if (this.isDestroyed) return;
@@ -196,15 +196,15 @@ class OverlayEditor {
     }
   }
 
-  /**
-   * Convert Fabric charSpacing (1/1000 em) to CSS letter-spacing (px)
+  /**
+   * Convert Fabric charSpacing (1/1000 em) to CSS letter-spacing (px)
    */
   letterSpacingPx(charSpacing, fontSize) {
     return charSpacing / 1000 * fontSize;
   }
 
-  /**
-   * Detect text direction using first strong directional character
+  /**
+   * Detect text direction using first strong directional character
    */
   firstStrongDir(text) {
     // Hebrew: \u0590-\u05FF, Arabic: \u0600-\u06FF, \u0750-\u077F, \uFB50-\uFDFF, \uFE70-\uFEFF
@@ -283,18 +283,98 @@ class OverlayEditor {
 
     // Apply all other font and text styles to match Fabric
     const letterSpacingPx = (target.charSpacing || 0) / 1000 * finalFontSize;
+
+    // Special handling for text objects loaded from JSON - ensure they're properly initialized
+    if (target.dirty !== false && target.initDimensions) {
+      console.log('🔧 Ensuring text object is properly initialized before overlay editing');
+      // Force re-initialization if the text object seems to be in a dirty state
+      target.initDimensions();
+    }
     this.textarea.style.fontSize = `${finalFontSize}px`;
     this.textarea.style.lineHeight = String(fabricLineHeight);
     this.textarea.style.fontFamily = target.fontFamily || 'Arial';
     this.textarea.style.fontWeight = String(target.fontWeight || 'normal');
     this.textarea.style.fontStyle = target.fontStyle || 'normal';
-    this.textarea.style.textAlign = target.textAlign || 'left';
+    // Handle text alignment and justification
+    const textAlign = target.textAlign || 'left';
+    let cssTextAlign = textAlign;
+
+    // Detect text direction from content for proper justify handling
+    const autoDetectedDirection = this.firstStrongDir(this.textarea.value || '');
+
+    // DEBUG: Log alignment details
+    console.log('🔍 ALIGNMENT DEBUG:');
+    console.log('   Fabric textAlign:', textAlign);
+    console.log('   Fabric direction:', target.direction);
+    console.log('   Text content:', JSON.stringify(target.text));
+    console.log('   Detected direction:', autoDetectedDirection);
+
+    // Map fabric.js justify to CSS
+    if (textAlign.includes('justify')) {
+      // Try to match fabric.js justify behavior more precisely
+      try {
+        // For justify, we need to replicate fabric.js space expansion
+        // Use CSS justify but with specific settings to match fabric.js better
+        cssTextAlign = 'justify';
+
+        // Set text-align-last based on justify type and detected direction
+        // Smart justify: respect detected direction even when fabric alignment doesn't match
+        if (textAlign === 'justify') {
+          this.textarea.style.textAlignLast = autoDetectedDirection === 'rtl' ? 'right' : 'left';
+        } else if (textAlign === 'justify-left') {
+          // If text is RTL but fabric says justify-left, override to justify-right for better UX
+          if (autoDetectedDirection === 'rtl') {
+            this.textarea.style.textAlignLast = 'right';
+            console.log('   → Overrode justify-left to justify-right for RTL text');
+          } else {
+            this.textarea.style.textAlignLast = 'left';
+          }
+        } else if (textAlign === 'justify-right') {
+          // If text is LTR but fabric says justify-right, override to justify-left for better UX  
+          if (autoDetectedDirection === 'ltr') {
+            this.textarea.style.textAlignLast = 'left';
+            console.log('   → Overrode justify-right to justify-left for LTR text');
+          } else {
+            this.textarea.style.textAlignLast = 'right';
+          }
+        } else if (textAlign === 'justify-center') {
+          this.textarea.style.textAlignLast = 'center';
+        }
+
+        // Enhanced justify settings for better fabric.js matching
+        this.textarea.style.textJustify = 'inter-word';
+        this.textarea.style.wordSpacing = 'normal';
+
+        // Additional CSS properties for better justify matching
+        this.textarea.style.textAlign = 'justify';
+        this.textarea.style.textAlignLast = this.textarea.style.textAlignLast;
+
+        // Try to force better justify behavior
+        this.textarea.style.textJustifyTrim = 'none';
+        this.textarea.style.textAutospace = 'none';
+        console.log('   → Applied justify alignment:', textAlign, 'with last-line:', this.textarea.style.textAlignLast);
+      } catch (error) {
+        console.warn('   → Justify setup failed, falling back to standard alignment:', error);
+        cssTextAlign = textAlign.replace('justify-', '').replace('justify', 'left');
+      }
+    } else {
+      this.textarea.style.textAlignLast = 'auto';
+      this.textarea.style.textJustify = 'auto';
+      this.textarea.style.wordSpacing = 'normal';
+      console.log('   → Applied standard alignment:', cssTextAlign);
+    }
+    this.textarea.style.textAlign = cssTextAlign;
     this.textarea.style.color = ((_target$fill = target.fill) === null || _target$fill === void 0 ? void 0 : _target$fill.toString()) || '#000';
     this.textarea.style.letterSpacing = `${letterSpacingPx}px`;
-    this.textarea.style.direction = target.direction || this.firstStrongDir(this.textarea.value || '');
+
+    // Use the already detected direction from above
+    const fabricDirection = target.direction;
+
+    // Use auto-detected direction for better BiDi support, but respect fabric direction if it makes sense
+    this.textarea.style.direction = autoDetectedDirection || fabricDirection || 'ltr';
     this.textarea.style.fontVariant = 'normal';
     this.textarea.style.fontStretch = 'normal';
-    this.textarea.style.textRendering = 'optimizeLegibility';
+    this.textarea.style.textRendering = 'auto'; // Changed from 'optimizeLegibility' to match canvas
     this.textarea.style.fontKerning = 'normal';
     this.textarea.style.fontFeatureSettings = 'normal';
     this.textarea.style.fontVariationSettings = 'normal';
@@ -305,20 +385,64 @@ class OverlayEditor {
     this.textarea.style.overflowWrap = 'break-word';
     this.textarea.style.whiteSpace = 'pre-wrap';
     this.textarea.style.hyphens = 'none';
-    this.textarea.style.webkitFontSmoothing = 'antialiased';
-    this.textarea.style.mozOsxFontSmoothing = 'grayscale';
 
-    // Debug: Compare textarea and canvas object bounding boxes
-    this.debugBoundingBoxComparison();
+    // DEBUG: Log final CSS properties
+    console.log('🎨 FINAL TEXTAREA CSS:');
+    console.log('   textAlign:', this.textarea.style.textAlign);
+    console.log('   textAlignLast:', this.textarea.style.textAlignLast);
+    console.log('   direction:', this.textarea.style.direction);
+    console.log('   unicodeBidi:', this.textarea.style.unicodeBidi);
+    console.log('   width:', this.textarea.style.width);
+    console.log('   textJustify:', this.textarea.style.textJustify);
+    console.log('   wordSpacing:', this.textarea.style.wordSpacing);
+    console.log('   whiteSpace:', this.textarea.style.whiteSpace);
+
+    // If justify, log Fabric object dimensions for comparison
+    if (textAlign.includes('justify')) {
+      var _calcTextWidth, _ref;
+      console.log('🔧 FABRIC OBJECT JUSTIFY INFO:');
+      console.log('   Fabric width:', target.width);
+      console.log('   Fabric calcTextWidth:', (_calcTextWidth = (_ref = target).calcTextWidth) === null || _calcTextWidth === void 0 ? void 0 : _calcTextWidth.call(_ref));
+      console.log('   Fabric textAlign:', target.textAlign);
+      console.log('   Text lines:', target.textLines);
+    }
+
+    // Debug font properties matching
+    console.log('🔤 FONT PROPERTIES COMPARISON:');
+    console.log('   Fabric fontFamily:', target.fontFamily);
+    console.log('   Fabric fontWeight:', target.fontWeight);
+    console.log('   Fabric fontStyle:', target.fontStyle);
+    console.log('   Fabric fontSize:', target.fontSize);
+    console.log('   → Textarea fontFamily:', this.textarea.style.fontFamily);
+    console.log('   → Textarea fontWeight:', this.textarea.style.fontWeight);
+    console.log('   → Textarea fontStyle:', this.textarea.style.fontStyle);
+    console.log('   → Textarea fontSize:', this.textarea.style.fontSize);
+    console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
 
-    // Debug: Compare text wrapping behavior
-    this.debugTextWrapping();
+    // Enhanced font rendering to better match fabric.js canvas rendering
+    // Default to auto for more natural rendering
+    this.textarea.style.webkitFontSmoothing = 'auto';
+    this.textarea.style.mozOsxFontSmoothing = 'auto';
+    this.textarea.style.fontSmooth = 'auto';
+    this.textarea.style.textSizeAdjust = 'none';
+
+    // For bold fonts, use subpixel rendering to match canvas thickness better
+    const fontWeight = String(target.fontWeight || 'normal');
+    const isBold = fontWeight === 'bold' || fontWeight === '700' || parseInt(fontWeight) >= 600;
+    if (isBold) {
+      this.textarea.style.webkitFontSmoothing = 'subpixel-antialiased';
+      this.textarea.style.mozOsxFontSmoothing = 'unset';
+      console.log('🔤 Applied enhanced bold rendering for better thickness matching');
+    }
+    console.log('🎨 FONT SMOOTHING APPLIED:');
+    console.log('   webkitFontSmoothing:', this.textarea.style.webkitFontSmoothing);
+    console.log('   mozOsxFontSmoothing:', this.textarea.style.mozOsxFontSmoothing);
 
     // Initial bounds are set correctly by Fabric.js - don't force update here
   }
 
-  /**
-   * Debug method to compare textarea and canvas object bounding boxes
+  /**
+   * Debug method to compare textarea and canvas object bounding boxes
    */
   debugBoundingBoxComparison() {
     const target = this.target;
@@ -388,8 +512,8 @@ class OverlayEditor {
     console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
   }
 
-  /**
-   * Debug method to compare text wrapping between textarea and Fabric text object
+  /**
+   * Debug method to compare text wrapping between textarea and Fabric text object
    */
   debugTextWrapping() {
     const target = this.target;
@@ -474,8 +598,8 @@ class OverlayEditor {
     console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
   }
 
-  /**
-   * Focus the textarea and position cursor at end
+  /**
+   * Focus the textarea and position cursor at end
    */
   focusTextarea() {
     // For overlay editing, we want to keep the object in "selection mode" not "editing mode"
@@ -502,6 +626,11 @@ class OverlayEditor {
     this.canvas.requestRenderAll();
     this.target.setCoords();
     this.applyOverlayStyle();
+
+    // Fix character mapping issues after JSON loading for browser-wrapped fonts
+    if (this.target._fixCharacterMappingAfterJsonLoad) {
+      this.target._fixCharacterMappingAfterJsonLoad();
+    }
     this.textarea.focus();
     this.textarea.setSelectionRange(this.textarea.value.length, this.textarea.value.length);
 
@@ -510,8 +639,8 @@ class OverlayEditor {
     this.canvas.requestRenderAll();
   }
 
-  /**
-   * Refresh overlay positioning and styling
+  /**
+   * Refresh overlay positioning and styling
    */
   refresh() {
     if (this.isDestroyed) return;
@@ -519,8 +648,8 @@ class OverlayEditor {
     // Don't update object bounds on every refresh - only when textarea actually resizes
   }
 
-  /**
-   * Destroy the overlay editor
+  /**
+   * Destroy the overlay editor
    */
   destroy() {
     let commit = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
@@ -547,6 +676,23 @@ class OverlayEditor {
     // Handle commit/cancel after restoring visibility
     if (commit && !this.isComposing) {
       const finalText = this.textarea.value;
+
+      // Auto-detect text direction and update fabric object if needed
+      const detectedDirection = this.firstStrongDir(finalText);
+      const currentDirection = this.target.direction || 'ltr';
+      if (detectedDirection && detectedDirection !== currentDirection) {
+        console.log(`🔄 Overlay Exit: Auto-detected direction change from "${currentDirection}" to "${detectedDirection}"`);
+        console.log(`   Text content: "${finalText.substring(0, 50)}..."`);
+
+        // Update the fabric object's direction
+        this.target.set('direction', detectedDirection);
+
+        // Force a re-render to apply the direction change
+        this.canvas.requestRenderAll();
+        console.log(`✅ Fabric object direction updated to: ${detectedDirection}`);
+      } else {
+        console.log(`📝 Overlay Exit: Direction unchanged (${currentDirection}), text: "${finalText.substring(0, 30)}..."`);
+      }
       if (this.onCommit) {
         this.onCommit(finalText);
       }
@@ -671,8 +817,8 @@ class OverlayEditor {
     }
   }
 
-  /**
-   * Setup detection for viewport changes (zoom/pan)
+  /**
+   * Setup detection for viewport changes (zoom/pan)
    */
   setupViewportChangeDetection() {
     // Store original methods
@@ -701,8 +847,8 @@ class OverlayEditor {
     };
   }
 
-  /**
-   * Restore original viewport methods
+  /**
+   * Restore original viewport methods
    */
   restoreViewportChangeDetection() {
     if (this.canvas.__originalSetZoom) {
@@ -717,8 +863,8 @@ class OverlayEditor {
   }
 }
 
-/**
- * Enter overlay text editing mode for a text object
+/**
+ * Enter overlay text editing mode for a text object
  */
 function enterTextOverlayEdit(canvas, target, options) {
   // If already in overlay editing, destroy existing editor first