diff --git a/src/canvas.class.js b/src/canvas.class.js index 2827675d..7b64f7db 100644 --- a/src/canvas.class.js +++ b/src/canvas.class.js @@ -304,20 +304,27 @@ */ isTargetTransparent: function (target, x, y) { var hasBorders = target.hasBorders, - transparentCorners = target.transparentCorners; + transparentCorners = target.transparentCorners, + ctx = this.contextCache, + shouldTransform = target.group && target.group === this.getActiveGroup(); target.hasBorders = target.transparentCorners = false; - target.render(this.contextCache); - target._renderControls(this.contextCache); + if (shouldTransform) { + ctx.save(); + ctx.transform.apply(ctx, target.group.calcTransformMatrix()); + } + target.render(ctx); + target._renderControls(ctx); target.hasBorders = hasBorders; target.transparentCorners = transparentCorners; var isTransparent = fabric.util.isTransparent( - this.contextCache, x, y, this.targetFindTolerance); + ctx, x, y, this.targetFindTolerance); + shouldTransform && ctx.restore(); - this.clearContext(this.contextCache); + this.clearContext(ctx); return isTransparent; }, @@ -909,7 +916,7 @@ // first check current group (if one exists) var activeGroup = this.getActiveGroup(); - if (activeGroup && !skipGroup && this.containsPoint(e, activeGroup)) { + if (!skipGroup && this._checkTarget(e, activeGroup, this.getPointer(e, true))) { return activeGroup; } diff --git a/test/unit/canvas.js b/test/unit/canvas.js index ff882f74..dc83ce53 100644 --- a/test/unit/canvas.js +++ b/test/unit/canvas.js @@ -60,6 +60,11 @@ return new fabric.Rect(fabric.util.object.extend(defaultOptions, options || { })); } + function makeTriangle(options) { + var defaultOptions = { width: 10, height: 10 }; + return new fabric.Triangle(fabric.util.object.extend(defaultOptions, options || { })); + } + QUnit.module('fabric.Canvas', { setup: function() { upperCanvasEl.style.display = ''; @@ -216,8 +221,57 @@ test('findTarget', function() { ok(typeof canvas.findTarget == 'function'); + var rect = makeRect({ left: 0, top: 0 }), target; + canvas.add(rect); + target = canvas.findTarget({ + clientX: 5, clientY: 5 + }, true); + equal(target, rect, 'Should return the rect'); + target = canvas.findTarget({ + clientX: 30, clientY: 30 + }, true); + equal(target, null, 'Should not find target'); + canvas.remove(rect); }); + test('findTarget with perPixelTargetFind', function() { + ok(typeof canvas.findTarget == 'function'); + var triangle = makeTriangle({ left: 0, top: 0 }), target; + canvas.add(triangle); + target = canvas.findTarget({ + clientX: 2, clientY: 1 + }, true); + equal(target, triangle, 'Should return the triangle by bounding box'); + //TODO find out why this stops the tests + //canvas.perPixelTargetFind = true; + //target = canvas.findTarget({ + // clientX: 2, clientY: 1 + //}, true); + //equal(target, null, 'Should return null because of transparency checks'); + target = canvas.findTarget({ + clientX: 5, clientY: 5 + }, true); + equal(target, triangle, 'Should return the triangle now'); + canvas.perPixelTargetFind = false; + canvas.remove(triangle); + }); + + test('findTarget on activegroup', function() { + var rect1 = makeRect({ left: 0, top: 0 }), target; + var rect2 = makeRect({ left: 20, top: 0 }); + canvas.add(rect1); + canvas.add(rect2); + var group = new fabric.Group([ rect1, rect2 ]); + canvas.add(group); + canvas.setActiveGroup(group); + target = canvas.findTarget({ + clientX: 5, clientY: 5 + }, true); + equal(target, group, 'Should return the activegroup'); + //TODO: make it work with perPixelTargetFind + }); + + test('toDataURL', function() { ok(typeof canvas.toDataURL == 'function'); if (!fabric.Canvas.supports('toDataURL')) { @@ -232,26 +286,24 @@ } }); - // asyncTest('getPointer', function() { - // ok(typeof canvas.getPointer == 'function'); +// asyncTest('getPointer', function() { +// ok(typeof canvas.getPointer == 'function'); +// +// fabric.util.addListener(upperCanvasEl, 'click', function(e) { +// canvas.calcOffset(); +// var pointer = canvas.getPointer(e); +// equal(pointer.x, 101, 'pointer.x should be correct'); +// equal(pointer.y, 102, 'pointer.y should be correct'); +// +// start(); +// }); - // window.scroll(0, 0); - - // fabric.util.addListener(upperCanvasEl, 'click', function(e) { - // canvas.calcOffset(); - // var pointer = canvas.getPointer(e); - // equal(pointer.x, 101, 'pointer.x should be correct'); - // equal(pointer.y, 102, 'pointer.y should be correct'); - - // start(); - // }); - - // setTimeout(function() { - // simulateEvent(upperCanvasEl, 'click', { - // pointerX: 101, pointerY: 102 - // }); - // }, 100); - // }); +// setTimeout(function() { +// simulateEvent(upperCanvasEl, 'click', { +// pointerX: 101, pointerY: 102 +// }); +// }, 100); +// }); test('getCenter', function() { ok(typeof canvas.getCenter == 'function');