Does jsPlumb work with scrollable divs ?

bertrand...@babelway.com

unread,

Jul 22, 2014, 9:06:14 AM7/22/14

to jsp...@googlegroups.com

Hi,

First of all, congrats for jsPlumb. I'm evaluating it, and it looks really great.

I have a problem when i try to connect elements that are in scrollable divs (css overflow:scroll).

jsPlumb always draws the connector as if the scrollbar was in its top position.

Could you tell me if i am missing something, if jsPlumb is not foreseen for this case, if it is a bug, ...

The problem can be reproduced with the following minimalistic page :

<!DOCTYPE html>
<html>
	<head>
	    <title>JS plumb test</title>
	    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
	    <script type="text/javascript" src="http://jsplumbtoolkit.com/js/dom.jsPlumb-1.6.2-min.js"></script>
	    
	    <style>
	    	#zone1 {height:300px;width:250px; position:absolute; overflow-y:scroll; border:1px solid red; }
	    	#zone2 {height:300px;width:250px; position:absolute; overflow-y:scroll; left:300px; border:1px solid red;}
	    	#forJsPlumb { height:300px; width:600px; overflow:hidden; position:absolute;pointer-events:none;} 
	        .window { background-color: #EEEEEF; border: 1px solid #346789; border-radius: 0.5em; box-shadow: 2px 2px 19px #AAAAAA; color: black; height: 5em; position: absolute; width: 5em; }
	    </style>
	
	    <script>
	        jsPlumb.ready(function () {
	        	$('#zone2').scrollTop(100);
	            jsPlumb.setContainer($("#forJsPlumb"));
	            jsPlumb.connect({ source: 'container0', target: 'container1', anchors : ["Right", "Left"]});
	        });
	    </script>
	
	</head>
	<body >
	 	<div id="zone1">
			<div class="window" style="left: 120px; top:100px;" id="container0"></div>
	 	</div>
	 	<div id="zone2">
			<div class="window" style="left: 30px; top:150px;" id="container1"></div>
			<div class="window" style="left: 100px; top:600px;" id="container2"></div>
	 	</div>
	 
	 	<div id="forJsPlumb">
		</div>
		
	</body>
</html>

The result of the page is :

The only workaround i could find is to add an offset to the anchor

anchors : ["Right", [ 0, 0.5, 0, 1, 0, -$('.zone2').scrollTop() ]]

But it is not really convenient, i can for example not call anymore, jsPlumb.repaintEverything(), but have to recalculate all anchors when scroll changes.

Any help would be appreciated,

Best regards,

Simon Porritt

unread,

Jul 23, 2014, 5:14:23 AM7/23/14

to jsp...@googlegroups.com

This is a bit of an unusual use case, and difficult for jsPlumb to support without some intervention on the part of the developer. Generally speaking, the assumption in jsPlumb is that the elements you will be connecting are all scrolled at the same time, if they are ever scrolled. So when you set a container, element offsets are calculated relative to its origin, and scroll values for intermediate elements are not taken into account.

This is an example i put together a long time ago of how you could join list elements:

http://jsfiddle.net/sporritt/ZUm7p/50/

it uses a very old version of jsplumb though (1.3.16). one consideration you need to make - which this fiddle demonstrates - is that if you've got independently scrollable parent elements, sooner or later you're going to scroll an element out of view and will want to either hide its connections, or anchor them to its parent.

The unfortunate thing about this fiddle is that updating it to 1.6.2:

http://jsfiddle.net/ZUm7p/58/

makes it stop working: newer versions of jsPlumb do not adjust for scroll.

Ever since i put that list item fiddle together I've had in the back of my mind that it would be nice to support this in jsPlumb properly.

Simon Porritt

unread,

Jul 23, 2014, 5:15:48 AM7/23/14

to jsp...@googlegroups.com

btw here's your test case in a jsfiddle:

http://jsfiddle.net/BQWL4/

Tauren

unread,

Sep 22, 2014, 3:12:47 AM9/22/14

to jsp...@googlegroups.com

I have a similar use case. There are two long scrolling lists, side by side. Items on the left can be linked to items on the right. I'd like to represent this visually with SVG lines, and jsPlumb seems like a great solution. However, with the latest version, repainting on scroll doesn't work:

var repaint = function(e){

jsPlumb.repaintEverything();

};

$('.scrollable').scroll(repaint);

$(window).resize(repaint);

I was able to get it working by stepping back to version 1.4.1 (the most recent version on cdnjs):

It would be absolutely fabulous if support could be re-added for this use case to the latest version. What would it take for this to happen, would it be a small or major effort?

Simon Porritt

unread,

Sep 22, 2014, 5:04:04 AM9/22/14

to jsp...@googlegroups.com

Yes it would be good. The amount of effort really depends on how much work the API does for you and how much is left over. In that example fiddle I pasted, for example, adjusting for scroll is just one small part of the functionality. Most of the work involved is knowing when a connection's endpoint has scrolled out of view, and then switching its connection to sit on the container (in fact a copy of the connection is made and the original is hidden). I would imagine that a proper solution for scrolling lists would offer to do this for you, and most likely users would want a few options, such as the ability to choose between hiding a connection when an endpoint scrolls out of view vs the proxy connection setup you see in that fiddle.

I think I avoided always computing scroll because I thought it would be an unacceptable performance hit, but recently I've done quite a lot of work on improving the speed at which jsPlumb renders and I think in fact allowing for scroll would not make any kind of noticeable difference to performance. So maybe that could be switched on always.

As for the other bit, I'd be interested to hear your thoughts on what an API could look like for this. I don't think it would suffice to just say "it's an li, do that scroll tracking thing" because any element could feasibly be an entry in a list of entries that is scrolling. Maybe a `connectScrollable` method or something. I don't know. What do you think? I do agree that this should find its way back in to jsPlumb...it's not a complete solution without supporting this.

Tauren

unread,

Sep 22, 2014, 12:02:19 PM9/22/14

to jsp...@googlegroups.com

Simon,

Thanks for your thoughts. I think it would help if you see what I'm trying to do. I'm not sure we are thinking about the same thing. From my perspective, I'm not sure what sort of API changes would be needed to help with my use case. The example I've put together requires no additional API.

Here's an example of what I'm trying to do, which sort-of works using an older jsPlumb:

http://codepen.io/tauren/pen/yFodf

Here's the same example using a newer jsPlumb:

http://codepen.io/tauren/pen/Gnusx

Here's a thread where I discuss the problem and I'm trying to solve with those examples:

https://groups.google.com/forum/#!topic/jsplumb/yrdsu3NGBNM

Thanks for your help!
Tauren

Message has been deleted

Alexey Z

unread,

Oct 20, 2014, 8:36:25 AM10/20/14

to jsp...@googlegroups.com

Hello,

It would be good to have it working with the last version. With version 1.4.1 connection is repainted well with just simple code
$("#elementId").scroll(function() {

jsPlumb.repaintEverything();
});

but with the last version 1.6.4 it does not work :(

Is there any news about this?

Jinghui Niu

unread,

Dec 20, 2016, 6:23:40 PM12/20/16

to jsPlumb

I have the same problem. I've done the research but no luck. Looking forward to some official improvement.

Aleem S

unread,

Apr 4, 2017, 8:37:18 AM4/4/17

to jsPlumb

I have a similar use case where i need to connect two fields from scrollable div containers.

https://jsfiddle.net/aleem86s/gpemwumh/12/

Requirement:
The left container is set 'direction: "rtl"' so that scrollbar appear of left. If the field content exceeds then horizontal scrollbar should appear.

Problem:

When the drag starts, the endpoint offset is not calculated/negated when we get horizontal scrollbar(rtl container). Due to negative value, the endpoint position is not aligned to the mouse pointer.

We have already handled the repaint the scroll happens but unable to resolve the endpoint position on drag start.

This happens across all the browsers.

Aleem S

unread,

Apr 5, 2017, 2:26:57 AM4/5/17

to jsPlumb

Hi Simon,

I just tried the scrollable div example for RTL support(left container is in RTL direction), on click/start of drag the endpoint is not showing properly(calculated wrongly).

I've added `width: 400px and position: relative` to `#container0` & `direction: rtl` to `#zone1` to emulate horizontal scroll on left container. Can you please check and let me know if i'm missing something here to make it work perfectly for rtl container too ?

http://jsfiddle.net/aleem86s/9nms10rs/ forked from http://jsfiddle.net/BQWL4/

Regards,

Aleem

Simon Porritt

unread,

Apr 5, 2017, 3:54:45 AM4/5/17

to jsPlumb

Neither of these do anything very impressive for me - what are you trying to do exactly?

Aleem S

unread,

Apr 5, 2017, 5:39:35 AM4/5/17

to jsPlumb

For ease of understanding, let us consider this example https://jsfiddle.net/aleem86s/gpemwumh/12/

Basically I want to connect one field(say source) to any other field(say target), both these fields are in separate scrollable divs.

Our problem is only for the source field container(where the vertical scrollbar is on left side and when horizontal scrollbar appears). In the above example you can change the endpoint radius to 5 and notice that the drag start mouse position is different from the newly added endpoint position. Once we drop in target field then it is proper, as expected.

Message has been deleted

Aleem S

unread,

Apr 5, 2017, 6:10:35 AM4/5/17

to jsPlumb

Visual illustration is here..

nkarth...@entrustsoft.in

unread,

May 31, 2018, 2:58:41 AM5/31/18

to jsPlumb

Hi,
Initially line joined is possible? and also my tried the initially but scrolled repainting not working if any solution ?

Reply all

Reply to author

Forward