Version 5.2 (#7721)

Co-authored-by: Shachar <[email protected]> Co-authored-by: Andrejs <[email protected]> Co-authored-by: CommanderRoot <[email protected]>
fabricjs · Feb 21, 2022 · b8ee6c7 · b8ee6c7
1 parent a693198
commit b8ee6c7
Show file tree

Hide file tree

Showing 26 changed files with 175 additions and 81 deletions.
diff --git a/.github/workflows/browser-chrome.yml b/.github/workflows/browser-chrome.yml
@@ -4,9 +4,9 @@ name: Unit tests on Chrome
 
 on:
   push:
-    branches: [ master ]
+    branches: [ master, 5.x ]
   pull_request:
-    branches: [ master ]
+    branches: [ master, 5.x ]
 
 jobs:
   chrome-tests:

diff --git a/.github/workflows/browser-firefox.yml b/.github/workflows/browser-firefox.yml
@@ -4,9 +4,9 @@ name: Unit tests on Firefox
 
 on:
   push:
-    branches: [ master ]
+    branches: [ master, 5.x ]
   pull_request:
-    branches: [ master ]
+    branches: [ master, 5.x ]
 
 jobs:
   firefox-tests:

diff --git a/.github/workflows/build.js.yml b/.github/workflows/build.js.yml
@@ -4,7 +4,7 @@ name: Pr quality check
 
 on:
   pull_request:
-    branches: [ master ]
+    branches: [ master, 5.x ]
 
 jobs:
   build:

diff --git a/.github/workflows/node-unit-tests.yml b/.github/workflows/node-unit-tests.yml
@@ -5,9 +5,9 @@ name: Node Unit tests
 
 on:
   push:
-    branches: [ master ]
+    branches: [ master, 5.x ]
   pull_request:
-    branches: [ master ]
+    branches: [ master, 5.x ]
 
 jobs:
   node-unit-tests:

diff --git a/.github/workflows/npmpublish.yml b/.github/workflows/npmpublish.yml
@@ -4,7 +4,7 @@ on:
   release:
     branches:
       - master
-      - v3.x
+      - 5.x
     types: [published]
 
 jobs:

diff --git a/.github/workflows/visual-node.yml b/.github/workflows/visual-node.yml
@@ -5,9 +5,9 @@ name: Node visual unit tests
 
 on:
   push:
-    branches: [ master ]
+    branches: [ master, 5.x ]
   pull_request:
-    branches: [ master ]
+    branches: [ master, 5.x ]
 
 jobs:
   node-visual-tests:

diff --git a/.github/workflows/visual-test-chrome.yml b/.github/workflows/visual-test-chrome.yml
@@ -4,9 +4,9 @@ name: Visual unit tests on Chrome
 
 on:
   push:
-    branches: [ master ]
+    branches: [ master, 5.x ]
   pull_request:
-    branches: [ master ]
+    branches: [ master, 5.x ]
 
 jobs:
   chrome-visual-tests:

diff --git a/.github/workflows/visual-test-firefox.yml b/.github/workflows/visual-test-firefox.yml
@@ -4,9 +4,9 @@ name: Visual unit tests on Firefox
 
 on:
   push:
-    branches: [ master ]
+    branches: [ master, 5.x ]
   pull_request:
-    branches: [ master ]
+    branches: [ master, 5.x ]
 
 jobs:
   firefox-visual-tests:

diff --git a/HEADER.js b/HEADER.js
@@ -1,6 +1,6 @@
 /*! Fabric.js Copyright 2008-2015, Printio (Juriy Zaytsev, Maxim Chernyak) */
 
-var fabric = fabric || { version: '5.1.0' };
+var fabric = fabric || { version: '5.2.0' };
 if (typeof exports !== 'undefined') {
   exports.fabric = fabric;
 }

diff --git a/dist/fabric.js b/dist/fabric.js
@@ -1,7 +1,7 @@
 /* build: `node build.js modules=ALL exclude=gestures,accessors,erasing requirejs minifier=uglifyjs` */
 /*! Fabric.js Copyright 2008-2015, Printio (Juriy Zaytsev, Maxim Chernyak) */
 
-var fabric = fabric || { version: '5.1.0' };
+var fabric = fabric || { version: '5.2.0' };
 if (typeof exports !== 'undefined') {
   exports.fabric = fabric;
 }
@@ -1304,7 +1304,7 @@ fabric.CommonMethods = {
      * @return {Array} properties Properties names to include
      */
     populateWithProperties: function(source, destination, properties) {
-      if (properties && Object.prototype.toString.call(properties) === '[object Array]') {
+      if (properties && Array.isArray(properties)) {
         for (var i = 0, len = properties.length; i < len; i++) {
           if (properties[i] in source) {
             destination[properties[i]] = source[properties[i]];
@@ -4382,8 +4382,7 @@ fabric.warn = console.warn;
   }
 
   function normalizeValue(attr, value, parentAttributes, fontSize) {
-    var isArray = Object.prototype.toString.call(value) === '[object Array]',
-        parsed;
+    var isArray = Array.isArray(value), parsed;
 
     if ((attr === 'fill' || attr === 'stroke') && value === 'none') {
       value = '';
@@ -4781,7 +4780,7 @@ fabric.warn = console.warn;
         return;
       }
 
-      var xlink = xlinkAttribute.substr(1),
+      var xlink = xlinkAttribute.slice(1),
           x = el.getAttribute('x') || 0,
           y = el.getAttribute('y') || 0,
           el2 = elementById(doc, xlink).cloneNode(true),
@@ -5053,7 +5052,7 @@ fabric.warn = console.warn;
   function recursivelyParseGradientsXlink(doc, gradient) {
     var gradientsAttrs = ['gradientTransform', 'x1', 'x2', 'y1', 'y2', 'gradientUnits', 'cx', 'cy', 'r', 'fx', 'fy'],
         xlinkAttr = 'xlink:href',
-        xLink = gradient.getAttribute(xlinkAttr).substr(1),
+        xLink = gradient.getAttribute(xlinkAttr).slice(1),
         referencedGradient = elementById(doc, xLink);
     if (referencedGradient && referencedGradient.getAttribute(xlinkAttr)) {
       recursivelyParseGradientsXlink(doc, referencedGradient);
@@ -9793,6 +9792,7 @@ fabric.ElementsParser = function(elements, callback, options, reviver, parsingOp
      * Returns coordinates of a center of canvas.
      * Returned value is an object with top and left properties
      * @return {Object} object with "top" and "left" number values
+     * @deprecated migrate to `getCenterPoint`
      */
     getCenter: function () {
       return {
@@ -9801,13 +9801,21 @@ fabric.ElementsParser = function(elements, callback, options, reviver, parsingOp
       };
     },
 
+    /**
+     * Returns coordinates of a center of canvas.
+     * @return {fabric.Point} 
+     */
+    getCenterPoint: function () {
+      return new fabric.Point(this.width / 2, this.height / 2);
+    },
+
     /**
      * Centers object horizontally in the canvas
      * @param {fabric.Object} object Object to center horizontally
      * @return {fabric.Canvas} thisArg
      */
     centerObjectH: function (object) {
-      return this._centerObject(object, new fabric.Point(this.getCenter().left, object.getCenterPoint().y));
+      return this._centerObject(object, new fabric.Point(this.getCenterPoint().x, object.getCenterPoint().y));
     },
 
     /**
@@ -9817,7 +9825,7 @@ fabric.ElementsParser = function(elements, callback, options, reviver, parsingOp
      * @chainable
      */
     centerObjectV: function (object) {
-      return this._centerObject(object, new fabric.Point(object.getCenterPoint().x, this.getCenter().top));
+      return this._centerObject(object, new fabric.Point(object.getCenterPoint().x, this.getCenterPoint().y));
     },
 
     /**
@@ -9827,9 +9835,8 @@ fabric.ElementsParser = function(elements, callback, options, reviver, parsingOp
      * @chainable
      */
     centerObject: function(object) {
-      var center = this.getCenter();
-
-      return this._centerObject(object, new fabric.Point(center.left, center.top));
+      var center = this.getCenterPoint();
+      return this._centerObject(object, center);
     },
 
     /**
@@ -9840,7 +9847,6 @@ fabric.ElementsParser = function(elements, callback, options, reviver, parsingOp
      */
     viewportCenterObject: function(object) {
       var vpCenter = this.getVpCenter();
-
       return this._centerObject(object, vpCenter);
     },
 
@@ -9874,9 +9880,9 @@ fabric.ElementsParser = function(elements, callback, options, reviver, parsingOp
      * @chainable
      */
     getVpCenter: function() {
-      var center = this.getCenter(),
+      var center = this.getCenterPoint(),
           iVpt = invertTransform(this.viewportTransform);
-      return transformPoint({ x: center.left, y: center.top }, iVpt);
+      return transformPoint(center, iVpt);
     },
 
     /**
@@ -12033,7 +12039,7 @@ fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, /** @lends fab
     _isSelectionKeyPressed: function(e) {
       var selectionKeyPressed = false;
 
-      if (Object.prototype.toString.call(this.selectionKey) === '[object Array]') {
+      if (Array.isArray(this.selectionKey)) {
         selectionKeyPressed = !!this.selectionKey.find(function(key) { return e[key] === true; });
       }
       else {
@@ -12459,6 +12465,14 @@ fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, /** @lends fab
       this.contextTop = upperCanvasEl.getContext('2d');
     },
 
+    /**
+     * Returns context of top canvas where interactions are drawn
+     * @returns {CanvasRenderingContext2D}
+     */
+    getTopContext: function () {
+      return this.contextTop;
+    },
+
     /**
      * @private
      */
@@ -15236,11 +15250,9 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati
         if (object[prop] === prototype[prop]) {
           delete object[prop];
         }
-        var isArray = Object.prototype.toString.call(object[prop]) === '[object Array]' &&
-                      Object.prototype.toString.call(prototype[prop]) === '[object Array]';
-
         // basically a check for [] === []
-        if (isArray && object[prop].length === 0 && prototype[prop].length === 0) {
+        if (Array.isArray(object[prop]) && Array.isArray(prototype[prop])
+          && object[prop].length === 0 && prototype[prop].length === 0) {
           delete object[prop];
         }
       });
@@ -15416,7 +15428,7 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati
 
     renderCache: function(options) {
       options = options || {};
-      if (!this._cacheCanvas) {
+      if (!this._cacheCanvas || !this._cacheContext) {
         this._createCacheCanvas();
       }
       if (this.isCacheDirty()) {
@@ -15431,6 +15443,7 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati
      */
     _removeCacheCanvas: function() {
       this._cacheCanvas = null;
+      this._cacheContext = null;
       this.cacheWidth = 0;
       this.cacheHeight = 0;
     },
@@ -15589,7 +15602,7 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati
       if (this.isNotVisible()) {
         return false;
       }
-      if (this._cacheCanvas && !skipCanvas && this._updateCacheCanvas()) {
+      if (this._cacheCanvas && this._cacheContext && !skipCanvas && this._updateCacheCanvas()) {
         // in this case the context is already cleared.
         return true;
       }
@@ -15598,7 +15611,7 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati
           (this.clipPath && this.clipPath.absolutePositioned) ||
           (this.statefullCache && this.hasStateChanged('cacheProperties'))
         ) {
-          if (this._cacheCanvas && !skipCanvas) {
+          if (this._cacheCanvas && this._cacheContext && !skipCanvas) {
             var width = this.cacheWidth / this.zoomX;
             var height = this.cacheHeight / this.zoomY;
             this._cacheContext.clearRect(-width / 2, -height / 2, width, height);
@@ -16132,7 +16145,7 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati
      * @return {Boolean}
      */
     isType: function(type) {
-      return this.type === type;
+      return arguments.length > 1 ? Array.from(arguments).includes(this.type) : this.type === type;
     },
 
     /**
@@ -18070,7 +18083,7 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati
     return fabric.util.animate({
       target: this,
       startValue: object.left,
-      endValue: this.getCenter().left,
+      endValue: this.getCenterPoint().x,
       duration: this.FX_DURATION,
       onChange: function(value) {
         object.set('left', value);
@@ -18103,7 +18116,7 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati
     return fabric.util.animate({
       target: this,
       startValue: object.top,
-      endValue: this.getCenter().top,
+      endValue: this.getCenterPoint().y,
       duration: this.FX_DURATION,
       onChange: function(value) {
         object.set('top', value);
@@ -19642,7 +19655,6 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot
       max = fabric.util.array.max,
       extend = fabric.util.object.extend,
       clone = fabric.util.object.clone,
-      _toString = Object.prototype.toString,
       toFixed = fabric.util.toFixed;
 
   if (fabric.Path) {
@@ -19696,10 +19708,8 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot
     * @param {Object} [options] Options object
     */
     _setPath: function (path, options) {
-      var fromArray = _toString.call(path) === '[object Array]';
-
       this.path = fabric.util.makePathSimpler(
-        fromArray ? path : fabric.util.parsePath(path)
+        Array.isArray(path) ? path : fabric.util.parsePath(path)
       );
 
       fabric.Polyline.prototype._setPositionDimensions.call(this, options || {});

diff --git a/dist/fabric.min.js b/dist/fabric.min.js
diff --git a/lib/event.js b/lib/event.js
@@ -237,7 +237,7 @@ var eventManager = function(target, type, listener, configure, trigger, fromOver
 		}
 		return createBatchCommands(events);
 	} else if (type.indexOf("on") === 0) { // to support things like "onclick" instead of "click"
-		type = type.substr(2);
+		type = type.slice(2);
 	}
 
 	// Ensure listener is a function.
@@ -1368,7 +1368,7 @@ root.gesture = function(conf) {
 			var dx = touch.move.x - self.x;
 			var dy = touch.move.y - self.y;
 			var distance = Math.sqrt(dx * dx + dy * dy);
-			// If touch start.distance from centroid is 0, scale should not be updated. 
+			// If touch start.distance from centroid is 0, scale should not be updated.
 			// This prevents dividing by 0 in cases where start.distance is oddly 0.
 			if (start.distance !== 0) {
 			  scale += distance / start.distance;

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -55,7 +55,7 @@
     "test:coverage": "nyc --silent qunit test/node_test_setup.js test/lib test/unit",
     "test:visual:coverage": "nyc --silent --no-clean qunit test/node_test_setup.js test/lib test/visual",
     "coverage:report": "nyc report --reporter=lcov --reporter=text",
-    "test": "qunit test/node_test_setup.js test/lib test/unit",
+    "test": "qunit --require ./test/node_test_setup.js test/lib test/unit",
     "test:visual": "qunit test/node_test_setup.js test/lib test/visual",
     "test:visual:single": "qunit test/node_test_setup.js test/lib",
     "test:all": "npm run test && npm run test:visual",
@@ -75,11 +75,12 @@
   "devDependencies": {
     "auto-changelog": "^2.3.0",
     "chalk": "^2.4.1",
+    "deep-object-diff": "^1.1.7",
     "eslint": "4.18.x",
     "nyc": "^15.1.0",
     "onchange": "^7.1.0",
     "pixelmatch": "^4.0.2",
-    "qunit": "^2.13.0",
+    "qunit": "^2.17.2",
     "testem": "^3.2.0",
     "uglify-js": "3.3.x"
   },