Virtualized diagram, display the whole diagram in overview

GoJS
1

Hi All,

I am playing with the virtualized network example, and i am wondering how i can display the ‘full’ overview, as
the diagram just display the viewport.

Should i make one more diagram for the overview with the same datas and layout, or is there a better way ?

Thanks

2

I don’t understand what you are asking for. (Sketches would have helped.) It is true that a diagram only displays what is in the viewport, but that is true whether or not the diagram has been virtualized.

It seems to me that if you are wanting to display all of the nodes and links in a virtualized diagram there is no point in virtualizing.

3

Screen Shot 2016-06-09 at 5.33.38 PM.png2166×1196 176 KB

Here is a picture ( i do not use vrtualized layout here )

Basically, we need to have an overiew, so the user can navigate easily thru the nodes and links.
The problem is that the overview will show only the displayed elements if we use a virtualized layout

4

Can’t you just use a diagram showing the “whole” model?

5

Thanks Walter, it is nearly working.

I have 2 issues ( i am using the virtualized ForceDirectedLayout sample as a starting point) :

  1. the changes on the diagram model are not propagated to the wholeModel ( if an user move a node, the wholeModel is not aware that changes have been made, and so the overview diagram does not update the position of its nodes ). I have a quick and dirty fix :

myDiagram.model.addChangedListener(function(e) {
if (e.propertyName === ‘CommittedTransaction’) {
overviewDiagram.updateAllTargetBindings();
}
}); which is ugly and quite inefficient for large graph

I am wondering how to tell the wholeModel that some changes happened, so the overview diagram wouldl update automatically

  1. I am looking for a simple way to draw and updates the viewPort of the main diagram, in the overview diagram; if you have a piece of code to get me started that will be great. ( i would add a node with some two-way bindings…, but i am sure you have this piece of code in the source code of the library )

Thanks you very much

6

You must have two Diagrams (main and overview) and two corresponding Models (virtual and whole). Is that correct?

Are you using TwoWay Bindings to automatically update the model data with changes that occur in the diagram?

If so, then you can organize your page to be like the Local View sample, Local View. The two Models should share the same model data object for each node that appears in both diagrams. If that’s the case, you could just implement this on your virtual model:

        myLocalDiagram.model.addChangedListener(function(e) {
          if (e.change === go.ChangedEvent.Property) {
            myFullDiagram.model.raiseDataChanged(e.object, e.propertyName, e.oldValue, e.newValue, e.oldParam, e.newParam);
          }
        });

The second request is also ambiguous to me.

7

Thanks Walter,

I am not very good at english… sorry for that…

For 1)… i’ll try it …

For my second request, i was able to sort it out by myself, but i have an issue with a piece of code

i have this handler :

 function onViewportChanged(e) {                                                                                                                                                              
     var diagram = e.diagram;                                                                   
     // make sure there are Nodes for each node data that is in the viewport                    
    // or that is connected to such a Node                                                     
     var viewb = diagram.viewportBounds;  // the new viewportBounds                             
     var model = diagram.model;                                                                 
                                                                                             
     var data = overviewDiagram.model.findNodeDataForKey("VIEWPORT");                           
     var node =   overviewDiagram.findNodeForKey("VIEWPORT");                                   
     overviewDiagram.model.setDataProperty(data, "bounds", viewb);                              
     node.updateTargetBindings();     // why, i thought diagram will update by itself as i use setDataPropery ??

I used this handler to update the overview diagram when the viewport of the main diagram… on the overview diagram, i have a node that corresponds to the viewport of the main diagram… i am a bit surprised by the last line… why should i call this method, as i am using the setDataProperty method ? or i am missing something.
I have set a binding on the ‘bounds’ property on the overview diagram

8

I’m wondering if there’s some way for you to use a real Overview.

Try creating the whole diagram’s DIV to have the same dimensions and location as the virtualized diagram, but behind it and with opacity:0.

Then you can use a regular Overview whose Overview.observed refers to the whole Diagram. If you know that the overview’s scale will be small, you could also use much simpler templates, which will save on load time and draw time.

In the next release we’ll optimize the drawing code to be a no-op if the DIV’s opacity is 0.