From d7fb6deb253e5c161f5e01ce53673bbe2f0d9f04 Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Mon, 2 May 2016 10:23:04 +0200 Subject: [PATCH 01/16] move dashed code in function for later reuse in controls --- src/shapes/object.class.js | 36 ++++++++++++++++++++++++------------ 1 file changed, 24 insertions(+), 12 deletions(-) diff --git a/src/shapes/object.class.js b/src/shapes/object.class.js index 95f8df72695..df1823c5f8b 100644 --- a/src/shapes/object.class.js +++ b/src/shapes/object.class.js @@ -1078,6 +1078,29 @@ } }, + /** + * @private + * Sets line dash + * @param {CanvasRenderingContext2D} ctx Context to set the dash line on + * @param {Array} dashArray array representing dashes + * @param {Function} alternative function to call if browaser does not support lineDash + */ + _setLineDash: function(ctx, dashArray, alternative) { + if (!dashArray) { + return; + } + // Spec requires the concatenation of two copies the dash list when the number of elements is odd + if (1 & dashArray.length) { + dashArray.push.apply(dashArray, dashArray); + } + if (supportsLineDash) { + ctx.setLineDash(dashArray); + } + else { + alternative && alternative(ctx); + } + }, + /** * Renders controls and borders for the object * @param {CanvasRenderingContext2D} ctx Context to render on @@ -1185,18 +1208,7 @@ 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) { - this.strokeDashArray.push.apply(this.strokeDashArray, this.strokeDashArray); - } - if (supportsLineDash) { - ctx.setLineDash(this.strokeDashArray); - } - else { - this._renderDashedStroke && this._renderDashedStroke(ctx); - } - } + this._setLineDash(ctx, this.strokeDashArray, this._renderDashedStroke); if (this.stroke.gradientTransform) { var g = this.stroke.gradientTransform; ctx.transform.apply(ctx, g); From 18b95382ecff4b3c55a00ee04c502b91654bda9f Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Mon, 2 May 2016 10:57:46 +0200 Subject: [PATCH 02/16] Update object.js --- test/unit/object.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/test/unit/object.js b/test/unit/object.js index 5e8132431af..93f6d3c2398 100644 --- a/test/unit/object.js +++ b/test/unit/object.js @@ -755,6 +755,17 @@ test('toDataURL & reference to canvas', function() { equal(object.get('left'), 112.45, 'non boolean properties should not be affected'); }); + test('_setLineDash', function() { + var object = new fabric.Object({ left: 100, top: 124, width: 210, height: 66 }); + ok(typeof object._setLineDash == 'function'); + + canvas.add(object); + object.strokeDashArray = [3, 2, 1]; + equal(object.strokeDashArray.length, 3, 'strokeDash array is odd'); + canvas.renderAll(); + equal(object.strokeDashArray.length, 6, 'strokeDash array now is even'); + }); + test('straighten', function() { var object = new fabric.Object({ left: 100, top: 124, width: 210, height: 66 }); ok(typeof object.straighten == 'function'); From 424cf3fc81cd31cbf47b9a88bbc70ef116b91b60 Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Mon, 2 May 2016 11:04:32 +0200 Subject: [PATCH 03/16] Update object.js --- test/unit/object.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/unit/object.js b/test/unit/object.js index 93f6d3c2398..df6eed04774 100644 --- a/test/unit/object.js +++ b/test/unit/object.js @@ -756,8 +756,8 @@ test('toDataURL & reference to canvas', function() { }); test('_setLineDash', function() { - var object = new fabric.Object({ left: 100, top: 124, width: 210, height: 66 }); - ok(typeof object._setLineDash == 'function'); + var object = new fabric.Rect({ left: 100, top: 124, width: 210, height: 66 }); + ok(typeof object._setLineDash === 'function'); canvas.add(object); object.strokeDashArray = [3, 2, 1]; From dca72dcf86d877ac6b7a59fdde527a4192fb7fdd Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Mon, 2 May 2016 11:15:32 +0200 Subject: [PATCH 04/16] Update object.js --- test/unit/object.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/unit/object.js b/test/unit/object.js index df6eed04774..35721427ac3 100644 --- a/test/unit/object.js +++ b/test/unit/object.js @@ -756,7 +756,7 @@ test('toDataURL & reference to canvas', function() { }); test('_setLineDash', function() { - var object = new fabric.Rect({ left: 100, top: 124, width: 210, height: 66 }); + var object = new fabric.Rect({ left: 100, top: 124, width: 210, height: 66, stroke: 'black', strokeWidth: 2}); ok(typeof object._setLineDash === 'function'); canvas.add(object); From 37226b773b88b9011f78f68bce0b6cc21c1db281 Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Mon, 2 May 2016 18:55:25 +0200 Subject: [PATCH 05/16] Update object.class.js --- src/shapes/object.class.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/shapes/object.class.js b/src/shapes/object.class.js index df1823c5f8b..f6a9b417d26 100644 --- a/src/shapes/object.class.js +++ b/src/shapes/object.class.js @@ -441,6 +441,13 @@ */ borderColor: 'rgba(102,153,255,0.75)', + /** + * Array specifying dash pattern of an object's borders (hasBorder must be true) + * @since 1.6.2 + * @type Array + */ + borderDashArray: null, + /** * Color of controlling corners of an object (when it's active) * @type String From 332fb7759a4ed80638970dfe9aea1503e68c90b0 Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Tue, 3 May 2016 07:20:58 +0200 Subject: [PATCH 06/16] Update object_interactivity.mixin.js --- src/mixins/object_interactivity.mixin.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/mixins/object_interactivity.mixin.js b/src/mixins/object_interactivity.mixin.js index 1eb29a8feb6..d1873cf1924 100644 --- a/src/mixins/object_interactivity.mixin.js +++ b/src/mixins/object_interactivity.mixin.js @@ -206,8 +206,8 @@ height = wh.y + strokeWidth; ctx.save(); - ctx.globalAlpha = this.isMoving ? this.borderOpacityWhenMoving : 1; ctx.strokeStyle = this.borderColor; + this._setLineDash(ctx, this.borderDashArray, null); ctx.lineWidth = strokeWidth; ctx.strokeRect( @@ -254,8 +254,7 @@ height = wh.y + strokeWidth + 2 * this.padding; ctx.save(); - - ctx.globalAlpha = this.isMoving ? this.borderOpacityWhenMoving : 1; + this._setLineDash(ctx, this.borderDashArray, null); ctx.strokeStyle = this.borderColor; ctx.lineWidth = strokeWidth; @@ -294,8 +293,6 @@ ctx.save(); ctx.lineWidth = 1; - - ctx.globalAlpha = this.isMoving ? this.borderOpacityWhenMoving : 1; ctx.strokeStyle = ctx.fillStyle = this.cornerColor; // top-left From c7f5c8cc733b88fa688100b706e4223aedd042bd Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Tue, 3 May 2016 07:21:00 +0200 Subject: [PATCH 07/16] Update object.class.js --- src/shapes/object.class.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/shapes/object.class.js b/src/shapes/object.class.js index f6a9b417d26..3ad4789b624 100644 --- a/src/shapes/object.class.js +++ b/src/shapes/object.class.js @@ -1126,6 +1126,7 @@ options = fabric.util.qrDecompose(matrix); ctx.save(); ctx.translate(options.translateX, options.translateY); + ctx.globalAlpha = this.isMoving ? this.borderOpacityWhenMoving : 1; if (this.group && this.group === this.canvas.getActiveGroup()) { ctx.rotate(degreesToRadians(options.angle)); this.drawBordersInGroup(ctx, options); From b8e7858d3c5a9937e37f7e3276c23fcc3f412467 Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Tue, 3 May 2016 07:40:26 +0200 Subject: [PATCH 08/16] Update object.class.js --- src/shapes/object.class.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/shapes/object.class.js b/src/shapes/object.class.js index 3ad4789b624..11dc6f99f9f 100644 --- a/src/shapes/object.class.js +++ b/src/shapes/object.class.js @@ -455,6 +455,13 @@ */ cornerColor: 'rgba(102,153,255,0.5)', + /** + * Array specifying dash pattern of an object's control (hasBorder must be true) + * @since 1.6.2 + * @type Array + */ + controlDashArray: null, + /** * When true, this object will use center point as the origin of transformation * when being scaled via the controls. @@ -1124,9 +1131,12 @@ options; matrix = fabric.util.multiplyTransformMatrices(vpt, matrix); options = fabric.util.qrDecompose(matrix); + ctx.save(); ctx.translate(options.translateX, options.translateY); + ctx.lineWidth = 1 / this.borderScaleFactor; ctx.globalAlpha = this.isMoving ? this.borderOpacityWhenMoving : 1; + if (this.group && this.group === this.canvas.getActiveGroup()) { ctx.rotate(degreesToRadians(options.angle)); this.drawBordersInGroup(ctx, options); From 92eb91dc26cd5a113b592dd2fa2e2e0135418fca Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Tue, 3 May 2016 07:43:28 +0200 Subject: [PATCH 09/16] Update object_interactivity.mixin.js --- src/mixins/object_interactivity.mixin.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/mixins/object_interactivity.mixin.js b/src/mixins/object_interactivity.mixin.js index d1873cf1924..dd0eafeb981 100644 --- a/src/mixins/object_interactivity.mixin.js +++ b/src/mixins/object_interactivity.mixin.js @@ -201,14 +201,12 @@ } var wh = this._calculateCurrentDimensions(), - strokeWidth = 1 / this.borderScaleFactor, width = wh.x + strokeWidth, height = wh.y + strokeWidth; ctx.save(); ctx.strokeStyle = this.borderColor; this._setLineDash(ctx, this.borderDashArray, null); - ctx.lineWidth = strokeWidth; ctx.strokeRect( -width / 2, @@ -249,14 +247,12 @@ var p = this._getNonTransformedDimensions(), matrix = fabric.util.customTransformMatrix(options.scaleX, options.scaleY, options.skewX), wh = fabric.util.transformPoint(p, matrix), - strokeWidth = 1 / this.borderScaleFactor, width = wh.x + strokeWidth + 2 * this.padding, height = wh.y + strokeWidth + 2 * this.padding; ctx.save(); this._setLineDash(ctx, this.borderDashArray, null); ctx.strokeStyle = this.borderColor; - ctx.lineWidth = strokeWidth; ctx.strokeRect( -width / 2, @@ -294,6 +290,7 @@ ctx.lineWidth = 1; ctx.strokeStyle = ctx.fillStyle = this.cornerColor; + this._setLineDash(ctx, this.controlDashArray, null); // top-left this._drawControl('tl', ctx, methodName, From 2f38f54be544aaa51cdf218781db88d19dc283bc Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Tue, 3 May 2016 07:58:11 +0200 Subject: [PATCH 10/16] Update object_interactivity.mixin.js --- src/mixins/object_interactivity.mixin.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/mixins/object_interactivity.mixin.js b/src/mixins/object_interactivity.mixin.js index dd0eafeb981..678222c60b1 100644 --- a/src/mixins/object_interactivity.mixin.js +++ b/src/mixins/object_interactivity.mixin.js @@ -201,6 +201,7 @@ } var wh = this._calculateCurrentDimensions(), + strokeWidth = 1 / this.bordeScaleFactor, width = wh.x + strokeWidth, height = wh.y + strokeWidth; @@ -247,6 +248,7 @@ var p = this._getNonTransformedDimensions(), matrix = fabric.util.customTransformMatrix(options.scaleX, options.scaleY, options.skewX), wh = fabric.util.transformPoint(p, matrix), + strokeWidth = 1 / this.bordeScaleFactor, width = wh.x + strokeWidth + 2 * this.padding, height = wh.y + strokeWidth + 2 * this.padding; From b0b394814f06d6a776c50f932130a60af0fcb9dd Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Tue, 3 May 2016 08:10:05 +0200 Subject: [PATCH 11/16] Update object_interactivity.mixin.js --- src/mixins/object_interactivity.mixin.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/mixins/object_interactivity.mixin.js b/src/mixins/object_interactivity.mixin.js index 678222c60b1..ebd26bb6a22 100644 --- a/src/mixins/object_interactivity.mixin.js +++ b/src/mixins/object_interactivity.mixin.js @@ -201,7 +201,7 @@ } var wh = this._calculateCurrentDimensions(), - strokeWidth = 1 / this.bordeScaleFactor, + strokeWidth = 1 / this.borderScaleFactor, width = wh.x + strokeWidth, height = wh.y + strokeWidth; @@ -248,7 +248,7 @@ var p = this._getNonTransformedDimensions(), matrix = fabric.util.customTransformMatrix(options.scaleX, options.scaleY, options.skewX), wh = fabric.util.transformPoint(p, matrix), - strokeWidth = 1 / this.bordeScaleFactor, + strokeWidth = 1 / this.borderScaleFactor, width = wh.x + strokeWidth + 2 * this.padding, height = wh.y + strokeWidth + 2 * this.padding; From 94bf985707cb8f91a1aa706b4e58980c68597969 Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Tue, 3 May 2016 08:10:51 +0200 Subject: [PATCH 12/16] Update object.class.js --- src/shapes/object.class.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shapes/object.class.js b/src/shapes/object.class.js index 11dc6f99f9f..a9fd3d1d661 100644 --- a/src/shapes/object.class.js +++ b/src/shapes/object.class.js @@ -404,7 +404,7 @@ * @type Number * @default */ - cornerSize: 12, + cornerSize: 13, /** * When true, object's controlling corners are rendered as transparent inside (i.e. stroke instead of fill) From 778b645d15556bd9433d336ef239a5a285482fe5 Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Tue, 3 May 2016 08:26:18 +0200 Subject: [PATCH 13/16] Update object_interactivity.mixin.js --- src/mixins/object_interactivity.mixin.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/mixins/object_interactivity.mixin.js b/src/mixins/object_interactivity.mixin.js index ebd26bb6a22..994d8447af9 100644 --- a/src/mixins/object_interactivity.mixin.js +++ b/src/mixins/object_interactivity.mixin.js @@ -292,7 +292,7 @@ ctx.lineWidth = 1; ctx.strokeStyle = ctx.fillStyle = this.cornerColor; - this._setLineDash(ctx, this.controlDashArray, null); + this._setLineDash(ctx, this.cornerDashArray, null); // top-left this._drawControl('tl', ctx, methodName, From 2d212d795571ac048c3f8c0adfcf3d66618f19dd Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Tue, 3 May 2016 08:26:34 +0200 Subject: [PATCH 14/16] Update object.class.js --- src/shapes/object.class.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shapes/object.class.js b/src/shapes/object.class.js index a9fd3d1d661..86bcc84575c 100644 --- a/src/shapes/object.class.js +++ b/src/shapes/object.class.js @@ -460,7 +460,7 @@ * @since 1.6.2 * @type Array */ - controlDashArray: null, + cornerDashArray: null, /** * When true, this object will use center point as the origin of transformation From e288f46db32cf595932ac74cd0cf48b3352ecd1e Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Tue, 3 May 2016 08:28:17 +0200 Subject: [PATCH 15/16] Update object.class.js --- src/shapes/object.class.js | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/shapes/object.class.js b/src/shapes/object.class.js index 86bcc84575c..bf44f38285e 100644 --- a/src/shapes/object.class.js +++ b/src/shapes/object.class.js @@ -441,12 +441,12 @@ */ borderColor: 'rgba(102,153,255,0.75)', - /** - * Array specifying dash pattern of an object's borders (hasBorder must be true) - * @since 1.6.2 - * @type Array - */ - borderDashArray: null, + /** + * Array specifying dash pattern of an object's borders (hasBorder must be true) + * @since 1.6.2 + * @type Array + */ + borderDashArray: null, /** * Color of controlling corners of an object (when it's active) @@ -455,12 +455,12 @@ */ cornerColor: 'rgba(102,153,255,0.5)', - /** - * Array specifying dash pattern of an object's control (hasBorder must be true) - * @since 1.6.2 - * @type Array - */ - cornerDashArray: null, + /** + * Array specifying dash pattern of an object's control (hasBorder must be true) + * @since 1.6.2 + * @type Array + */ + cornerDashArray: null, /** * When true, this object will use center point as the origin of transformation From cd1e92738898f9690ac8f90cda600f163e855511 Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Tue, 3 May 2016 10:03:44 +0200 Subject: [PATCH 16/16] Update object.class.js --- src/shapes/object.class.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shapes/object.class.js b/src/shapes/object.class.js index bf44f38285e..2154c0ab9a3 100644 --- a/src/shapes/object.class.js +++ b/src/shapes/object.class.js @@ -447,7 +447,7 @@ * @type Array */ borderDashArray: null, - + /** * Color of controlling corners of an object (when it's active) * @type String