Skip to content

Commit

Permalink
Fires selected for object included in drag area (#4314)
Browse files Browse the repository at this point in the history 
* added many tests
* linted tests
  • Loading branch information
@asturur
asturur authored Sep 16, 2017
1 parent 9bd5e90 commit 741fcba
Show file tree
Hide file tree
Showing 2 changed files with 143 additions and 8 deletions.
15 changes: 9 additions & 6 deletions src/mixins/canvas_grouping.mixin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,19 +98,22 @@
*/
_groupSelectedObjects: function (e) {

var group = this._collectObjects();
var group = this._collectObjects(),
aGroup;

// do not create group for 1 element only
if (group.length === 1) {
this.setActiveObject(group[0], e);
}
else if (group.length > 1) {
group = new fabric.ActiveSelection(group.reverse(), {
aGroup = new fabric.ActiveSelection(group.reverse(), {
canvas: this
});
this.setActiveObject(group, e);
this.fire('selection:created', { target: group, e: e });
this.requestRenderAll();
group.forEach(function(object) {
object.fire('selected', { e: e });
});
this.setActiveObject(aGroup, e);
this.fire('selection:created', { target: aGroup, e: e });
}
},

Expand All @@ -127,7 +130,7 @@
selectionX1Y1 = new fabric.Point(min(x1, x2), min(y1, y2)),
selectionX2Y2 = new fabric.Point(max(x1, x2), max(y1, y2)),
isClick = x1 === x2 && y1 === y2;

// we iterate reverse order to collect top first in case of click.
for (var i = this._objects.length; i--; ) {
currentObject = this._objects[i];

Expand Down
136 changes: 134 additions & 2 deletions test/unit/canvas.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -356,7 +356,7 @@
equal(isFired, true, 'deselected on rect2 fired');
});

test('update active selection firse selected on an object', function() {
test('update active selection fires selected on an object', function() {
var isFired = false;
var rect1 = new fabric.Rect();
var rect2 = new fabric.Rect();
Expand Down Expand Up @@ -400,8 +400,140 @@
equal(selection.getObjects().indexOf(rect2), 1, 'rect2 is the second object in the active selection');
});

test('_groupSelectedObjects fires selected for objects', function() {
var fired = 0;
var rect1 = new fabric.Rect();
var rect2 = new fabric.Rect();
var rect3 = new fabric.Rect();
canvas._collectObjects = function() {
return [rect1, rect2, rect3];
};
rect1.on('selected', function() { fired++; });
rect2.on('selected', function() { fired++; });
rect3.on('selected', function() { fired++; });
canvas._groupSelectedObjects({});
equal(fired, 3, 'event fired for each of 3 rects');
canvas._collectObjects = fabric.Canvas.prototype._collectObjects;
});

test('_groupSelectedObjects fires selection:created if more than one object is returned', function() {
var isFired = false;
var rect1 = new fabric.Rect();
var rect2 = new fabric.Rect();
var rect3 = new fabric.Rect();
canvas._collectObjects = function() {
return [rect1, rect2, rect3];
};
canvas.on('selection:created', function() { isFired = true; });
canvas._groupSelectedObjects({});
equal(isFired, true, 'selection created fired');
equal(canvas.getActiveObject().type, 'activeSelection', 'an active selection is created');
equal(canvas.getActiveObjects()[2], rect1, 'rect1 is first object');
equal(canvas.getActiveObjects()[1], rect2, 'rect2 is second object');
equal(canvas.getActiveObjects()[0], rect3, 'rect3 is third object');
equal(canvas.getActiveObjects().length, 3, 'contains exactly 3 objects');
canvas._collectObjects = fabric.Canvas.prototype._collectObjects;
});

test('_groupSelectedObjects fires selection:created if one only object is returned', function() {
var isFired = false;
var rect1 = new fabric.Rect();
canvas._collectObjects = function() {
return [rect1];
};
canvas.on('object:selected', function() { isFired = true; });
canvas._groupSelectedObjects({});
equal(isFired, true, 'object:selected fired for _groupSelectedObjects');
equal(canvas.getActiveObject(), rect1, 'rect1 is set as activeObject');
canvas._collectObjects = fabric.Canvas.prototype._collectObjects;
});

test('_collectObjects collects object contained in area', function() {
var rect1 = new fabric.Rect({ width: 10, height: 10, top: 0, left: 0 });
var rect2 = new fabric.Rect({ width: 10, height: 10, top: 0, left: 10 });
var rect3 = new fabric.Rect({ width: 10, height: 10, top: 10, left: 0 });
var rect4 = new fabric.Rect({ width: 10, height: 10, top: 10, left: 10 });
canvas.add(rect1, rect2, rect3, rect4);
canvas._groupSelector = {
top: 15,
left: 15,
ex: 1,
ey: 1
};
var collected = canvas._collectObjects();
equal(collected.length, 4, 'a rect that contains all objects collects them all');
equal(collected[3], rect1, 'contains rect1 as last object');
equal(collected[2], rect2, 'contains rect2');
equal(collected[1], rect3, 'contains rect3');
equal(collected[0], rect4, 'contains rect4 as first object');
});

test('_collectObjects do not collects object if area is outside', function() {
var rect1 = new fabric.Rect({ width: 10, height: 10, top: 0, left: 0 });
var rect2 = new fabric.Rect({ width: 10, height: 10, top: 0, left: 10 });
var rect3 = new fabric.Rect({ width: 10, height: 10, top: 10, left: 0 });
var rect4 = new fabric.Rect({ width: 10, height: 10, top: 10, left: 10 });
canvas.add(rect1, rect2, rect3, rect4);
canvas._groupSelector = {
top: 1,
left: 1,
ex: 24,
ey: 24
};
var collected = canvas._collectObjects();
equal(collected.length, 0, 'a rect outside objects do not collect any of them');
});

test('_collectObjects collect included objects that are not touched by the selection sides', function() {
var rect1 = new fabric.Rect({ width: 10, height: 10, top: 5, left: 5 });
canvas.add(rect1);
canvas._groupSelector = {
top: 20,
left: 20,
ex: 1,
ey: 1
};
var collected = canvas._collectObjects();
equal(collected.length, 1, 'a rect that contains all objects collects them all');
equal(collected[0], rect1, 'rect1 is collected');
});

test('_collectObjects collect topmost object if no dragging occurs', function() {
var rect1 = new fabric.Rect({ width: 10, height: 10, top: 0, left: 0 });
var rect2 = new fabric.Rect({ width: 10, height: 10, top: 0, left: 0 });
var rect3 = new fabric.Rect({ width: 10, height: 10, top: 0, left: 0 });
canvas.add(rect1, rect2, rect3);
canvas._groupSelector = {
top: 0,
left: 0,
ex: 1,
ey: 1
};
var collected = canvas._collectObjects();
equal(collected.length, 1, 'a rect that contains all objects collects them all');
equal(collected[0], rect3, 'rect3 is collected');
});

test('_collectObjects collect objects if the drag is inside the object', function() {
var rect1 = new fabric.Rect({ width: 10, height: 10, top: 0, left: 0 });
var rect2 = new fabric.Rect({ width: 10, height: 10, top: 0, left: 0 });
var rect3 = new fabric.Rect({ width: 10, height: 10, top: 0, left: 0 });
canvas.add(rect1, rect2, rect3);
canvas._groupSelector = {
top: 2,
left: 2,
ex: 1,
ey: 1
};
var collected = canvas._collectObjects();
equal(collected.length, 3, 'a rect that contains all objects collects them all');
equal(collected[0], rect3, 'rect3 is collected');
equal(collected[1], rect2, 'rect2 is collected');
equal(collected[2], rect1, 'rect1 is collected');
});

test('getContext', function() {
ok(typeof canvas.getContext == 'function');
ok(typeof canvas.getContext === 'function');
});

test('clearContext', function() {
Expand Down

0 comments on commit 741fcba

Please sign in to comment.