I was following this GoJS tutorial for adding a static legend for my graph. In this tutorial, they have added the legend on the top left of the screen, but I wanted it at the bottom right of the screen. Is there a way to achieve it?
myDiagram.add(
$(go.Part,
{
layerName: "Grid", // must be in a Layer that is Layer.isTemporary,
// to avoid being recorded by the UndoManager
_viewPosition: new go.Point(0,0) // some position in the viewport,
// not in document coordinates
},
$(go.TextBlock, "A Title", { font: "bold 24pt sans-serif", stroke: "green" })));
// Whenever the Diagram.position or Diagram.scale change,
// update the position of all simple Parts that have a _viewPosition property.
myDiagram.addDiagramListener("ViewportBoundsChanged", function(e) {
e.diagram.commit(function(dia) {
// only iterates through simple Parts in the diagram, not Nodes or Links
dia.parts.each(function(part) {
// and only on those that have the "_viewPosition" property set to a Point
if (part._viewPosition) {
part.position = new go.Point(dia.viewportBounds.right-part.actualBounds.width,
dia.viewportBounds.bottom-part.actualBounds.height);
part.scale = 1/dia.scale;
}
})
}, null); // temporarily set skipsUndoManager to true, to avoid recording these changes
});
Thanks, that helps. I had one more follow-up to this. Using the above code, suppose I am putting two titles one below the other, then on zooming-in and zooming-out, the gap between those two titles also increase and decrease respectively. Is there a way to keep the space betweent the two titles constant?
This doesn’t happen if I set the two titles on top-left. I suppose this is because scaling happens with-respect-to origin which is on top-left.