Overview Diagrams

An Overview is a subclass of Diagram that can display all Parts of another diagram and also a representation of that diagram's viewport relative to those parts. Overviews allow the user to scroll on the diagram by clicking or dragging within the overview.

To use an Overview, provide the constructor with a div's name and set Overview.observed to a Diagram. To show both your Diagram and Overview, you'll need two divs. You can change Overview.observed to other Diagrams, or to null.

Overviews do not display Animations, Images, or SVG.

See samples that make use of Overviews in the samples index.

Because Overview extends Diagram, you can, for some purposes, modify the Overview just like a Diagram. Because Overview.observed overwrites many properties of the Overview we'd normally access, like the Diagram.model, modifcations are limited to simpler operations, like Diagram.push. Still, programmatic usage of these simpler functions can acheive useful results, such as the city labels in this example.

In addition to adding parts to the Overview, the box is referenced using Panel.findObject and then modified.

Shape.addFigureGenerator is used to add a hexagon shape to the collection of valid figures. See the Figures Extension for more shapes. A Part.layerName binding is used to show city names above adjacent nodes. Brush.isDark is used in a binding transformer to have text automatically adjust for the fill of the node.