From d58ce81a22f4902fabdd83f8e09a17b5d72d0e78 Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Mon, 2 May 2022 01:10:57 +0200 Subject: [PATCH 1/3] remove stateful usage --- src/canvas.class.js | 2 +- src/mixins/canvas_events.mixin.js | 3 +-- src/shapes/group.class.js | 23 ----------------------- src/shapes/image.class.js | 4 ++-- src/shapes/object.class.js | 26 +++++--------------------- src/static_canvas.class.js | 8 -------- 6 files changed, 9 insertions(+), 57 deletions(-) diff --git a/src/canvas.class.js b/src/canvas.class.js index 1fe1fb1eef4..2b10bb2d623 100644 --- a/src/canvas.class.js +++ b/src/canvas.class.js @@ -11,7 +11,7 @@ * @tutorial {@link http://fabricjs.com/fabric-intro-part-1#canvas} * @see {@link fabric.Canvas#initialize} for constructor definition * - * @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 that perfomed an action * @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 diff --git a/src/mixins/canvas_events.mixin.js b/src/mixins/canvas_events.mixin.js index f56ed9fef16..a342d9ba5c0 100644 --- a/src/mixins/canvas_events.mixin.js +++ b/src/mixins/canvas_events.mixin.js @@ -586,7 +586,7 @@ target.setCoords(); - if (transform.actionPerformed || (this.stateful && target.hasStateChanged())) { + if (transform.actionPerformed) { this._fire('modified', options); } }, @@ -749,7 +749,6 @@ */ _beforeTransform: function(e) { var t = this._currentTransform; - this.stateful && t.target.saveState(); this.fire('before:transform', { e: e, transform: t, diff --git a/src/shapes/group.class.js b/src/shapes/group.class.js index e26412d6d91..bf99186d5a4 100644 --- a/src/shapes/group.class.js +++ b/src/shapes/group.class.js @@ -417,29 +417,6 @@ this._drawClipPath(ctx, this.clipPath); }, - /** - * Check if cache is dirty - */ - isCacheDirty: function(skipCanvas) { - if (this.callSuper('isCacheDirty', skipCanvas)) { - return true; - } - if (!this.statefullCache) { - return false; - } - for (var 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 - var 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} diff --git a/src/shapes/image.class.js b/src/shapes/image.class.js index f4a1fc78ace..cafda0188b9 100644 --- a/src/shapes/image.class.js +++ b/src/shapes/image.class.js @@ -94,8 +94,8 @@ /** * 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 - * calls to Object.set(key, value). If the key is in this list, the object is marked as dirty + * 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 */ diff --git a/src/shapes/object.class.js b/src/shapes/object.class.js index 9e4bf94c10f..ad498fac162 100644 --- a/src/shapes/object.class.js +++ b/src/shapes/object.class.js @@ -510,18 +510,6 @@ */ objectCaching: objectCaching, - /** - * 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: false, - /** * 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. @@ -586,6 +574,8 @@ * List of properties to consider when checking if state * of an object is changed (fabric.Object#hasStateChanged) * as well as for history (undo/redo) purposes + * This list identify a list of properties that change how the object looks alike. + * Every App has its own needs, so change this list as you may see fit * @type Array */ stateProperties: ( @@ -597,8 +587,8 @@ /** * 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 - * calls to Object.set(key, value). If the key is in this list, the object is marked as dirty + * 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 */ @@ -1072,9 +1062,6 @@ this._removeCacheCanvas(); this.dirty = false; this.drawObject(ctx); - if (this.objectCaching && this.statefullCache) { - this.saveState({ propertySet: 'cacheProperties' }); - } } ctx.restore(); }, @@ -1085,7 +1072,6 @@ this._createCacheCanvas(); } if (this.isCacheDirty()) { - this.statefullCache && this.saveState({ propertySet: 'cacheProperties' }); this.drawObject(this._cacheContext, options.forClipping); this.dirty = false; } @@ -1262,9 +1248,7 @@ } 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) { var width = this.cacheWidth / this.zoomX; var height = this.cacheHeight / this.zoomY; diff --git a/src/static_canvas.class.js b/src/static_canvas.class.js index ca254eadb6e..76a21e71a41 100644 --- a/src/static_canvas.class.js +++ b/src/static_canvas.class.js @@ -91,13 +91,6 @@ */ includeDefaultValues: true, - /** - * Indicates whether objects' state should be saved - * @type Boolean - * @default - */ - stateful: false, - /** * Indicates whether {@link fabric.Collection.add}, {@link fabric.Collection.insertAt} and {@link fabric.Collection.remove}, * {@link fabric.StaticCanvas.moveTo}, {@link fabric.StaticCanvas.clear} and many more, should also re-render canvas. @@ -606,7 +599,6 @@ * @param {fabric.Object} obj Object that was added */ _onObjectAdded: function(obj) { - this.stateful && obj.setupState(); if (obj.canvas && obj.canvas !== this) { /* _DEV_MODE_START_ */ console.warn('fabric.Canvas: trying to add an object that belongs to a different canvas.\n' + From 5302edf5c50c90d5dee31ff854cb068ea7f1000f Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Mon, 2 May 2022 01:12:31 +0200 Subject: [PATCH 2/3] remove remove --- build.js | 1 - src/mixins/stateful.mixin.js | 107 ----------------------------------- 2 files changed, 108 deletions(-) delete mode 100644 src/mixins/stateful.mixin.js diff --git a/build.js b/build.js index 91fe3924799..9c5a9de162c 100644 --- a/build.js +++ b/build.js @@ -181,7 +181,6 @@ var filesToInclude = [ 'src/mixins/object_ancestry.mixin.js', 'src/mixins/object_stacking.mixin.js', 'src/mixins/object.svg_export.js', - 'src/mixins/stateful.mixin.js', ifSpecifiedInclude('interaction', 'src/mixins/object_interactivity.mixin.js'), diff --git a/src/mixins/stateful.mixin.js b/src/mixins/stateful.mixin.js deleted file mode 100644 index 29673617670..00000000000 --- a/src/mixins/stateful.mixin.js +++ /dev/null @@ -1,107 +0,0 @@ -(function() { - - var extend = fabric.util.object.extend, - originalSet = 'stateProperties'; - - /* - Depends on `stateProperties` - */ - function saveProps(origin, destination, props) { - var tmpObj = { }, deep = true; - props.forEach(function(prop) { - tmpObj[prop] = origin[prop]; - }); - - extend(origin[destination], tmpObj, deep); - } - - function _isEqual(origValue, currentValue, firstPass) { - if (origValue === currentValue) { - // if the objects are identical, return - return true; - } - else if (Array.isArray(origValue)) { - if (!Array.isArray(currentValue) || origValue.length !== currentValue.length) { - return false; - } - for (var i = 0, len = origValue.length; i < len; i++) { - if (!_isEqual(origValue[i], currentValue[i])) { - return false; - } - } - return true; - } - else if (origValue && typeof origValue === 'object') { - var keys = Object.keys(origValue), key; - if (!currentValue || - typeof currentValue !== 'object' || - (!firstPass && keys.length !== Object.keys(currentValue).length) - ) { - return false; - } - for (var i = 0, len = keys.length; i < len; i++) { - key = keys[i]; - // since clipPath is in the statefull cache list and the clipPath objects - // would be iterated as an object, this would lead to possible infinite recursion - // we do not want to compare those. - if (key === 'canvas' || key === 'group') { - continue; - } - if (!_isEqual(origValue[key], currentValue[key])) { - return false; - } - } - return true; - } - } - - - fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { - - /** - * Returns true if object state (one of its state properties) was changed - * @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: function(propertySet) { - propertySet = propertySet || originalSet; - var dashedPropertySet = '_' + propertySet; - if (Object.keys(this[dashedPropertySet]).length < this[propertySet].length) { - return true; - } - return !_isEqual(this[dashedPropertySet], this, true); - }, - - /** - * Saves state of an object - * @param {Object} [options] Object with additional `stateProperties` array to include when saving state - * @return {fabric.Object} thisArg - */ - saveState: function(options) { - var propertySet = options && options.propertySet || originalSet, - destination = '_' + propertySet; - if (!this[destination]) { - return this.setupState(options); - } - saveProps(this, destination, this[propertySet]); - if (options && options.stateProperties) { - saveProps(this, destination, options.stateProperties); - } - return this; - }, - - /** - * Setups state of an object - * @param {Object} [options] Object with additional `stateProperties` array to include when saving state - * @return {fabric.Object} thisArg - */ - setupState: function(options) { - options = options || { }; - var propertySet = options.propertySet || originalSet; - options.propertySet = propertySet; - this['_' + propertySet] = { }; - this.saveState(options); - return this; - } - }); -})(); From d481e4199f0c7b84b067c1822df0367067795ccb Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Mon, 2 May 2022 11:06:29 +0200 Subject: [PATCH 3/3] forgot those --- src/shapes/text.class.js | 1 - src/shapes/textbox.class.js | 1 - 2 files changed, 2 deletions(-) diff --git a/src/shapes/text.class.js b/src/shapes/text.class.js index 1d99be796cf..41bb961e58d 100644 --- a/src/shapes/text.class.js +++ b/src/shapes/text.class.js @@ -444,7 +444,6 @@ // once text is measured we need to make space fatter to make justified text. this.enlargeSpaces(); } - this.saveState({ propertySet: '_dimensionAffectingProps' }); }, /** diff --git a/src/shapes/textbox.class.js b/src/shapes/textbox.class.js index 3faff27b7b0..a78922af579 100644 --- a/src/shapes/textbox.class.js +++ b/src/shapes/textbox.class.js @@ -105,7 +105,6 @@ } // clear cache and re-calculate height this.height = this.calcTextHeight(); - this.saveState({ propertySet: '_dimensionAffectingProps' }); }, /**