Is is possible to have a cylinder scrolling of diagram

GoJS
#1

Hi,

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.

Thanks,
Kakit

#2

If there were just one node, would you expect the node to be repeated many times across the width of the viewport?

Is there a reason you can’t just duplicate the nodes and links, perhaps in a “ViewportBoundsChanged” DiagramEvent listener?

#3

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.

#4

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.

#5

OK, the general answer to this question is no.

But here’s my attempt to implement something that partly satisfies your requirements: https://gojs.net/temp/wrapAroundView.html

#6

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.

#7

Ok, don’t worry about the bug, I had fixed it. Thanks for helping.

#8

How did you fix the bug?

Besides setting the opacity, you might want to set pickable to false, so that users don’t accidentally click on one of those transparent links.

#9

I modified the algorithm a bit like this.

         const temp = new go.Point();
         const hideLinks = [];
         if (n.actualBounds.right < vb.x - MarginWidth) {
            n.location = new go.Point(n.location.x + DocWidth, n.location.y);
            n.findLinksConnected().each(function(l) {
              l.opacity = 0.0;
              hideLinks.push(l.data.key);
            });
          } else {
            n.findLinksOutOf().each(function(l) {
              if (hideLinks.indexOf(l.data.key) === -1) {
                if (vb.containsPoint(l.fromPort.getDocumentPoint(go.Spot.Right, temp)))
                  l.opacity = 1.0;
                else if (vb.containsPoint(l.toPort.getDocumentPoint(go.Spot.Left, temp)))
                  l.opacity = 1.0;
              }
            });
          }
        } else if (vb.x < ob.x) {
          // scrolling leftwards
          if (n.actualBounds.left > vb.right + MarginWidth) {
            n.location = new go.Point(n.location.x - DocWidth, n.location.y);
            n.findLinksConnected().each(function(l) {
              l.opacity = 0.0;
              hideLinks.push(l.data.key);
            });
          } else {
            n.findLinksOutOf().each(function(l) {
              if (hideLinks.indexOf(l.data.key) === -1) {
                if (vb.containsPoint(l.fromPort.getDocumentPoint(go.Spot.Right, temp)))
                  l.opacity = 1.0;
                else if (vb.containsPoint(l.toPort.getDocumentPoint(go.Spot.Left, temp)))
                  l.opacity = 1.0;
              }
            });
          }
        }

And yes, thanks for the tip of pickable.

#10

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.

#11

I am trying to get the vertical scrolling work too. If you have any advise it would be nice.

#12

With cylinders the wrapping is only along one axis.

I assume you have duplicated the code that deals with movement along the X axis to do the same thing along the Y axis. Did you run into some problem?