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

package/dist/src/shapes/Textbox.mjs

@@ -20,11 +20,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() {
@@ -34,10 +34,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, {
@@ -47,10 +47,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 {
@@ -58,11 +58,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) {
@@ -130,6 +130,7 @@ class Textbox extends IText {
     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) {
@@ -138,15 +139,8 @@ class Textbox extends IText {
         return;
       }
 
-      // Don't apply justify alignment during drag operations to prevent snapping
-      const now = Date.now();
-      const lastDragTime = this._lastInitDimensionsTime || 0;
-      const isDuringDrag = now - lastDragTime < 200; // 200ms window for drag detection
-
-      if (isDuringDrag) {
-        console.log('🔤 Skipping justify during drag operation to prevent snapping');
-        return;
-      }
+      // Note: Removed drag detection logic that was causing issues
+      // Justify alignment will now apply immediately when needed
 
       // For non-browser-wrapping fonts, use Fabric's justify system
       // once text is measured we need to make space fatter to make justified text.
@@ -204,11 +198,40 @@ class Textbox extends IText {
     } else {
       this.height = this.calcTextHeight();
     }
+
+    // Double-check that justify was applied by checking space widths
+    // Skip validation during rapid width changes to prevent interference
+    console.log('🔍 JUSTIFY CHECK:', this.textAlign.includes('justify'), !!this.__charBounds, !this._skipJustifyValidation);
+    if (this.textAlign.includes('justify') && this.__charBounds && !this._skipJustifyValidation) {
+      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)) {
@@ -222,22 +245,22 @@ class Textbox extends IText {
     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) {
@@ -292,9 +315,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 = {};
@@ -316,12 +339,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,
@@ -348,10 +371,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) {
@@ -363,10 +386,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) {
@@ -403,11 +426,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) {
@@ -421,59 +444,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;
@@ -487,12 +510,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,
@@ -525,17 +548,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;
@@ -550,26 +573,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 {
@@ -651,11 +674,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]) {
@@ -669,12 +692,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) {
@@ -683,16 +706,17 @@ 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) {
     // Check if we need browser wrapping using smart font detection
-    const needsBrowserWrapping = this.fontFamily && fontLacksEnglishGlyphsCached(this.fontFamily);
+    // Skip browser wrapping for justify text when using overlay editing to prevent measurement conflicts
+    const needsBrowserWrapping = this.fontFamily && fontLacksEnglishGlyphsCached(this.fontFamily) && !(this.textAlign.includes('justify') && this.useOverlayEditing);
     if (needsBrowserWrapping) {
       // Cache key based on text content, width, font properties, AND text alignment
       const textHash = text.length + text.slice(0, 50); // Include text content in cache key
@@ -717,6 +741,11 @@ class Textbox extends IText {
 
       // Mark that we used browser wrapping to prevent dynamicMinWidth modifications
       this._usingBrowserWrapping = true;
+
+      // pass the width to enlargeSpaces
+      if (result.width) {
+        this._browserWrappingWidth = result.width;
+      }
       return result;
     }
 
@@ -735,9 +764,9 @@ class Textbox extends IText {
     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') {
@@ -745,26 +774,47 @@ class Textbox extends IText {
       return this._splitTextIntoLinesDefault(text);
     }
 
+    // Skip measurement if we just extracted lines from overlay for justify text
+    if (this._skipJustifyMeasurement && this.textAlign.includes('justify')) {
+      console.log('🚫 SKIP: Skipping browser measurement, using stored overlay lines');
+      this._skipJustifyMeasurement = false; // Reset flag
+      return this._splitTextIntoLinesDefault(text);
+    }
+
     // Create a hidden element that mimics the overlay editor
     const testElement = document.createElement('div');
     testElement.style.position = 'absolute';
     testElement.style.left = '-9999px';
     testElement.style.visibility = 'hidden';
-    testElement.style.fontSize = `${this.fontSize}px`;
+    const scaleX = this.scaleX || 1;
+    const fontSize = this.fontSize * scaleX;
+    const padding = this.padding || 0;
+    testElement.style.fontSize = `${fontSize}px`;
     testElement.style.fontFamily = `"${this.fontFamily}"`;
     testElement.style.fontWeight = String(this.fontWeight || 'normal');
     testElement.style.fontStyle = String(this.fontStyle || 'normal');
     testElement.style.lineHeight = String(this.lineHeight || 1.16);
-    testElement.style.width = `${this.width}px`;
+    testElement.style.letterSpacing = `${(this.charSpacing || 0) / 1000 * fontSize}px`;
     testElement.style.direction = this.direction || 'ltr';
     testElement.style.whiteSpace = 'pre-wrap';
     testElement.style.wordBreak = 'normal';
     testElement.style.overflowWrap = 'break-word';
-
-    // Set browser-native text alignment (including justify)
+    testElement.style.padding = `${padding}px`;
+    testElement.style.boxSizing = 'border-box';
+    testElement.style.width = `${this.width * scaleX + padding * 2}px`;
     if (this.textAlign.includes('justify')) {
       testElement.style.textAlign = 'justify';
-      testElement.style.textAlignLast = 'auto'; // Let browser decide last line alignment
+      if (this.direction === 'rtl') {
+        testElement.style.textAlignLast = 'right';
+      } else {
+        testElement.style.textAlignLast = 'left';
+      }
+      testElement.style.textJustify = 'inter-word';
+      testElement.style.unicodeBidi = 'plaintext';
+      testElement.style.wordSpacing = 'normal';
+      // Match font smoothing from overlay editor
+      testElement.style.webkitFontSmoothing = 'auto';
+      testElement.style.mozOsxFontSmoothing = 'auto';
     } else {
       testElement.style.textAlign = this.textAlign;
     }
@@ -789,7 +839,7 @@ class Textbox extends IText {
           if (i > currentLineStart && (rect.bottom > previousBottom + 5 || i === textLength)) {
             // New line detected or end of text
             const lineEnd = i === textLength ? i : i - 1;
-            const lineText = text.substring(currentLineStart, lineEnd).trim();
+            const lineText = text.substring(currentLineStart, lineEnd);
             if (lineText) {
               lines.push(lineText);
               // Convert to graphemes for compatibility
@@ -812,6 +862,7 @@ class Textbox extends IText {
     const offsetHeight = testElement.offsetHeight;
     const clientHeight = testElement.clientHeight;
     const boundingRect = testElement.getBoundingClientRect();
+    const clientWidth = testElement.clientWidth;
     console.log(`🔤 Browser element measurements:`);
     console.log(`   scrollHeight: ${actualBrowserHeight}px (content + padding + hidden overflow)`);
     console.log(`   offsetHeight: ${offsetHeight}px (content + padding + border)`);
@@ -859,13 +910,14 @@ class Textbox extends IText {
       graphemeText: text.split(''),
       graphemeLines: graphemeLines,
       justifySpaceMeasurements: justifySpaceMeasurements,
-      actualBrowserHeight: adjustedHeight
+      actualBrowserHeight: adjustedHeight,
+      width: clientWidth
     };
   }
 
-  /**
-   * 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`);
@@ -901,9 +953,9 @@ class Textbox extends IText {
     return spaceWidths;
   }
 
-  /**
-   * Apply browser-calculated justify space measurements
-   * @private
+  /**
+   * Apply browser-calculated justify space measurements
+   * @private
    */
   _applyBrowserJustifySpaces() {
     if (!this._textLines || !this.__charBounds) {
@@ -911,6 +963,14 @@ class Textbox extends IText {
       return;
     }
 
+    // Check for overlay justify measurements first
+    const overlayMeasurements = this._overlayJustifyMeasurements;
+    if (overlayMeasurements) {
+      console.log('🎯 OVERLAY JUSTIFY: Using stored overlay measurements');
+      this._applyOverlayJustifySpaces(overlayMeasurements);
+      return;
+    }
+
     // Get space measurements from browser wrapping result
     const styleMap = this._styleMap;
     if (!styleMap || !styleMap.justifySpaceMeasurements) {
@@ -926,23 +986,164 @@ class Textbox extends IText {
       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;
+        }
+      }
+    });
+  }
+
+  /**
+   * Apply overlay justify measurements to character bounds
+   * @private
+   */
+  _applyOverlayJustifySpaces(overlayMeasurements) {
+    this._textLines.forEach((line, lineIndex) => {
+      if (!this.__charBounds || !this.__charBounds[lineIndex]) return;
+      const lineMeasurement = overlayMeasurements[lineIndex];
+      if (!lineMeasurement) return;
+      const {
+        justifiedSpaceWidth
+      } = lineMeasurement;
+      let spaceIndex = 0;
+      line.forEach((char, charIndex) => {
+        if (char === ' ' && this.__charBounds[lineIndex][charIndex]) {
+          const oldWidth = this.__charBounds[lineIndex][charIndex].width;
+          this.__charBounds[lineIndex][charIndex].width = justifiedSpaceWidth;
+          console.log(`🎯 OVERLAY Line ${lineIndex} space ${spaceIndex}: ${oldWidth.toFixed(1)}px -> ${justifiedSpaceWidth.toFixed(1)}px`);
+          spaceIndex++;
+        }
+      });
     });
   }
 
-  /**
-   * Fallback to default Fabric wrapping
-   * @private
+  /**
+   * Extract justify measurements from overlay textarea and store them
+   */
+  extractJustifyMeasurementsFromOverlay(textarea) {
+    const text = textarea.value;
+    if (!text || !this.textAlign.includes('justify')) {
+      return;
+    }
+
+    // Use the same measurement technique as measureLinesWithBrowser
+    const testElement = document.createElement('div');
+    testElement.style.position = 'absolute';
+    testElement.style.left = '-9999px';
+    testElement.style.visibility = 'hidden';
+
+    // Copy all styles from the textarea to ensure identical rendering
+    const computedStyle = window.getComputedStyle(textarea);
+    const stylesToCopy = ['fontSize', 'fontFamily', 'fontWeight', 'fontStyle', 'lineHeight', 'letterSpacing', 'direction', 'textAlign', 'textAlignLast', 'textJustify', 'width', 'padding', 'boxSizing', 'whiteSpace', 'wordBreak', 'overflowWrap'];
+    stylesToCopy.forEach(prop => {
+      testElement.style[prop] = computedStyle[prop];
+    });
+    testElement.textContent = text;
+    document.body.appendChild(testElement);
+    try {
+      // Extract justify space measurements using the same logic
+      const lines = text.split('\n');
+      const justifyMeasurements = {};
+      lines.forEach((line, lineIndex) => {
+        if (line.trim()) {
+          const spaces = (line.match(/\s/g) || []).length;
+          if (spaces > 0) {
+            // Measure natural space width
+            const singleSpaceDiv = document.createElement('div');
+            stylesToCopy.forEach(prop => {
+              singleSpaceDiv.style[prop] = computedStyle[prop];
+            });
+            singleSpaceDiv.textContent = ' ';
+            document.body.appendChild(singleSpaceDiv);
+            const naturalSpaceWidth = singleSpaceDiv.getBoundingClientRect().width;
+            document.body.removeChild(singleSpaceDiv);
+
+            // Measure justified line width
+            const lineDiv = document.createElement('div');
+            stylesToCopy.forEach(prop => {
+              lineDiv.style[prop] = computedStyle[prop];
+            });
+            lineDiv.textContent = line;
+            document.body.appendChild(lineDiv);
+            const lineWidth = lineDiv.getBoundingClientRect().width;
+            const containerWidth = parseFloat(computedStyle.width);
+
+            // Calculate justified space width
+            const nonSpaceText = line.replace(/\s/g, '');
+            const nonSpaceDiv = document.createElement('div');
+            stylesToCopy.forEach(prop => {
+              nonSpaceDiv.style[prop] = computedStyle[prop];
+            });
+            nonSpaceDiv.textContent = nonSpaceText;
+            document.body.appendChild(nonSpaceDiv);
+            const nonSpaceWidth = nonSpaceDiv.getBoundingClientRect().width;
+            const justifiedSpaceWidth = (containerWidth - nonSpaceWidth) / spaces;
+            console.log(`🎯 OVERLAY Line ${lineIndex}: ${spaces} spaces, natural: ${naturalSpaceWidth.toFixed(1)}px -> justified: ${justifiedSpaceWidth.toFixed(1)}px`);
+            justifyMeasurements[lineIndex] = {
+              naturalSpaceWidth,
+              justifiedSpaceWidth,
+              spaceCount: spaces
+            };
+            document.body.removeChild(lineDiv);
+            document.body.removeChild(nonSpaceDiv);
+          }
+        }
+      });
+
+      // Store the measurements
+      this._overlayJustifyMeasurements = justifyMeasurements;
+      console.log('💾 STORED: Overlay justify measurements', justifyMeasurements);
+    } finally {
+      document.body.removeChild(testElement);
+    }
+  }
+
+  /**
+   * Fallback to default Fabric wrapping
+   * @private
    */
   _splitTextIntoLinesDefault(text) {
     const newText = super._splitTextIntoLines(text),
@@ -974,12 +1175,12 @@ class Textbox extends IText {
     }
   }
 
-  /**
-   * 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;
 
@@ -1004,13 +1205,14 @@ 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
+      this.initDimensions();
       // Small delay to ensure text layout is updated
       setTimeout(() => this.safetySnapWidth(currentResizeOrigin), 10);
       resizeOrigin = null; // Reset after capturing
     });
 
     // 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);
@@ -1019,12 +1221,12 @@ class Textbox extends IText {
     });
   }
 
-  /**
-   * 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
@@ -1054,7 +1256,7 @@ class Textbox extends IText {
     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
 
@@ -1063,7 +1265,7 @@ class Textbox extends IText {
       const originalTop = this.top;
       const widthIncrease = newWidth - this.width;
 
-      // Change width 
+      // Change width
       this.set('width', newWidth);
 
       // Force text layout recalculation
@@ -1075,8 +1277,8 @@ class Textbox extends IText {
         // 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
+          left: originalLeft - widthIncrease,
+          top: originalTop
         });
       }
       this.setCoords();
@@ -1087,13 +1289,13 @@ class Textbox extends IText {
           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) {
@@ -1113,9 +1315,9 @@ class Textbox extends IText {
     }
   }
 
-  /**
-   * 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');
@@ -1138,7 +1340,7 @@ class Textbox extends IText {
     // 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) => {
@@ -1167,36 +1369,118 @@ class Textbox extends IText {
           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
+  /**
+   * Fix justify text after JSON loading - call this after fromObject
+   * @public
+   */
+  fixJustifyAfterJSONLoad() {
+    if (this.textAlign.includes('justify') && this.useOverlayEditing) {
+      console.log('🔧 JSON FIX: Fixing justify text after JSON load');
+      // The issue is that enlargeSpaces() isn't properly updating after JSON load
+      // Workaround: temporarily change width to trigger proper rebuild, then restore
+      setTimeout(() => {
+        const originalWidth = this.width;
+        console.log('🔄 JSON TRICK: Temporarily changing width to force justify rebuild');
+
+        // Temporarily change width by 1px to trigger proper justify recalculation
+        this.width = originalWidth + 1;
+        this.initDimensions();
+
+        // Restore original width - this will trigger the proper justify calculation
+        setTimeout(() => {
+          var _this$canvas8;
+          this.width = originalWidth;
+          this.initDimensions();
+          (_this$canvas8 = this.canvas) === null || _this$canvas8 === void 0 || _this$canvas8.requestRenderAll();
+          console.log('✅ JSON FIX: Restored original width, justify should be fixed');
+        }, 50);
+      }, 100);
+    }
+  }
+
+  /**
+   * 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]);
+    const obj = super.toObject(['minWidth', 'splitByGrapheme', ...propertiesToInclude]);
+
+    // For justify text with overlay editing, ensure measurements are available
+    if (this.textAlign.includes('justify') && this.useOverlayEditing) {
+      var _charBounds, _charBounds2;
+      // If character bounds don't exist yet, initialize dimensions to calculate them
+      if (!((_charBounds = this.__charBounds) !== null && _charBounds !== void 0 && _charBounds.length)) {
+        console.log('🔧 SERIALIZE: Character bounds missing, initializing dimensions for justify text');
+        this.initDimensions();
+      }
+
+      // Now save the measurements if they exist
+      if ((_charBounds2 = this.__charBounds) !== null && _charBounds2 !== void 0 && _charBounds2.length) {
+        console.log('💾 SERIALIZE: Saving justify measurements to JSON');
+        obj._justifyMeasurements = {
+          __charBounds: this.__charBounds,
+          __lineHeights: this.__lineHeights,
+          __lineWidths: this.__lineWidths,
+          _hasJustifyData: true
+        };
+      } else {
+        console.warn('⚠️ SERIALIZE: Could not generate character bounds for justify text');
+      }
+    }
+    return obj;
+  }
+
+  /**
+   * Override _set to handle justify measurements during JSON loading
+   * @private
+   */
+  _set(key, value) {
+    const result = super._set(key, value);
+
+    // Restore justify measurements if they exist in the JSON data
+    if (key === '_justifyMeasurements' && value && value._hasJustifyData) {
+      console.log('🔄 DESERIALIZE: Restoring justify measurements from JSON');
+      this.__charBounds = value.__charBounds;
+      this.__lineHeights = value.__lineHeights;
+      this.__lineWidths = value.__lineWidths;
+
+      // Mark that we have restored data so we don't interfere with it
+      this._hasRestoredJustifyData = true;
+
+      // Automatically trigger the fix after JSON loading
+      if (this.textAlign.includes('justify') && this.useOverlayEditing) {
+        console.log('🔄 AUTO-FIX: Calling fixJustifyAfterJSONLoad after restoring justify measurements');
+        // Use setTimeout to ensure this runs after all object initialization is complete
+        setTimeout(() => {
+          this.fixJustifyAfterJSONLoad();
+        }, 10);
+      }
+    }
+    return result;
   }
 }
-/**
- * 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']);