remove lastRendered logic (#3111)

fabricjs · Jul 17, 2016 · 72a6c27 · 72a6c27
1 parent 51995a7
commit 72a6c27
Show file tree

Hide file tree

Showing 8 changed files with 76 additions and 114 deletions.
diff --git a/dist/fabric.js b/dist/fabric.js
@@ -8427,15 +8427,6 @@ fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, /** @lends fab
      */
     altActionKey:           'shiftKey',
 
-    /**
-     * Indicates which key enable last rendered selection independently of stack position
-     * values: altKey, shiftKey, ctrlKey
-     * @since 1.6.3
-     * @type String
-     * @default
-     */
-    lastRenderedKey:        'altKey',
-
     /**
      * Indicates that canvas is interactive. This property should not be changed.
      * @type Boolean
@@ -8676,9 +8667,11 @@ fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, /** @lends fab
     isTargetTransparent: function (target, x, y) {
       var hasBorders = target.hasBorders,
           transparentCorners = target.transparentCorners,
-          ctx = this.contextCache;
+          ctx = this.contextCache,
+          originalColor = target.selectionBackgroundColor;
 
       target.hasBorders = target.transparentCorners = false;
+      target.selectionBackgroundColor = '';
 
       ctx.save();
       ctx.transform.apply(ctx, this.viewportTransform);
@@ -8689,6 +8682,7 @@ fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, /** @lends fab
 
       target.hasBorders = hasBorders;
       target.transparentCorners = transparentCorners;
+      target.selectionBackgroundColor = originalColor;
 
       var isTransparent = fabric.util.isTransparent(
         ctx, x, y, this.targetFindTolerance);
@@ -9257,19 +9251,6 @@ fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, /** @lends fab
       }
     },
 
-    /**
-     * @private
-     */
-    _isLastRenderedObject: function(pointer, e) {
-      var lastRendered = this.lastRenderedWithControls;
-      return (
-        (this.preserveObjectStacking || e[this.lastRenderedKey]) &&
-        lastRendered &&
-        lastRendered.visible &&
-        (this.containsPoint(null, lastRendered, pointer) ||
-        lastRendered._findTargetCorner(pointer)));
-    },
-
     /**
      * Method that determines what object we are clicking on
      * @param {Event} e mouse event
@@ -9281,7 +9262,8 @@ fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, /** @lends fab
       }
 
       var pointer = this.getPointer(e, true),
-      activeGroup = this.getActiveGroup();
+      activeGroup = this.getActiveGroup(),
+      activeObject = this.getActiveObject();
 
       // first check current group (if one exists)
       // active group does not check sub targets like normal groups.
@@ -9290,14 +9272,13 @@ fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, /** @lends fab
         return activeGroup;
       }
 
-      var objects = this._objects;
-      this.targets = [ ];
-
-      if (this._isLastRenderedObject(pointer, e)) {
-        objects = [this.lastRenderedWithControls];
+      if (activeObject && this._checkTarget(pointer, activeObject)) {
+        return activeObject;
       }
 
-      var target = this._searchPossibleTargets(objects, pointer);
+      this.targets = [ ];
+
+      var target = this._searchPossibleTargets(this._objects, pointer);
       this._fireOverOutEvents(target, e);
       return target;
     },
@@ -9694,7 +9675,6 @@ fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, /** @lends fab
           continue;
         }
         this._objects[i]._renderControls(ctx);
-        this.lastRenderedWithControls = this._objects[i];
       }
     },
 
@@ -9703,9 +9683,6 @@ fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, /** @lends fab
      * @param {fabric.Object} obj Object that was removed
      */
     _onObjectRemoved: function(obj) {
-      if (obj === this.lastRenderedWithControls) {
-        delete this.lastRenderedWithControls;
-      }
       this.callSuper('_onObjectRemoved', obj);
     },
 
@@ -9715,7 +9692,6 @@ fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, /** @lends fab
      * @chainable
      */
     clear: function () {
-      delete this.lastRenderedWithControls;
       return this.callSuper('clear');
     }
   });
@@ -11998,7 +11974,7 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati
      * @param {Boolean} fromLeft When true, context is transformed to object's top/left corner. This is used when rendering text on Node
      */
     transform: function(ctx, fromLeft) {
-      if (this.group && this.canvas.preserveObjectStacking && this.group === this.canvas._activeGroup) {
+      if (this.group && !this.group._transformDone && this.group === this.canvas._activeGroup) {
         this.group.transform(ctx);
       }
       var center = fromLeft ? this._getLeftTopCoords() : this.getCenterPoint();
@@ -17534,14 +17510,15 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot
       this.transform(ctx);
       this._setShadow(ctx);
       this.clipTo && fabric.util.clipContext(this, ctx);
+      this._transformDone = true;
       // the array is now sorted in order of highest first, so start from end
       for (var i = 0, len = this._objects.length; i < len; i++) {
         this._renderObject(this._objects[i], ctx);
       }
 
       this.clipTo && ctx.restore();
-
       ctx.restore();
+      this._transformDone = false;
     },
 
     /**

diff --git a/dist/fabric.min.js b/dist/fabric.min.js
diff --git a/dist/fabric.min.js.gz b/dist/fabric.min.js.gz
diff --git a/dist/fabric.require.js b/dist/fabric.require.js
@@ -4197,7 +4197,6 @@ fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, {
         centeredRotation: false,
         centeredKey: "altKey",
         altActionKey: "shiftKey",
-        lastRenderedKey: "altKey",
         interactive: true,
         selection: true,
         selectionKey: "shiftKey",
@@ -4287,15 +4286,17 @@ fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, {
             };
         },
         isTargetTransparent: function(target, x, y) {
-            var hasBorders = target.hasBorders, transparentCorners = target.transparentCorners, ctx = this.contextCache;
+            var hasBorders = target.hasBorders, transparentCorners = target.transparentCorners, ctx = this.contextCache, originalColor = target.selectionBackgroundColor;
             target.hasBorders = target.transparentCorners = false;
+            target.selectionBackgroundColor = "";
             ctx.save();
             ctx.transform.apply(ctx, this.viewportTransform);
             target.render(ctx);
             ctx.restore();
             target.active && target._renderControls(ctx);
             target.hasBorders = hasBorders;
             target.transparentCorners = transparentCorners;
+            target.selectionBackgroundColor = originalColor;
             var isTransparent = fabric.util.isTransparent(ctx, x, y, this.targetFindTolerance);
             this.clearContext(ctx);
             return isTransparent;
@@ -4613,24 +4614,19 @@ fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, {
                 ctx.strokeRect(groupSelector.ex + STROKE_OFFSET - (left > 0 ? 0 : aleft), groupSelector.ey + STROKE_OFFSET - (top > 0 ? 0 : atop), aleft, atop);
             }
         },
-        _isLastRenderedObject: function(pointer, e) {
-            var lastRendered = this.lastRenderedWithControls;
-            return (this.preserveObjectStacking || e[this.lastRenderedKey]) && lastRendered && lastRendered.visible && (this.containsPoint(null, lastRendered, pointer) || lastRendered._findTargetCorner(pointer));
-        },
         findTarget: function(e, skipGroup) {
             if (this.skipTargetFind) {
                 return;
             }
-            var pointer = this.getPointer(e, true), activeGroup = this.getActiveGroup();
+            var pointer = this.getPointer(e, true), activeGroup = this.getActiveGroup(), activeObject = this.getActiveObject();
             if (activeGroup && !skipGroup && this._checkTarget(pointer, activeGroup)) {
                 return activeGroup;
             }
-            var objects = this._objects;
-            this.targets = [];
-            if (this._isLastRenderedObject(pointer, e)) {
-                objects = [ this.lastRenderedWithControls ];
+            if (activeObject && this._checkTarget(pointer, activeObject)) {
+                return activeObject;
             }
-            var target = this._searchPossibleTargets(objects, pointer);
+            this.targets = [];
+            var target = this._searchPossibleTargets(this._objects, pointer);
             this._fireOverOutEvents(target, e);
             return target;
         },
@@ -4894,17 +4890,12 @@ fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, {
                     continue;
                 }
                 this._objects[i]._renderControls(ctx);
-                this.lastRenderedWithControls = this._objects[i];
             }
         },
         _onObjectRemoved: function(obj) {
-            if (obj === this.lastRenderedWithControls) {
-                delete this.lastRenderedWithControls;
-            }
             this.callSuper("_onObjectRemoved", obj);
         },
         clear: function() {
-            delete this.lastRenderedWithControls;
             return this.callSuper("clear");
         }
     });
@@ -5792,7 +5783,7 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, {
             this._initClipping(options);
         },
         transform: function(ctx, fromLeft) {
-            if (this.group && this.canvas.preserveObjectStacking && this.group === this.canvas._activeGroup) {
+            if (this.group && !this.group._transformDone && this.group === this.canvas._activeGroup) {
                 this.group.transform(ctx);
             }
             var center = fromLeft ? this._getLeftTopCoords() : this.getCenterPoint();
@@ -8378,11 +8369,13 @@ fabric.util.object.extend(fabric.Object.prototype, {
             this.transform(ctx);
             this._setShadow(ctx);
             this.clipTo && fabric.util.clipContext(this, ctx);
+            this._transformDone = true;
             for (var i = 0, len = this._objects.length; i < len; i++) {
                 this._renderObject(this._objects[i], ctx);
             }
             this.clipTo && ctx.restore();
             ctx.restore();
+            this._transformDone = false;
         },
         _renderControls: function(ctx, noTransform) {
             this.callSuper("_renderControls", ctx, noTransform);

diff --git a/src/canvas.class.js b/src/canvas.class.js
@@ -101,15 +101,6 @@
      */
     altActionKey:           'shiftKey',
 
-    /**
-     * Indicates which key enable last rendered selection independently of stack position
-     * values: altKey, shiftKey, ctrlKey
-     * @since 1.6.3
-     * @type String
-     * @default
-     */
-    lastRenderedKey:        'altKey',
-
     /**
      * Indicates that canvas is interactive. This property should not be changed.
      * @type Boolean
@@ -350,9 +341,11 @@
     isTargetTransparent: function (target, x, y) {
       var hasBorders = target.hasBorders,
           transparentCorners = target.transparentCorners,
-          ctx = this.contextCache;
+          ctx = this.contextCache,
+          originalColor = target.selectionBackgroundColor;
 
       target.hasBorders = target.transparentCorners = false;
+      target.selectionBackgroundColor = '';
 
       ctx.save();
       ctx.transform.apply(ctx, this.viewportTransform);
@@ -363,6 +356,7 @@
 
       target.hasBorders = hasBorders;
       target.transparentCorners = transparentCorners;
+      target.selectionBackgroundColor = originalColor;
 
       var isTransparent = fabric.util.isTransparent(
         ctx, x, y, this.targetFindTolerance);
@@ -931,19 +925,6 @@
       }
     },
 
-    /**
-     * @private
-     */
-    _isLastRenderedObject: function(pointer, e) {
-      var lastRendered = this.lastRenderedWithControls;
-      return (
-        (this.preserveObjectStacking || e[this.lastRenderedKey]) &&
-        lastRendered &&
-        lastRendered.visible &&
-        (this.containsPoint(null, lastRendered, pointer) ||
-        lastRendered._findTargetCorner(pointer)));
-    },
-
     /**
      * Method that determines what object we are clicking on
      * @param {Event} e mouse event
@@ -955,7 +936,8 @@
       }
 
       var pointer = this.getPointer(e, true),
-      activeGroup = this.getActiveGroup();
+      activeGroup = this.getActiveGroup(),
+      activeObject = this.getActiveObject();
 
       // first check current group (if one exists)
       // active group does not check sub targets like normal groups.
@@ -964,14 +946,13 @@
         return activeGroup;
       }
 
-      var objects = this._objects;
-      this.targets = [ ];
-
-      if (this._isLastRenderedObject(pointer, e)) {
-        objects = [this.lastRenderedWithControls];
+      if (activeObject && this._checkTarget(pointer, activeObject)) {
+        return activeObject;
       }
 
-      var target = this._searchPossibleTargets(objects, pointer);
+      this.targets = [ ];
+
+      var target = this._searchPossibleTargets(this._objects, pointer);
       this._fireOverOutEvents(target, e);
       return target;
     },
@@ -1368,7 +1349,6 @@
           continue;
         }
         this._objects[i]._renderControls(ctx);
-        this.lastRenderedWithControls = this._objects[i];
       }
     },
 
@@ -1377,9 +1357,6 @@
      * @param {fabric.Object} obj Object that was removed
      */
     _onObjectRemoved: function(obj) {
-      if (obj === this.lastRenderedWithControls) {
-        delete this.lastRenderedWithControls;
-      }
       this.callSuper('_onObjectRemoved', obj);
     },
 
@@ -1389,7 +1366,6 @@
      * @chainable
      */
     clear: function () {
-      delete this.lastRenderedWithControls;
       return this.callSuper('clear');
     }
   });

diff --git a/src/shapes/group.class.js b/src/shapes/group.class.js
@@ -276,14 +276,15 @@
       this.transform(ctx);
       this._setShadow(ctx);
       this.clipTo && fabric.util.clipContext(this, ctx);
+      this._transformDone = true;
       // the array is now sorted in order of highest first, so start from end
       for (var i = 0, len = this._objects.length; i < len; i++) {
         this._renderObject(this._objects[i], ctx);
       }
 
       this.clipTo && ctx.restore();
-
       ctx.restore();
+      this._transformDone = false;
     },
 
     /**

diff --git a/src/shapes/object.class.js b/src/shapes/object.class.js
@@ -837,7 +837,7 @@
      * @param {Boolean} fromLeft When true, context is transformed to object's top/left corner. This is used when rendering text on Node
      */
     transform: function(ctx, fromLeft) {
-      if (this.group && this.canvas.preserveObjectStacking && this.group === this.canvas._activeGroup) {
+      if (this.group && !this.group._transformDone && this.group === this.canvas._activeGroup) {
         this.group.transform(ctx);
       }
       var center = fromLeft ? this._getLeftTopCoords() : this.getCenterPoint();