-
-
Notifications
You must be signed in to change notification settings - Fork 3.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
ISSUE-4115 - triggers in/out events for sub targets #6013
ISSUE-4115 - triggers in/out events for sub targets #6013
Conversation
jakedowns
commented
Dec 3, 2019
- and calls _setCursorFromEvent for sub targets
…ls _setCursorFromEvent for sub targets pass linting
ec0d03a
to
54c5923
Compare
Shout-out to #4115 Here's a little preview of this PR in action to get you excited! :D |
@asturur I am noticing something weird with this implementation, when I scroll (via I'll try to put together a reduced test case scenario tomorrow. |
…d draggedoverTargets tracking
i need some time to read it carefully. |
i need some time to read it carefully. Try to explain what is the approach you took, there are difficulties in handling hover and out, on a stack of objects. I'm happy to help you trough this and merge it, as long as you are ok accepting that is a mid long process of understanding and refining. |
Oh yes, I totally understand. Thanks for being receptive & responsive to this PR. My initial approach followed your original suggestion to the letter, I simply added a targetName argument, and used the key of the .targets[] array for naming, and tracking ._hoveredTargetN however, this didn't seem sufficient, as, I'd roll across from one subtarget to the next, and sometimes, depending on the nesting, ._hoveredTarget0 would match (signaling an "oldTarget") but, really, there was a new ._hoveredTarget0 trying to be set. So it would sort of do an outFire & overFire, leading to it sometimes working, sometimes not, as it would get false-positives for "targetChanged" My second attempt was to switch from a list of targets, keyed by their target array index to a dictionary keyed by a
|
So i have some requests: I would also like to avoid to introduce the getter for the _guid. |
I would image somehow the group structure is enough. I would like to see this boiled down to the minimum amount of changes we need to support the basic feature. |
Totally understand. Ok, I'll revert back to my first pass at implementing this and squash it into this PR |
…rgets and draggedoverTargets tracking" This reverts commit b6fa464. # Conflicts: # src/mixins/canvas_events.mixin.js
# Conflicts: # src/mixins/canvas_events.mixin.js
Today i ll sit down and help with this. |
i m actually on a local setup validating an idea. I will share asap |
for what it’s worth. the simpler solution appears to be working on my
branch. the only thing i’m having an issue with is once i pan/scroll using
viewport transform as described in the official docs example, the hover no
longer seems to work. i’m working on putting together a reduced test case
on codepen
…On Sat, Dec 14, 2019 at 1:19 PM Andrea Bogazzi ***@***.***> wrote:
i m actually on a local setup validating an idea. I will share asap
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
<#6013?email_source=notifications&email_token=AAM25MRWUEAPEZ4CWUD6DLDQYVEWNA5CNFSM4JU4BENKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEG4LSYA#issuecomment-565754208>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAM25MU2E5CEMRSRMUGNZU3QYVEWNANCNFSM4JU4BENA>
.
|
{"version":"3.5.1","objects":[{"type":"activeSelection","version":"3.5.1","left":-152,"top":656.25,"width":356.5,"height":356.5,"scaleX":0.45,"scaleY":0.45,"objects":[]},{"type":"group","version":"3.5.1","left":11,"top":6,"width":511.5,"height":511.5,"objects":[{"type":"rect","version":"3.5.1","left":-255.75,"top":-255.75,"width":50,"height":50,"fill":"#6ce798","scaleX":10.03,"scaleY":10.03,"opacity":0.8},{"type":"group","version":"3.5.1","left":-179.75,"top":22,"width":356.5,"height":356.5,"scaleX":0.54,"scaleY":0.54,"objects":[{"type":"rect","version":"3.5.1","left":-178.25,"top":-178.25,"width":50,"height":50,"fill":"#4862cc","scaleX":6.99,"scaleY":6.99,"opacity":0.8},{"type":"group","version":"3.5.1","left":-163.25,"top":-161.25,"width":177.5,"height":177.5,"objects":[{"type":"rect","version":"3.5.1","left":-88.75,"top":-88.75,"width":50,"height":50,"fill":"#5fe909","scaleX":3.48,"scaleY":3.48,"opacity":0.8},{"type":"rect","version":"3.5.1","left":-59.75,"top":-68.75,"width":50,"height":50,"fill":"#f3529c","opacity":0.8},{"type":"triangle","version":"3.5.1","left":36.03,"top":-38.12,"width":50,"height":50,"fill":"#c1124e","angle":39.07,"opacity":0.8},{"type":"rect","version":"3.5.1","left":-65.75,"top":17.25,"width":50,"height":50,"fill":"#9c5120","opacity":0.8}]},{"type":"group","version":"3.5.1","left":-34.25,"top":-31.25,"width":177.5,"height":177.5,"scaleX":1.08,"scaleY":1.08,"objects":[{"type":"rect","version":"3.5.1","left":-88.75,"top":-88.75,"width":50,"height":50,"fill":"#5fe909","scaleX":3.48,"scaleY":3.48,"opacity":0.8},{"type":"rect","version":"3.5.1","left":-59.75,"top":-68.75,"width":50,"height":50,"fill":"#f3529c","opacity":0.8},{"type":"triangle","version":"3.5.1","left":36.03,"top":-38.12,"width":50,"height":50,"fill":"#c1124e","angle":39.07,"opacity":0.8},{"type":"rect","version":"3.5.1","left":-65.75,"top":17.25,"width":50,"height":50,"fill":"#9c5120","opacity":0.8}]}]},{"type":"group","version":"3.5.1","left":-202.75,"top":-228.5,"width":356.5,"height":356.5,"scaleX":0.61,"scaleY":0.61,"objects":[{"type":"rect","version":"3.5.1","left":-178.25,"top":-178.25,"width":50,"height":50,"fill":"#4862cc","scaleX":6.99,"scaleY":6.99,"opacity":0.8},{"type":"group","version":"3.5.1","left":-163.25,"top":-161.25,"width":177.5,"height":177.5,"objects":[{"type":"rect","version":"3.5.1","left":-88.75,"top":-88.75,"width":50,"height":50,"fill":"#5fe909","scaleX":3.48,"scaleY":3.48,"opacity":0.8},{"type":"rect","version":"3.5.1","left":-59.75,"top":-68.75,"width":50,"height":50,"fill":"#f3529c","opacity":0.8},{"type":"triangle","version":"3.5.1","left":36.03,"top":-38.12,"width":50,"height":50,"fill":"#c1124e","angle":39.07,"opacity":0.8},{"type":"rect","version":"3.5.1","left":-65.75,"top":17.25,"width":50,"height":50,"fill":"#9c5120","opacity":0.8}]},{"type":"group","version":"3.5.1","left":-34.25,"top":-31.25,"width":177.5,"height":177.5,"scaleX":1.08,"scaleY":1.08,"objects":[{"type":"rect","version":"3.5.1","left":-88.75,"top":-88.75,"width":50,"height":50,"fill":"#5fe909","scaleX":3.48,"scaleY":3.48,"opacity":0.8},{"type":"rect","version":"3.5.1","left":-59.75,"top":-68.75,"width":50,"height":50,"fill":"#f3529c","opacity":0.8},{"type":"triangle","version":"3.5.1","left":36.03,"top":-38.12,"width":50,"height":50,"fill":"#c1124e","angle":39.07,"opacity":0.8},{"type":"rect","version":"3.5.1","left":-65.75,"top":17.25,"width":50,"height":50,"fill":"#9c5120","opacity":0.8}]}]},{"type":"group","version":"3.5.1","left":138.3,"top":-90.22,"width":356.5,"height":356.5,"scaleX":0.42,"scaleY":0.42,"angle":62.73,"objects":[{"type":"rect","version":"3.5.1","left":-178.25,"top":-178.25,"width":50,"height":50,"fill":"#4862cc","scaleX":6.99,"scaleY":6.99,"opacity":0.8},{"type":"group","version":"3.5.1","left":-163.25,"top":-161.25,"width":177.5,"height":177.5,"objects":[{"type":"rect","version":"3.5.1","left":-88.75,"top":-88.75,"width":50,"height":50,"fill":"#5fe909","scaleX":3.48,"scaleY":3.48,"opacity":0.8},{"type":"rect","version":"3.5.1","left":-59.75,"top":-68.75,"width":50,"height":50,"fill":"#f3529c","opacity":0.8},{"type":"triangle","version":"3.5.1","left":36.03,"top":-38.12,"width":50,"height":50,"fill":"#c1124e","angle":39.07,"opacity":0.8},{"type":"rect","version":"3.5.1","left":-65.75,"top":17.25,"width":50,"height":50,"fill":"#9c5120","opacity":0.8}]},{"type":"group","version":"3.5.1","left":-34.25,"top":-31.25,"width":177.5,"height":177.5,"scaleX":1.08,"scaleY":1.08,"objects":[{"type":"rect","version":"3.5.1","left":-88.75,"top":-88.75,"width":50,"height":50,"fill":"#5fe909","scaleX":3.48,"scaleY":3.48,"opacity":0.8},{"type":"rect","version":"3.5.1","left":-59.75,"top":-68.75,"width":50,"height":50,"fill":"#f3529c","opacity":0.8},{"type":"triangle","version":"3.5.1","left":36.03,"top":-38.12,"width":50,"height":50,"fill":"#c1124e","angle":39.07,"opacity":0.8},{"type":"rect","version":"3.5.1","left":-65.75,"top":17.25,"width":50,"height":50,"fill":"#9c5120","opacity":0.8}]}]}]}]} Storing here a json loadable nested group that is usefull for tests |
@jakedowns i made #6032 a POC i did not even have time to run. I'm going to bed is midnight. |
+ added a _this var for targets.forEach loop closure + changed targetName to oldTarget in _fireEnterLeaveEvents config object + added additional loop to call `fireSyntheticInOutEvents` when `this._hoveredTargets.length` is larger than `this.targets.length`
…out-sub-targets # Conflicts: # src/mixins/canvas_events.mixin.js
Thank you for your assistance with this. It's always great to have a second set of eyes looking at a problem to come up with the most elegant & straight-forward solution. Also great to have someone to bounce ideas back & forth with. I've implemented the changes from your POC and your comments from your POC PR. Next step, I believe, is just a matter of making sure the unit tests account for these changes, correct? Any suggestions as to what you'd like to see in terms of test coverage? I've tested on my local using the following setup and it appears to be working as expected:
(^ you can ignore the zoom/pan bindings in there, I was trying to recreate the issue I have in my project repo where the hovering becomes mis-aligned after panning, but i believe it is a bug i'm somehow introducing somewhere else in my code, because sub-target hovering appears to work fine in this example, even when zoomed and/or panned. I'll have to narrow down that other bug some more before I can reproduce it in a simple test case, and so that I can ask for more assistance with it.) |
+ reference new ._hoveredTargets array instead of Canvas._hoveredTargetN properties
I think we are nearly there, i would happy with even just a new test case using that json string and mocking up some event data. i can try to write one. Thanks for being patient and collaborative. |
@asturur Thanks again for all your help and attention with this PR. I stubbed in a new unit test:
I also adjusted |
+ _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"
I would proceed with a merge and then eventually fix if we broke anything. I can add more tests later. |
let me know if there's anything else you need from me before proceeding with the merge :D |
No, i want just to add more testing, but i realize we have not the infrastructure. Is easier for me to look at master than working on your branch, the build pass i think is fine. |
src/mixins/canvas_events.mixin.js
Outdated
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).fill(null)).forEach(function(_target, index) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@jakedowns sorry i did not notice this.
We still support internet explorer and fill is not an option there.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
replaced with a for loop: dbaf781
Yes i have seen the tests.
Indeed i said more testing :)
Il giorno mer 18 dic 2019 alle ore 17:34 Jake Downs <
[email protected]> ha scritto:
… ***@***.**** commented on this pull request.
------------------------------
In test/unit/canvas_events.js
<#6013 (comment)>:
> +
+ // 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')
+
dunno if you saw this, but I did update this test so that it at least
checks that the expected events fire for the subtargets
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#6013?email_source=notifications&email_token=AAJDQQBETYGKBPFHLY5T4FDQZJGIHA5CNFSM4JU4BENKYY3PNVWWK3TUL52HS4DFWFIHK3DMKJSXC5LFON2FEZLWNFSXPKTDN5WW2ZLOORPWSZGOCPVALPY#pullrequestreview-334103999>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAJDQQCUFUOUMEI2TLCZBNLQZJGIHANCNFSM4JU4BENA>
.
|
diffArray = []; | ||
for (var i = 0; i < diffArrayLength; i++){ | ||
diffArray.push(null); | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
yeah forEach ignores the empties :/ interested to see what you come up with that's shorter than that. I looked at an Array.prototype.fill polyfill, but it was way more lines than a 3-line for loop.
to be honest we have a fabric.util.array.fill, but since i'm planning to remove those generic utils from the library ( non standard and out of scope ) i did not want to use it. |
* Fixes fabricjs#4115 - triggers in/out events for sub targets; and calls _setCursorFromEvent for sub targets