Hopiu/fabric.js
1
0
Fork 0
mirror of https://github.com/Hopiu/fabric.js.git synced 2026-05-22 20:25:49 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fixes for controlsAboveOverlay

Browse source
This commit is contained in:
Tom French 2014-06-06 17:36:17 +01:00
parent ef01083cab
commit 8c826a3204
11 changed files with 57 additions and 182 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

85
dist/fabric.js vendored
View file

@ -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);
},
/**

62
dist/fabric.require.js vendored
View file

@ -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);
},
/**

7
src/brushes/circle_brush.class.js
View file

@ -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();
},

15
src/canvas.class.js
View file

@ -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();
}
});

23
src/shapes/group.class.js
View file

@ -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;

7
src/shapes/image.class.js
View file

@ -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);
},
/**

5
src/shapes/object.class.js
View file

@ -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]);

5
src/shapes/path.class.js
View file

@ -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);
},
/**

6
src/shapes/path_group.class.js
View file

@ -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);
},
/**

5
src/shapes/text.class.js
View file

@ -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);
},
/**

19
src/static_canvas.class.js
View file

@ -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();