Overview Window does not appear properly

GoJS
1

Hi Team,

We have nodes loaded horizontally in the swimlane view.

The “overview window” does not seem to be working properly.

Following is the code that we are using:

var diagram = this.ActiveGraphItem();
var x = Ext.getCmp(‘modellerToolbar-Magnifier’);
var overview;
var divRef;
var id;
if (x.pressed) {
overview = new Ext.Element(document.createElement(‘div’));
this.MagnifierContainer = overview.id;
overview.addCls(‘overview’);
Ext.get(‘modellerGraph’).appendChild(overview.dom);
new go.Overview(this.MagnifierContainer).observed = diagram;
} else {
Ext.get(this.MagnifierContainer).destroy();
}

How to make it so that the screen is stretched to show all nodes?

Below is a screenshot of the issue that we are facing:

As you can see, the overview window shows the swimlanes with all the nodes as a tiny line on top of the window itself and does not take up the space vertically.

2

From the screenshot it looks like your Diagram’s document bounds are so wide that the overview, to fit all nodes in the Diagram, is extremely small.

To eliminate other possibilities: What happens when you have half the number of Nodes or just have a few Nodes?

Simon

3

It looks perfect when i have half the number of Nodes or just have a few Nodes. But when i have large number of nodes??? Can I set height scale?

4

Overview attempts to fit all of the nodes inside of its bounds, whatever scale that may take, and in this case its very small.

It’s showing all of the nodes, but in a very thin line at the top (you can make out the magenta overview box).

You could center this line by setting the overview’s contentAlignment to go.Spot.Center, but it will still be just a pixel thin line unless you either make the Diagram’s document bounds smaller, or make the Overview larger.