fix(ActiveSelection): 🚀 multiple nested selection 🗂️

src/canvas.class.js

@@ -387,6 +387,7 @@
     _initInteractive: function() {
       this._currentTransform = null;
       this._groupSelector = null;
+      this._activeSelection = new fabric.ActiveSelection([], { canvas: this });
       this._initWrapperElement();
       this._createUpperCanvas();
       this._initEventListeners();
@@ -420,40 +421,16 @@
      * and one to render as activeGroup.
      * @return {Array} objects to render immediately and pushes the other in the activeGroup.
      */
-    _chooseObjectsToRender: function() {
-      var activeObjects = this.getActiveObjects(),
-          object, objsToRender, activeGroupObjects;
-
-      if (!this.preserveObjectStacking && activeObjects.length > 1) {
-        objsToRender = [];
-        activeGroupObjects = [];
-        for (var i = 0, length = this._objects.length; i < length; i++) {
-          object = this._objects[i];
-          if (activeObjects.indexOf(object) === -1 ) {
-            objsToRender.push(object);
-          }
-          else {
-            activeGroupObjects.push(object);
-          }
-        }
-        if (activeObjects.length > 1) {
-          this._activeObject._objects = activeGroupObjects;
-        }
-        objsToRender.push.apply(objsToRender, activeGroupObjects);
-      }
-      //  in case a single object is selected render it's entire parent 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);
+    _chooseObjectsToRender: function () {
+      var activeObject = this._activeObject;
+      if (!this.preserveObjectStacking && activeObject) {
+        return this._objects.filter(function (object) {
+          return !object.group && object !== activeObject;
+        }).concat(activeObject);
       }
       else {
-        objsToRender = this._objects;
+        return this._objects;
       }
-      return objsToRender;
     },
 
     /**
@@ -1116,6 +1093,14 @@
       return [];
     },
 
+    /**
+     * Returns instance's active selection
+     * @return {fabric.ActiveSelection} active selection
+     */
+    getActiveSelection: function () {
+      return this._activeSelection;
+    },
+
     /**
      * @private
      * @param {fabric.Object} obj Object that was removed

src/mixins/canvas_grouping.mixin.js

@@ -103,30 +103,25 @@
         [activeObject, target] :
         [target, activeObject];
       activeObject.isEditing && activeObject.exitEditing();
-      //  handle case: target is nested
-      return new fabric.ActiveSelection(groupObjects, {
-        canvas: this
-      });
+      this._activeSelection.removeAll();
+      fabric.util.resetObjectTransform(this._activeSelection);
+      this._activeSelection.add.apply(this._activeSelection, groupObjects);
+      return this._activeSelection;
     },
 
     /**
      * @private
      * @param {Event} e mouse event
      */
     _groupSelectedObjects: function (e) {
-
-      var group = this._collectObjects(e),
-          aGroup;
-
+      var objects = this._collectObjects(e);
       // do not create group for 1 element only
-      if (group.length === 1) {
-        this.setActiveObject(group[0], e);
+      if (objects.length === 1) {
+        this.setActiveObject(objects[0], e);
       }
-      else if (group.length > 1) {
-        aGroup = new fabric.ActiveSelection(group.reverse(), {
-          canvas: this
-        });
-        this.setActiveObject(aGroup, e);
+      else if (objects.length > 1) {
+        this._activeSelection.add.apply(this._activeSelection, objects.reverse());
+        this.setActiveObject(this._activeSelection, e);
       }
     },
 

src/shapes/active_selection.class.js

@@ -52,13 +52,49 @@
       this.setCoords();
     },
 
+    /**
+     * @private
+     * @param {string} key
+     * @param {*} value
+     */
+    _set: function (key, value) {
+      var prev = this[key];
+      this.callSuper('_set', key, value);
+      if (prev !== this[key] && this.canvas && this.canvas.preserveObjectStacking
+        && this.stateProperties.indexOf(key) > -1) {
+        var invalidationContext = {
+          target: this,
+          key: key,
+          value: value,
+          prevValue: prev
+        };
+        var invalidatedGroups = [];
+        this.forEachObject(function (object) {
+          var group = object.__owningGroup;
+          if (group && invalidatedGroups.indexOf(group) === -1) {
+            group.invalidate(invalidationContext);
+            invalidatedGroups.push(group);
+          }
+        });
+      }
+      return this;
+    },
+
     /**
      * @private
      */
     _shouldSetNestedCoords: function () {
       return true;
     },
 
+    /**
+     * @private
+     * @override we don't want the selection monitor to be active
+     */
+    __objectSelectionMonitor: function () {
+      //  noop
+    },
+
     /**
      * @private
      * @param {fabric.Object} object
@@ -72,7 +108,6 @@
       if (object.group) {
         //  save ref to group for later in order to return to it
         var parent = object.group;
-        parent._exitGroup(object);
         object.__owningGroup = parent;
       }
       this._enterGroup(object, removeParentTransform);
@@ -90,7 +125,7 @@
       var parent = object.__owningGroup;
       if (parent) {
         //  return to owning group
-        parent.enterGroup(object);
+        parent._enterGroup(object, true);
         delete object.__owningGroup;
       }
     },
@@ -101,6 +136,7 @@
      * @param {fabric.Object[]} targets
      */
     _onAfterObjectsChange: function (type, targets) {
+      this.callSuper('_onAfterObjectsChange', type, targets);
       var groups = [];
       targets.forEach(function (object) {
         object.group && !groups.includes(object.group) && groups.push(object.group);
@@ -119,6 +155,14 @@
       }
     },
 
+    /**
+     * @override there's no reason to invalidate because objects aren't selectable
+     * @private
+     */
+    invalidate: function () {
+      // noop
+    },
+
     /**
      * If returns true, deselection is cancelled.
      * @since 2.0.0

src/shapes/group.class.js

@@ -256,6 +256,11 @@
         object.group.remove(object);
       }
       this._enterGroup(object, removeParentTransform);
+      var activeObject = this.canvas && this.canvas.getActiveObject && this.canvas.getActiveObject();
+      // if we are adding the activeObject in a group
+      if (activeObject && (activeObject === object || object.isDescendantOf(activeObject))) {
+        this._activeObjects.push(object);
+      }
       return true;
     },
 
@@ -279,11 +284,6 @@
       object._set('group', this);
       object._set('canvas', this.canvas);
       this.interactive && this._watchObject(true, object);
-      var activeObject = this.canvas && this.canvas.getActiveObject && this.canvas.getActiveObject();
-      // if we are adding the activeObject in a group
-      if (activeObject && (activeObject === object || object.isDescendantOf(activeObject))) {
-        this._activeObjects.push(object);
-      }
     },
 
     /**
@@ -409,35 +409,23 @@
      * Execute the drawing operation for an object on a specified context
      * @param {CanvasRenderingContext2D} ctx Context to render on
      */
-    drawObject: function(ctx) {
+    drawObject: function (ctx) {
       this._renderBackground(ctx);
-      for (var i = 0; i < this._objects.length; i++) {
-        this._objects[i].render(ctx);
-      }
-      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;
+      var preserveObjectStacking = this.canvas && this.canvas.preserveObjectStacking;
+      for (var i = 0, object; i < this._objects.length; i++) {
+        object = this._objects[i];
+        if (preserveObjectStacking && object.group !== this) {
+          //  object is part of ActiveSelection
+          ctx.save();
+          ctx.transform.apply(ctx, invertTransform(this.calcTransformMatrix()));
+          object.render(ctx);
+          ctx.restore();
+        }
+        else if (preserveObjectStacking || (object.group === this && this._activeObjects.indexOf(object) === -1)) {
+          object.render(ctx);
         }
       }
-      return false;
+      this._drawClipPath(ctx, this.clipPath);
     },
 
     /**
@@ -462,6 +450,24 @@
       this._transformDone = false;
     },
 
+    /**
+     * @typedef {object} InvalidationContext
+     * @property {fabric.Object} target either a child object or {@link fabric.ActiveSelection}
+     * @property {string} key
+     * @property {*} value
+     * @property {*} prevValue
+     *
+     * @private
+     * @param {InvalidationContext} context
+     */
+    invalidate: function (context) {
+      this.isOnACache() && (!this.canvas || this.canvas.preserveObjectStacking)
+        && this._set('dirty', true);
+      this._applyLayoutStrategy(Object.assign({}, context, {
+        type: 'progress'
+      }));
+    },
+
     /**
      * @public
      * @param {Partial<LayoutResult> & { layout?: string }} [context] pass values to use for layout calculations
@@ -500,9 +506,14 @@
         //  reject layout requests before initialization layout
         return;
       }
+      else if (context.type === 'progress' && this._layoutInProgress) {
+        //  prevent circular calls
+        return;
+      }
       var center = this.getRelativeCenterPoint();
       var result = this.getLayoutStrategyResult(this.layout, this._objects.concat(), context);
       if (result) {
+        this._layoutInProgress = true;
         //  handle positioning
         var newCenter = new fabric.Point(result.centerX, result.centerY);
         var vector = center.subtract(newCenter).add(new fabric.Point(result.correctionX || 0, result.correctionY || 0));
@@ -511,7 +522,7 @@
         this.set({ width: result.width, height: result.height });
         //  adjust objects to account for new center
         !context.objectsRelativeToGroup && this.forEachObject(function (object) {
-          this._adjustObjectPosition(object, diff);
+          object.group === this && this._adjustObjectPosition(object, diff);
         }, this);
         //  clip path as well
         !isFirstLayout && this.layout !== 'clip-path' && this.clipPath && !this.clipPath.absolutePositioned
@@ -521,6 +532,7 @@
           this.setPositionByOrigin(newCenter, 'center', 'center');
           this.setCoords();
         }
+        this._layoutInProgress = false;
       }
       else if (isFirstLayout) {
         //  fill `result` with initial values for the layout hook
@@ -582,9 +594,13 @@
      * @returns {LayoutResult | undefined}
      */
     getLayoutStrategyResult: function (layoutDirective, objects, context) {  // eslint-disable-line no-unused-vars
+      if (context.type === 'progress'
+      /* && layoutDirective !== 'fit-content-lazy' && layoutDirective !== 'fit-content'*/) {
+        return;
+      }
       //  `fit-content-lazy` performance enhancement
       //  skip if instance had no objects before the `added` event because it may have kept layout after removing all previous objects
-      if (layoutDirective === 'fit-content-lazy'
+      else if (layoutDirective === 'fit-content-lazy'
           && context.type === 'added' && objects.length > context.targets.length) {
         //  calculate added objects' bbox with existing bbox
         var addedObjects = context.targets.concat(this);