community-edition
community-edition copied to clipboard
jsplumb
Hover event throws an error with nested containers
When there are nested containers rendered on UI (each with a separate JsPlumb instance), the Hover event throws an error.
Reference pull request - https://github.com/jsplumb/jsplumb/pull/1087
can you provide a test case for this, in a codepen or something?
Please find attached zip file for reference. Let me know if you need more details. Thank you.
can you maybe just share the html that corrresponds to "nested containers" ? Do you mean you have some container element embedded inside the element used for some other instance of jsplumb?
can you maybe just share the html that corrresponds to "nested containers" ? Do you mean you have some container element embedded inside the element used for some other instance of jsplumb?
Hi @sporritt Please check attached html. I created two separate jsplumb instances, one for "container1" and the other for "container2", and when I hover over any of "container2" elements (element1/element2) I get an error in browser console. nested-divs-sample.zip
I had attached the complete code (1091.zip) in my previous comment.
i mean can you please just writr some html into a comment.
<body>
<div id='container1'>
<div id='container2'>
<div id='element0' />
<div id='element1' />
</div>
</div>
</body>
hmm, well, this setup was certainly never envisaged, with one instance embedded inside another like that. i suppose there's no conceptual reason why it shouldnt be allowed. Unfortunately the fix provided recently in the PR will not suffice, as that's a bit of a band aid. we'd need to go further back in the code and find out why setConnectorHover was being called.
I have the same issue, when using nested containers and JspLumbInstance is also nested, when the mouse moves over Connection on the inner container, the console error is reported:
Connot read properties of undefined(reading 'x').
The error is thrown from the '_computeSingleLocation' function.
And the mouse over in and out event bound to the outer container will affect the inner container, but the inner container does not bind the corresponding event.
can you tell me, what is the use case for having containers nested like this? do you have one instance of jsplumb running inside an element managed by some other instance?
In my scenario, the outermost container C1, which is managed by a jsplumb instance, when I click on one of the Node elements, another container C2 pops up in this container, because C2 has to be positioned absolutely according to C1, and the contents of C2 have to scroll, So this C2 also has a jsplumb management, so the nesting will result in the error case I mentioned. I don't get that error when I move C2 out of C1, and it's normal.
Any update on this? It's not a major issue but having errors coming up in console is quite annoying. Maybe just adding a connectionsHoverable:false property to the container (like "elementsDraggable") would be fine
I wouldn't be keen to add connectionsHoverable as a flag. It isn't something that has been requested by anyone in the context of using it for the purpose of ignoring hover. In this case it's a flag that would be used to cloak a downstream issue.