So I have a layeredDiagram, going from left to right, top to bottom. If I give a fix size to every node and link of a diagram, and then disable zooming of diagram, at the moment it will allow us to have a horizontal/vertical scroll.
I am wondering is it possible to have a looping scrolling of the diagram? Which means if I keep scrolling to the right and then reach the end the diagram (the right edge of the div), then keep scrolling to right, the start of the diagram will appears.
I would like to have a workflow diagram(which has many nodes in the diagram) is presented as left to right, top to bottom, where a loop back is applied whenever the flow reaches the end of the screen. The start and the end of flow is not connected. It’s like you rotate a bottle of coke, the banner on the wall of the battle will keep repeating if you keep rotating the bottle.
I think one could implement a “ViewportBoundsChanged” DiagramEvent listener that moves nodes and links that have scrolled well out of the viewport to be on the side where the user is scrolling. I don’t know if that would work well or not. It would not work well when the document area is mostly covered by the viewport.
When I get some free time tomorrow I can experiment with this.
Thanks for the example. There is a bug about your algorithm though, if you connect Alpha with Alpha 1, then scroll to right. You can see there is a backward link from Alpha to Alpha 1, which meant to be set to opacity 0 in your algorithm.
Ah, you’re right. Very good, and thanks for pointing out the problem. I have updated that example on our web site.
So, was that what you were looking for?
Note the behavior when the user zooms out. You could automatically perform a layout again, just to put nodes in their proper places, or you could save them whenever a layout happens so that you can reset them as the user zooms out. Or you can prevent zooming by setting Diagram.allowZoom to false.