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

package/dist/src/shapes/Textbox.mjs

@@ -19,11 +19,11 @@ const textboxDefaultValues = {
 
 // @TODO this is not complete
 
-/**
- * Textbox class, based on IText, allows the user to resize the text rectangle
- * and wraps lines automatically. Textboxes have their Y scaling locked, the
- * user can only change width. Height is adjusted automatically based on the
- * wrapping of lines.
+/**
+ * Textbox class, based on IText, allows the user to resize the text rectangle
+ * and wraps lines automatically. Textboxes have their Y scaling locked, the
+ * user can only change width. Height is adjusted automatically based on the
+ * wrapping of lines.
  */
 class Textbox extends IText {
   static getDefaults() {
@@ -33,10 +33,10 @@ class Textbox extends IText {
     };
   }
 
-  /**
-   * Constructor
-   * @param {String} text Text string
-   * @param {Object} [options] Options object
+  /**
+   * Constructor
+   * @param {String} text Text string
+   * @param {Object} [options] Options object
    */
   constructor(text, options) {
     super(text, {
@@ -46,10 +46,10 @@ class Textbox extends IText {
     this.initializeEventListeners();
   }
 
-  /**
-   * Creates the default control object.
-   * If you prefer to have on instance of controls shared among all objects
-   * make this function return an empty object and add controls to the ownDefaults object
+  /**
+   * Creates the default control object.
+   * If you prefer to have on instance of controls shared among all objects
+   * make this function return an empty object and add controls to the ownDefaults object
    */
   static createControls() {
     return {
@@ -57,11 +57,11 @@ class Textbox extends IText {
     };
   }
 
-  /**
-   * Unlike superclass's version of this function, Textbox does not update
-   * its width.
-   * @private
-   * @override
+  /**
+   * Unlike superclass's version of this function, Textbox does not update
+   * its width.
+   * @private
+   * @override
    */
   initDimensions() {
     if (!this.initialized) {
@@ -90,9 +90,9 @@ class Textbox extends IText {
     this.height = this.calcTextHeight();
   }
 
-  /**
-   * Advanced dimensions calculation using new layout engine
-   * @private
+  /**
+   * Advanced dimensions calculation using new layout engine
+   * @private
    */
   initDimensionsAdvanced() {
     if (!this.initialized) {
@@ -147,9 +147,9 @@ class Textbox extends IText {
     this.dirty = true;
   }
 
-  /**
-   * Generate style map from new layout format
-   * @private
+  /**
+   * Generate style map from new layout format
+   * @private
    */
   _generateStyleMapFromLayout(layout) {
     const map = {};
@@ -171,12 +171,12 @@ class Textbox extends IText {
     return map;
   }
 
-  /**
-   * Generate an object that translates the style object so that it is
-   * broken up by visual lines (new lines and automatic wrapping).
-   * The original text styles object is broken up by actual lines (new lines only),
-   * which is only sufficient for Text / IText
-   * @private
+  /**
+   * Generate an object that translates the style object so that it is
+   * broken up by visual lines (new lines and automatic wrapping).
+   * The original text styles object is broken up by actual lines (new lines only),
+   * which is only sufficient for Text / IText
+   * @private
    */
   _generateStyleMap(textInfo) {
     let realLineCount = 0,
@@ -203,10 +203,10 @@ class Textbox extends IText {
     return map;
   }
 
-  /**
-   * Returns true if object has a style property or has it on a specified line
-   * @param {Number} lineIndex
-   * @return {Boolean}
+  /**
+   * Returns true if object has a style property or has it on a specified line
+   * @param {Number} lineIndex
+   * @return {Boolean}
    */
   styleHas(property, lineIndex) {
     if (this._styleMap && !this.isWrapping) {
@@ -218,10 +218,10 @@ class Textbox extends IText {
     return super.styleHas(property, lineIndex);
   }
 
-  /**
-   * Returns true if object has no styling or no styling in a line
-   * @param {Number} lineIndex , lineIndex is on wrapped lines.
-   * @return {Boolean}
+  /**
+   * Returns true if object has no styling or no styling in a line
+   * @param {Number} lineIndex , lineIndex is on wrapped lines.
+   * @return {Boolean}
    */
   isEmptyStyles(lineIndex) {
     if (!this.styles) {
@@ -258,11 +258,11 @@ class Textbox extends IText {
     return true;
   }
 
-  /**
-   * @protected
-   * @param {Number} lineIndex
-   * @param {Number} charIndex
-   * @return {TextStyleDeclaration} a style object reference to the existing one or a new empty object when undefined
+  /**
+   * @protected
+   * @param {Number} lineIndex
+   * @param {Number} charIndex
+   * @return {TextStyleDeclaration} a style object reference to the existing one or a new empty object when undefined
    */
   _getStyleDeclaration(lineIndex, charIndex) {
     if (this._styleMap && !this.isWrapping) {
@@ -276,59 +276,59 @@ class Textbox extends IText {
     return super._getStyleDeclaration(lineIndex, charIndex);
   }
 
-  /**
-   * @param {Number} lineIndex
-   * @param {Number} charIndex
-   * @param {Object} style
-   * @private
+  /**
+   * @param {Number} lineIndex
+   * @param {Number} charIndex
+   * @param {Object} style
+   * @private
    */
   _setStyleDeclaration(lineIndex, charIndex, style) {
     const map = this._styleMap[lineIndex];
     super._setStyleDeclaration(map.line, map.offset + charIndex, style);
   }
 
-  /**
-   * @param {Number} lineIndex
-   * @param {Number} charIndex
-   * @private
+  /**
+   * @param {Number} lineIndex
+   * @param {Number} charIndex
+   * @private
    */
   _deleteStyleDeclaration(lineIndex, charIndex) {
     const map = this._styleMap[lineIndex];
     super._deleteStyleDeclaration(map.line, map.offset + charIndex);
   }
 
-  /**
-   * probably broken need a fix
-   * Returns the real style line that correspond to the wrapped lineIndex line
-   * Used just to verify if the line does exist or not.
-   * @param {Number} lineIndex
-   * @returns {Boolean} if the line exists or not
-   * @private
+  /**
+   * probably broken need a fix
+   * Returns the real style line that correspond to the wrapped lineIndex line
+   * Used just to verify if the line does exist or not.
+   * @param {Number} lineIndex
+   * @returns {Boolean} if the line exists or not
+   * @private
    */
   _getLineStyle(lineIndex) {
     const map = this._styleMap[lineIndex];
     return !!this.styles[map.line];
   }
 
-  /**
-   * Set the line style to an empty object so that is initialized
-   * @param {Number} lineIndex
-   * @param {Object} style
-   * @private
+  /**
+   * Set the line style to an empty object so that is initialized
+   * @param {Number} lineIndex
+   * @param {Object} style
+   * @private
    */
   _setLineStyle(lineIndex) {
     const map = this._styleMap[lineIndex];
     super._setLineStyle(map.line);
   }
 
-  /**
-   * Wraps text using the 'width' property of Textbox. First this function
-   * splits text on newlines, so we preserve newlines entered by the user.
-   * Then it wraps each line using the width of the Textbox by calling
-   * _wrapLine().
-   * @param {Array} lines The string array of text that is split into lines
-   * @param {Number} desiredWidth width you want to wrap to
-   * @returns {Array} Array of lines
+  /**
+   * Wraps text using the 'width' property of Textbox. First this function
+   * splits text on newlines, so we preserve newlines entered by the user.
+   * Then it wraps each line using the width of the Textbox by calling
+   * _wrapLine().
+   * @param {Array} lines The string array of text that is split into lines
+   * @param {Number} desiredWidth width you want to wrap to
+   * @returns {Array} Array of lines
    */
   _wrapText(lines, desiredWidth) {
     this.isWrapping = true;
@@ -342,12 +342,12 @@ class Textbox extends IText {
     return wrapped;
   }
 
-  /**
-   * For each line of text terminated by an hard line stop,
-   * measure each word width and extract the largest word from all.
-   * The returned words here are the one that at the end will be rendered.
-   * @param {string[]} lines the lines we need to measure
-   *
+  /**
+   * For each line of text terminated by an hard line stop,
+   * measure each word width and extract the largest word from all.
+   * The returned words here are the one that at the end will be rendered.
+   * @param {string[]} lines the lines we need to measure
+   *
    */
   getGraphemeDataForRender(lines) {
     const splitByGrapheme = this.splitByGrapheme,
@@ -380,17 +380,17 @@ class Textbox extends IText {
     };
   }
 
-  /**
-   * Helper function to measure a string of text, given its lineIndex and charIndex offset
-   * It gets called when charBounds are not available yet.
-   * Override if necessary
-   * Use with {@link Textbox#wordSplit}
-   *
-   * @param {CanvasRenderingContext2D} ctx
-   * @param {String} text
-   * @param {number} lineIndex
-   * @param {number} charOffset
-   * @returns {number}
+  /**
+   * Helper function to measure a string of text, given its lineIndex and charIndex offset
+   * It gets called when charBounds are not available yet.
+   * Override if necessary
+   * Use with {@link Textbox#wordSplit}
+   *
+   * @param {CanvasRenderingContext2D} ctx
+   * @param {String} text
+   * @param {number} lineIndex
+   * @param {number} charOffset
+   * @returns {number}
    */
   _measureWord(word, lineIndex) {
     let charOffset = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
@@ -405,26 +405,26 @@ class Textbox extends IText {
     return width;
   }
 
-  /**
-   * Override this method to customize word splitting
-   * Use with {@link Textbox#_measureWord}
-   * @param {string} value
-   * @returns {string[]} array of words
+  /**
+   * Override this method to customize word splitting
+   * Use with {@link Textbox#_measureWord}
+   * @param {string} value
+   * @returns {string[]} array of words
    */
   wordSplit(value) {
     return value.split(this._wordJoiners);
   }
 
-  /**
-   * Wraps a line of text using the width of the Textbox as desiredWidth
-   * and leveraging the known width o words from GraphemeData
-   * @private
-   * @param {Number} lineIndex
-   * @param {Number} desiredWidth width you want to wrap the line to
-   * @param {GraphemeData} graphemeData an object containing all the lines' words width.
-   * @param {Number} reservedSpace space to remove from wrapping for custom functionalities
-   * @returns {Array} Array of line(s) into which the given text is wrapped
-   * to.
+  /**
+   * Wraps a line of text using the width of the Textbox as desiredWidth
+   * and leveraging the known width o words from GraphemeData
+   * @private
+   * @param {Number} lineIndex
+   * @param {Number} desiredWidth width you want to wrap the line to
+   * @param {GraphemeData} graphemeData an object containing all the lines' words width.
+   * @param {Number} reservedSpace space to remove from wrapping for custom functionalities
+   * @returns {Array} Array of line(s) into which the given text is wrapped
+   * to.
    */
   _wrapLine(lineIndex, desiredWidth, _ref) {
     let {
@@ -482,11 +482,11 @@ class Textbox extends IText {
     return graphemeLines;
   }
 
-  /**
-   * Detect if the text line is ended with an hard break
-   * text and itext do not have wrapping, return false
-   * @param {Number} lineIndex text to split
-   * @return {Boolean}
+  /**
+   * Detect if the text line is ended with an hard break
+   * text and itext do not have wrapping, return false
+   * @param {Number} lineIndex text to split
+   * @return {Boolean}
    */
   isEndOfWrapping(lineIndex) {
     if (!this._styleMap[lineIndex + 1]) {
@@ -500,12 +500,12 @@ class Textbox extends IText {
     return false;
   }
 
-  /**
-   * Detect if a line has a linebreak and so we need to account for it when moving
-   * and counting style.
-   * This is important only for splitByGrapheme at the end of wrapping.
-   * If we are not wrapping the offset is always 1
-   * @return Number
+  /**
+   * Detect if a line has a linebreak and so we need to account for it when moving
+   * and counting style.
+   * This is important only for splitByGrapheme at the end of wrapping.
+   * If we are not wrapping the offset is always 1
+   * @return Number
    */
   missingNewlineOffset(lineIndex, skipWrapping) {
     if (this.splitByGrapheme && !skipWrapping) {
@@ -514,12 +514,12 @@ class Textbox extends IText {
     return 1;
   }
 
-  /**
-   * Gets lines of text to render in the Textbox. This function calculates
-   * text wrapping on the fly every time it is called.
-   * @param {String} text text to split
-   * @returns {Array} Array of lines in the Textbox.
-   * @override
+  /**
+   * Gets lines of text to render in the Textbox. This function calculates
+   * text wrapping on the fly every time it is called.
+   * @param {String} text text to split
+   * @returns {Array} Array of lines in the Textbox.
+   * @override
    */
   _splitTextIntoLines(text) {
     const newText = super._splitTextIntoLines(text),
@@ -551,9 +551,9 @@ class Textbox extends IText {
     }
   }
 
-  /**
-   * Initialize event listeners for safety snap functionality
-   * @private
+  /**
+   * Initialize event listeners for safety snap functionality
+   * @private
    */
   initializeEventListeners() {
     var _this$canvas;
@@ -563,30 +563,17 @@ class Textbox extends IText {
     // Detect resize origin during resizing
     this.on('resizing', e => {
       // Check transform origin to determine which side is being resized
-      console.log('🔍 Resize event data:', e);
       if (e.transform) {
         const {
-          originX,
-          originY
+          originX
         } = e.transform;
-        console.log('🔍 Transform origins:', {
-          originX,
-          originY
-        });
         // originX tells us which side is the anchor - opposite side is being dragged
         resizeOrigin = originX === 'right' ? 'left' : originX === 'left' ? 'right' : null;
-        console.log('🎯 Setting resizeOrigin to:', resizeOrigin);
       } else if (e.originX) {
         const {
-          originX,
-          originY
+          originX
         } = e;
-        console.log('🔍 Event origins:', {
-          originX,
-          originY
-        });
         resizeOrigin = originX === 'right' ? 'left' : originX === 'left' ? 'right' : null;
-        console.log('🎯 Setting resizeOrigin to:', resizeOrigin);
       }
     });
 
@@ -594,9 +581,6 @@ class Textbox extends IText {
     // Use 'modified' event which fires after user releases the mouse
     this.on('modified', () => {
       const currentResizeOrigin = resizeOrigin; // Capture the value before reset
-      console.log('✅ Modified event fired - resize complete, triggering safety snap', {
-        resizeOrigin: currentResizeOrigin
-      });
       // Small delay to ensure text layout is updated
       setTimeout(() => this.safetySnapWidth(currentResizeOrigin), 10);
       resizeOrigin = null; // Reset after capturing
@@ -606,53 +590,31 @@ class Textbox extends IText {
     (_this$canvas = this.canvas) === null || _this$canvas === void 0 || _this$canvas.on('object:modified', e => {
       if (e.target === this) {
         const currentResizeOrigin = resizeOrigin; // Capture the value before reset
-        console.log('✅ Canvas object:modified fired for this textbox');
         setTimeout(() => this.safetySnapWidth(currentResizeOrigin), 10);
         resizeOrigin = null; // Reset after capturing
       }
     });
   }
 
-  /**
-   * Safety snap to prevent glyph clipping after manual resize.
-   * Similar to Polotno - checks if any glyphs are too close to edges
-   * and automatically expands width if needed.
-   * @private
-   * @param resizeOrigin - Which side was used for resizing ('left' or 'right')
+  /**
+   * Safety snap to prevent glyph clipping after manual resize.
+   * Similar to Polotno - checks if any glyphs are too close to edges
+   * and automatically expands width if needed.
+   * @private
+   * @param resizeOrigin - Which side was used for resizing ('left' or 'right')
    */
   safetySnapWidth(resizeOrigin) {
-    var _this$_textLines;
-    console.log('🔍 safetySnapWidth called', {
-      isWrapping: this.isWrapping,
-      hasTextLines: !!this._textLines,
-      lineCount: ((_this$_textLines = this._textLines) === null || _this$_textLines === void 0 ? void 0 : _this$_textLines.length) || 0,
-      currentWidth: this.width,
-      type: this.type,
-      text: this.text
-    });
-
     // For Textbox objects, we always want to check for clipping regardless of isWrapping flag
     if (!this._textLines || this.type.toLowerCase() !== 'textbox' || this._textLines.length === 0) {
-      var _this$_textLines2;
-      console.log('❌ Early return - missing requirements', {
-        hasTextLines: !!this._textLines,
-        typeMatch: this.type.toLowerCase() === 'textbox',
-        actualType: this.type,
-        hasLines: ((_this$_textLines2 = this._textLines) === null || _this$_textLines2 === void 0 ? void 0 : _this$_textLines2.length) > 0
-      });
       return;
     }
     const lineCount = this._textLines.length;
     if (lineCount === 0) return;
-
-    // Check all lines, not just the last one
-    let maxActualLineWidth = 0; // Actual measured width without buffers
     let maxRequiredWidth = 0; // Width including RTL buffer
 
     for (let i = 0; i < lineCount; i++) {
       const lineText = this._textLines[i].join(''); // Convert grapheme array to string
       const lineWidth = this.getLineWidth(i);
-      maxActualLineWidth = Math.max(maxActualLineWidth, lineWidth);
 
       // RTL detection - regex for Arabic, Hebrew, and other RTL characters
       const rtlRegex = /[\u0590-\u05FF\u0600-\u06FF\u0750-\u077F\uFB50-\uFDFF\uFE70-\uFEFF]/;
@@ -672,11 +634,6 @@ class Textbox extends IText {
       var _this$canvas2;
       // Set width to exactly what's needed + minimal safety margin
       const newWidth = maxRequiredWidth + 1; // Add just 1px safety margin
-      console.log(`Safety snap: ${this.width.toFixed(0)}px -> ${newWidth.toFixed(0)}px`, {
-        maxActualLineWidth: maxActualLineWidth.toFixed(1),
-        maxRequiredWidth: maxRequiredWidth.toFixed(1),
-        difference: (newWidth - this.width).toFixed(1)
-      });
 
       // Store original position before width change
       const originalLeft = this.left;
@@ -692,19 +649,12 @@ class Textbox extends IText {
       // Only compensate position when resizing from left handle
       // Right handle resize doesn't shift the text position
       if (resizeOrigin === 'left') {
-        console.log('🔧 Compensating for left-side resize', {
-          originalLeft,
-          widthIncrease,
-          newLeft: originalLeft - widthIncrease
-        });
         // When resizing from left, the expansion pushes text right
         // Compensate by moving the textbox left by the width increase
         this.set({
           'left': originalLeft - widthIncrease,
           'top': originalTop
         });
-      } else {
-        console.log('✅ Right-side resize, no compensation needed');
       }
       this.setCoords();
 
@@ -718,31 +668,31 @@ class Textbox extends IText {
     }
   }
 
-  /**
-   * Returns object representation of an instance
-   * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
-   * @return {Object} object representation of an instance
+  /**
+   * Returns object representation of an instance
+   * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
+   * @return {Object} object representation of an instance
    */
   toObject() {
     let propertiesToInclude = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
     return super.toObject(['minWidth', 'splitByGrapheme', ...propertiesToInclude]);
   }
 }
-/**
- * Minimum width of textbox, in pixels.
- * @type Number
+/**
+ * Minimum width of textbox, in pixels.
+ * @type Number
  */
-/**
- * Minimum calculated width of a textbox, in pixels.
- * fixed to 2 so that an empty textbox cannot go to 0
- * and is still selectable without text.
- * @type Number
+/**
+ * Minimum calculated width of a textbox, in pixels.
+ * fixed to 2 so that an empty textbox cannot go to 0
+ * and is still selectable without text.
+ * @type Number
  */
-/**
- * Use this boolean property in order to split strings that have no white space concept.
- * this is a cheap way to help with chinese/japanese
- * @type Boolean
- * @since 2.6.0
+/**
+ * Use this boolean property in order to split strings that have no white space concept.
+ * this is a cheap way to help with chinese/japanese
+ * @type Boolean
+ * @since 2.6.0
  */
 _defineProperty(Textbox, "type", 'Textbox');
 _defineProperty(Textbox, "textLayoutProperties", [...IText.textLayoutProperties, 'width']);