fix(IText): layout regression (#8711)

Co-authored-by: Andrea Bogazzi <[email protected]>
fabricjs · Mar 18, 2023 · 3d1c687 · 3d1c687
1 parent 8e058a0
commit 3d1c687
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 29 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ## [next]
 
+- fix(IText): layout change regression caused by #8663 (`text` was changed but layout was skipped) [#8711](https://github.com/fabricjs/fabric.js/pull/8711)
 - fix(IText, Textbox): fix broken text input [#8775](https://github.com/fabricjs/fabric.js/pull/8775)
 - ci(): `.codesandbox` [#8135](https://github.com/fabricjs/fabric.js/pull/8135)
 - ci(): disallow circular deps [#8759](https://github.com/fabricjs/fabric.js/pull/8759)

diff --git a/src/shapes/IText/ITextBehavior.ts b/src/shapes/IText/ITextBehavior.ts
@@ -669,7 +669,7 @@ export abstract class ITextBehavior<
     this.selectionEnd = this.selectionStart;
     this._exitEditing();
     this._restoreEditingProps();
-    if (this._shouldClearDimensionCache()) {
+    if (this._forceClearCache) {
       this.initDimensions();
       this.setCoords();
     }
@@ -978,18 +978,13 @@ export abstract class ITextBehavior<
    * @param {Number} start
    * @param {Number} end default to start + 1
    */
-  removeChars(start: number, end: number) {
-    if (typeof end === 'undefined') {
-      end = start + 1;
-    }
+  removeChars(start: number, end: number = start + 1) {
     this.removeStyleFromTo(start, end);
     this._text.splice(start, end - start);
     this.text = this._text.join('');
     this.set('dirty', true);
-    if (this._shouldClearDimensionCache()) {
-      this.initDimensions();
-      this.setCoords();
-    }
+    this.initDimensions();
+    this.setCoords();
     this._removeExtraneousStyles();
   }
 
@@ -1023,10 +1018,8 @@ export abstract class ITextBehavior<
     ];
     this.text = this._text.join('');
     this.set('dirty', true);
-    if (this._shouldClearDimensionCache()) {
-      this.initDimensions();
-      this.setCoords();
-    }
+    this.initDimensions();
+    this.setCoords();
     this._removeExtraneousStyles();
   }
 

diff --git a/src/shapes/Text/StyledText.ts b/src/shapes/Text/StyledText.ts
@@ -12,7 +12,7 @@ export abstract class StyledText<
 > extends FabricObject<EventSpec> {
   declare abstract styles: TextStyle;
   protected declare abstract _textLines: string[][];
-  protected declare abstract _forceClearCache: boolean;
+  protected declare _forceClearCache: boolean;
   protected declare abstract _styleProperties: string[];
   abstract get2DCursorLocation(
     selectionStart: number,

diff --git a/src/shapes/Text/Text.ts b/src/shapes/Text/Text.ts
@@ -441,8 +441,6 @@ export class Text<
   declare cursorWidth: number;
   declare __lineHeights: number[];
   declare __lineWidths: number[];
-  declare _forceClearCache: boolean;
-
   declare initialized?: true;
 
   static cacheProperties = [...cacheProperties, ...additionalProps];
@@ -495,6 +493,7 @@ export class Text<
   initDimensions() {
     this._splitText();
     this._clearCache();
+    this.dirty = true;
     if (this.path) {
       this.width = this.path.width;
       this.height = this.path.height;
@@ -1505,23 +1504,12 @@ export class Text<
    * @private
    */
   _clearCache() {
+    this._forceClearCache = false;
     this.__lineWidths = [];
     this.__lineHeights = [];
     this.__charBounds = [];
   }
 
-  /**
-   * @private
-   */
-  _shouldClearDimensionCache() {
-    const shouldClear = this._forceClearCache;
-    if (shouldClear) {
-      this.dirty = true;
-      this._forceClearCache = false;
-    }
-    return shouldClear;
-  }
-
   /**
    * Measure a single line given its index. Used to calculate the initial
    * text bounding box. The values are calculated and stored in __lineWidths cache.
@@ -1708,7 +1696,7 @@ export class Text<
     ) {
       return;
     }
-    if (this._shouldClearDimensionCache()) {
+    if (this._forceClearCache) {
       this.initDimensions();
     }
     super.render(ctx);