BREAKING: Remove statefulCache and stateful

src/canvas/canvas.class.ts

@@ -61,7 +61,7 @@ type TDestroyedCanvas = Omit<
  * @extends StaticCanvas
  * @tutorial {@link http://fabricjs.com/fabric-intro-part-1#canvas}
  *
- * @fires object:modified at the end of a transform or any change when statefull is true
+ * @fires object:modified at the end of a transform
  * @fires object:rotating while an object is being rotated from the control
  * @fires object:scaling while an object is being scaled by controls
  * @fires object:moving while an object is being dragged

src/canvas/canvas_events.ts

@@ -989,11 +989,7 @@ export class Canvas extends SelectableCanvas {
 
     target.setCoords();
 
-    if (
-      transform.actionPerformed ||
-      // @ts-ignore
-      (this.stateful && target.hasStateChanged())
-    ) {
+    if (transform.actionPerformed) {
       this.fire('object:modified', options);
       target.fire('modified', options);
     }
@@ -1184,8 +1180,6 @@ export class Canvas extends SelectableCanvas {
    */
   _beforeTransform(e: TPointerEvent) {
     const t = this._currentTransform!;
-    // @ts-ignore
-    this.stateful && t.target.saveState();
     this.fire('before:transform', {
       e,
       transform: t,

src/canvas/static_canvas.class.ts

@@ -122,14 +122,6 @@ export class StaticCanvas<
    */
   includeDefaultValues: boolean;
 
-  /**
-   * Indicates whether objects' state should be saved
-   * @type Boolean
-   * @deprecated
-   * @default
-   */
-  stateful: boolean;
-
   /**
    * Indicates whether {@link add}, {@link insertAt} and {@link remove},
    * {@link moveTo}, {@link clear} and many more, should also re-render canvas.
@@ -305,8 +297,6 @@ export class StaticCanvas<
   }
 
   _onObjectAdded(obj: FabricObject) {
-    // @ts-ignore;
-    this.stateful && obj.saveState();
     if (obj.canvas && obj.canvas !== this) {
       /* _DEV_MODE_START_ */
       console.warn(
@@ -1755,7 +1745,6 @@ Object.assign(StaticCanvas.prototype, {
   overlayColor: '',
   overlayImage: null,
   includeDefaultValues: true,
-  stateful: false,
   renderOnAddRemove: true,
   controlsAboveOverlay: false,
   allowTouchScrolling: false,

src/mixins/stateful.mixin.ts

@@ -4,6 +4,14 @@ import { extend } from '../util/lang_object';
 
 const originalSet = 'stateProperties';
 
+/*
+ * This function was taking care of running isEqual over statePropertie.
+ * State properties included things that could reference a canvas or a group.
+ * FabricJS does not support stateful saving anymore apart for a very small number of props for
+ * Text cache invalidation temporarly.
+ * So you shouldn't use saveState or hasStateChanged for your own application
+ * @depreacted
+ */
 function _isEqual(origValue: any, currentValue: any, firstPass = false) {
   if (origValue === currentValue) {
     // if the objects are identical, return
@@ -57,7 +65,7 @@ export class StatefulMixin {
    * @param {String} [propertySet] optional name for the set of property we want to save
    * @return {Boolean} true if instance' state has changed since `{@link fabric.Object#saveState}` was called
    */
-  hasStateChanged(propertySet: string = originalSet): boolean {
+  private hasStateChanged(propertySet: string = originalSet): boolean {
     const dashedPropertySet = `_${propertySet}`;
     if (
       Object.keys(this[dashedPropertySet] || {}).length <
@@ -83,7 +91,7 @@ export class StatefulMixin {
    * @param {string} [options.propertySet] name for the property set to save
    * @return {fabric.Object} thisArg
    */
-  saveState(
+  private saveState(
     this: FabricObject,
     { propertySet = originalSet }: TSaveStateOptions = {}
   ): FabricObject {

src/shapes/Object/Object.ts

@@ -433,18 +433,6 @@ export class FabricObject<
    */
   objectCaching: boolean;
 
-  /**
-   * When `true`, object properties are checked for cache invalidation. In some particular
-   * situation you may want this to be disabled ( spray brush, very big, groups)
-   * or if your application does not allow you to modify properties for groups child you want
-   * to disable it for groups.
-   * default to false
-   * since 1.7.0
-   * @type Boolean
-   * @default false
-   */
-  statefullCache: boolean;
-
   /**
    * When `true`, cache does not get updated during scaling. The picture will get blocky if scaled
    * too much and will be redrawn with correct details at the end of scaling.
@@ -492,7 +480,7 @@ export class FabricObject<
 
   /**
    * List of properties to consider when checking if cache needs refresh
-   * Those properties are checked by statefullCache ON ( or lazy mode if we want ) or from single
+   * Those properties are checked by
    * calls to Object.set(key, value). If the key is in this list, the object is marked as dirty
    * and refreshed at the next render
    * @type Array
@@ -1051,10 +1039,10 @@ export class FabricObject<
 
     if (isChanged) {
       const groupNeedsUpdate = this.group && this.group.isOnACache();
-      if (this.cacheProperties.indexOf(key) > -1) {
+      if (this.cacheProperties.includes(key)) {
         this.dirty = true;
         groupNeedsUpdate && this.group.set('dirty', true);
-      } else if (groupNeedsUpdate && this.stateProperties.indexOf(key) > -1) {
+      } else if (groupNeedsUpdate && this.stateProperties.includes(key)) {
         this.group.set('dirty', true);
       }
     }
@@ -1105,9 +1093,6 @@ export class FabricObject<
       this._removeCacheCanvas();
       this.dirty = false;
       this.drawObject(ctx);
-      if (this.objectCaching && this.statefullCache) {
-        this.saveState({ propertySet: 'cacheProperties' });
-      }
     }
     ctx.restore();
   }
@@ -1118,7 +1103,6 @@ export class FabricObject<
       this._createCacheCanvas();
     }
     if (this.isCacheDirty() && this._cacheContext) {
-      this.statefullCache && this.saveState({ propertySet: 'cacheProperties' });
       this.drawObject(this._cacheContext, options.forClipping);
       this.dirty = false;
     }
@@ -1317,8 +1301,7 @@ export class FabricObject<
     } else {
       if (
         this.dirty ||
-        (this.clipPath && this.clipPath.absolutePositioned) ||
-        (this.statefullCache && this.hasStateChanged('cacheProperties'))
+        (this.clipPath && this.clipPath.absolutePositioned)
       ) {
         if (this._cacheCanvas && this._cacheContext && !skipCanvas) {
           const width = this.cacheWidth! / this.zoomX!;
@@ -2059,7 +2042,6 @@ export const fabricObjectDefaultValues = {
   lockScalingFlip: false,
   excludeFromExport: false,
   objectCaching: !getEnv().isLikelyNode,
-  statefullCache: false,
   noScaleCache: true,
   strokeUniform: false,
   dirty: true,
@@ -2069,35 +2051,19 @@ export const fabricObjectDefaultValues = {
   stateProperties: [
     'top',
     'left',
-    'width',
-    'height',
     'scaleX',
     'scaleY',
     'flipX',
     'flipY',
     'originX',
     'originY',
-    'transformMatrix',
-    'stroke',
-    'strokeWidth',
-    'strokeDashArray',
-    'strokeLineCap',
-    'strokeDashOffset',
-    'strokeLineJoin',
-    'strokeMiterLimit',
     'angle',
     'opacity',
-    'fill',
     'globalCompositeOperation',
     'shadow',
     'visible',
-    'backgroundColor',
     'skewX',
     'skewY',
-    'fillRule',
-    'paintFirst',
-    'clipPath',
-    'strokeUniform',
   ],
   cacheProperties: [
     'fill',

src/shapes/circle.class.ts

@@ -194,16 +194,12 @@ export const circleDefaultValues: Partial<TClassProperties<Circle>> = {
   radius: 0,
   startAngle: 0,
   endAngle: 360,
-  stateProperties: fabricObjectDefaultValues.stateProperties.concat(
+  cacheProperties: [
+    ...fabricObjectDefaultValues.cacheProperties,
     'radius',
     'startAngle',
     'endAngle'
-  ),
-  cacheProperties: fabricObjectDefaultValues.cacheProperties.concat(
-    'radius',
-    'startAngle',
-    'endAngle'
-  ),
+  ],
 };
 
 Object.assign(Circle.prototype, circleDefaultValues);

src/shapes/group.class.ts

@@ -488,30 +488,6 @@ export class Group extends createCollectionMixin(FabricObject<GroupEvents>) {
     this._drawClipPath(ctx, this.clipPath);
   }
 
-  /**
-   * Check if cache is dirty
-   */
-  isCacheDirty(skipCanvas?: boolean) {
-    if (super.isCacheDirty(skipCanvas)) {
-      return true;
-    }
-    if (!this.statefullCache) {
-      return false;
-    }
-    for (let i = 0; i < this._objects.length; i++) {
-      if (this._objects[i].isCacheDirty(true)) {
-        if (this._cacheCanvas) {
-          // if this group has not a cache canvas there is nothing to clean
-          const x = this.cacheWidth / this.zoomX,
-            y = this.cacheHeight / this.zoomY;
-          this._cacheContext.clearRect(-x / 2, -y / 2, x, y);
-        }
-        return true;
-      }
-    }
-    return false;
-  }
-
   /**
    * @override
    * @return {Boolean}

src/shapes/image.class.ts

@@ -777,14 +777,11 @@ export const imageDefaultValues: Partial<TClassProperties<Image>> = {
   strokeWidth: 0,
   srcFromAttribute: false,
   minimumScaleTrigger: 0.5,
-  stateProperties: fabricObjectDefaultValues.stateProperties.concat(
+  cacheProperties: [
+    ...fabricObjectDefaultValues.cacheProperties,
     'cropX',
-    'cropY'
-  ),
-  cacheProperties: fabricObjectDefaultValues.cacheProperties.concat(
-    'cropX',
-    'cropY'
-  ),
+    'cropY',
+  ],
   cropX: 0,
   cropY: 0,
   imageSmoothing: true,

src/shapes/line.class.ts

@@ -312,12 +312,13 @@ export const lineDefaultValues: Partial<TClassProperties<Line>> = {
   y1: 0,
   x2: 0,
   y2: 0,
-  cacheProperties: fabricObjectDefaultValues.cacheProperties.concat(
+  cacheProperties: [
+    ...fabricObjectDefaultValues.cacheProperties,
     'x1',
     'x2',
     'y1',
     'y2'
-  ),
+  ],
 };
 
 Object.assign(Line.prototype, lineDefaultValues);

src/shapes/path.class.ts

@@ -384,11 +384,11 @@ export class Path extends FabricObject {
 export const pathDefaultValues: Partial<TClassProperties<Path>> = {
   type: 'path',
   path: null,
-  cacheProperties: fabricObjectDefaultValues.cacheProperties.concat(
+  cacheProperties: [
+    ...fabricObjectDefaultValues.cacheProperties,
     'path',
-    'fillRule'
-  ),
-  stateProperties: fabricObjectDefaultValues.stateProperties.concat('path'),
+    'fillRule',
+  ],
 };
 
 Object.assign(Path.prototype, pathDefaultValues);

src/shapes/polyline.class.ts

@@ -313,7 +313,7 @@ export class Polyline extends FabricObject {
 export const polylineDefaultValues: Partial<TClassProperties<Polyline>> = {
   type: 'polyline',
   exactBoundingBox: false,
-  cacheProperties: fabricObjectDefaultValues.cacheProperties.concat('points'),
+  cacheProperties: [...fabricObjectDefaultValues.cacheProperties, 'points'],
   strokeBBoxAffectingProperties: [
     'skewX',
     'skewY',

src/shapes/rect.class.ts

@@ -185,11 +185,10 @@ export class Rect extends FabricObject {
 }
 
 export const rectDefaultValues: Partial<TClassProperties<Rect>> = {
-  stateProperties: fabricObjectDefaultValues.stateProperties.concat('rx', 'ry'),
   type: 'rect',
   rx: 0,
   ry: 0,
-  cacheProperties: fabricObjectDefaultValues.cacheProperties.concat('rx', 'ry'),
+  cacheProperties: [...fabricObjectDefaultValues.cacheProperties, 'rx', 'ry'],
 };
 
 Object.assign(Rect.prototype, rectDefaultValues);

src/shapes/text.class.ts

@@ -381,7 +381,6 @@ export class Text<
     }
     this.initDimensions();
     this.setCoords();
-    // @ts-ignore
     this.saveState({ propertySet: '_dimensionAffectingProps' });
   }
 
@@ -429,7 +428,6 @@ export class Text<
       // once text is measured we need to make space fatter to make justified text.
       this.enlargeSpaces();
     }
-    // @ts-ignore
     this.saveState({ propertySet: '_dimensionAffectingProps' });
   }
 
@@ -1924,10 +1922,7 @@ export const textDefaultValues: Partial<TClassProperties<Text>> = {
     baseline: 0.11, // baseline-shift factor (downwards)
   },
   textBackgroundColor: '',
-  stateProperties:
-    fabricObjectDefaultValues.stateProperties.concat(additionalProps),
-  cacheProperties:
-    fabricObjectDefaultValues.cacheProperties.concat(additionalProps),
+  cacheProperties: [...fabricObjectDefaultValues.cacheProperties, ...additionalProps],
   stroke: null,
   shadow: null,
   path: null,