Skip to content

Commit

Permalink
updates after running tests
Browse files Browse the repository at this point in the history
+ _fireOverOutEvents: fill diff array with nulls
+ _onMouseOut: remove debug console.log
+ updated description for subTargetCheck property to expand what it affects
+ updated subTargetCheck mouseover/mouseout event test case
+ added TODO notes for new tests for "mousemove: subTargetCheck: setCursorFromEvent considers subTargets"
  • Loading branch information
jakedowns committed Dec 18, 2019
1 parent c4e53ce commit 3826d2e
Show file tree
Hide file tree
Showing 3 changed files with 23 additions and 10 deletions.
7 changes: 3 additions & 4 deletions src/mixins/canvas_events.mixin.js
Original file line number Diff line number Diff line change
Expand Up @@ -166,8 +166,6 @@
* @param {Event} e Event object fired on mousedown
*/
_onMouseOut: function(e) {
console.log('_onMouseOut',e);

var target = this._hoveredTarget;
this.fire('mouse:out', { target: target, e: e });
this._hoveredTarget = null;
Expand Down Expand Up @@ -831,8 +829,9 @@
_fireOverOutEvents: function(target, e) {
var _this = this, _hoveredTarget = this._hoveredTarget,
_hoveredTargets = this._hoveredTargets, targets = this.targets,
diff = _hoveredTargets.length - targets.length;
[target].concat(targets, new Array(diff > 0 ? diff : 0)).forEach(function(_target, index) {
diff = _hoveredTargets.length - targets.length,
diffArrayLength = diff > 0 ? diff : 0;
[target].concat(targets, new Array(diffArrayLength).fill(null)).forEach(function(_target, index) {
_this.fireSyntheticInOutEvents(_target, e, {
oldTarget: index === 0 ? _hoveredTarget : _hoveredTargets[index - 1],
canvasEvtOut: 'mouse:out',
Expand Down
2 changes: 1 addition & 1 deletion src/shapes/group.class.js
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
strokeWidth: 0,

/**
* Indicates if click events should also check for subtargets
* Indicates if click, mouseover, mouseout events & hoverCursor should also check for subtargets
* @type Boolean
* @default
*/
Expand Down
24 changes: 19 additions & 5 deletions test/unit/canvas_events.js
Original file line number Diff line number Diff line change
Expand Up @@ -489,8 +489,6 @@
if (obj._objects) {
obj._objects.forEach(setSubTargetCheckRecursive);
}
// TODO: maybe this property could've been baked into the JSON?
// not sure if loadFromJSON accounts for it tho
obj.subTargetCheck = true;
obj.on('mouseover', function() {
counterOver++;
Expand All @@ -505,17 +503,33 @@
});
canvas.setActiveObject(activeSelection);
setSubTargetCheckRecursive(activeSelection);
// perform MouseOver event on deepest nested subTarget

// perform MouseOver event on a deeply nested subTarget
var moveEvent = fabric.document.createEvent('HTMLEvents');
moveEvent.initEvent('mousemove', true, true);
var target = canvas.item(1);
canvas.targets = [
target.item(1),
target.item(1).item(1),
target.item(1).item(1).item(1)
];
canvas._fireOverOutEvents(target, moveEvent);
assert.equal(counterOver, 4, 'mouseover fabric event fired 4 times for primary hoveredTarget & subTargets');
assert.equal(canvas._hoveredTarget, activeSelection, 'activeSelection is _hoveredTarget');
assert.equal(canvas._hoveredTarget, target, 'activeSelection is _hoveredTarget');
assert.equal(canvas._hoveredTargets.length, 3, '3 additional subTargets are captured as _hoveredTargets');

// perform MouseOut even on all hoveredTargets
assert.equal(counterOver, 4, 'mouseout fabric event fired 4 times for primary hoveredTarget & subTargets');
canvas.targets = [];
canvas._fireOverOutEvents(null, moveEvent);
assert.equal(counterOut, 4, 'mouseout fabric event fired 4 times for primary hoveredTarget & subTargets');
assert.equal(canvas._hoveredTarget, null, '_hoveredTarget has been set to null');
assert.equal(canvas._hoveredTargets.length, 0, '_hoveredTargets array is empty');
});
});

// TODO: QUnit.test('mousemove: subTargetCheck: setCursorFromEvent considers subTargets')
// TODO: QUnit.test('mousemove: subTargetCheck: setCursorFromEvent considers subTargets in reverse order, so the top-most subTarget's .hoverCursor takes precedence')

['MouseDown', 'MouseMove', 'MouseOut', 'MouseEnter', 'MouseWheel', 'DoubleClick'].forEach(function(eventType) {
QUnit.test('avoid multiple registration - ' + eventType, function(assert) {
var funcName = '_on' + eventType;
Expand Down

0 comments on commit 3826d2e

Please sign in to comment.