Squashed commit of the following:

commit 109efe5 Author: Shachar <34343793+ShaMan123@users.noreply.github.com> Date: Thu Feb 24 11:38:26 2022 +0200 feat(util): transform utils (#7614) * Update misc.js * Update misc.js * rename * better JSDOC * Update misc.js * Update util.js * ci(): lint * better JSDOC * `sendObjectToPlane` * Update misc.js * Update util.js * Update util.js * Update misc.js * rename * Update misc.js * Update util.js * Update misc.js * remove redundant tests * Update util.js * Update misc.js * Update misc.js * Update util.js * Update util.js * fix(): reversed transform order * allow passing null for `sourceObject` * Update util.js * lint * Update misc.js * Update misc.js * ci: adjust tests to accept error * Update misc.js * Update util.js * build * Revert "Update misc.js" This reverts commit fb83a71. * Update misc.js * checkout * Update util.js * Update misc.js * Update util.js * typo * Update misc.js * optional parent * refactor around orphan objects * Update misc.js * add warning * Update object_geometry.mixin.js * lint * rename * JSDOC * Revert "JSDOC" This reverts commit a88b0ab. * remove unsafe `calcPlaneMatrix` * typo * Update misc.js * Update misc.js commit 1d447b0 Author: Shachar <34343793+ShaMan123@users.noreply.github.com> Date: Thu Feb 24 11:16:43 2022 +0200 chore/fix(v6): prerequisites for Group (#7728) commit f13075c Author: Andrea Bogazzi <andreabogazzi79@gmail.com> Date: Thu Feb 24 10:03:22 2022 +0100 tests() adding an extra controls test where the group are transformed (#7736) commit bae062c Author: Shachar <34343793+ShaMan123@users.noreply.github.com> Date: Thu Feb 24 10:10:20 2022 +0200 chore(): Group prerequisite minor refactor object_origin commit 23ae1a7 Author: Shachar <34343793+ShaMan123@users.noreply.github.com> Date: Wed Feb 23 00:43:36 2022 +0200 fix(): ensure scaling factor is positive for strokeUniform (#7729) * Update object.class.js redundant else if * added a visual test * removed useless file * prefer dashes * prefer dashes * modified golden * more tolerance Co-authored-by: Andrea Bogazzi <andreabogazzi79@gmail.com> commit 84e405d Author: Shachar <34343793+ShaMan123@users.noreply.github.com> Date: Mon Feb 21 14:52:07 2022 +0200 MAJOR chore(v6): neutral prerequisites for fabric.Group rework (#7726) commit 0c98cee Author: Andrea Bogazzi <andreabogazzi79@gmail.com> Date: Mon Feb 21 08:25:42 2022 +0100 chore(): update CHANGELOG commit 6565db1 Author: Shachar <34343793+ShaMan123@users.noreply.github.com> Date: Mon Feb 21 07:30:19 2022 +0200 fix(): add `eraser` to Object state/cache props (#7720) * Update eraser_brush.mixin.js * Update eraser_brush.mixin.js commit fd1b0c3 Author: Shachar <34343793+ShaMan123@users.noreply.github.com> Date: Sun Feb 20 17:18:19 2022 +0200 feat(Object.isType): accept multiple `type` (#7715) commit 4e80e77 Author: Andrea Bogazzi <andreabogazzi79@gmail.com> Date: Sun Feb 20 16:12:36 2022 +0100 updated package.json commit fc902cb Author: CommanderRoot <CommanderRoot@users.noreply.github.com> Date: Sun Feb 20 13:40:29 2022 +0100 chore(): Replace deprecated String.prototype.substr() with Array.prototype.slice() (#7696) String.prototype.substr() is deprecated (see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substr) so we replace it with slice() which works similarily but isn't deprecated. Signed-off-by: Tobias Speicher <rootcommander@gmail.com> commit 30c0c19 Author: Shachar <34343793+ShaMan123@users.noreply.github.com> Date: Sun Feb 20 14:39:15 2022 +0200 MAJOR feat(fabric.Point): divide, scalarDivide, scalarDivideEquals (#7716) * **BREAKING**: divide, scalarDivide, scalarDivideEquals commit 2d922e1 Author: Shachar <34343793+ShaMan123@users.noreply.github.com> Date: Sun Feb 20 14:37:52 2022 +0200 chore(): use Array.isArray instead of ie6+ workarounds (#7718) commit 88b425c Author: Shachar <34343793+ShaMan123@users.noreply.github.com> Date: Sun Feb 20 14:24:21 2022 +0200 MAJOR feat(): Reuse fabric.Point logic for scaling and naming consistency (#7710) * fix(Object): object scaling inconsisteny **MAJOR** **BREAKING** `Object.getObjectScaling`, `Object.getTotalObjectScaling` commit 7e563c7 Author: Shachar <34343793+ShaMan123@users.noreply.github.com> Date: Sun Feb 20 02:19:13 2022 +0200 chore(): BREAKING Cleanup fabric.Point for v6 (#7709) * Update misc.js * point **BREAKS** `multiply` * Update point.js * revert adding error check commit 4c2e9a6 Author: Shachar <34343793+ShaMan123@users.noreply.github.com> Date: Sun Feb 20 01:52:47 2022 +0200 tests(fabric.animation): fix test reliability
fabricjs · Mar 2, 2022 · dc335c1 · dc335c1
1 parent bac9739
commit dc335c1
Show file tree

Hide file tree

Showing 30 changed files with 829 additions and 375 deletions.
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/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,31 @@
 # Changelog
 
+# Changelog
+
+## [next]
+
+- MAJOR feat(fabric.Point): divide, scalarDivide, scalarDivideEquals [`#7716`](https://github.com/fabricjs/fabric.js/pull/7716)
+- MAJOR feat(): Reuse fabric.Point logic for scaling and naming consistency [`#7710`](https://github.com/fabricjs/fabric.js/pull/7710)
+- feat(Canvas#getCenter): migrate to `getCenterPoint` [`#7699`](https://github.com/fabricjs/fabric.js/pull/7699)
+- MAJOR feat(fabric) remove callbacks in for Promise support [`#7657`](https://github.com/fabricjs/fabric.js/pull/7657)
+- chore(): BREAKING Cleanup fabric.Point for v6 (#7709) [`7e563c7`](https://github.com/fabricjs/fabric.js/commit/7e563c72164070aafb03043643e85d06d0dee32c)
+
+## [5.2.1]
+
+- fix(): add `eraser` to Object state/cache props [`#7720`](https://github.com/fabricjs/fabric.js/pull/7720)
+
+## [5.2.0]
+
+- feat(fabric.Object): isType accepts multiple `type` [`#7715`](https://github.com/fabricjs/fabric.js/pull/7715)
+- chore(): Replace deprecated String.prototype.substr() with Array.prototype.slice() [`#7696`](https://github.com/fabricjs/fabric.js/pull/7696)
+- chore(): use Array.isArray instead of ie6+ workarounds [`#7718`](https://github.com/fabricjs/fabric.js/pull/7718)
+- MINOR: feat(fabric.Canvas): add `getTopContext` method to expose the internal contextTop [`#7697`](https://github.com/fabricjs/fabric.js/pull/7697)
+- fix(fabric.Object) Add cacheContext checks before trying to render on cache [`#7694`](https://github.com/fabricjs/fabric.js/pull/7694)
+- tests(): node test suite enhancement [`#7691`](https://github.com/fabricjs/fabric.js/pull/7691)
+- feat(Canvas#getCenter): migrate to `getCenterPoint` [`#7699`](https://github.com/fabricjs/fabric.js/pull/7699)
+- updated package.json [`803ce95`](https://github.com/fabricjs/fabric.js/commit/803ce95878150fba9e4195804bccae9bcfe45c6d)
+- tests(fabric.animation): fix test reliability [`4be0fb9`](https://github.com/fabricjs/fabric.js/commit/4be0fb9903e15db294b89030feb645e5da766740)
+
 ## [5.1.0]
 
 - build(deps): bump node-fetch from 2.6.6 to 2.6.7 [`#7684`](https://github.com/fabricjs/fabric.js/pull/7684)

diff --git a/build.js b/build.js
@@ -178,6 +178,7 @@ var filesToInclude = [
   'src/shapes/object.class.js',
   'src/mixins/object_origin.mixin.js',
   'src/mixins/object_geometry.mixin.js',
+  'src/mixins/object_ancestry.mixin.js',
   'src/mixins/object_stacking.mixin.js',
   'src/mixins/object.svg_export.js',
   'src/mixins/stateful.mixin.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.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",
@@ -80,7 +80,7 @@
     "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"
   },

diff --git a/src/canvas.class.js b/src/canvas.class.js
@@ -355,6 +355,13 @@
      */
     _hoveredTargets: [],
 
+    /**
+     * hold the list of objects to render
+     * @type fabric.Object[]
+     * @private
+     */
+    _objectsToRender: undefined,
+
     /**
      * @private
      */
@@ -372,6 +379,23 @@
       this.calcOffset();
     },
 
+    /**
+     * @private
+     * @param {fabric.Object} obj Object that was added
+     */
+    _onObjectAdded: function (obj) {
+      this._objectsToRender = undefined;
+      this.callSuper('_onObjectAdded', obj);
+    },
+
+    /**
+     * @private
+     * @param {fabric.Object} obj Object that was removed
+     */
+    _onObjectRemoved: function (obj) {
+      this._objectsToRender = undefined;
+      this.callSuper('_onObjectRemoved', obj);
+    },
     /**
      * Divides objects in two groups, one to render immediately
      * and one to render as activeGroup.
@@ -381,7 +405,7 @@
       var activeObjects = this.getActiveObjects(),
           object, objsToRender, activeGroupObjects;
 
-      if (activeObjects.length > 0 && !this.preserveObjectStacking) {
+      if (!this.preserveObjectStacking && activeObjects.length > 1) {
         objsToRender = [];
         activeGroupObjects = [];
         for (var i = 0, length = this._objects.length; i < length; i++) {
@@ -398,6 +422,15 @@
         }
         objsToRender.push.apply(objsToRender, activeGroupObjects);
       }
+      //  in case a single object is selected render it's entire above the other objects
+      else if (!this.preserveObjectStacking && activeObjects.length === 1) {
+        var target = activeObjects[0], ancestors = target.getAncestors(true);
+        var topAncestor = ancestors.length === 0 ? target : ancestors.pop();
+        objsToRender = this._objects.slice();
+        var index = objsToRender.indexOf(topAncestor);
+        index > -1 && objsToRender.splice(objsToRender.indexOf(topAncestor), 1);
+        objsToRender.push(topAncestor);
+      }
       else {
         objsToRender = this._objects;
       }
@@ -419,7 +452,8 @@
         this.hasLostContext = false;
       }
       var canvasToDrawOn = this.contextContainer;
-      this.renderCanvas(canvasToDrawOn, this._chooseObjectsToRender());
+      !this._objectsToRender && (this._objectsToRender = this._chooseObjectsToRender());
+      this.renderCanvas(canvasToDrawOn, this._objectsToRender);
       return this;
     },
 
@@ -510,7 +544,7 @@
     _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 {
@@ -626,13 +660,22 @@
       if (!target) {
         return;
       }
-      var pointer = this.getPointer(e), corner = target.__corner,
+      var pointer = this.getPointer(e);
+      if (target.group) {
+        //  transform pointer to target's containing coordinate plane
+        pointer = fabric.util.transformPoint(pointer, fabric.util.invertTransform(target.group.calcTransformMatrix()));
+      }
+      var corner = target.__corner,
           control = target.controls[corner],
           actionHandler = (alreadySelected && corner) ?
             control.getActionHandler(e, target, control) : fabric.controlsUtils.dragHandler,
           action = this._getActionFromCorner(alreadySelected, corner, e, target),
           origin = this._getOriginFromCorner(target, corner),
           altKey = e[this.centeredKey],
+          /**
+           * relative to target's containing coordinate plane
+           * both agree on every point
+           **/
           transform = {
             target: target,
             action: action,
@@ -642,7 +685,6 @@
             scaleY: target.scaleY,
             skewX: target.skewX,
             skewY: target.skewY,
-            // used by transation
             offsetX: pointer.x - target.left,
             offsetY: pointer.y - target.top,
             originX: origin.x,
@@ -651,11 +693,7 @@
             ey: pointer.y,
             lastX: pointer.x,
             lastY: pointer.y,
-            // unsure they are useful anymore.
-            // left: target.left,
-            // top: target.top,
             theta: degreesToRadians(target.angle),
-            // end of unsure
             width: target.width * target.scaleX,
             shiftKey: e.shiftKey,
             altKey: altKey,
@@ -748,11 +786,12 @@
       if (shouldLookForActive && activeObject._findTargetCorner(pointer, isTouch)) {
         return activeObject;
       }
-      if (aObjects.length > 1 && !skipGroup && activeObject === this._searchPossibleTargets([activeObject], pointer)) {
+      if (aObjects.length > 1 && activeObject.type === 'activeSelection'
+        && !skipGroup && this.searchPossibleTargets([activeObject], pointer)) {
         return activeObject;
       }
       if (aObjects.length === 1 &&
-        activeObject === this._searchPossibleTargets([activeObject], pointer)) {
+        activeObject === this.searchPossibleTargets([activeObject], pointer)) {
         if (!this.preserveObjectStacking) {
           return activeObject;
         }
@@ -762,7 +801,7 @@
           this.targets = [];
         }
       }
-      var target = this._searchPossibleTargets(this._objects, pointer);
+      var target = this.searchPossibleTargets(this._objects, pointer);
       if (e[this.altSelectionKey] && target && activeTarget && target !== activeTarget) {
         target = activeTarget;
         this.targets = activeTargetSubs;
@@ -799,10 +838,10 @@
     },
 
     /**
-     * Function used to search inside objects an object that contains pointer in bounding box or that contains pointerOnCanvas when painted
+     * Internal Function used to search inside objects an object that contains pointer in bounding box or that contains pointerOnCanvas when painted
      * @param {Array} [objects] objects array to look into
      * @param {Object} [pointer] x,y object of point coordinates we want to check.
-     * @return {fabric.Object} object that contains pointer
+     * @return {fabric.Object} **top most object from given `objects`** that contains pointer
      * @private
      */
     _searchPossibleTargets: function(objects, pointer) {
@@ -826,6 +865,18 @@
       return target;
     },
 
+    /**
+     * Function used to search inside objects an object that contains pointer in bounding box or that contains pointerOnCanvas when painted
+     * @see {@link fabric.Canvas#_searchPossibleTargets}
+     * @param {Array} [objects] objects array to look into
+     * @param {Object} [pointer] x,y object of point coordinates we want to check.
+     * @return {fabric.Object} **top most object on screen** that contains pointer
+     */
+    searchPossibleTargets: function (objects, pointer) {
+      var target = this._searchPossibleTargets(objects, pointer);
+      return target;
+    },
+
     /**
      * Returns pointer coordinates without the effect of the viewport
      * @param {Object} pointer with "x" and "y" number values
@@ -841,27 +892,27 @@
     /**
      * Returns pointer coordinates relative to canvas.
      * Can return coordinates with or without viewportTransform.
-     * ignoreZoom false gives back coordinates that represent
+     * ignoreVpt false gives back coordinates that represent
      * the point clicked on canvas element.
-     * ignoreZoom true gives back coordinates after being processed
+     * ignoreVpt true gives back coordinates after being processed
      * by the viewportTransform ( sort of coordinates of what is displayed
      * on the canvas where you are clicking.
-     * ignoreZoom true = HTMLElement coordinates relative to top,left
-     * ignoreZoom false, default = fabric space coordinates, the same used for shape position
-     * To interact with your shapes top and left you want to use ignoreZoom true
-     * most of the time, while ignoreZoom false will give you coordinates
+     * ignoreVpt true = HTMLElement coordinates relative to top,left
+     * ignoreVpt false, default = fabric space coordinates, the same used for shape position
+     * To interact with your shapes top and left you want to use ignoreVpt true
+     * most of the time, while ignoreVpt false will give you coordinates
      * compatible with the object.oCoords system.
      * of the time.
      * @param {Event} e
-     * @param {Boolean} ignoreZoom
+     * @param {Boolean} ignoreVpt
      * @return {Object} object with "x" and "y" number values
      */
-    getPointer: function (e, ignoreZoom) {
+    getPointer: function (e, ignoreVpt) {
       // return cached values if we are in the event processing chain
-      if (this._absolutePointer && !ignoreZoom) {
+      if (this._absolutePointer && !ignoreVpt) {
         return this._absolutePointer;
       }
-      if (this._pointer && ignoreZoom) {
+      if (this._pointer && ignoreVpt) {
         return this._pointer;
       }
 
@@ -884,7 +935,7 @@
       this.calcOffset();
       pointer.x = pointer.x - this._offset.left;
       pointer.y = pointer.y - this._offset.top;
-      if (!ignoreZoom) {
+      if (!ignoreVpt) {
         pointer = this.restorePointerVpt(pointer);
       }
 
@@ -1068,7 +1119,7 @@
      */
     _fireSelectionEvents: function(oldObjects, e) {
       var somethingChanged = false, objects = this.getActiveObjects(),
-          added = [], removed = [];
+          added = [], removed = [], invalidate = false;
       oldObjects.forEach(function(oldObject) {
         if (objects.indexOf(oldObject) === -1) {
           somethingChanged = true;
@@ -1090,24 +1141,28 @@
         }
       });
       if (oldObjects.length > 0 && objects.length > 0) {
+        invalidate = true;
         somethingChanged && this.fire('selection:updated', {
           e: e,
           selected: added,
           deselected: removed,
         });
       }
       else if (objects.length > 0) {
+        invalidate = true;
         this.fire('selection:created', {
           e: e,
           selected: added,
         });
       }
       else if (oldObjects.length > 0) {
+        invalidate = true;
         this.fire('selection:cleared', {
           e: e,
           deselected: removed,
         });
       }
+      invalidate && (this._objectsToRender = undefined);
     },
 
     /**