feat(): support aborting promises/requests

.eslintrc.json

@@ -12,7 +12,8 @@
     "Buffer": true,
     "process": true,
     "QUnit": true,
-    "assert": true
+    "assert": true,
+    "AbortController": true
   },
   "rules": {
     "semi": 2,

.github/workflows/node-unit-tests.yml

@@ -15,7 +15,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        node-version: [14.x, 16.x]
+        node-version: [14.17.0, 16.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
     steps:
     - uses: actions/checkout@v2

.github/workflows/visual-node.yml

@@ -15,7 +15,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        node-version: [14.x, 16.x]
+        node-version: [14.17.0, 16.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
     steps:
     - uses: actions/checkout@v2

package.json

@@ -85,7 +85,7 @@
     "uglify-js": "3.3.x"
   },
   "engines": {
-    "node": ">=14.0.0"
+    "node": ">=14.17.0"
   },
   "main": "./dist/fabric.js",
   "dependencies": {}

src/mixins/canvas_serialization.mixin.js

@@ -1,11 +1,21 @@
 fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.StaticCanvas.prototype */ {
+
+  /**
+   * Aborts instance's loading task ({@link fabric.Canvas#loadFromJSON} etc.) if exists
+   */
+  abortLoadingTask: function () {
+    if (this.__abortController) {
+      this.__abortController.abort();
+      delete this.__abortController;
+    }
+  },
+
   /**
    * Populates canvas with data from the specified JSON.
    * JSON format must conform to the one of {@link fabric.Canvas#toJSON}
    * @param {String|Object} json JSON string or object
    * @param {Function} [reviver] Method for further parsing of JSON elements, called after each fabric object created.
    * @return {Promise<fabric.Canvas>} instance
-   * @chainable
    * @tutorial {@link http://fabricjs.com/fabric-intro-part-3#deserialization}
    * @see {@link http://jsfiddle.net/fabricjs/fmgXt/|jsFiddle demo}
    * @example <caption>loadFromJSON</caption>
@@ -20,8 +30,9 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati
    * });
    */
   loadFromJSON: function (json, reviver) {
+    this.abortLoadingTask();
     if (!json) {
-      return;
+      return Promise.reject(new Error('fabric.js: `json` is undefined'));
     }
 
     // serialize if it wasn't already
@@ -30,42 +41,45 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati
       : fabric.util.object.clone(json);
 
     var _this = this,
-        renderOnAddRemove = this.renderOnAddRemove;
+        renderOnAddRemove = this.renderOnAddRemove,
+        abortController = new AbortController();
 
+    this.__abortController = abortController;
     this.renderOnAddRemove = false;
 
-    return fabric.util.enlivenObjects(serialized.objects || [], '', reviver)
-      .then(function(enlived) {
+    return Promise.all([
+      fabric.util.enlivenObjects(serialized.objects || [], { reviver: reviver, signal: abortController.signal }),
+      fabric.util.enlivenObjectEnlivables({
+        backgroundImage: serialized.backgroundImage,
+        backgroundColor: serialized.background,
+        overlayImage: serialized.overlayImage,
+        overlayColor: serialized.overlay,
+        clipPath: serialized.clipPath,
+      }, { signal: abortController.signal })
+    ])
+      .then(function (res) {
+        var enlived = res[0], enlivedMap = res[1];
         _this.clear();
-        return fabric.util.enlivenObjectEnlivables({
-          backgroundImage: serialized.backgroundImage,
-          backgroundColor: serialized.background,
-          overlayImage: serialized.overlayImage,
-          overlayColor: serialized.overlay,
-          clipPath: serialized.clipPath,
-        })
-          .then(function(enlivedMap) {
-            _this.__setupCanvas(serialized, enlived, renderOnAddRemove);
-            _this.set(enlivedMap);
-            return _this;
-          });
+        _this.__setupCanvas(serialized, enlived);
+        _this.renderOnAddRemove = renderOnAddRemove;
+        delete _this.__abortController;
+        _this.set(enlivedMap);
+        return _this;
       });
   },
 
   /**
    * @private
    * @param {Object} serialized Object with background and overlay information
    * @param {Array} enlivenedObjects canvas objects
-   * @param {boolean} renderOnAddRemove renderOnAddRemove setting for the canvas
    */
-  __setupCanvas: function(serialized, enlivenedObjects, renderOnAddRemove) {
+  __setupCanvas: function(serialized, enlivenedObjects) {
     var _this = this;
     enlivenedObjects.forEach(function(obj, index) {
       // we splice the array just in case some custom classes restored from JSON
       // will add more object to canvas at canvas init.
       _this.insertAt(obj, index);
     });
-    this.renderOnAddRemove = renderOnAddRemove;
     // remove parts i cannot set as options
     delete serialized.objects;
     delete serialized.backgroundImage;

src/parser.js

@@ -688,19 +688,23 @@
    * @param {Function} [reviver] Method for further parsing of SVG elements, called after each fabric object created.
    * @param {Object} [parsingOptions] options for parsing document
    * @param {String} [parsingOptions.crossOrigin] crossOrigin settings
+   * @param {AbortSignal} [parsingOptions.signal] see https://developer.mozilla.org/en-US/docs/Web/API/AbortController/signal
    */
   fabric.parseSVGDocument = function(doc, callback, reviver, parsingOptions) {
     if (!doc) {
       return;
     }
-
+    if (parsingOptions && parsingOptions.signal && parsingOptions.signal.aborted) {
+      throw new DOMException('`options.signal` is in `aborted` state', 'ABORT_ERR');
+    }
     parseUseDirectives(doc);
 
     var svgUid =  fabric.Object.__uid++, i, len,
         options = applyViewboxTransform(doc),
         descendants = fabric.util.toArray(doc.getElementsByTagName('*'));
     options.crossOrigin = parsingOptions && parsingOptions.crossOrigin;
     options.svgUid = svgUid;
+    options.signal = parsingOptions && parsingOptions.signal;
 
     if (descendants.length === 0 && fabric.isLikelyNode) {
       // we're likely in node, where "o3-xml" library fails to gEBTN("*")
@@ -1046,13 +1050,15 @@
      * @param {Function} [reviver] Method for further parsing of SVG elements, called after each fabric object created.
      * @param {Object} [options] Object containing options for parsing
      * @param {String} [options.crossOrigin] crossOrigin crossOrigin setting to use for external resources
+     * @param {AbortSignal} [options.signal] handle aborting, see https://developer.mozilla.org/en-US/docs/Web/API/AbortController/signal
      */
     loadSVGFromURL: function(url, callback, reviver, options) {
 
       url = url.replace(/^\n\s*/, '').trim();
       new fabric.util.request(url, {
         method: 'get',
-        onComplete: onComplete
+        onComplete: onComplete,
+        signal: options && options.signal
       });
 
       function onComplete(r) {
@@ -1077,6 +1083,7 @@
      * @param {Function} [reviver] Method for further parsing of SVG elements, called after each fabric object created.
      * @param {Object} [options] Object containing options for parsing
      * @param {String} [options.crossOrigin] crossOrigin crossOrigin setting to use for external resources
+     * @param {AbortSignal} [options.signal] handle aborting, see https://developer.mozilla.org/en-US/docs/Web/API/AbortController/signal
      */
     loadSVGFromString: function(string, callback, reviver, options) {
       var parser = new fabric.window.DOMParser(),

src/pattern.class.js

@@ -175,9 +175,17 @@
     }
   });
 
-  fabric.Pattern.fromObject = function(object) {
-    var patternOptions = Object.assign({}, object);
-    return fabric.util.loadImage(object.source, { crossOrigin: object.crossOrigin })
+  /**
+   *
+   * @param {object} object
+   * @param {object} [options]
+   * @param {AbortSignal} [options.signal] handle aborting, see https://developer.mozilla.org/en-US/docs/Web/API/AbortController/signal
+   * @returns
+   */
+  fabric.Pattern.fromObject = function(object, options) {
+    var patternOptions = Object.assign({}, object),
+        imageOptions = Object.assign({ crossOrigin: object.crossOrigin }, options);
+    return fabric.util.loadImage(object.source, imageOptions)
       .then(function(img) {
         patternOptions.source = img;
         return new fabric.Pattern(patternOptions);

src/shapes/image.class.js

@@ -366,6 +366,16 @@
       }
     },
 
+    /**
+     * Aborts pending image loading task
+     */
+    abortLoadingTask: function () {
+      if (this.__abortController) {
+        this.__abortController.abort();
+        delete this.__abortController;
+      }
+    },
+
     /**
      * Sets source of an image
      * @param {String} src Source string (URL)
@@ -376,9 +386,13 @@
      */
     setSrc: function(src, options) {
       var _this = this;
-      return fabric.util.loadImage(src, options).then(function(img) {
+      this.abortLoadingTask();
+      this.__abortController = new AbortController();
+      var opts = Object.assign({}, options, { signal: this.__abortController.signal });
+      return fabric.util.loadImage(src, opts).then(function(img) {
         _this.setElement(img, options);
         _this._setWidthHeight();
+        delete this.__abortController;
         return _this;
       });
     },
@@ -681,20 +695,24 @@
    * Creates an instance of fabric.Image from its object representation
    * @static
    * @param {Object} object Object to create an instance from
+   * @param {object} [options] Options object
+   * @param {AbortSignal} [options.signal] handle aborting, see https://developer.mozilla.org/en-US/docs/Web/API/AbortController/signal
    * @returns {Promise<fabric.Image>}
    */
-  fabric.Image.fromObject = function(_object) {
+  fabric.Image.fromObject = function(_object, options) {
     var object = fabric.util.object.clone(_object),
         filters = object.filters,
         resizeFilter = object.resizeFilter;
     // the generic enliving will fail on filters for now
     delete object.resizeFilter;
     delete object.filters;
+    var imageOptions = Object.assign({}, options, { crossOrigin: _object.crossOrigin }),
+        filterOptions = Object.assign({}, options, { namespace: fabric.Image.filters });
     return Promise.all([
-      fabric.util.loadImage(object.src, { crossOrigin: _object.crossOrigin }),
-      filters && fabric.util.enlivenObjects(filters,  'fabric.Image.filters'),
-      resizeFilter && fabric.util.enlivenObjects([resizeFilter],  'fabric.Image.filters'),
-      fabric.util.enlivenObjectEnlivables(object),
+      fabric.util.loadImage(object.src, imageOptions),
+      filters && fabric.util.enlivenObjects(filters, filterOptions),
+      resizeFilter && fabric.util.enlivenObjects([resizeFilter], filterOptions),
+      fabric.util.enlivenObjectEnlivables(object, options),
     ])
       .then(function(imgAndFilters) {
         object.filters = imgAndFilters[1] || [];
@@ -707,7 +725,9 @@
    * Creates an instance of fabric.Image from an URL string
    * @static
    * @param {String} url URL to create an image from
-   * @param {Object} [imgOptions] Options object
+   * @param {object} [imgOptions] Options object
+   * @param {string} [options.crossOrigin] cors value for the image loading, default to anonymous
+   * @param {AbortSignal} [options.signal] handle aborting, see https://developer.mozilla.org/en-US/docs/Web/API/AbortController/signal
    * @returns {Promise<fabric.Image>}
    */
   fabric.Image.fromURL = function(url, imgOptions) {
@@ -732,6 +752,7 @@
    * @static
    * @param {SVGElement} element Element to parse
    * @param {Object} [options] Options object
+   * @param {AbortSignal} [options.signal] handle aborting, see https://developer.mozilla.org/en-US/docs/Web/API/AbortController/signal
    * @param {Function} callback Callback to execute when fabric.Image object is created
    * @return {fabric.Image} Instance of fabric.Image
    */

src/shapes/object.class.js

@@ -1932,23 +1932,33 @@
   fabric.Object.NUM_FRACTION_DIGITS = 2;
 
   /**
-   * Defines which properties should be enlivened from the object passed to {@link fabric.Object._fromObject}
-   * @static
-   * @memberOf fabric.Object
-   * @constant
-   * @type string[]
+   * 
+   * @param {Function} klass 
+   * @param {object} object 
+   * @param {string} [extraParam] property to pass as first argument to the constructor
+   * @param {object} [options]
+   * @param {AbortSignal} [options.signal] handle aborting, see https://developer.mozilla.org/en-US/docs/Web/API/AbortController/signal
+   * @returns {Promise<fabric.Object>}
    */
-
-  fabric.Object._fromObject = function(klass, object, extraParam) {
+  fabric.Object._fromObject = function(klass, object, extraParam, options) {
     var serializedObject = clone(object, true);
-    return fabric.util.enlivenObjectEnlivables(serializedObject).then(function(enlivedMap) {
+    return fabric.util.enlivenObjectEnlivables(serializedObject, options).then(function(enlivedMap) {
       var newObject = Object.assign(object, enlivedMap);
       return extraParam ? new klass(object[extraParam], newObject) : new klass(newObject);
     });
   };
 
-  fabric.Object.fromObject = function(object) {
-    return fabric.Object._fromObject(fabric.Object, object);
+  /**
+   *
+   * @static
+   * @memberOf fabric.Object
+   * @param {object} object
+   * @param {object} [options]
+   * @param {AbortSignal} [options.signal] handle aborting, see https://developer.mozilla.org/en-US/docs/Web/API/AbortController/signal
+   * @returns {Promise<fabric.Object>}
+   */
+  fabric.Object.fromObject = function(object, options) {
+    return fabric.Object._fromObject(fabric.Object, object, null, options);
   };
 
   /**

src/util/dom_request.js

@@ -15,20 +15,33 @@
    * @param {String} [options.method="GET"]
    * @param {String} [options.parameters] parameters to append to url in GET or in body
    * @param {String} [options.body] body to send with POST or PUT request
+   * @param {AbortSignal} [options.signal] handle aborting, see https://developer.mozilla.org/en-US/docs/Web/API/AbortController/signal
    * @param {Function} options.onComplete Callback to invoke when request is completed
    * @return {XMLHttpRequest} request
    */
   function request(url, options) {
     options || (options = { });
 
     var method = options.method ? options.method.toUpperCase() : 'GET',
-        onComplete = options.onComplete || function() { },
+        onComplete = options.onComplete || function () { },
         xhr = new fabric.window.XMLHttpRequest(),
-        body = options.body || options.parameters;
+        body = options.body || options.parameters,
+        signal = options.signal,
+        abort = abort = function () {
+          xhr.abort();
+        };
+
+    if (signal && signal.aborted) {
+      throw new DOMException('`options.signal` is in `aborted` state', 'ABORT_ERR');
+    }
+    else if (signal) {
+      signal.addEventListener('abort', abort, { once: true });
+    }
 
     /** @ignore */
     xhr.onreadystatechange = function() {
       if (xhr.readyState === 4) {
+        signal && signal.removeEventListener('abort', abort);
         onComplete(xhr);
         xhr.onreadystatechange = emptyFn;
       }