From 74eae9d04c981207e6f067ec5f406bd50c9c1369 Mon Sep 17 00:00:00 2001 From: Asturur Date: Tue, 25 Apr 2017 23:11:33 +0200 Subject: [PATCH 1/5] changes to control rendering --- src/mixins/object_interactivity.mixin.js | 12 ------------ src/shapes/group.class.js | 7 ++++--- src/shapes/object.class.js | 12 ++++-------- 3 files changed, 8 insertions(+), 23 deletions(-) diff --git a/src/mixins/object_interactivity.mixin.js b/src/mixins/object_interactivity.mixin.js index 347ccbbb99a..a9dab4b883e 100644 --- a/src/mixins/object_interactivity.mixin.js +++ b/src/mixins/object_interactivity.mixin.js @@ -140,10 +140,6 @@ * @chainable */ drawBorders: function(ctx) { - if (!this.hasBorders) { - return this; - } - var wh = this._calculateCurrentDimensions(), strokeWidth = 1 / this.borderScaleFactor, width = wh.x + strokeWidth, @@ -185,10 +181,6 @@ * @chainable */ drawBordersInGroup: function(ctx, options) { - if (!this.hasBorders) { - return this; - } - var p = this._getNonTransformedDimensions(), matrix = fabric.util.customTransformMatrix(options.scaleX, options.scaleY, options.skewX), wh = fabric.util.transformPoint(p, matrix), @@ -220,10 +212,6 @@ * @chainable */ drawControls: function(ctx) { - if (!this.hasControls) { - return this; - } - var wh = this._calculateCurrentDimensions(), width = wh.x, height = wh.y, diff --git a/src/shapes/group.class.js b/src/shapes/group.class.js index c82c90653b0..f3bfde446bf 100644 --- a/src/shapes/group.class.js +++ b/src/shapes/group.class.js @@ -378,10 +378,11 @@ */ _renderControls: function(ctx, noTransform) { ctx.save(); - ctx.globalAlpha = this.isMoving ? this.borderOpacityWhenMoving : 1; this.callSuper('_renderControls', ctx, noTransform); - for (var i = 0, len = this._objects.length; i < len; i++) { - this._objects[i]._renderControls(ctx); + if (this.canvas && this === this.canvas.getActiveGroup()) { + for (var i = 0, len = this._objects.length; i < len; i++) { + this._objects[i]._renderControls(ctx); + } } ctx.restore(); }, diff --git a/src/shapes/object.class.js b/src/shapes/object.class.js index 06b218094ce..5c05451c6f4 100644 --- a/src/shapes/object.class.js +++ b/src/shapes/object.class.js @@ -1308,11 +1308,7 @@ * Renders controls and borders for the object * @param {CanvasRenderingContext2D} ctx Context to render on */ - _renderControls: function(ctx) { - if (!this.active || (this.group && this.group !== this.canvas.getActiveGroup())) { - return; - } - + _renderControls: function(ctx, borderStyle, controlStyle) { var vpt = this.getViewportTransform(), matrix = this.calcTransformMatrix(), options; @@ -1327,13 +1323,13 @@ } if (this.group && this.group === this.canvas.getActiveGroup()) { ctx.rotate(degreesToRadians(options.angle)); - this.drawBordersInGroup(ctx, options); + this.hasBorders || borderStyle && this.drawBordersInGroup(ctx, options, borderStyle); } else { ctx.rotate(degreesToRadians(this.angle)); - this.drawBorders(ctx); + this.hasBorders || borderStyle && this.drawBorders(ctx, borderStyle); } - this.drawControls(ctx); + this.hasControls || controlStyle && this.drawControls(ctx, controlStyle); ctx.restore(); }, From 242f9545c35ce8c5c51160af850eed2ab0a7874d Mon Sep 17 00:00:00 2001 From: Asturur Date: Tue, 25 Apr 2017 23:58:25 +0200 Subject: [PATCH 2/5] changes --- src/canvas.class.js | 6 ++- src/mixins/object_interactivity.mixin.js | 51 ++++++++++++++---------- src/shapes/group.class.js | 1 + src/shapes/object.class.js | 12 +++--- 4 files changed, 41 insertions(+), 29 deletions(-) diff --git a/src/canvas.class.js b/src/canvas.class.js index 5adaa13f51f..692aba45920 100644 --- a/src/canvas.class.js +++ b/src/canvas.class.js @@ -1601,11 +1601,13 @@ * @private */ _drawObjectsControls: function(ctx) { + var object; for (var i = 0, len = this._objects.length; i < len; ++i) { - if (!this._objects[i] || !this._objects[i].active) { + object = this._objects[i]; + if (!object || !object.active) { continue; } - this._objects[i]._renderControls(ctx); + object._renderControls(ctx); } }, diff --git a/src/mixins/object_interactivity.mixin.js b/src/mixins/object_interactivity.mixin.js index a9dab4b883e..c1c93454ea8 100644 --- a/src/mixins/object_interactivity.mixin.js +++ b/src/mixins/object_interactivity.mixin.js @@ -136,18 +136,20 @@ * Requires public properties: width, height * Requires public options: padding, borderColor * @param {CanvasRenderingContext2D} ctx Context to draw on + * @param {Object} bordersStyle object to override the object style * @return {fabric.Object} thisArg * @chainable */ - drawBorders: function(ctx) { + drawBorders: function(ctx, bordersStyle) { + bordersStyle = bordersStyle || {}; 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.strokeStyle = bordersStyle.borderColor || this.borderColor; + this._setLineDash(ctx, bordersStyle.borderDashArray || this.borderDashArray, null); ctx.strokeRect( -width / 2, @@ -156,7 +158,8 @@ height ); - if (this.hasRotatingPoint && this.isControlVisible('mtr') && !this.get('lockRotation') && this.hasControls) { + if (bordersStyle.hasRotatingPoint || + this.hasRotatingPoint && this.isControlVisible('mtr') && !this.get('lockRotation') && this.hasControls) { var rotateHeight = -height / 2; @@ -177,10 +180,12 @@ * Requires public options: padding, borderColor * @param {CanvasRenderingContext2D} ctx Context to draw on * @param {object} options object representing current object parameters + * @param {Object} bordersStyle object to override the object style * @return {fabric.Object} thisArg * @chainable */ - drawBordersInGroup: function(ctx, options) { + drawBordersInGroup: function(ctx, options, bordersStyle) { + bordersStyle = bordersStyle || {}; var p = this._getNonTransformedDimensions(), matrix = fabric.util.customTransformMatrix(options.scaleX, options.scaleY, options.skewX), wh = fabric.util.transformPoint(p, matrix), @@ -189,8 +194,8 @@ height = wh.y + strokeWidth; ctx.save(); - this._setLineDash(ctx, this.borderDashArray, null); - ctx.strokeStyle = this.borderColor; + this._setLineDash(ctx, bordersStyle.borderDashArray || this.borderDashArray, null); + ctx.strokeStyle = bordersStyle.borderColor || this.borderColor; ctx.strokeRect( -width / 2, @@ -208,73 +213,75 @@ * Requires public properties: width, height * Requires public options: cornerSize, padding * @param {CanvasRenderingContext2D} ctx Context to draw on + * @param {Object} controlsStyle object to override the object style * @return {fabric.Object} thisArg * @chainable */ - drawControls: function(ctx) { + drawControls: function(ctx, controlsStyle) { + controlsStyle = controlsStyle || {}; var wh = this._calculateCurrentDimensions(), width = wh.x, height = wh.y, scaleOffset = this.cornerSize, left = -(width + scaleOffset) / 2, top = -(height + scaleOffset) / 2, - methodName = this.transparentCorners ? 'stroke' : 'fill'; + methodName = controlsStyle.transparentCorners || this.transparentCorners ? 'stroke' : 'fill'; ctx.save(); - ctx.strokeStyle = ctx.fillStyle = this.cornerColor; + ctx.strokeStyle = ctx.fillStyle = controlsStyle.conerColor || this.cornerColor; if (!this.transparentCorners) { - ctx.strokeStyle = this.cornerStrokeColor; + ctx.strokeStyle = controlsStyle.cornerStrokeColor || this.cornerStrokeColor; } - this._setLineDash(ctx, this.cornerDashArray, null); + this._setLineDash(ctx, controlsStyle.cornerDashArray || this.cornerDashArray, null); // top-left this._drawControl('tl', ctx, methodName, left, - top); + top, controlsStyle); // top-right this._drawControl('tr', ctx, methodName, left + width, - top); + top, controlsStyle); // bottom-left this._drawControl('bl', ctx, methodName, left, - top + height); + top + height, controlsStyle); // bottom-right this._drawControl('br', ctx, methodName, left + width, - top + height); + top + height, controlsStyle); if (!this.get('lockUniScaling')) { // middle-top this._drawControl('mt', ctx, methodName, left + width / 2, - top); + top, controlsStyle); // middle-bottom this._drawControl('mb', ctx, methodName, left + width / 2, - top + height); + top + height, controlsStyle); // middle-right this._drawControl('mr', ctx, methodName, left + width, - top + height / 2); + top + height / 2, controlsStyle); // middle-left this._drawControl('ml', ctx, methodName, left, - top + height / 2); + top + height / 2, controlsStyle); } // middle-top-rotate - if (this.hasRotatingPoint) { + if (controlsStyle.hasRotatingPoint || this.hasRotatingPoint) { this._drawControl('mtr', ctx, methodName, left + width / 2, - top - this.rotatingPointOffset); + top - this.rotatingPointOffset, controlsStyle); } ctx.restore(); diff --git a/src/shapes/group.class.js b/src/shapes/group.class.js index f3bfde446bf..9bab9bc1569 100644 --- a/src/shapes/group.class.js +++ b/src/shapes/group.class.js @@ -378,6 +378,7 @@ */ _renderControls: function(ctx, noTransform) { ctx.save(); + ctx.globalAlpha = this.isMoving ? this.borderOpacityWhenMoving : 1; this.callSuper('_renderControls', ctx, noTransform); if (this.canvas && this === this.canvas.getActiveGroup()) { for (var i = 0, len = this._objects.length; i < len; i++) { diff --git a/src/shapes/object.class.js b/src/shapes/object.class.js index 5c05451c6f4..28c0631cd79 100644 --- a/src/shapes/object.class.js +++ b/src/shapes/object.class.js @@ -1308,13 +1308,15 @@ * Renders controls and borders for the object * @param {CanvasRenderingContext2D} ctx Context to render on */ - _renderControls: function(ctx, borderStyle, controlStyle) { + _renderControls: function(ctx, bordersStyle, controlsStyle) { var vpt = this.getViewportTransform(), matrix = this.calcTransformMatrix(), options; matrix = fabric.util.multiplyTransformMatrices(vpt, matrix); options = fabric.util.qrDecompose(matrix); - + if (controlsStyle && bordersStyle) { + bordersStyle.hasRotatingPoint = controlsStyle.hasRotatingPoint; + } ctx.save(); ctx.translate(options.translateX, options.translateY); ctx.lineWidth = 1 * this.borderScaleFactor; @@ -1323,13 +1325,13 @@ } if (this.group && this.group === this.canvas.getActiveGroup()) { ctx.rotate(degreesToRadians(options.angle)); - this.hasBorders || borderStyle && this.drawBordersInGroup(ctx, options, borderStyle); + (this.hasBorders || bordersStyle) && this.drawBordersInGroup(ctx, options, bordersStyle); } else { ctx.rotate(degreesToRadians(this.angle)); - this.hasBorders || borderStyle && this.drawBorders(ctx, borderStyle); + (this.hasBorders || bordersStyle) && this.drawBorders(ctx, bordersStyle); } - this.hasControls || controlStyle && this.drawControls(ctx, controlStyle); + (this.hasControls || controlsStyle) && this.drawControls(ctx, controlsStyle); ctx.restore(); }, From 853892d7b1d032b8258b9b95c696759c914f25ef Mon Sep 17 00:00:00 2001 From: Asturur Date: Wed, 26 Apr 2017 10:52:02 +0200 Subject: [PATCH 3/5] moved render all after the events --- src/canvas.class.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/canvas.class.js b/src/canvas.class.js index 692aba45920..55f38f6916f 100644 --- a/src/canvas.class.js +++ b/src/canvas.class.js @@ -1384,9 +1384,9 @@ currentActiveObject.fire('deselected', { e: e }); } this._setActiveObject(object); - this.renderAll(); this.fire('object:selected', { target: object, e: e }); object.fire('selected', { e: e }); + this.renderAll(); return this; }, From 96d2ee0ac7ad71993edc1678a0b2ad0762824dfb Mon Sep 17 00:00:00 2001 From: Asturur Date: Sat, 29 Apr 2017 19:13:22 +0200 Subject: [PATCH 4/5] more changes --- src/mixins/object_interactivity.mixin.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/mixins/object_interactivity.mixin.js b/src/mixins/object_interactivity.mixin.js index c1c93454ea8..d5567e22766 100644 --- a/src/mixins/object_interactivity.mixin.js +++ b/src/mixins/object_interactivity.mixin.js @@ -222,13 +222,14 @@ var wh = this._calculateCurrentDimensions(), width = wh.x, height = wh.y, - scaleOffset = this.cornerSize, + scaleOffset = controlsStyle.cornerSize || this.cornerSize, left = -(width + scaleOffset) / 2, top = -(height + scaleOffset) / 2, methodName = controlsStyle.transparentCorners || this.transparentCorners ? 'stroke' : 'fill'; ctx.save(); - ctx.strokeStyle = ctx.fillStyle = controlsStyle.conerColor || this.cornerColor; + console.log(controlsStyle.cornerColor) + ctx.strokeStyle = ctx.fillStyle = controlsStyle.cornerColor || this.cornerColor; if (!this.transparentCorners) { ctx.strokeStyle = controlsStyle.cornerStrokeColor || this.cornerStrokeColor; } @@ -292,12 +293,13 @@ /** * @private */ - _drawControl: function(control, ctx, methodName, left, top) { + _drawControl: function(control, ctx, methodName, left, top, controlStyle) { + controlStyle = controlStyle || {}; if (!this.isControlVisible(control)) { return; } var size = this.cornerSize, stroke = !this.transparentCorners && this.cornerStrokeColor; - switch (this.cornerStyle) { + switch (controlStyle.cornerStyle || this.cornerStyle) { case 'circle': ctx.beginPath(); ctx.arc(left + size / 2, top + size / 2, size / 2, 0, 2 * Math.PI, false); From c242575cee438590f01a52563cbcf33b3e41c29b Mon Sep 17 00:00:00 2001 From: Asturur Date: Sat, 29 Apr 2017 19:14:12 +0200 Subject: [PATCH 5/5] removed console.log --- src/mixins/object_interactivity.mixin.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/mixins/object_interactivity.mixin.js b/src/mixins/object_interactivity.mixin.js index d5567e22766..1ff5355c469 100644 --- a/src/mixins/object_interactivity.mixin.js +++ b/src/mixins/object_interactivity.mixin.js @@ -228,7 +228,6 @@ methodName = controlsStyle.transparentCorners || this.transparentCorners ? 'stroke' : 'fill'; ctx.save(); - console.log(controlsStyle.cornerColor) ctx.strokeStyle = ctx.fillStyle = controlsStyle.cornerColor || this.cornerColor; if (!this.transparentCorners) { ctx.strokeStyle = controlsStyle.cornerStrokeColor || this.cornerStrokeColor;