feat(Layer): Group Rewrite

build.js

@@ -195,6 +195,7 @@ var filesToInclude = [
   'src/shapes/polygon.class.js',
   'src/shapes/path.class.js',
   'src/shapes/group.class.js',
+  'src/shapes/layer.class.js',
   ifSpecifiedInclude('interaction', 'src/shapes/active_selection.class.js'),
   'src/shapes/image.class.js',
 

src/canvas.class.js

@@ -386,15 +386,21 @@
      * @return {Array} objects to render immediately and pushes the other in the activeGroup.
      */
     _chooseObjectsToRender: function() {
-      var activeObjects = this.getActiveObjects(),
+      var activeObjects = this.getActiveObjects(), objects = this._objects,
           object, objsToRender, activeGroupObjects;
 
       if (activeObjects.length > 0 && !this.preserveObjectStacking) {
         objsToRender = [];
         activeGroupObjects = [];
+        var ancestors = activeObjects.map(function (obj) {
+          while (obj && objects.indexOf(obj) === -1) {
+            obj = obj.parent || obj.group;
+          }
+          return obj;
+        });
         for (var i = 0, length = this._objects.length; i < length; i++) {
           object = this._objects[i];
-          if (activeObjects.indexOf(object) === -1 ) {
+          if (activeObjects.indexOf(object) === -1 && ancestors.indexOf(object) === -1) {
             objsToRender.push(object);
           }
           else {
@@ -404,6 +410,9 @@
         if (activeObjects.length > 1) {
           this._activeObject._objects = activeGroupObjects;
         }
+        else if (activeObjects[0].parent) {
+          activeGroupObjects.push(activeObjects[0]);
+        }
         objsToRender.push.apply(objsToRender, activeGroupObjects);
       }
       else {
@@ -823,7 +832,7 @@
           this._normalizePointer(objToCheck.group, pointer) : pointer;
         if (this._checkTarget(pointerToUse, objToCheck, pointer)) {
           target = objects[i];
-          if (target.subTargetCheck && target instanceof fabric.Group) {
+          if (target.subTargetCheck && Array.isArray(target._objects)) {
             subTarget = this._searchPossibleTargets(target._objects, pointer);
             subTarget && this.targets.push(subTarget);
           }
@@ -1138,18 +1147,34 @@
      * @param {Event} [e] Event (passed along when firing "object:selected")
      * @return {Boolean} true if the selection happened
      */
-    _setActiveObject: function(object, e) {
-      if (this._activeObject === object) {
+    _setActiveObject: function (object, e) {
+      var result, isCollection = Array.isArray(object._objects), activeObject = this._activeObject;
+      if (this._activeObject === object && !isCollection) {
         return false;
       }
+      //  return if active object doesn't allow to be deselected
       if (!this._discardActiveObject(e, object)) {
         return false;
       }
-      if (object.onSelect({ e: e })) {
+      result = object.onSelect({
+        e: e,
+        object: activeObject,
+        subTargets: isCollection ? this.targets.concat() : undefined
+      });
+      if (result === true) {
         return false;
       }
-      this._activeObject = object;
-      return true;
+      else if (result && result instanceof fabric.Object) {
+        //  prepare `subTargets` and re-run
+        this._searchPossibleTargets([result], this.getPointer(e, true));
+        this._setActiveObject(result, e);
+        return true;
+      }
+      else {
+        var current = this._activeObject;
+        this._activeObject = object;
+        return current !== this._activeObject;
+      }
     },
 
     /**

src/mixins/canvas_events.mixin.js

@@ -450,9 +450,12 @@
           );
         }
       }
+      var actualTarget = target;
       if (target) {
         if (target.selectable && target !== this._activeObject && target.activeOn === 'up') {
           this.setActiveObject(target, e);
+          //  reassign in case a different object was selected
+          actualTarget = this._activeObject;
           shouldRender = true;
         }
         else {
@@ -469,7 +472,7 @@
         }
         target.isMoving = false;
       }
-      this._setCursorFromEvent(e, target);
+      this._setCursorFromEvent(e, actualTarget);
       this._handleEvent(e, 'up', LEFT_CLICK, isClick);
       this._groupSelector = null;
       this._currentTransform = null;
@@ -720,10 +723,15 @@
       }
 
       if (target) {
-        var alreadySelected = target === this._activeObject;
         if (target.selectable && target.activeOn === 'down') {
           this.setActiveObject(target, e);
+          //  reassign in case a different object was selected
+          if (target !== this._activeObject) {
+            shouldRender = true;
+            target = this._target = this._activeObject;
+          }
         }
+        var alreadySelected = target === this._activeObject;
         var corner = target._findTargetCorner(
           this.getPointer(e, true),
           fabric.util.isTouchEvent(e)

src/mixins/object_interactivity.mixin.js

@@ -295,6 +295,7 @@
      * try to to deselect this object. If the function returns true, the process is cancelled
      * @param {Object} [options] options sent from the upper functions
      * @param {Event} [options.e] event if the process is generated by an event
+     * @param {fabric.Object} [options.object] the object that is about to be selected if the process finishes
      */
     onDeselect: function() {
       // implemented by sub-classes, as needed.
@@ -306,9 +307,12 @@
      * try to to select this object. If the function returns true, the process is cancelled
      * @param {Object} [options] options sent from the upper functions
      * @param {Event} [options.e] event if the process is generated by an event
+     * @param {fabric.Object} [options.object] the object that was deselected
      */
-    onSelect: function() {
+    onSelect: function (opt) {
       // implemented by sub-classes, as needed.
+      if (opt.object && opt.object.parent && opt.object.parent !== this.parent
+        && opt.object.parent !== this && opt.object !== this) {return opt.object.parent;}
     }
   });
 })();

src/mixins/object_stacking.mixin.js

@@ -5,13 +5,9 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot
    * @return {fabric.Object} thisArg
    * @chainable
    */
-  sendToBack: function() {
-    if (this.group) {
-      fabric.StaticCanvas.prototype.sendToBack.call(this.group, this);
-    }
-    else if (this.canvas) {
-      this.canvas.sendToBack(this);
-    }
+  sendToBack: function () {
+    var stack = this.parent || this.group || this.canvas;
+    stack && fabric.StaticCanvas.prototype.sendToBack.call(stack, this);
     return this;
   },
 
@@ -21,12 +17,8 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot
    * @chainable
    */
   bringToFront: function() {
-    if (this.group) {
-      fabric.StaticCanvas.prototype.bringToFront.call(this.group, this);
-    }
-    else if (this.canvas) {
-      this.canvas.bringToFront(this);
-    }
+    var stack = this.parent || this.group || this.canvas;
+    stack && fabric.StaticCanvas.prototype.bringToFront.call(stack, this);
     return this;
   },
 
@@ -37,12 +29,8 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot
    * @chainable
    */
   sendBackwards: function(intersecting) {
-    if (this.group) {
-      fabric.StaticCanvas.prototype.sendBackwards.call(this.group, this, intersecting);
-    }
-    else if (this.canvas) {
-      this.canvas.sendBackwards(this, intersecting);
-    }
+    var stack = this.parent || this.group || this.canvas;
+    stack && fabric.StaticCanvas.prototype.sendBackwards.call(stack, this, intersecting);
     return this;
   },
 
@@ -52,13 +40,9 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot
    * @return {fabric.Object} thisArg
    * @chainable
    */
-  bringForward: function(intersecting) {
-    if (this.group) {
-      fabric.StaticCanvas.prototype.bringForward.call(this.group, this, intersecting);
-    }
-    else if (this.canvas) {
-      this.canvas.bringForward(this, intersecting);
-    }
+  bringForward: function (intersecting) {
+    var stack = this.parent || this.group || this.canvas;
+    stack && fabric.StaticCanvas.prototype.bringForward.call(stack, this, intersecting);
     return this;
   },
 
@@ -69,12 +53,8 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot
    * @chainable
    */
   moveTo: function(index) {
-    if (this.group && this.group.type !== 'activeSelection') {
-      fabric.StaticCanvas.prototype.moveTo.call(this.group, this, index);
-    }
-    else if (this.canvas) {
-      this.canvas.moveTo(this, index);
-    }
+    var stack = this.parent || this.group || this.canvas;
+    stack && fabric.StaticCanvas.prototype.moveTo.call(stack, this, index);
     return this;
   }
 });

src/shapes/active_selection.class.js

@@ -15,7 +15,7 @@
    * @tutorial {@link http://fabricjs.com/fabric-intro-part-3#groups}
    * @see {@link fabric.ActiveSelection#initialize} for constructor definition
    */
-  fabric.ActiveSelection = fabric.util.createClass(fabric.Group, /** @lends fabric.ActiveSelection.prototype */ {
+  fabric.ActiveSelection = fabric.util.createClass(fabric.Layer, /** @lends fabric.ActiveSelection.prototype */ {
 
     /**
      * Type of an object
@@ -24,70 +24,11 @@
      */
     type: 'activeSelection',
 
-    /**
-     * Constructor
-     * @param {Object} objects ActiveSelection objects
-     * @param {Object} [options] Options object
-     * @return {Object} thisArg
-     */
-    initialize: function(objects, options) {
-      options = options || {};
-      this._objects = objects || [];
-      for (var i = this._objects.length; i--; ) {
-        this._objects[i].group = this;
-      }
-
-      if (options.originX) {
-        this.originX = options.originX;
-      }
-      if (options.originY) {
-        this.originY = options.originY;
-      }
-      this._calcBounds();
-      this._updateObjectsCoords();
-      fabric.Object.prototype.initialize.call(this, options);
+    initialize: function (objects, options) {
+      this.callSuper('initialize', objects, options);
       this.setCoords();
     },
 
-    /**
-     * Change te activeSelection to a normal group,
-     * High level function that automatically adds it to canvas as
-     * active object. no events fired.
-     * @since 2.0.0
-     * @return {fabric.Group}
-     */
-    toGroup: function() {
-      var objects = this._objects.concat();
-      this._objects = [];
-      var options = fabric.Object.prototype.toObject.call(this);
-      var newGroup = new fabric.Group([]);
-      delete options.type;
-      newGroup.set(options);
-      objects.forEach(function(object) {
-        object.canvas.remove(object);
-        object.group = newGroup;
-      });
-      newGroup._objects = objects;
-      if (!this.canvas) {
-        return newGroup;
-      }
-      var canvas = this.canvas;
-      canvas.add(newGroup);
-      canvas._activeObject = newGroup;
-      newGroup.setCoords();
-      return newGroup;
-    },
-
-    /**
-     * If returns true, deselection is cancelled.
-     * @since 2.0.0
-     * @return {Boolean} [cancel]
-     */
-    onDeselect: function() {
-      this.destroy();
-      return false;
-    },
-
     /**
      * Returns string representation of a group
      * @return {String}
@@ -108,14 +49,6 @@
       return false;
     },
 
-    /**
-     * Check if this group or its parent group are caching, recursively up
-     * @return {Boolean}
-     */
-    isOnACache: function() {
-      return false;
-    },
-
     /**
      * Renders controls and borders for the object
      * @param {CanvasRenderingContext2D} ctx Context to render on
@@ -148,7 +81,7 @@
   fabric.ActiveSelection.fromObject = function(object, callback) {
     fabric.util.enlivenObjects(object.objects, function(enlivenedObjects) {
       delete object.objects;
-      callback && callback(new fabric.ActiveSelection(enlivenedObjects, object, true));
+      callback && callback(new fabric.ActiveSelection(enlivenedObjects, object));
     });
   };