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

package/dist/index.js

@@ -360,7 +360,7 @@
   }
   const cache = new Cache();
 
-  var version = "7.0.1-beta11";
+  var version = "7.0.1-beta12";
 
   // use this syntax so babel plugin see this import here
   const VERSION = version;
@@ -20722,9 +20722,9 @@
 
   let measuringContext;
 
-  /**
-   * Return a context for measurement of text string.
-   * if created it gets stored for reuse
+  /**
+   * Return a context for measurement of text string.
+   * if created it gets stored for reuse
    */
   function getMeasuringContext() {
     if (!measuringContext) {
@@ -20737,17 +20737,17 @@
     return measuringContext;
   }
 
-  /**
-   * Measure and return the info of a single grapheme.
-   * needs the the info of previous graphemes already filled
-   * Override to customize measuring
+  /**
+   * Measure and return the info of a single grapheme.
+   * needs the the info of previous graphemes already filled
+   * Override to customize measuring
    */
 
   // @TODO this is not complete
 
-  /**
-   * Text class
-   * @see {@link http://fabricjs.com/fabric-intro-part-2#text}
+  /**
+   * Text class
+   * @see {@link http://fabricjs.com/fabric-intro-part-2#text}
    */
   class FabricText extends StyledText {
     static getDefaults() {
@@ -20758,11 +20758,11 @@
     }
     constructor(text, options) {
       super();
-      /**
-       * contains characters bounding boxes
-       * This variable is considered to be protected.
-       * But for how mixins are implemented right now, we can't leave it private
-       * @protected
+      /**
+       * contains characters bounding boxes
+       * This variable is considered to be protected.
+       * But for how mixins are implemented right now, we can't leave it private
+       * @protected
        */
       _defineProperty(this, "__charBounds", []);
       Object.assign(this, FabricText.ownDefaults);
@@ -20779,9 +20779,9 @@
       this.setCoords();
     }
 
-    /**
-     * If text has a path, it will add the extra information needed
-     * for path and text calculations
+    /**
+     * If text has a path, it will add the extra information needed
+     * for path and text calculations
      */
     setPathInfo() {
       const path = this.path;
@@ -20790,10 +20790,10 @@
       }
     }
 
-    /**
-     * @private
-     * Divides text into lines of text and lines of graphemes.
-     * Uses browser lines when available for pixel-perfect consistency.
+    /**
+     * @private
+     * Divides text into lines of text and lines of graphemes.
+     * Uses browser lines when available for pixel-perfect consistency.
      */
     _splitText() {
       // Check if we have valid browser lines and should use them
@@ -20809,9 +20809,9 @@
       return newLines;
     }
 
-    /**
-     * Create TextLinesInfo from browser-extracted lines
-     * @private
+    /**
+     * Create TextLinesInfo from browser-extracted lines
+     * @private
      */
     _splitTextFromBrowserLines(browserLines) {
       const lines = [];
@@ -20845,10 +20845,10 @@
       return result;
     }
 
-    /**
-     * Initialize or update text dimensions.
-     * Updates this.width and this.height with the proper values.
-     * Does not return dimensions.
+    /**
+     * Initialize or update text dimensions.
+     * Updates this.width and this.height with the proper values.
+     * Does not return dimensions.
      */
     initDimensions() {
       // Check if font is ready for accurate measurements
@@ -20894,14 +20894,14 @@
       }
     }
 
-    /**
-     * Enlarge space boxes and shift the others
+    /**
+     * Enlarge space boxes and shift the others
      */
     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.includes('justify') && (i === len - 1 || this.isEndOfWrapping(i))) {
+        if (!this.textAlign.includes('justify') || i === len - 1 || this.isEndOfWrapping(i)) {
           continue;
         }
         accumulatedSpace = 0;
@@ -20957,18 +20957,18 @@
       }
     }
 
-    /**
-     * Advanced layout using new text engine (Konva-compatible)
-     * @private
+    /**
+     * Advanced layout using new text engine (Konva-compatible)
+     * @private
      */
     _layoutTextAdvanced() {
       const options = this._getAdvancedLayoutOptions();
       return layoutText(options);
     }
 
-    /**
-     * Get advanced layout options from current text properties
-     * @private
+    /**
+     * Get advanced layout options from current text properties
+     * @private
      */
     _getAdvancedLayoutOptions() {
       return {
@@ -20990,9 +20990,9 @@
       };
     }
 
-    /**
-     * Map Fabric textAlign to Konva align format
-     * @private
+    /**
+     * Map Fabric textAlign to Konva align format
+     * @private
      */
     _mapTextAlignToAlign(textAlign) {
       switch (textAlign) {
@@ -21013,8 +21013,8 @@
       }
     }
 
-    /**
-     * Enhanced initDimensions that uses advanced layout when enabled
+    /**
+     * Enhanced initDimensions that uses advanced layout when enabled
      */
     initDimensionsAdvanced() {
       if (!this.enableAdvancedLayout) {
@@ -21043,9 +21043,9 @@
       this.dirty = true;
     }
 
-    /**
-     * Convert new layout format to legacy _textLines and __charBounds format
-     * @private
+    /**
+     * Convert new layout format to legacy _textLines and __charBounds format
+     * @private
      */
     _convertLayoutToLegacyFormat(layout) {
       this._textLines = layout.lines.map(line => line.graphemes);
@@ -21067,30 +21067,30 @@
       }
     }
 
-    /**
-     * Detect if the text line is ended with an hard break
-     * text and itext do not have wrapping, return false
-     * @return {Boolean}
+    /**
+     * Detect if the text line is ended with an hard break
+     * text and itext do not have wrapping, return false
+     * @return {Boolean}
      */
     isEndOfWrapping(lineIndex) {
       return lineIndex === this._textLines.length - 1;
     }
 
-    /**
-     * Detect if a line has a linebreak and so we need to account for it when moving
-     * and counting style.
-     * It return always 1 for text and Itext. Textbox has its own implementation
-     * @return Number
+    /**
+     * Detect if a line has a linebreak and so we need to account for it when moving
+     * and counting style.
+     * It return always 1 for text and Itext. Textbox has its own implementation
+     * @return Number
      */
 
     missingNewlineOffset(_lineIndex) {
       return 1;
     }
 
-    /**
-     * Returns 2d representation (lineIndex and charIndex) of cursor
-     * @param {Number} selectionStart
-     * @param {Boolean} [skipWrapping] consider the location for unwrapped lines. useful to manage styles.
+    /**
+     * Returns 2d representation (lineIndex and charIndex) of cursor
+     * @param {Number} selectionStart
+     * @param {Boolean} [skipWrapping] consider the location for unwrapped lines. useful to manage styles.
      */
     get2DCursorLocation(selectionStart, skipWrapping) {
       const lines = skipWrapping ? this._unwrappedTextLines : this._textLines;
@@ -21110,24 +21110,24 @@
       };
     }
 
-    /**
-     * Returns string representation of an instance
-     * @return {String} String representation of text object
+    /**
+     * Returns string representation of an instance
+     * @return {String} String representation of text object
      */
     toString() {
       return `#<Text (${this.complexity()}): { "text": "${this.text}", "fontFamily": "${this.fontFamily}" }>`;
     }
 
-    /**
-     * Return the dimension and the zoom level needed to create a cache canvas
-     * big enough to host the object to be cached.
-     * @private
-     * @param {Object} dim.x width of object to be cached
-     * @param {Object} dim.y height of object to be cached
-     * @return {Object}.width width of canvas
-     * @return {Object}.height height of canvas
-     * @return {Object}.zoomX zoomX zoom value to unscale the canvas before drawing cache
-     * @return {Object}.zoomY zoomY zoom value to unscale the canvas before drawing cache
+    /**
+     * Return the dimension and the zoom level needed to create a cache canvas
+     * big enough to host the object to be cached.
+     * @private
+     * @param {Object} dim.x width of object to be cached
+     * @param {Object} dim.y height of object to be cached
+     * @return {Object}.width width of canvas
+     * @return {Object}.height height of canvas
+     * @return {Object}.zoomX zoomX zoom value to unscale the canvas before drawing cache
+     * @return {Object}.zoomY zoomY zoom value to unscale the canvas before drawing cache
      */
     _getCacheCanvasDimensions() {
       const dims = super._getCacheCanvasDimensions();
@@ -21137,9 +21137,9 @@
       return dims;
     }
 
-    /**
-     * @private
-     * @param {CanvasRenderingContext2D} ctx Context to render on
+    /**
+     * @private
+     * @param {CanvasRenderingContext2D} ctx Context to render on
      */
     _render(ctx) {
       const path = this.path;
@@ -21152,9 +21152,9 @@
       this._renderTextDecoration(ctx, 'linethrough');
     }
 
-    /**
-     * @private
-     * @param {CanvasRenderingContext2D} ctx Context to render on
+    /**
+     * @private
+     * @param {CanvasRenderingContext2D} ctx Context to render on
      */
     _renderText(ctx) {
       // Skip text rendering if in overlay editing mode
@@ -21170,15 +21170,15 @@
       }
     }
 
-    /**
-     * Set the font parameter of the context with the object properties or with charStyle
-     * @private
-     * @param {CanvasRenderingContext2D} ctx Context to render on
-     * @param {Object} [charStyle] object with font style properties
-     * @param {String} [charStyle.fontFamily] Font Family
-     * @param {Number} [charStyle.fontSize] Font size in pixels. ( without px suffix )
-     * @param {String} [charStyle.fontWeight] Font weight
-     * @param {String} [charStyle.fontStyle] Font style (italic|normal)
+    /**
+     * Set the font parameter of the context with the object properties or with charStyle
+     * @private
+     * @param {CanvasRenderingContext2D} ctx Context to render on
+     * @param {Object} [charStyle] object with font style properties
+     * @param {String} [charStyle.fontFamily] Font Family
+     * @param {Number} [charStyle.fontSize] Font size in pixels. ( without px suffix )
+     * @param {String} [charStyle.fontWeight] Font weight
+     * @param {String} [charStyle.fontStyle] Font style (italic|normal)
      */
     _setTextStyles(ctx, charStyle, forMeasuring) {
       ctx.textBaseline = 'alphabetic';
@@ -21198,11 +21198,11 @@
       ctx.font = this._getFontDeclaration(charStyle, forMeasuring);
     }
 
-    /**
-     * calculate and return the text Width measuring each line.
-     * @private
-     * @param {CanvasRenderingContext2D} ctx Context to render on
-     * @return {Number} Maximum width of Text object
+    /**
+     * calculate and return the text Width measuring each line.
+     * @private
+     * @param {CanvasRenderingContext2D} ctx Context to render on
+     * @return {Number} Maximum width of Text object
      */
     calcTextWidth() {
       let maxWidth = this.getLineWidth(0);
@@ -21215,23 +21215,23 @@
       return maxWidth;
     }
 
-    /**
-     * @private
-     * @param {String} method Method name ("fillText" or "strokeText")
-     * @param {CanvasRenderingContext2D} ctx Context to render on
-     * @param {String} line Text to render
-     * @param {Number} left Left position of text
-     * @param {Number} top Top position of text
-     * @param {Number} lineIndex Index of a line in a text
+    /**
+     * @private
+     * @param {String} method Method name ("fillText" or "strokeText")
+     * @param {CanvasRenderingContext2D} ctx Context to render on
+     * @param {String} line Text to render
+     * @param {Number} left Left position of text
+     * @param {Number} top Top position of text
+     * @param {Number} lineIndex Index of a line in a text
      */
     _renderTextLine(method, ctx, line, left, top, lineIndex) {
       this._renderChars(method, ctx, line, left, top, lineIndex);
     }
 
-    /**
-     * Renders the text background for lines, taking care of style
-     * @private
-     * @param {CanvasRenderingContext2D} ctx Context to render on
+    /**
+     * Renders the text background for lines, taking care of style
+     * @private
+     * @param {CanvasRenderingContext2D} ctx Context to render on
      */
     _renderTextLinesBackground(ctx) {
       if (!this.textBackgroundColor && !this.styleHas('textBackgroundColor')) {
@@ -21294,15 +21294,15 @@
       this._removeShadow(ctx);
     }
 
-    /**
-     * measure and return the width of a single character.
-     * possibly overridden to accommodate different measure logic or
-     * to hook some external lib for character measurement
-     * @private
-     * @param {String} _char, char to be measured
-     * @param {Object} charStyle style of char to be measured
-     * @param {String} [previousChar] previous char
-     * @param {Object} [prevCharStyle] style of previous char
+    /**
+     * measure and return the width of a single character.
+     * possibly overridden to accommodate different measure logic or
+     * to hook some external lib for character measurement
+     * @private
+     * @param {String} _char, char to be measured
+     * @param {Object} charStyle style of char to be measured
+     * @param {String} [previousChar] previous char
+     * @param {Object} [prevCharStyle] style of previous char
      */
     _measureChar(_char, charStyle, previousChar, prevCharStyle) {
       const fontCache = cache.getFontCache(charStyle),
@@ -21347,19 +21347,19 @@
       };
     }
 
-    /**
-     * Computes height of character at given position
-     * @param {Number} line the line index number
-     * @param {Number} _char the character index number
-     * @return {Number} fontSize of the character
+    /**
+     * Computes height of character at given position
+     * @param {Number} line the line index number
+     * @param {Number} _char the character index number
+     * @return {Number} fontSize of the character
      */
     getHeightOfChar(line, _char) {
       return this.getValueOfPropertyAt(line, _char, 'fontSize');
     }
 
-    /**
-     * measure a text line measuring all characters.
-     * @param {Number} lineIndex line number
+    /**
+     * measure a text line measuring all characters.
+     * @param {Number} lineIndex line number
      */
     measureLine(lineIndex) {
       const lineInfo = this._measureLine(lineIndex);
@@ -21372,11 +21372,11 @@
       return lineInfo;
     }
 
-    /**
-     * measure every grapheme of a line, populating __charBounds
-     * @param {Number} lineIndex
-     * @return {Object} object.width total width of characters
-     * @return {Object} object.numOfSpaces length of chars that match this._reSpacesAndTabs
+    /**
+     * measure every grapheme of a line, populating __charBounds
+     * @param {Number} lineIndex
+     * @return {Object} object.width total width of characters
+     * @return {Object} object.numOfSpaces length of chars that match this._reSpacesAndTabs
      */
     _measureLine(lineIndex) {
       let width = 0,
@@ -21439,13 +21439,13 @@
       };
     }
 
-    /**
-     * Calculate the angle  and the left,top position of the char that follow a path.
-     * It appends it to graphemeInfo to be reused later at rendering
-     * @private
-     * @param {Number} positionInPath to be measured
-     * @param {GraphemeBBox} graphemeInfo current grapheme box information
-     * @param {Object} startingPoint position of the point
+    /**
+     * Calculate the angle  and the left,top position of the char that follow a path.
+     * It appends it to graphemeInfo to be reused later at rendering
+     * @private
+     * @param {Number} positionInPath to be measured
+     * @param {GraphemeBBox} graphemeInfo current grapheme box information
+     * @param {Object} startingPoint position of the point
      */
     _setGraphemeOnPath(positionInPath, graphemeInfo) {
       const centerPosition = positionInPath + graphemeInfo.kernedWidth / 2,
@@ -21458,13 +21458,13 @@
       graphemeInfo.angle = info.angle + (this.pathSide === RIGHT ? Math.PI : 0);
     }
 
-    /**
-     *
-     * @param {String} grapheme to be measured
-     * @param {Number} lineIndex index of the line where the char is
-     * @param {Number} charIndex position in the line
-     * @param {String} [prevGrapheme] character preceding the one to be measured
-     * @returns {GraphemeBBox} grapheme bbox
+    /**
+     *
+     * @param {String} grapheme to be measured
+     * @param {Number} lineIndex index of the line where the char is
+     * @param {Number} charIndex position in the line
+     * @param {String} [prevGrapheme] character preceding the one to be measured
+     * @returns {GraphemeBBox} grapheme bbox
      */
     _getGraphemeBox(grapheme, lineIndex, charIndex, prevGrapheme, skipLeft) {
       const style = this.getCompleteStyleDeclaration(lineIndex, charIndex),
@@ -21492,10 +21492,10 @@
       return box;
     }
 
-    /**
-     * Calculate height of line at 'lineIndex'
-     * @param {Number} lineIndex index of line to calculate
-     * @return {Number}
+    /**
+     * Calculate height of line at 'lineIndex'
+     * @param {Number} lineIndex index of line to calculate
+     * @return {Number}
      */
     getHeightOfLine(lineIndex) {
       if (this.__lineHeights[lineIndex]) {
@@ -21511,8 +21511,8 @@
       return this.__lineHeights[lineIndex] = maxHeight * this.lineHeight * this._fontSizeMult;
     }
 
-    /**
-     * Calculate text box height
+    /**
+     * Calculate text box height
      */
     calcTextHeight() {
       let lineHeight,
@@ -21524,26 +21524,26 @@
       return height;
     }
 
-    /**
-     * @private
-     * @return {Number} Left offset
+    /**
+     * @private
+     * @return {Number} Left offset
      */
     _getLeftOffset() {
       return this.direction === 'ltr' ? -this.width / 2 : this.width / 2;
     }
 
-    /**
-     * @private
-     * @return {Number} Top offset
+    /**
+     * @private
+     * @return {Number} Top offset
      */
     _getTopOffset() {
       return -this.height / 2;
     }
 
-    /**
-     * @private
-     * @param {CanvasRenderingContext2D} ctx Context to render on
-     * @param {String} method Method name ("fillText" or "strokeText")
+    /**
+     * @private
+     * @param {CanvasRenderingContext2D} ctx Context to render on
+     * @param {String} method Method name ("fillText" or "strokeText")
      */
     _renderTextCommon(ctx, method) {
       ctx.save();
@@ -21560,9 +21560,9 @@
       ctx.restore();
     }
 
-    /**
-     * @private
-     * @param {CanvasRenderingContext2D} ctx Context to render on
+    /**
+     * @private
+     * @param {CanvasRenderingContext2D} ctx Context to render on
      */
     _renderTextFill(ctx) {
       if (!this.fill && !this.styleHas(FILL)) {
@@ -21571,9 +21571,9 @@
       this._renderTextCommon(ctx, 'fillText');
     }
 
-    /**
-     * @private
-     * @param {CanvasRenderingContext2D} ctx Context to render on
+    /**
+     * @private
+     * @param {CanvasRenderingContext2D} ctx Context to render on
      */
     _renderTextStroke(ctx) {
       if ((!this.stroke || this.strokeWidth === 0) && this.isEmptyStyles()) {
@@ -21590,14 +21590,14 @@
       ctx.restore();
     }
 
-    /**
-     * @private
-     * @param {String} method fillText or strokeText.
-     * @param {CanvasRenderingContext2D} ctx Context to render on
-     * @param {Array} line Content of the line, splitted in an array by grapheme
-     * @param {Number} left
-     * @param {Number} top
-     * @param {Number} lineIndex
+    /**
+     * @private
+     * @param {String} method fillText or strokeText.
+     * @param {CanvasRenderingContext2D} ctx Context to render on
+     * @param {Array} line Content of the line, splitted in an array by grapheme
+     * @param {Number} left
+     * @param {Number} top
+     * @param {Number} lineIndex
      */
     _renderChars(method, ctx, line, left, top, lineIndex) {
       const lineHeight = this.getHeightOfLine(lineIndex),
@@ -21679,16 +21679,16 @@
       ctx.restore();
     }
 
-    /**
-     * This function try to patch the missing gradientTransform on canvas gradients.
-     * transforming a context to transform the gradient, is going to transform the stroke too.
-     * we want to transform the gradient but not the stroke operation, so we create
-     * a transformed gradient on a pattern and then we use the pattern instead of the gradient.
-     * this method has drawbacks: is slow, is in low resolution, needs a patch for when the size
-     * is limited.
-     * @private
-     * @param {TFiller} filler a fabric gradient instance
-     * @return {CanvasPattern} a pattern to use as fill/stroke style
+    /**
+     * This function try to patch the missing gradientTransform on canvas gradients.
+     * transforming a context to transform the gradient, is going to transform the stroke too.
+     * we want to transform the gradient but not the stroke operation, so we create
+     * a transformed gradient on a pattern and then we use the pattern instead of the gradient.
+     * this method has drawbacks: is slow, is in low resolution, needs a patch for when the size
+     * is limited.
+     * @private
+     * @param {TFiller} filler a fabric gradient instance
+     * @return {CanvasPattern} a pattern to use as fill/stroke style
      */
     _applyPatternGradientTransformText(filler) {
       // TODO: verify compatibility with strokeUniform
@@ -21744,12 +21744,12 @@
       };
     }
 
-    /**
-     * This function prepare the canvas for a stroke style, and stroke and strokeWidth
-     * need to be sent in as defined
-     * @param {CanvasRenderingContext2D} ctx
-     * @param {CompleteTextStyleDeclaration} style with stroke and strokeWidth defined
-     * @returns
+    /**
+     * This function prepare the canvas for a stroke style, and stroke and strokeWidth
+     * need to be sent in as defined
+     * @param {CanvasRenderingContext2D} ctx
+     * @param {CompleteTextStyleDeclaration} style with stroke and strokeWidth defined
+     * @returns
      */
     _setStrokeStyles(ctx, _ref) {
       let {
@@ -21764,12 +21764,12 @@
       return this.handleFiller(ctx, 'strokeStyle', stroke);
     }
 
-    /**
-     * This function prepare the canvas for a ill style, and fill
-     * need to be sent in as defined
-     * @param {CanvasRenderingContext2D} ctx
-     * @param {CompleteTextStyleDeclaration} style with ill defined
-     * @returns
+    /**
+     * This function prepare the canvas for a ill style, and fill
+     * need to be sent in as defined
+     * @param {CanvasRenderingContext2D} ctx
+     * @param {CompleteTextStyleDeclaration} style with ill defined
+     * @returns
      */
     _setFillStyles(ctx, _ref2) {
       let {
@@ -21778,16 +21778,16 @@
       return this.handleFiller(ctx, 'fillStyle', fill);
     }
 
-    /**
-     * @private
-     * @param {String} method
-     * @param {CanvasRenderingContext2D} ctx Context to render on
-     * @param {Number} lineIndex
-     * @param {Number} charIndex
-     * @param {String} _char
-     * @param {Number} left Left coordinate
-     * @param {Number} top Top coordinate
-     * @param {Number} lineHeight Height of the line
+    /**
+     * @private
+     * @param {String} method
+     * @param {CanvasRenderingContext2D} ctx Context to render on
+     * @param {Number} lineIndex
+     * @param {Number} charIndex
+     * @param {String} _char
+     * @param {Number} left Left coordinate
+     * @param {Number} top Top coordinate
+     * @param {Number} lineHeight Height of the line
      */
     _renderChar(method, ctx, lineIndex, charIndex, _char, left, top) {
       const decl = this._getStyleDeclaration(lineIndex, charIndex),
@@ -21816,30 +21816,30 @@
       ctx.restore();
     }
 
-    /**
-     * Turns the character into a 'superior figure' (i.e. 'superscript')
-     * @param {Number} start selection start
-     * @param {Number} end selection end
+    /**
+     * Turns the character into a 'superior figure' (i.e. 'superscript')
+     * @param {Number} start selection start
+     * @param {Number} end selection end
      */
     setSuperscript(start, end) {
       this._setScript(start, end, this.superscript);
     }
 
-    /**
-     * Turns the character into an 'inferior figure' (i.e. 'subscript')
-     * @param {Number} start selection start
-     * @param {Number} end selection end
+    /**
+     * Turns the character into an 'inferior figure' (i.e. 'subscript')
+     * @param {Number} start selection start
+     * @param {Number} end selection end
      */
     setSubscript(start, end) {
       this._setScript(start, end, this.subscript);
     }
 
-    /**
-     * Applies 'schema' at given position
-     * @private
-     * @param {Number} start selection start
-     * @param {Number} end selection end
-     * @param {Number} schema
+    /**
+     * Applies 'schema' at given position
+     * @private
+     * @param {Number} start selection start
+     * @param {Number} end selection end
+     * @param {Number} schema
      */
     _setScript(start, end, schema) {
       const loc = this.get2DCursorLocation(start, true),
@@ -21852,10 +21852,10 @@
       this.setSelectionStyles(style, start, end);
     }
 
-    /**
-     * @private
-     * @param {Number} lineIndex index text line
-     * @return {Number} Line left offset
+    /**
+     * @private
+     * @param {Number} lineIndex index text line
+     * @return {Number} Line left offset
      */
     _getLineLeftOffset(lineIndex) {
       const lineWidth = this.getLineWidth(lineIndex),
@@ -21905,8 +21905,8 @@
       return leftOffset;
     }
 
-    /**
-     * @private
+    /**
+     * @private
      */
     _clearCache() {
       this._forceClearCache = false;
@@ -21915,12 +21915,12 @@
       this.__charBounds = [];
     }
 
-    /**
-     * Measure a single line given its index. Used to calculate the initial
-     * text bounding box. The values are calculated and stored in __lineWidths cache.
-     * @private
-     * @param {Number} lineIndex line number
-     * @return {Number} Line width
+    /**
+     * Measure a single line given its index. Used to calculate the initial
+     * text bounding box. The values are calculated and stored in __lineWidths cache.
+     * @private
+     * @param {Number} lineIndex line number
+     * @return {Number} Line width
      */
     getLineWidth(lineIndex) {
       if (this.__lineWidths[lineIndex] !== undefined) {
@@ -21939,12 +21939,12 @@
       return 0;
     }
 
-    /**
-     * Retrieves the value of property at given character position
-     * @param {Number} lineIndex the line number
-     * @param {Number} charIndex the character number
-     * @param {String} property the property name
-     * @returns the value of 'property'
+    /**
+     * Retrieves the value of property at given character position
+     * @param {Number} lineIndex the line number
+     * @param {Number} charIndex the character number
+     * @param {String} property the property name
+     * @returns the value of 'property'
      */
     getValueOfPropertyAt(lineIndex, charIndex, property) {
       var _charStyle$property;
@@ -21952,9 +21952,9 @@
       return (_charStyle$property = charStyle[property]) !== null && _charStyle$property !== void 0 ? _charStyle$property : this[property];
     }
 
-    /**
-     * @private
-     * @param {CanvasRenderingContext2D} ctx Context to render on
+    /**
+     * @private
+     * @param {CanvasRenderingContext2D} ctx Context to render on
      */
     _renderTextDecoration(ctx, type) {
       if (!this[type] && !this.styleHas(type)) {
@@ -22038,10 +22038,10 @@
       this._removeShadow(ctx);
     }
 
-    /**
-     * return font declaration string for canvas context
-     * @param {Object} [styleObject] object
-     * @returns {String} font declaration formatted for canvas context.
+    /**
+     * return font declaration string for canvas context
+     * @param {Object} [styleObject] object
+     * @returns {String} font declaration formatted for canvas context.
      */
     _getFontDeclaration() {
       let {
@@ -22067,9 +22067,9 @@
       return [fontStyle, fontWeight, `${forMeasuring ? this.CACHE_FONT_SIZE : fontSize}px`, parsedFontFamily].join(' ');
     }
 
-    /**
-     * Renders text instance on a specified context
-     * @param {CanvasRenderingContext2D} ctx Context to render on
+    /**
+     * Renders text instance on a specified context
+     * @param {CanvasRenderingContext2D} ctx Context to render on
      */
     render(ctx) {
       if (!this.visible) {
@@ -22084,22 +22084,22 @@
       super.render(ctx);
     }
 
-    /**
-     * Override this method to customize grapheme splitting
-     * @todo the util `graphemeSplit` needs to be injectable in some way.
-     * is more comfortable to inject the correct util rather than having to override text
-     * in the middle of the prototype chain
-     * @param {string} value
-     * @returns {string[]} array of graphemes
+    /**
+     * Override this method to customize grapheme splitting
+     * @todo the util `graphemeSplit` needs to be injectable in some way.
+     * is more comfortable to inject the correct util rather than having to override text
+     * in the middle of the prototype chain
+     * @param {string} value
+     * @returns {string[]} array of graphemes
      */
     graphemeSplit(value) {
       return graphemeSplit(value);
     }
 
-    /**
-     * Returns the text as an array of lines.
-     * @param {String} text text to split
-     * @returns  Lines in the text
+    /**
+     * Returns the text as an array of lines.
+     * @param {String} text text to split
+     * @returns  Lines in the text
      */
     _splitTextIntoLines(text) {
       const lines = text.split(this._reNewline),
@@ -22125,18 +22125,18 @@
       };
     }
 
-    /**
-     * Check if text contains Arabic characters
-     * @private
+    /**
+     * 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
-     * @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] : [];
@@ -22179,23 +22179,23 @@
       return this;
     }
 
-    /**
-     * Returns complexity of an instance
-     * @return {Number} complexity
+    /**
+     * Returns complexity of an instance
+     * @return {Number} complexity
      */
     complexity() {
       return 1;
     }
 
-    /**
-     * List of generic font families
-     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#generic-name
+    /**
+     * List of generic font families
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#generic-name
      */
 
-    /**
-     * Returns FabricText instance from an SVG element (<b>not yet implemented</b>)
-     * @param {HTMLElement} element Element to parse
-     * @param {Object} [options] Options object
+    /**
+     * Returns FabricText instance from an SVG element (<b>not yet implemented</b>)
+     * @param {HTMLElement} element Element to parse
+     * @param {Object} [options] Options object
      */
     static async fromElement(element, options, cssRules) {
       const parsedAttributes = parseAttributes(element, FabricText.ATTRIBUTE_NAMES, cssRules);
@@ -22234,10 +22234,10 @@
         scaledDiff = lineHeightDiff * textHeightScaleFactor,
         textHeight = text.getScaledHeight() + scaledDiff;
       let offX = 0;
-      /*
-        Adjust positioning:
-          x/y attributes in SVG correspond to the bottom-left corner of text bounding box
-          fabric output by default at top, left.
+      /*
+        Adjust positioning:
+          x/y attributes in SVG correspond to the bottom-left corner of text bounding box
+          fabric output by default at top, left.
       */
       if (textAnchor === CENTER) {
         offX = text.getScaledWidth() / 2;
@@ -22255,9 +22255,9 @@
 
     /* _FROM_SVG_END_ */
 
-    /**
-     * Check if the font is ready for accurate measurements
-     * @private
+    /**
+     * Check if the font is ready for accurate measurements
+     * @private
      */
     _isFontReady() {
       if (typeof document === 'undefined' || !('fonts' in document)) {
@@ -22270,9 +22270,9 @@
       }
     }
 
-    /**
-     * Schedule re-initialization after font loads
-     * @private
+    /**
+     * Schedule re-initialization after font loads
+     * @private
      */
     _scheduleInitAfterFontLoad() {
       if (typeof document === 'undefined' || !('fonts' in document)) {
@@ -22308,8 +22308,8 @@
       });
     }
 
-    /**
-     * Force complete text re-initialization (useful after JSON loading)
+    /**
+     * Force complete text re-initialization (useful after JSON loading)
      */
     forceTextReinitialization() {
       console.log('🔄 Force reinitializing text object');
@@ -22337,10 +22337,10 @@
       }
     }
 
-    /**
-     * Returns FabricText instance from an object representation
-     * @param {Object} object plain js Object to create an instance from
-     * @returns {Promise<FabricText>}
+    /**
+     * Returns FabricText instance from an object representation
+     * @param {Object} object plain js Object to create an instance from
+     * @returns {Promise<FabricText>}
      */
     static fromObject(object) {
       return this._fromObject({
@@ -22442,10 +22442,10 @@
       });
     }
   }
-  /**
-   * Properties that requires a text layout recalculation when changed
-   * @type string[]
-   * @protected
+  /**
+   * Properties that requires a text layout recalculation when changed
+   * @type string[]
+   * @protected
    */
   _defineProperty(FabricText, "textLayoutProperties", textLayoutProperties);
   _defineProperty(FabricText, "cacheProperties", [...cacheProperties, ...additionalProps]);
@@ -22453,9 +22453,9 @@
   _defineProperty(FabricText, "type", 'Text');
   _defineProperty(FabricText, "genericFonts", ['serif', 'sans-serif', 'monospace', 'cursive', 'fantasy', 'system-ui', 'ui-serif', 'ui-sans-serif', 'ui-monospace', 'ui-rounded', 'math', 'emoji', 'fangsong']);
   /* _FROM_SVG_START_ */
-  /**
-   * List of attribute names to account for when parsing SVG element (used by {@link FabricText.fromElement})
-   * @see: http://www.w3.org/TR/SVG/text.html#TextElement
+  /**
+   * List of attribute names to account for when parsing SVG element (used by {@link FabricText.fromElement})
+   * @see: http://www.w3.org/TR/SVG/text.html#TextElement
    */
   _defineProperty(FabricText, "ATTRIBUTE_NAMES", SHARED_ATTRIBUTES.concat('x', 'y', 'dx', 'dy', 'font-family', 'font-style', 'font-weight', 'font-size', 'letter-spacing', 'text-decoration', 'text-anchor'));
   applyMixins(FabricText, [TextSVGExportMixin]);
@@ -26594,11 +26594,11 @@
 
   // @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() {
@@ -26608,10 +26608,10 @@
       };
     }
 
-    /**
-     * 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, {
@@ -26621,10 +26621,10 @@
       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 {
@@ -26632,11 +26632,11 @@
       };
     }
 
-    /**
-     * 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) {
@@ -26704,6 +26704,7 @@
       if (this._usingBrowserWrapping) {
         this._browserWrapInitialized = true;
       }
+      this.calcTextWidth();
       if (this.textAlign.includes(JUSTIFY)) {
         // For browser wrapping fonts, apply browser-calculated justify spaces
         if (this._usingBrowserWrapping) {
@@ -26778,11 +26779,38 @@
       } else {
         this.height = this.calcTextHeight();
       }
+
+      // Double-check that justify was applied by checking space widths
+      if (this.textAlign.includes('justify') && this.__charBounds) {
+        setTimeout(() => {
+          // Verify justify was applied by checking if space widths vary
+          let hasVariableSpaces = false;
+          this.__charBounds.forEach((lineBounds, i) => {
+            if (lineBounds && this._textLines && this._textLines[i]) {
+              const spaces = lineBounds.filter((bound, j) => /\s/.test(this._textLines[i][j]));
+              if (spaces.length > 1) {
+                const firstSpaceWidth = spaces[0].width;
+                hasVariableSpaces = spaces.some(space => Math.abs(space.width - firstSpaceWidth) > 0.1);
+              }
+            }
+          });
+          if (!hasVariableSpaces && this.__charBounds.length > 0) {
+            console.warn('   ⚠️ Justify spaces still uniform - forcing enlargeSpaces again');
+            if (this.enlargeSpaces) {
+              var _this$canvas3;
+              this.enlargeSpaces();
+              (_this$canvas3 = this.canvas) === null || _this$canvas3 === void 0 || _this$canvas3.requestRenderAll();
+            }
+          } else {
+            console.log('   ✅ Justify spaces properly expanded');
+          }
+        }, 10);
+      }
     }
 
-    /**
-     * Schedule justify calculation after font loads (Textbox-specific)
-     * @private
+    /**
+     * Schedule justify calculation after font loads (Textbox-specific)
+     * @private
      */
     _scheduleJustifyAfterFontLoad() {
       if (typeof document === 'undefined' || !('fonts' in document)) {
@@ -26796,22 +26824,22 @@
       this._fontJustifyScheduled = true;
       const fontSpec = `${this.fontSize}px ${this.fontFamily}`;
       document.fonts.load(fontSpec).then(() => {
-        var _this$canvas3;
+        var _this$canvas4;
         this._fontJustifyScheduled = false;
         console.log('🔧 Textbox: Font loaded, applying justify alignment');
 
         // Re-run initDimensions to ensure proper justify calculation
         this.initDimensions();
-        (_this$canvas3 = this.canvas) === null || _this$canvas3 === void 0 || _this$canvas3.requestRenderAll();
+        (_this$canvas4 = this.canvas) === null || _this$canvas4 === void 0 || _this$canvas4.requestRenderAll();
       }).catch(() => {
         this._fontJustifyScheduled = false;
         console.warn('⚠️ Textbox: Font loading failed, justify may be incorrect');
       });
     }
 
-    /**
-     * Advanced dimensions calculation using new layout engine
-     * @private
+    /**
+     * Advanced dimensions calculation using new layout engine
+     * @private
      */
     initDimensionsAdvanced() {
       if (!this.initialized) {
@@ -26866,9 +26894,9 @@
       this.dirty = true;
     }
 
-    /**
-     * Generate style map from new layout format
-     * @private
+    /**
+     * Generate style map from new layout format
+     * @private
      */
     _generateStyleMapFromLayout(layout) {
       const map = {};
@@ -26890,12 +26918,12 @@
       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,
@@ -26922,10 +26950,10 @@
       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) {
@@ -26937,10 +26965,10 @@
       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) {
@@ -26977,11 +27005,11 @@
       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) {
@@ -26995,59 +27023,59 @@
       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;
@@ -27061,12 +27089,12 @@
       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,
@@ -27099,17 +27127,17 @@
       };
     }
 
-    /**
-     * 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;
@@ -27124,26 +27152,26 @@
       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 {
@@ -27225,11 +27253,11 @@
       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]) {
@@ -27243,12 +27271,12 @@
       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) {
@@ -27257,12 +27285,12 @@
       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) {
       // Check if we need browser wrapping using smart font detection
@@ -27309,9 +27337,9 @@
       return newText;
     }
 
-    /**
-     * Use browser's native text wrapping for accurate handling of fonts without English glyphs
-     * @private
+    /**
+     * Use browser's native text wrapping for accurate handling of fonts without English glyphs
+     * @private
      */
     _splitTextIntoLinesWithBrowser(text) {
       if (typeof document === 'undefined') {
@@ -27437,9 +27465,9 @@
       };
     }
 
-    /**
-     * Extract justify space measurements from browser
-     * @private
+    /**
+     * Extract justify space measurements from browser
+     * @private
      */
     _extractJustifySpaceMeasurements(element, lines) {
       console.log(`🔤 Extracting browser justify space measurements for ${lines.length} lines`);
@@ -27475,9 +27503,9 @@
       return spaceWidths;
     }
 
-    /**
-     * Apply browser-calculated justify space measurements
-     * @private
+    /**
+     * Apply browser-calculated justify space measurements
+     * @private
      */
     _applyBrowserJustifySpaces() {
       if (!this._textLines || !this.__charBounds) {
@@ -27500,23 +27528,59 @@
         const lineBounds = this.__charBounds[lineIndex];
         const lineSpaceWidths = spaceWidths[lineIndex];
         let spaceIndex = 0;
+        let accumulatedSpace = 0;
+        const isRtl = this.direction === 'rtl';
+        const spaceDiffs = [];
+
+        // First, calculate the difference for each space
         for (let charIndex = 0; charIndex < line.length; charIndex++) {
           if (/\s/.test(line[charIndex]) && spaceIndex < lineSpaceWidths.length) {
-            const expandedWidth = lineSpaceWidths[spaceIndex];
-            if (lineBounds[charIndex]) {
-              const oldWidth = lineBounds[charIndex].width;
-              lineBounds[charIndex].width = expandedWidth;
-              console.log(`🔤 Line ${lineIndex} space ${spaceIndex}: ${oldWidth.toFixed(1)}px -> ${expandedWidth.toFixed(1)}px`);
+            const charBound = lineBounds[charIndex];
+            if (charBound) {
+              spaceDiffs.push(lineSpaceWidths[spaceIndex] - charBound.width);
             }
             spaceIndex++;
           }
         }
+        spaceIndex = 0;
+        let remainingDiff = spaceDiffs.reduce((a, b) => a + b, 0);
+        for (let charIndex = 0; charIndex < line.length; charIndex++) {
+          const charBound = lineBounds[charIndex];
+          if (!charBound) continue;
+          if (isRtl) {
+            charBound.left += remainingDiff;
+          } else {
+            charBound.left += accumulatedSpace;
+          }
+          if (/\s/.test(line[charIndex]) && spaceIndex < spaceDiffs.length) {
+            const diff = spaceDiffs[spaceIndex];
+            const oldWidth = charBound.width;
+            charBound.width += diff;
+            charBound.kernedWidth += diff;
+            console.log(`🔤 Line ${lineIndex} space ${spaceIndex}: ${oldWidth.toFixed(1)}px -> ${charBound.width.toFixed(1)}px`);
+            if (isRtl) {
+              remainingDiff -= diff;
+            } else {
+              accumulatedSpace += diff;
+            }
+            spaceIndex++;
+          }
+        }
+        // also need to update the last charBound
+        const lastBound = lineBounds[line.length];
+        if (lastBound) {
+          if (isRtl) {
+            lastBound.left += remainingDiff;
+          } else {
+            lastBound.left += accumulatedSpace;
+          }
+        }
       });
     }
 
-    /**
-     * Fallback to default Fabric wrapping
-     * @private
+    /**
+     * Fallback to default Fabric wrapping
+     * @private
      */
     _splitTextIntoLinesDefault(text) {
       const newText = super._splitTextIntoLines(text),
@@ -27548,12 +27612,12 @@
       }
     }
 
-    /**
-     * Initialize event listeners for safety snap functionality
-     * @private
+    /**
+     * Initialize event listeners for safety snap functionality
+     * @private
      */
     initializeEventListeners() {
-      var _this$canvas4;
+      var _this$canvas5;
       // Track which side is being used for resize to handle position compensation
       let resizeOrigin = null;
 
@@ -27584,7 +27648,7 @@
       });
 
       // Also listen to canvas-level modified event as backup
-      (_this$canvas4 = this.canvas) === null || _this$canvas4 === void 0 || _this$canvas4.on('object:modified', e => {
+      (_this$canvas5 = this.canvas) === null || _this$canvas5 === void 0 || _this$canvas5.on('object:modified', e => {
         if (e.target === this) {
           const currentResizeOrigin = resizeOrigin; // Capture the value before reset
           setTimeout(() => this.safetySnapWidth(currentResizeOrigin), 10);
@@ -27593,12 +27657,12 @@
       });
     }
 
-    /**
-     * 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) {
       // For Textbox objects, we always want to check for clipping regardless of isWrapping flag
@@ -27628,7 +27692,7 @@
       const safetyThreshold = 2; // px - very subtle trigger
 
       if (maxRequiredWidth > this.width - safetyThreshold) {
-        var _this$canvas5;
+        var _this$canvas6;
         // Set width to exactly what's needed + minimal safety margin
         const newWidth = maxRequiredWidth + 1; // Add just 1px safety margin
 
@@ -27661,13 +27725,13 @@
             this.__overlayEditor.refresh();
           }, 0);
         }
-        (_this$canvas5 = this.canvas) === null || _this$canvas5 === void 0 || _this$canvas5.requestRenderAll();
+        (_this$canvas6 = this.canvas) === null || _this$canvas6 === void 0 || _this$canvas6.requestRenderAll();
       }
     }
 
-    /**
-     * Fix character selection mismatch after JSON loading for browser-wrapped fonts
-     * @private
+    /**
+     * Fix character selection mismatch after JSON loading for browser-wrapped fonts
+     * @private
      */
     _fixCharacterMappingAfterJsonLoad() {
       if (this._usingBrowserWrapping) {
@@ -27687,9 +27751,9 @@
       }
     }
 
-    /**
-     * Force complete textbox re-initialization (useful after JSON loading)
-     * Overrides Text version with Textbox-specific logic
+    /**
+     * Force complete textbox re-initialization (useful after JSON loading)
+     * Overrides Text version with Textbox-specific logic
      */
     forceTextReinitialization() {
       console.log('🔄 Force reinitializing Textbox object');
@@ -27712,7 +27776,7 @@
       // Double-check that justify was applied by checking space widths
       if (this.textAlign.includes('justify') && this.__charBounds) {
         setTimeout(() => {
-          var _this$canvas6;
+          var _this$canvas7;
           // Verify justify was applied by checking if space widths vary
           let hasVariableSpaces = false;
           this.__charBounds.forEach((lineBounds, i) => {
@@ -27741,36 +27805,36 @@
             this.height = this.calcTextHeight();
             console.log(`🔧 JUSTIFY: Used calcTextHeight: ${this.height}px`);
           }
-          (_this$canvas6 = this.canvas) === null || _this$canvas6 === void 0 || _this$canvas6.requestRenderAll();
+          (_this$canvas7 = this.canvas) === null || _this$canvas7 === void 0 || _this$canvas7.requestRenderAll();
         }, 10);
       }
     }
 
-    /**
-     * 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']);