@nasser-sw/fabric 7.0.1-beta16 → 7.0.1-beta17

package/dist/src/text/overlayEditor.mjs

@@ -190,7 +190,9 @@ class OverlayEditor {
       requestAnimationFrame(() => {
         if (!this.isDestroyed) {
           this.applyOverlayStyle();
-          console.log('📐 Height changed - rechecking alignment after repositioning:');
+          // console.log(
+          //   '📐 Height changed - rechecking alignment after repositioning:',
+          // );
         }
       });
     }
@@ -286,7 +288,7 @@ class OverlayEditor {
 
     // 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');
+      // 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();
     }
@@ -303,11 +305,11 @@ class OverlayEditor {
     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);
+    // console.log('🔍 ALIGNMENT DEBUG:');
+    // console.log('   Fabric textAlign:', textAlign);
+    // console.log('   Fabric direction:', (target as any).direction);
+    // console.log('   Text content:', JSON.stringify(target.text));
+    // console.log('   Detected direction:', autoDetectedDirection);
 
     // Map fabric.js justify to CSS
     if (textAlign.includes('justify')) {
@@ -325,7 +327,7 @@ class OverlayEditor {
           // 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');
+            // console.log('   → Overrode justify-left to justify-right for RTL text');
           } else {
             this.textarea.style.textAlignLast = 'left';
           }
@@ -333,7 +335,7 @@ class OverlayEditor {
           // 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');
+            // console.log('   → Overrode justify-right to justify-left for LTR text');
           } else {
             this.textarea.style.textAlignLast = 'right';
           }
@@ -352,16 +354,17 @@ class OverlayEditor {
         // 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);
+
+        // 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);
+        // 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);
+      // 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';
@@ -387,37 +390,31 @@ class OverlayEditor {
     this.textarea.style.hyphens = 'none';
 
     // 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);
+    // 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 as any).textJustify);
+    // console.log('   wordSpacing:', (this.textarea.style as any).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);
-    }
+    if (textAlign.includes('justify')) ;
 
     // 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('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
+    // 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('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
 
     // Enhanced font rendering to better match fabric.js canvas rendering
     // Default to auto for more natural rendering
@@ -432,11 +429,12 @@ class OverlayEditor {
     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('🔤 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);
+
+    // console.log('🎨 FONT SMOOTHING APPLIED:');
+    // console.log('   webkitFontSmoothing:', (this.textarea.style as any).webkitFontSmoothing);
+    // console.log('   mozOsxFontSmoothing:', (this.textarea.style as any).mozOsxFontSmoothing);
 
     // Initial bounds are set correctly by Fabric.js - don't force update here
   }
@@ -465,137 +463,130 @@ class OverlayEditor {
       width: canvasBounds.width * zoom,
       height: canvasBounds.height * zoom
     };
-    console.log('🔍 BOUNDING BOX COMPARISON:');
-    console.log('📦 Textarea Rect:', {
-      left: Math.round(textareaRect.left * 100) / 100,
-      top: Math.round(textareaRect.top * 100) / 100,
-      width: Math.round(textareaRect.width * 100) / 100,
-      height: Math.round(textareaRect.height * 100) / 100
-    });
-    console.log('📦 Host Div Rect:', {
-      left: Math.round(hostRect.left * 100) / 100,
-      top: Math.round(hostRect.top * 100) / 100,
-      width: Math.round(hostRect.width * 100) / 100,
-      height: Math.round(hostRect.height * 100) / 100
-    });
-    console.log('📦 Canvas Object Bounds (screen):', {
-      left: Math.round(screenObjectBounds.left * 100) / 100,
-      top: Math.round(screenObjectBounds.top * 100) / 100,
-      width: Math.round(screenObjectBounds.width * 100) / 100,
-      height: Math.round(screenObjectBounds.height * 100) / 100
-    });
-    console.log('📦 Canvas Object Bounds (canvas):', canvasBounds);
+
+    // console.log('🔍 BOUNDING BOX COMPARISON:');
+    // console.log('📦 Textarea Rect:', {
+    //   left: Math.round(textareaRect.left * 100) / 100,
+    //   top: Math.round(textareaRect.top * 100) / 100,
+    //   width: Math.round(textareaRect.width * 100) / 100,
+    //   height: Math.round(textareaRect.height * 100) / 100,
+    // });
+    // console.log('📦 Host Div Rect:', {
+    //   left: Math.round(hostRect.left * 100) / 100,
+    //   top: Math.round(hostRect.top * 100) / 100,
+    //   width: Math.round(hostRect.width * 100) / 100,
+    //   height: Math.round(hostRect.height * 100) / 100,
+    // });
+    // console.log('📦 Canvas Object Bounds (screen):', {
+    //   left: Math.round(screenObjectBounds.left * 100) / 100,
+    //   top: Math.round(screenObjectBounds.top * 100) / 100,
+    //   width: Math.round(screenObjectBounds.width * 100) / 100,
+    //   height: Math.round(screenObjectBounds.height * 100) / 100,
+    // });
+    // console.log('📦 Canvas Object Bounds (canvas):', canvasBounds);
 
     // Calculate differences
-    const hostVsObject = {
+    ({
       leftDiff: Math.round((hostRect.left - screenObjectBounds.left) * 100) / 100,
       topDiff: Math.round((hostRect.top - screenObjectBounds.top) * 100) / 100,
       widthDiff: Math.round((hostRect.width - screenObjectBounds.width) * 100) / 100,
       heightDiff: Math.round((hostRect.height - screenObjectBounds.height) * 100) / 100
-    };
-    const textareaVsObject = {
+    });
+    ({
       leftDiff: Math.round((textareaRect.left - screenObjectBounds.left) * 100) / 100,
       topDiff: Math.round((textareaRect.top - screenObjectBounds.top) * 100) / 100,
       widthDiff: Math.round((textareaRect.width - screenObjectBounds.width) * 100) / 100,
       heightDiff: Math.round((textareaRect.height - screenObjectBounds.height) * 100) / 100
-    };
-    console.log('📏 Host Div vs Canvas Object Diff:', hostVsObject);
-    console.log('📏 Textarea vs Canvas Object Diff:', textareaVsObject);
-
-    // Check if they're aligned (within 2px tolerance)
-    const tolerance = 2;
-    const hostAligned = Math.abs(hostVsObject.leftDiff) < tolerance && Math.abs(hostVsObject.topDiff) < tolerance && Math.abs(hostVsObject.widthDiff) < tolerance && Math.abs(hostVsObject.heightDiff) < tolerance;
-    const textareaAligned = Math.abs(textareaVsObject.leftDiff) < tolerance && Math.abs(textareaVsObject.topDiff) < tolerance && Math.abs(textareaVsObject.widthDiff) < tolerance && Math.abs(textareaVsObject.heightDiff) < tolerance;
-    console.log(hostAligned ? '✅ Host Div ALIGNED with canvas object' : '❌ Host Div MISALIGNED with canvas object');
-    console.log(textareaAligned ? '✅ Textarea ALIGNED with canvas object' : '❌ Textarea MISALIGNED with canvas object');
-    console.log('🔍 Zoom:', zoom, 'Viewport Transform:', vpt);
-    console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
+    });
+
+    // console.log(
+    //   hostAligned
+    //     ? '✅ Host Div ALIGNED with canvas object'
+    //     : '❌ Host Div MISALIGNED with canvas object',
+    // );
+    // console.log(
+    //   textareaAligned
+    //     ? '✅ Textarea ALIGNED with canvas object'
+    //     : '❌ Textarea MISALIGNED with canvas object',
+    // );
+    // console.log('🔍 Zoom:', zoom, 'Viewport Transform:', vpt);
+    // console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
   }
 
   /**
    * Debug method to compare text wrapping between textarea and Fabric text object
    */
   debugTextWrapping() {
-    const target = this.target;
+    this.target;
     const text = this.textarea.value;
-    console.log('📝 TEXT WRAPPING COMPARISON:');
-    console.log('📄 Text Content:', `"${text}"`);
-    console.log('📄 Text Length:', text.length);
+
+    // console.log('📝 TEXT WRAPPING COMPARISON:');
+    // console.log('📄 Text Content:', `"${text}"`);
+    // console.log('📄 Text Length:', text.length);
 
     // Analyze line breaks
     const explicitLines = text.split('\n');
-    console.log('📄 Explicit Lines (\\n):', explicitLines.length);
+    // console.log('📄 Explicit Lines (\\n):', explicitLines.length);
     explicitLines.forEach((line, i) => {
-      console.log(`   Line ${i + 1}: "${line}" (${line.length} chars)`);
+      // console.log(`   Line ${i + 1}: "${line}" (${line.length} chars)`);
     });
 
     // Get textarea computed styles for wrapping analysis
     const textareaStyles = window.getComputedStyle(this.textarea);
-    console.log('📐 Textarea Wrapping Styles:');
-    console.log('   width:', textareaStyles.width);
-    console.log('   fontSize:', textareaStyles.fontSize);
-    console.log('   fontFamily:', textareaStyles.fontFamily);
-    console.log('   fontWeight:', textareaStyles.fontWeight);
-    console.log('   letterSpacing:', textareaStyles.letterSpacing);
-    console.log('   lineHeight:', textareaStyles.lineHeight);
-    console.log('   whiteSpace:', textareaStyles.whiteSpace);
-    console.log('   wordWrap:', textareaStyles.wordWrap);
-    console.log('   overflowWrap:', textareaStyles.overflowWrap);
-    console.log('   direction:', textareaStyles.direction);
-    console.log('   textAlign:', textareaStyles.textAlign);
+    // console.log('📐 Textarea Wrapping Styles:');
+    // console.log('   width:', textareaStyles.width);
+    // console.log('   fontSize:', textareaStyles.fontSize);
+    // console.log('   fontFamily:', textareaStyles.fontFamily);
+    // console.log('   fontWeight:', textareaStyles.fontWeight);
+    // console.log('   letterSpacing:', textareaStyles.letterSpacing);
+    // console.log('   lineHeight:', textareaStyles.lineHeight);
+    // console.log('   whiteSpace:', textareaStyles.whiteSpace);
+    // console.log('   wordWrap:', textareaStyles.wordWrap);
+    // console.log('   overflowWrap:', textareaStyles.overflowWrap);
+    // console.log('   direction:', textareaStyles.direction);
+    // console.log('   textAlign:', textareaStyles.textAlign);
 
     // Get Fabric text object properties for comparison
-    console.log('📐 Fabric Text Object Properties:');
-    console.log('   width:', target.width);
-    console.log('   fontSize:', target.fontSize);
-    console.log('   fontFamily:', target.fontFamily);
-    console.log('   fontWeight:', target.fontWeight);
-    console.log('   charSpacing:', target.charSpacing);
-    console.log('   lineHeight:', target.lineHeight);
-    console.log('   direction:', target.direction);
-    console.log('   textAlign:', target.textAlign);
-    console.log('   scaleX:', target.scaleX);
-    console.log('   scaleY:', target.scaleY);
+    // console.log('📐 Fabric Text Object Properties:');
+    // console.log('   width:', (target as any).width);
+    // console.log('   fontSize:', target.fontSize);
+    // console.log('   fontFamily:', target.fontFamily);
+    // console.log('   fontWeight:', target.fontWeight);
+    // console.log('   charSpacing:', target.charSpacing);
+    // console.log('   lineHeight:', target.lineHeight);
+    // console.log('   direction:', (target as any).direction);
+    // console.log('   textAlign:', (target as any).textAlign);
+    // console.log('   scaleX:', target.scaleX);
+    // console.log('   scaleY:', target.scaleY);
 
     // Calculate effective dimensions for comparison - use actual rendered width
     // **THE FIX:** Use getBoundingRect to get the *actual rendered width* of the Fabric object.
-    const fabricEffectiveWidth = this.target.getBoundingRect().width;
+    this.target.getBoundingRect().width;
     // Use the exact width set on textarea for comparison
     const textareaComputedWidth = parseFloat(window.getComputedStyle(this.textarea).width);
-    const textareaEffectiveWidth = textareaComputedWidth / this.canvas.getZoom();
-    const widthDiff = Math.abs(textareaEffectiveWidth - fabricEffectiveWidth);
-    console.log('📏 Effective Width Comparison:');
-    console.log('   Textarea Effective Width:', textareaEffectiveWidth);
-    console.log('   Fabric Effective Width:', fabricEffectiveWidth);
-    console.log('   Width Difference:', widthDiff.toFixed(2) + 'px');
-    console.log(widthDiff < 1 ? '✅ Widths MATCH for wrapping' : '❌ Width MISMATCH may cause different wrapping');
-
-    // Check text direction and bidi handling
-    const hasRTLText = /[\u0590-\u05FF\u0600-\u06FF\u0750-\u077F\uFB50-\uFDFF\uFE70-\uFEFF]/.test(text);
-    const hasBidiText = /[\u0590-\u06FF]/.test(text) && /[a-zA-Z]/.test(text);
-    console.log('🌍 Text Direction Analysis:');
-    console.log('   Has RTL characters:', hasRTLText);
-    console.log('   Has mixed Bidi text:', hasBidiText);
-    console.log('   Textarea direction:', textareaStyles.direction);
-    console.log('   Fabric direction:', target.direction || 'auto');
-    console.log('   Textarea unicodeBidi:', textareaStyles.unicodeBidi);
+    textareaComputedWidth / this.canvas.getZoom();
+
+    // console.log('🌍 Text Direction Analysis:');
+    // console.log('   Has RTL characters:', hasRTLText);
+    // console.log('   Has mixed Bidi text:', hasBidiText);
+    // console.log('   Textarea direction:', textareaStyles.direction);
+    // console.log('   Fabric direction:', (target as any).direction || 'auto');
+    // console.log('   Textarea unicodeBidi:', textareaStyles.unicodeBidi);
 
     // Measure actual rendered line count
     const textareaScrollHeight = this.textarea.scrollHeight;
     const textareaLineHeight = parseFloat(textareaStyles.lineHeight) || parseFloat(textareaStyles.fontSize) * 1.2;
     const estimatedTextareaLines = Math.round(textareaScrollHeight / textareaLineHeight);
-    console.log('📊 Line Count Analysis:');
-    console.log('   Textarea scrollHeight:', textareaScrollHeight);
-    console.log('   Textarea lineHeight:', textareaLineHeight);
-    console.log('   Estimated rendered lines:', estimatedTextareaLines);
-    console.log('   Explicit line breaks:', explicitLines.length);
-    if (estimatedTextareaLines > explicitLines.length) {
-      console.log('🔄 Text wrapping detected in textarea');
-      console.log('   Wrapped lines:', estimatedTextareaLines - explicitLines.length);
-    } else {
-      console.log('📏 No text wrapping in textarea');
-    }
-    console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
+
+    // console.log('📊 Line Count Analysis:');
+    // console.log('   Textarea scrollHeight:', textareaScrollHeight);
+    // console.log('   Textarea lineHeight:', textareaLineHeight);
+    // console.log('   Estimated rendered lines:', estimatedTextareaLines);
+    // console.log('   Explicit line breaks:', explicitLines.length);
+
+    if (estimatedTextareaLines > explicitLines.length) ;
+
+    // console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
   }
 
   /**
@@ -684,17 +675,16 @@ class OverlayEditor {
 
       // Only update direction when not explicitly set on the object
       if (!hasExplicitDirection && detectedDirection && detectedDirection !== currentDirection) {
-        console.log(`🔄 Overlay Exit: Auto-detected direction change from "${currentDirection}" to "${detectedDirection}"`);
-        console.log(`   Text content: "${finalText.substring(0, 50)}..."`);
+        // 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)}..."`);
+
+        // console.log(`✅ Fabric object direction updated to: ${detectedDirection}`);
       }
       if (this.onCommit) {
         this.onCommit(finalText);