Merge pull request #10 from kangax/master

update to master
fabricjs · May 9, 2015 · b214818 · b214818
2 parents 5411085 + 934fe47
commit b214818
Show file tree

Hide file tree

Showing 9 changed files with 52 additions and 36 deletions.
diff --git a/src/canvas.class.js b/src/canvas.class.js
@@ -499,10 +499,13 @@
      */
     _setObjectScale: function(localMouse, transform, lockScalingX, lockScalingY, by, lockScalingFlip) {
       var target = transform.target, forbidScalingX = false, forbidScalingY = false,
-          strokeWidth = target.stroke ? target.strokeWidth : 0;
+          vLine = target.type === 'line' && target.width === 0,
+          hLine = target.type === 'line' && target.height === 0,
+          strokeWidthX = hLine ? 0 : target.strokeWidth,
+          strokeWidthY = vLine ? 0 : target.strokeWidth;
 
-      transform.newScaleX = localMouse.x / (target.width + strokeWidth / 2);
-      transform.newScaleY = localMouse.y / (target.height + strokeWidth / 2);
+      transform.newScaleX = localMouse.x / (target.width + strokeWidthX);
+      transform.newScaleY = localMouse.y / (target.height + strokeWidthY);
 
       if (lockScalingFlip && transform.newScaleX <= 0 && transform.newScaleX < target.scaleX) {
         forbidScalingX = true;
@@ -536,9 +539,12 @@
     _scaleObjectEqually: function(localMouse, target, transform) {
 
       var dist = localMouse.y + localMouse.x,
-          strokeWidth = target.stroke ? target.strokeWidth : 0,
-          lastDist = (target.height + (strokeWidth / 2)) * transform.original.scaleY +
-                     (target.width + (strokeWidth / 2)) * transform.original.scaleX;
+          vLine = target.type === 'line' && target.width === 0,
+          hLine = target.type === 'line' && target.height === 0,
+          strokeWidthX = hLine ? 0 : target.strokeWidth,
+          strokeWidthY = vLine ? 0 : target.strokeWidth,
+          lastDist = (target.height + strokeWidthY) * transform.original.scaleY +
+                     (target.width + strokeWidthX) * transform.original.scaleX;
 
       // We use transform.scaleX/Y instead of target.scaleX/Y
       // because the object may have a min scale and we'll loose the proportions

diff --git a/src/mixins/canvas_gestures.mixin.js b/src/mixins/canvas_gestures.mixin.js
@@ -127,10 +127,13 @@
       target._scaling = true;
 
       var constraintPosition = target.translateToOriginPoint(target.getCenterPoint(), t.originX, t.originY),
-        halfStrokeWidth = target.stroke ? target.strokeWidth / 2 : 0;
+        vLine = target.type === 'line' && target.width === 0,
+        hLine = target.type === 'line' && target.height === 0,
+        strokeWidthX = hLine ? 0 : target.strokeWidth,
+        strokeWidthY = vLine ? 0 : target.strokeWidth;
 
-      this._setObjectScale(new fabric.Point((t.scaleX * s * (target.width + halfStrokeWidth)),
-        (t.scaleY * s * (target.height + halfStrokeWidth))),
+      this._setObjectScale(new fabric.Point((t.scaleX * s * (target.width + strokeWidthX)),
+        (t.scaleY * s * (target.height + strokeWidthY))),
         t, lockScalingX, lockScalingY, null, target.get('lockScalingFlip'));
 
       target.setPositionByOrigin(constraintPosition, t.originX, t.originY);

diff --git a/src/mixins/itext.svg_export.js b/src/mixins/itext.svg_export.js
@@ -1,8 +1,8 @@
+/* _TO_SVG_START_ */
 (function() {
   var toFixed = fabric.util.toFixed,
       NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS;
 
-  /* _TO_SVG_START_ */
   fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.prototype */ {
 
     /**
@@ -115,5 +115,5 @@
       ].join('');
     }
   });
-  /* _TO_SVG_END_ */
 })();
+/* _TO_SVG_END_ */
diff --git a/src/shapes/group.class.js b/src/shapes/group.class.js
@@ -234,8 +234,11 @@
       }
 
       ctx.save();
-      this.clipTo && fabric.util.clipContext(this, ctx);
+      if (this.transformMatrix) {
+        ctx.transform.apply(ctx, this.transformMatrix);
+      }
       this.transform(ctx);
+      this.clipTo && fabric.util.clipContext(this, ctx);
       // 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);

diff --git a/src/shapes/itext.class.js b/src/shapes/itext.class.js
@@ -328,6 +328,7 @@
         ctx.save();
         ctx.transform.apply(ctx, this.canvas.viewportTransform);
         this.transform(ctx);
+        this.transformMatrix && ctx.transform.apply(ctx, this.transformMatrix);
       }
       else {
         ctx = this.ctx;

diff --git a/src/shapes/object.class.js b/src/shapes/object.class.js
@@ -979,8 +979,6 @@
       this.clipTo && fabric.util.clipContext(this, ctx);
       this._render(ctx, noTransform);
       this.clipTo && ctx.restore();
-      this._removeShadow(ctx);
-      this._restoreCompositeOperation(ctx);
 
       ctx.restore();
     },
@@ -1102,9 +1100,6 @@
         ctx.fill();
       }
       ctx.restore();
-      if (this.shadow && !this.shadow.affectStroke) {
-        this._removeShadow(ctx);
-      }
     },
 
     /**
@@ -1116,7 +1111,12 @@
         return;
       }
 
+      if (!this.shadow.affectStroke) {
+        this._removeShadow(ctx);
+      }
+
       ctx.save();
+
       if (this.strokeDashArray) {
         // Spec requires the concatenation of two copies the dash list when the number of elements is odd
         if (1 & this.strokeDashArray.length) {
@@ -1138,7 +1138,6 @@
         }
         this._stroke ? this._stroke(ctx) : ctx.stroke();
       }
-      this._removeShadow(ctx);
       ctx.restore();
     },
 
@@ -1476,19 +1475,8 @@
      */
     _setupCompositeOperation: function (ctx) {
       if (this.globalCompositeOperation) {
-        this._prevGlobalCompositeOperation = ctx.globalCompositeOperation;
         ctx.globalCompositeOperation = this.globalCompositeOperation;
       }
-    },
-
-    /**
-     * Restores previously saved canvas globalCompositeOperation after obeject rendering
-     * @param {CanvasRenderingContext2D} ctx Rendering canvas context
-     */
-    _restoreCompositeOperation: function (ctx) {
-      if (this.globalCompositeOperation && this._prevGlobalCompositeOperation) {
-        ctx.globalCompositeOperation = this._prevGlobalCompositeOperation;
-      }
     }
   });
 

diff --git a/src/shapes/path_group.class.js b/src/shapes/path_group.class.js
@@ -115,7 +115,6 @@
         this.paths[i].render(ctx, true);
       }
       this.clipTo && ctx.restore();
-      this._removeShadow(ctx);
       ctx.restore();
     },
 

diff --git a/src/shapes/text.class.js b/src/shapes/text.class.js
@@ -374,8 +374,6 @@
       this._setupCompositeOperation(ctx);
       this._renderTextFill(ctx);
       this._renderTextStroke(ctx);
-      this._restoreCompositeOperation(ctx);
-      this._removeShadow(ctx);
       ctx.restore();
     },
 
@@ -529,9 +527,6 @@
         );
         lineHeights += heightOfLine;
       }
-      if (this.shadow && !this.shadow.affectStroke) {
-        this._removeShadow(ctx);
-      }
     },
 
     /**
@@ -545,6 +540,10 @@
 
       var lineHeights = 0;
 
+      if (!this.shadow.affectStroke) {
+        this._removeShadow(ctx);
+      }
+
       ctx.save();
 
       if (this.strokeDashArray) {

diff --git a/test/unit/group.js b/test/unit/group.js
@@ -1,6 +1,9 @@
 (function() {
 
-  var canvas = this.canvas = new fabric.Canvas();
+  var el = fabric.document.createElement('canvas');
+  el.width = 600; el.height = 600;
+
+  var canvas = this.canvas = fabric.isLikelyNode ? fabric.createCanvasForNode() : new fabric.Canvas(el);
 
   // function _createImageElement() {
   //   return fabric.isLikelyNode ? new (require('canvas').Image)() : fabric.document.createElement('img');
@@ -497,6 +500,20 @@ test('toObject without default values', function() {
     equal(rect2.canvas, canvas);
     equal(rect1.canvas, canvas);
   });
+
+  test('test group transformMatrix', function() {
+    var rect1 = new fabric.Rect({ top: 100, left: 100, width: 10, height: 10, strokeWidth: 0 }),
+        rect2 = new fabric.Rect({ top: 120, left: 120, width: 10, height: 10, strokeWidth: 0 }),
+        group = new fabric.Group([ rect1, rect2 ]),
+        ctx = canvas.contextContainer, isTransparent = fabric.util.isTransparent;
+    canvas.add(group);
+    equal(isTransparent(ctx, 80, 80, 0), true);
+    equal(isTransparent(ctx, 101, 101, 0), false);
+    group.transformMatrix = [1.2, 0, 0, 1.2, 1, 1];
+    canvas.renderAll();
+    equal(isTransparent(ctx, 101, 101, 0), true);
+    equal(isTransparent(ctx, 131, 131, 0), false);
+  });
   // asyncTest('cloning group with image', function() {
   //   var rect = new fabric.Rect({ top: 100, left: 100, width: 30, height: 10 }),
   //       img = new fabric.Image(_createImageElement()),