Any update on issue #625 (scrollable divs)

[martin...@gmail.com]

Hello,

Issue #625 : https://github.com/jsplumb/jsplumb/issues/625

Basically I have two scrollable divs side by side inside my jsPlumb container (that I set using jsPlumb.setContainer(...)), each containing elements which can be connected to one another.

Everything works perfectly except for when I scroll the divs

It makes the connections (and the Endpoints) overflow from the container, whereas the expected behaviour in this case would be that everything that's outside of the jsPlumb container is hidden.

I hope I made myself clear, but from what I've seen it's a pretty common issue.

Basically i'm looking for workarounds or anything that I could do in order to avoid this issue. I'm very new to Javascript (a few weeks only) so i'm sorry if the workaround is very easy to find.

Thank you for anyone who's willing to help,

 

[Simon Porritt]

This issue pops up from time to time (not this specific issue, this problem), but there never seems to be enough traction to do anything about it in jsPlumb. In the linked github issue, for instance, the OP just dropped jsPlumb and went on his merry way.

If you can paste some screenshots into that issue we could continue the conversation there.

[martin...@gmail.com]

Thanks you for the quick response.

Unfortunately, i'm unable to share my work for confidentiality reasons, but here I reproduced the issue that i'm having.

Initial situation : 

Then, I scroll up the div on the right :

Rendering that I would like to get : 

[Simon Porritt]

Thanks for those.

Did you have to call a repaint method when scrolling, just out of interest?

[martin...@gmail.com]

You're welcome.

Yes, the repaintEverything method is called upon scrolling, or else it would cause the connection to not move at all

[Simon Porritt]

What is the element being used as the container for jsPlumb here - is it the box around the two scrolling elements:

?

[martin...@gmail.com]

On this image, the red thing is the border of my container:

[Simon Porritt]

and is that really what you want, the connector cropped to the extents of the container:

rather than to the lower bound of the list to which it is connecting?  What if you had a whole bunch of whitespace under that list? Would it not make more sense to crop the connector at the bottom edge of the list?

[martin...@gmail.com]

Well I shouldn't have put a whitespace here because for my specific application, both divs have the full height of the container so there is no whitespace. Sorry ! But when it's not the case I guess yea, it would make more sense to crop the connector at the bottom edge of the list. 

However that could also cause some trouble, for example if the div1 (on the left) was smaller than div2 (on the right). you would be cropping the connector if it's going further than the height of div1 (if I understand what you said correctly) whereas you'd want the connector to keep being displayed as long as it's not going further than the height of div2.

[martin...@gmail.com]

I realize that I haven't exactly answered the question : Yes that is what I want !

Thank you so much for taking time for this !

[Simon Porritt]

I've had this lists demo kicking around uncommitted for a long time - it actually says version 1.7.4 in the title, which was released in March 2015...:

avant:

après:

..it behaves exactly the same as your example.  Theoretically - or, I suppose, not just theoretically since this is an example - the connector could be clipped:

Which is what the panda guy was talking about on Github when he mentioned the viewBox, I guess.  This seems to look ok here, but is this the same thing everyone will want to do?  The reason I've never done anything concrete about this is that I can't figure out what the basic common use case ought to be. Maybe though a good way to make some progress is to put this in as a first pass and see how people respond. 

Now that you've seen this you're perhaps excited at the notion that you could get this in your app quite soon; I should mention I don't have a lot of spare time over the next few weeks, and I don't really have a feel for the cleanest way to implement this. There are a few parts - tracking the scroll of each list to determine when something has left the viewport, hiding/showing the endpoints automatically, and injecting this clip functionality.  You could possibly even just do this yourself manually for the time being.

[martin...@gmail.com]

Unfortunately I don't think I'll have enough time to implement this properly.

For the time being, I implemented a very simple workaround which consists in putting a div below the container, with a background-color set to white and a z-index high enough.

This causes the overflowing elements to just be hidden under that div, and I think it'll be a sufficient solution for now.

I thank you once again for taking the time to respond, and thank you for jsPlumb, it's awesome !

Good bye

[Simon Porritt]

Yes that's the obvious workaround for the time being isn't it.  You're fortunate that it's an option for you in this case...given how intrusive on the page it will have to be, I don't imagine many people could get away with doing that.