Dead space in diagram?

Hi, I’m trying to create diagram which has a legend attached to it in the top right corner of the graph. The legend is designed using pure html, css, and javascript. No goJs is involved with the legend. I have overlayed this legend ontop of the diagram by setting it’s z-index. The issue I’m running into is sometimes nodes will move behind the legend if the diagram is too large, causing the user to have to move the diagram around to see that node. Is there anyway I can create the diagram with a certain chunk of the top right being dead space? So that say a node was positioned behind it, it would push away from the legend and appear maybe next to it instead?


Also, I would love to do something similar with the nodes not being able to overlap. I looked at this sample: Drag Unoccupied and I think the idea is great, the only issue is the node can still be resized over another node, which is an issue for me. I change the text inside my nodes several times so the box resizes on its own when I do, which has been most of the issue. Two nodes two close to each other end up overlapping instead of being pushed away from each other. Would there also be a way to rectify that problem? Thanks

Well, you could just put the legend outside of the area of the Diagram’s DIV element.

I’m not sure there’s a good general solution that would prevent any node or link from intersecting with some rectangular area of the viewport. Imagine you had a simple small diagram whose contents looked like that of Minimal GoJS Sample. Now the user moves the mouse to the center of the “Gamma” Node and zooms in a lot. If the “Gamma” node occupies all of the viewport, how could you prevent any part of the “Gamma” node from intersecting with where you want your legend to be?

Ah, we were posting at the same time.

You could customize the ResizingTool so that the user could not cause the resized node to overlap any other nodes.

And if the node is dependent on the contents (such as text), you’ll need to either make sure the nodes cannot grow in size or you need to make sure that they grow in a manner such that the updated node cannot overlap another node.

when the node grows to a different size, would there be a way to have the node grow from its center point rather than the top left? I’ve noticed that it keeps the top left location the same and adjusts the bottom right to the correct size. Can I make it so that it grows radially out in each direction?

Sure, set the Node.locationSpot to be go.Spot.Center.

Perfect, thanks!