Something equivalent to CSS position:fixed?

Sorry for the vague title, and for the fact that this topic already came up very often. Just to clarify further, I’d like to have a node (or whatever shape, even better if it’s not part of the diagram bounds at all) in a fixed position, say, bottom left corner, no matter the scroll or zoom value. As a further constraint I have that I’d need this node to be part of the diagram, because I want it to be there when I take an SVG snapshot of it.

Yes, this is basically a legend and I’ve read the corresponding page (Legends and Titles), in particular the last two examples promise to address this case. But those look like hackish solutions to me, and in fact the display annoying glitches when the diagram is scrolled/zoomed.

Is there really no other way of having an item in the diagram that’s completely disconnected from the current layout (isLayoutPositioned?) and that whose position is tightly linked to the viewport?

Any other solution that satisfies the above requirements will work for me, so I’m pretty versatile about the actual implementation.


Part.isLayoutPositioned just governs whether a Layout will move such a Node. A node is moved when its Part.location is changed – it is not moved when the diagram is scrolled or zoomed.

There is nothing in GoJS by which the coordinates of a Part are in viewport coordinates instead of document coordinates. Really, almost everything in GoJS involving Parts are in document coordinates, to allow them to be scrolled and zoomed.

I understand that you don’t like solutions that are hackish, but what glitches are you concerned about?

Maybe you’d prefer to use a second read-only/disabled Diagram, overlapping the main Diagram, where all of the Layers are invisible except the one showing the Part(s) that you want to remain motionless. The two Diagrams could share the same Model.

Thanks for the quick response!

When I move/zoom those examples, the “A Title” text block jitters. (I’m using the latest Chrome on macOS.)

Do you mean another <div>? In that case, will I be able to take a joint SVG snapshot of both?

If you are rendering the whole diagram, where should the legend be shown, since the concept of the viewport doesn’t make sense?

I suppose you could temporarily show it where you want in the main diagram, render it, and then hide it again.

This is a point to address actually, in my case though the layout is automatically adjusted to fit the whole diagram, scrolling/scaling accordingly.

If I manage to place the legend in a fixed position (with respect to the viewport), say in the bottom left corner, I guess I can update my ViewportBoundsChanged listener to also take it into account. So when I take the SVG snapshot, all the nodes will be in the right position.

Is that a good solution for you? It isn’t clear that you are asking a question for us.

I guess it would be acceptable, the issue is still in “If I manage to place the legend in a fixed position”, which is the original question, and the only solution so far is using what’s suggested in Legends and Titles which has glitches (at least, for me).

In version 3 of GoJS, we have added Layers in which the Parts are positioned not by their Part.location but by their Part.alignment and Part.alignmentFocus relative to the viewport.

For example:

Awesome, thanks for the heads up @walter.