gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
83 lines (77 loc) • 2.99 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>GoJS Overview -- Northwoods Software</title>
<!-- Copyright 1998-2020 by Northwoods Software Corporation. -->
<script src="../release/go.js"></script>
<script src="goIntro.js"></script>
</head>
<body onload="goIntro()">
<div id="container" class="container-fluid">
<div id="content">
<h1>Overview Diagrams</h1>
<p>
An <a>Overview</a> is a subclass of <a>Diagram</a> that is used to display all of the <a>Part</a>s
of another diagram and to show where that diagram's viewport is relative to all of those parts.
The user can also scroll the overviewed diagram by clicking or dragging within the overview.
</p>
<p>
The initialization of an <a>Overview</a> is just a matter of setting <a>Overview.observed</a>
to refer to the <a>Diagram</a> that you want it to show. So there needs to be a DIV for your main diagram,
for which you create a Diagram in the normal manner, and a separate DIV for your overview, for which you
create the Overview in a very simple manner.
</p>
<p>
See samples that make use of <a>Overview</a>s in the <a href="../samples/index.html#overview">samples index</a>.
</p>
<p>
The code below first creates a Diagram that we want to view.
It initializes the diagram with 1000 nodes of random colors.
</p>
<p>
It then creates an <a>Overview</a> and sets <a>Overview.observed</a> to the above Diagram.
The DIV for the overview is named "myOverviewDiv".
You can, if you wish, set <a>Overview.observed</a> at a later time.
You can also set it to null in order to have the Overview stop showing any Diagram.
</p>
<pre class="lang-js" id="diagramPre">
// initialize the main Diagram
diagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape, "Rectangle",
{ fill: "white" },
new go.Binding("fill", "color")),
$(go.TextBlock, { margin: 5 },
new go.Binding("text", "key"))
);
// start off with a lot of nodes
var nodeDataArray = [];
for (var i = 0; i < 1000; i++) {
nodeDataArray.push({ color: go.Brush.randomColor() });
}
diagram.model.nodeDataArray = nodeDataArray;
// create the Overview and initialize it to show the main Diagram
var myOverview =
$(go.Overview, "myOverviewDiv",
{ observed: diagram });
</pre>
<div style="width:100%">
<span id="overviewSpan" style="display: inline-block; vertical-align: top;">
<b>Overview:</b><br />
<div id="myOverviewDiv" style="width:150px; height: 150px" class="diagramStyling"></div>
</span>
<span id="diagramSpan" style="display: inline-block; vertical-align: top">
<b>Diagram:</b><br />
</span>
</div>
<script>goCode("diagramPre", 500, 300, go.Diagram, "diagramSpan");</script>
<p>
Animations are not shown in Overviews.
Rendering images or SVG does not work for Overviews.
</p>
</div>
</div>
</body>
</html>