Hopiu/fabric.js
1
0
Fork 0
mirror of https://github.com/Hopiu/fabric.js.git synced 2026-04-11 01:40:59 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

perPixelTargetFind shiftClick deselection fix

Browse source 
Make possible to shiftclick and remove object from active group while using perPixelTargetFind
This commit is contained in:
Andrea Bogazzi 2016-04-23 02:00:24 +02:00
parent 6c3f18ae1c
commit 32b963bc0c
2 changed files with 84 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/canvas.class.js
View file

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

90
test/unit/canvas.js
View file

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