diff --git a/dist/fabric.js b/dist/fabric.js index 59ba3840..b9b42cdd 100644 --- a/dist/fabric.js +++ b/dist/fabric.js @@ -9475,17 +9475,13 @@ fabric.Pattern = fabric.util.createClass(/** @lends fabric.Pattern.prototype */ */ _draw: function (ctx, object) { if (!object) return; - - if (this.controlsAboveOverlay) { - var hasBorders = object.hasBorders, hasControls = object.hasControls; - object.hasBorders = object.hasControls = false; - object.render(ctx); - object.hasBorders = hasBorders; - object.hasControls = hasControls; - } - else { - object.render(ctx); - } + + ctx.save(); + var v = this.viewportTransform; + ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); + object.render(ctx); + ctx.restore(); + if (!this.controlsAboveOverlay) object._renderControls(ctx); }, /** @@ -9572,7 +9568,6 @@ fabric.Pattern = fabric.util.createClass(/** @lends fabric.Pattern.prototype */ * @chainable */ renderAll: function (allOnTop) { - var canvasToDrawOn = this[(allOnTop === true && this.interactive) ? 'contextTop' : 'contextContainer'], activeGroup = this.getActiveGroup(); @@ -12158,7 +12153,7 @@ fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, /** @lends fab * @private */ _drawGroupControls: function(ctx, activeGroup) { - this._drawControls(ctx, activeGroup, 'Group'); + activeGroup._renderControls(ctx); }, /** @@ -12167,20 +12162,9 @@ fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, /** @lends fab _drawObjectsControls: function(ctx) { for (var i = 0, len = this._objects.length; i < len; ++i) { if (!this._objects[i] || !this._objects[i].active) continue; - this._drawControls(ctx, this._objects[i], 'Object'); + this._objects[i]._renderControls(ctx); this.lastRenderedObjectWithControlsAboveOverlay = this._objects[i]; } - }, - - /** - * @private - */ - _drawControls: function(ctx, object, klass) { - ctx.save(); - fabric[klass].prototype.transform.call(object, ctx); - //object.drawBorders(ctx).drawControls(ctx); - object._renderControls(ctx); - ctx.restore(); } }); @@ -14628,15 +14612,10 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati this._restoreFillRule(ctx); ctx.restore(); - - this._renderControls(ctx, noTransform); }, _transform: function(ctx, noTransform) { var m = this.transformMatrix; - var v = this.getViewportTransform(); - - ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); if (m && !this.group) { ctx.setTransform(m[0], m[1], m[2], m[3], m[4], m[5]); @@ -18734,9 +18713,6 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot ctx.save(); var m = this.transformMatrix; - var v = this.getViewportTransform(); - ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); - if (m) { ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]); } @@ -18755,8 +18731,6 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot this.clipTo && ctx.restore(); this._removeShadow(ctx); ctx.restore(); - - this.callSuper('_renderControls', ctx, noTransform); }, /** @@ -19109,13 +19083,9 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot var m = this.transformMatrix; - var v = this.getViewportTransform(); - ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); - if (m) { ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]); } - this.transform(ctx); this._setShadow(ctx); @@ -19126,8 +19096,6 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot this.clipTo && ctx.restore(); this._removeShadow(ctx); ctx.restore(); - - this.callSuper('_renderControls', ctx); }, /** @@ -19504,23 +19472,26 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot this.clipTo && ctx.restore(); - this.callSuper('_renderControls', ctx, noTransform); ctx.restore(); }, + /** + * Renders controls and borders for the object + * @param {CanvasRenderingContext2D} ctx Context to render on + * @param {Boolean} [noTransform] When true, context is not transformed + */ + _renderControls: function(ctx, noTransform) { + this.callSuper('_renderControls', ctx, noTransform) + for (var i = 0, len = this._objects.length; i < len; i++) { + this._objects[i]._renderControls(ctx); + } + }, + /** * @private */ _renderObject: function(object, ctx) { - var v = this.getViewportTransform(), - sxy = fabric.util.transformPoint( - new fabric.Point(this.scaleX, this.scaleY), - v, - true - ); - - var originalHasRotatingPoint = object.hasRotatingPoint, - groupScaleFactor = Math.max(sxy.x, sxy.y); + var originalHasRotatingPoint = object.hasRotatingPoint; // do not render if object is not visible if (!object.visible) return; @@ -19944,11 +19915,8 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot ctx.save(); var m = this.transformMatrix, - v = this.getViewportTransform(), isInPathGroup = this.group && this.group.type === 'path-group'; - ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); - // this._resetWidthHeight(); if (isInPathGroup) { ctx.translate(-this.group.width/2, -this.group.height/2); @@ -19963,7 +19931,6 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot ctx.translate(this.width/2, this.height/2); } - ctx.save(); this._setShadow(ctx); this.clipTo && fabric.util.clipContext(this, ctx); this._render(ctx); @@ -19973,9 +19940,6 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot this._renderStroke(ctx); this.clipTo && ctx.restore(); ctx.restore(); - ctx.restore(); - - this.callSuper('_renderControls', ctx, noTransform); }, /** @@ -22429,17 +22393,12 @@ fabric.Image.filters.BaseFilter = fabric.util.createClass(/** @lends fabric.Imag if (!this.visible) return; ctx.save(); - var v = this.getViewportTransform(); - ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); - var m = this.transformMatrix; if (m && (!this.group || this.group.type === 'path-group')) { ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]); } this._render(ctx); ctx.restore(); - - this.callSuper('_renderControls', ctx, noTransform); }, /** diff --git a/dist/fabric.require.js b/dist/fabric.require.js index c3bdfc1e..b7596fb3 100644 --- a/dist/fabric.require.js +++ b/dist/fabric.require.js @@ -9475,17 +9475,13 @@ fabric.Pattern = fabric.util.createClass(/** @lends fabric.Pattern.prototype */ */ _draw: function (ctx, object) { if (!object) return; - - if (this.controlsAboveOverlay) { - var hasBorders = object.hasBorders, hasControls = object.hasControls; - object.hasBorders = object.hasControls = false; - object.render(ctx); - object.hasBorders = hasBorders; - object.hasControls = hasControls; - } - else { - object.render(ctx); - } + + ctx.save(); + var v = this.viewportTransform; + ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); + object.render(ctx); + ctx.restore(); + if (!this.controlsAboveOverlay) object._renderControls(ctx); }, /** @@ -9572,7 +9568,6 @@ fabric.Pattern = fabric.util.createClass(/** @lends fabric.Pattern.prototype */ * @chainable */ renderAll: function (allOnTop) { - var canvasToDrawOn = this[(allOnTop === true && this.interactive) ? 'contextTop' : 'contextContainer'], activeGroup = this.getActiveGroup(); @@ -11790,7 +11785,6 @@ fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, /** @lends fab // first check current group (if one exists) var activeGroup = this.getActiveGroup(); if (activeGroup && !skipGroup && this.containsPoint(e, activeGroup)) { - console.log('AG', activeGroup); return activeGroup; } @@ -12178,7 +12172,7 @@ fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, /** @lends fab */ _drawControls: function(ctx, object, klass) { ctx.save(); - fabric[klass].prototype.transform.call(object, ctx); + //fabric[klass].prototype.transform.call(object, ctx); //object.drawBorders(ctx).drawControls(ctx); object._renderControls(ctx); ctx.restore(); @@ -14629,15 +14623,10 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati this._restoreFillRule(ctx); ctx.restore(); - - this._renderControls(ctx, noTransform); }, _transform: function(ctx, noTransform) { var m = this.transformMatrix; - var v = this.getViewportTransform(); - - ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); if (m && !this.group) { ctx.setTransform(m[0], m[1], m[2], m[3], m[4], m[5]); @@ -18735,9 +18724,6 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot ctx.save(); var m = this.transformMatrix; - var v = this.getViewportTransform(); - ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); - if (m) { ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]); } @@ -18756,8 +18742,6 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot this.clipTo && ctx.restore(); this._removeShadow(ctx); ctx.restore(); - - this.callSuper('_renderControls', ctx, noTransform); }, /** @@ -19110,13 +19094,9 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot var m = this.transformMatrix; - var v = this.getViewportTransform(); - ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); - if (m) { ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]); } - this.transform(ctx); this._setShadow(ctx); @@ -19127,8 +19107,6 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot this.clipTo && ctx.restore(); this._removeShadow(ctx); ctx.restore(); - - this.callSuper('_renderControls', ctx); }, /** @@ -19505,7 +19483,6 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot this.clipTo && ctx.restore(); - this.callSuper('_renderControls', ctx, noTransform); ctx.restore(); }, @@ -19513,15 +19490,7 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot * @private */ _renderObject: function(object, ctx) { - var v = this.getViewportTransform(), - sxy = fabric.util.transformPoint( - new fabric.Point(this.scaleX, this.scaleY), - v, - true - ); - - var originalHasRotatingPoint = object.hasRotatingPoint, - groupScaleFactor = Math.max(sxy.x, sxy.y); + var originalHasRotatingPoint = object.hasRotatingPoint; // do not render if object is not visible if (!object.visible) return; @@ -19529,6 +19498,7 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot object.hasRotatingPoint = false; object.render(ctx); + object._renderControls(ctx); object.hasRotatingPoint = originalHasRotatingPoint; }, @@ -19945,11 +19915,8 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot ctx.save(); var m = this.transformMatrix, - v = this.getViewportTransform(), isInPathGroup = this.group && this.group.type === 'path-group'; - ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); - // this._resetWidthHeight(); if (isInPathGroup) { ctx.translate(-this.group.width/2, -this.group.height/2); @@ -19964,7 +19931,6 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot ctx.translate(this.width/2, this.height/2); } - ctx.save(); this._setShadow(ctx); this.clipTo && fabric.util.clipContext(this, ctx); this._render(ctx); @@ -19974,9 +19940,6 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot this._renderStroke(ctx); this.clipTo && ctx.restore(); ctx.restore(); - ctx.restore(); - - this.callSuper('_renderControls', ctx, noTransform); }, /** @@ -22430,17 +22393,12 @@ fabric.Image.filters.BaseFilter = fabric.util.createClass(/** @lends fabric.Imag if (!this.visible) return; ctx.save(); - var v = this.getViewportTransform(); - ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); - var m = this.transformMatrix; if (m && (!this.group || this.group.type === 'path-group')) { ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]); } this._render(ctx); ctx.restore(); - - this.callSuper('_renderControls', ctx, noTransform); }, /** diff --git a/src/brushes/circle_brush.class.js b/src/brushes/circle_brush.class.js index af24e237..16f19f82 100644 --- a/src/brushes/circle_brush.class.js +++ b/src/brushes/circle_brush.class.js @@ -26,9 +26,8 @@ fabric.CircleBrush = fabric.util.createClass(fabric.BaseBrush, /** @lends fabric */ drawDot: function(pointer) { var point = this.addPoint(pointer), - ctx = this.canvas.contextTop; - - var v = this.canvas.viewportTransform; + ctx = this.canvas.contextTop, + v = this.canvas.viewportTransform; ctx.save(); ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); @@ -37,7 +36,7 @@ fabric.CircleBrush = fabric.util.createClass(fabric.BaseBrush, /** @lends fabric ctx.arc(point.x, point.y, point.radius, 0, Math.PI * 2, false); ctx.closePath(); ctx.fill(); - + ctx.restore(); }, diff --git a/src/canvas.class.js b/src/canvas.class.js index bde7725f..d28273cc 100644 --- a/src/canvas.class.js +++ b/src/canvas.class.js @@ -1097,7 +1097,7 @@ * @private */ _drawGroupControls: function(ctx, activeGroup) { - this._drawControls(ctx, activeGroup, 'Group'); + activeGroup._renderControls(ctx); }, /** @@ -1106,20 +1106,9 @@ _drawObjectsControls: function(ctx) { for (var i = 0, len = this._objects.length; i < len; ++i) { if (!this._objects[i] || !this._objects[i].active) continue; - this._drawControls(ctx, this._objects[i], 'Object'); + this._objects[i]._renderControls(ctx); this.lastRenderedObjectWithControlsAboveOverlay = this._objects[i]; } - }, - - /** - * @private - */ - _drawControls: function(ctx, object, klass) { - ctx.save(); - fabric[klass].prototype.transform.call(object, ctx); - //object.drawBorders(ctx).drawControls(ctx); - object._renderControls(ctx); - ctx.restore(); } }); diff --git a/src/shapes/group.class.js b/src/shapes/group.class.js index 6449911d..4b1554b8 100644 --- a/src/shapes/group.class.js +++ b/src/shapes/group.class.js @@ -224,23 +224,26 @@ this.clipTo && ctx.restore(); - this.callSuper('_renderControls', ctx, noTransform); ctx.restore(); }, + /** + * Renders controls and borders for the object + * @param {CanvasRenderingContext2D} ctx Context to render on + * @param {Boolean} [noTransform] When true, context is not transformed + */ + _renderControls: function(ctx, noTransform) { + this.callSuper('_renderControls', ctx, noTransform); + for (var i = 0, len = this._objects.length; i < len; i++) { + this._objects[i]._renderControls(ctx); + } + }, + /** * @private */ _renderObject: function(object, ctx) { - var v = this.getViewportTransform(), - sxy = fabric.util.transformPoint( - new fabric.Point(this.scaleX, this.scaleY), - v, - true - ); - - var originalHasRotatingPoint = object.hasRotatingPoint, - groupScaleFactor = Math.max(sxy.x, sxy.y); + var originalHasRotatingPoint = object.hasRotatingPoint; // do not render if object is not visible if (!object.visible) return; diff --git a/src/shapes/image.class.js b/src/shapes/image.class.js index c485042a..1f91357b 100644 --- a/src/shapes/image.class.js +++ b/src/shapes/image.class.js @@ -123,11 +123,8 @@ ctx.save(); var m = this.transformMatrix, - v = this.getViewportTransform(), isInPathGroup = this.group && this.group.type === 'path-group'; - ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); - // this._resetWidthHeight(); if (isInPathGroup) { ctx.translate(-this.group.width/2, -this.group.height/2); @@ -142,7 +139,6 @@ ctx.translate(this.width/2, this.height/2); } - ctx.save(); this._setShadow(ctx); this.clipTo && fabric.util.clipContext(this, ctx); this._render(ctx); @@ -152,9 +148,6 @@ this._renderStroke(ctx); this.clipTo && ctx.restore(); ctx.restore(); - ctx.restore(); - - this.callSuper('_renderControls', ctx, noTransform); }, /** diff --git a/src/shapes/object.class.js b/src/shapes/object.class.js index 407c4975..e175dfb7 100644 --- a/src/shapes/object.class.js +++ b/src/shapes/object.class.js @@ -967,15 +967,10 @@ this._restoreFillRule(ctx); ctx.restore(); - - this._renderControls(ctx, noTransform); }, _transform: function(ctx, noTransform) { var m = this.transformMatrix; - var v = this.getViewportTransform(); - - ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); if (m && !this.group) { ctx.setTransform(m[0], m[1], m[2], m[3], m[4], m[5]); diff --git a/src/shapes/path.class.js b/src/shapes/path.class.js index bccdf6d7..bf21bf7b 100644 --- a/src/shapes/path.class.js +++ b/src/shapes/path.class.js @@ -455,9 +455,6 @@ ctx.save(); var m = this.transformMatrix; - var v = this.getViewportTransform(); - ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); - if (m) { ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]); } @@ -476,8 +473,6 @@ this.clipTo && ctx.restore(); this._removeShadow(ctx); ctx.restore(); - - this.callSuper('_renderControls', ctx, noTransform); }, /** diff --git a/src/shapes/path_group.class.js b/src/shapes/path_group.class.js index 7c1acbab..da89a2c4 100644 --- a/src/shapes/path_group.class.js +++ b/src/shapes/path_group.class.js @@ -78,13 +78,9 @@ var m = this.transformMatrix; - var v = this.getViewportTransform(); - ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); - if (m) { ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]); } - this.transform(ctx); this._setShadow(ctx); @@ -95,8 +91,6 @@ this.clipTo && ctx.restore(); this._removeShadow(ctx); ctx.restore(); - - this.callSuper('_renderControls', ctx); }, /** diff --git a/src/shapes/text.class.js b/src/shapes/text.class.js index a942ad00..6f30c625 100644 --- a/src/shapes/text.class.js +++ b/src/shapes/text.class.js @@ -766,17 +766,12 @@ if (!this.visible) return; ctx.save(); - var v = this.getViewportTransform(); - ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); - var m = this.transformMatrix; if (m && (!this.group || this.group.type === 'path-group')) { ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]); } this._render(ctx); ctx.restore(); - - this.callSuper('_renderControls', ctx, noTransform); }, /** diff --git a/src/static_canvas.class.js b/src/static_canvas.class.js index 85c5c44b..23f816ab 100644 --- a/src/static_canvas.class.js +++ b/src/static_canvas.class.js @@ -650,17 +650,13 @@ */ _draw: function (ctx, object) { if (!object) return; - - if (this.controlsAboveOverlay) { - var hasBorders = object.hasBorders, hasControls = object.hasControls; - object.hasBorders = object.hasControls = false; - object.render(ctx); - object.hasBorders = hasBorders; - object.hasControls = hasControls; - } - else { - object.render(ctx); - } + + ctx.save(); + var v = this.viewportTransform; + ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); + object.render(ctx); + ctx.restore(); + if (!this.controlsAboveOverlay) object._renderControls(ctx); }, /** @@ -747,7 +743,6 @@ * @chainable */ renderAll: function (allOnTop) { - var canvasToDrawOn = this[(allOnTop === true && this.interactive) ? 'contextTop' : 'contextContainer'], activeGroup = this.getActiveGroup();