Class Overview

Extends Diagram. An Overview is a Diagram that displays all of a different diagram, with a rectangular box showing the viewport displayed by that other diagram.

For more discussion, see Introduction to Overviews. See samples that make use of Overviews in the samples index.

All you need to do is set Overview.observed. For example:

  var myDiagram = new go.Diagram("myDiagramDIV");
  . . . other initialization . . .

  // create and initialize the Overview:
  new go.Overview("myOverviewDIV").observed = myDiagram;

The Overview draws what the observed Diagram is displaying, so setting or modifying any diagram templates or template Maps has no effect. At the current time methods such as Diagram.makeImage, Diagram.makeImageData and Diagram.makeSvg do not work on Overviews.

Constructor Summary Details

Name Description

The constructor creates an Overview that does not show any Diagram, until you set Overview.observed.More...

{Element|string} div
A reference to a div or its ID as a string.

Properties Summary Details

Name, Value Type Description

Gets or sets the rectangular Part that represents the viewport of the observed Diagram.More... By default the part contains only a magenta Shape.

{boolean} 1.2

Gets or sets whether this overview draws the temporary layers of the observed Diagram.


Gets or sets the Diagram for which this Overview is displaying a model and showing its viewport into that model.More...

The value must be null or another Diagram, but may not be an Overview.

Properties borrowed from class Diagram:
allowClipboard, allowCopy, allowDelete, allowDragOut, allowDrop, allowGroup, allowHorizontalScroll, allowInsert, allowLink, allowMove, allowRelink, allowReshape, allowResize, allowRotate, allowSelect, allowTextEdit, allowUndo, allowUngroup, allowVerticalScroll, allowZoom, animationManager, autoScale, autoScrollRegion, click, commandHandler, contentAlignment, contextClick, contextMenu, currentCursor, currentTool, CycleAll, CycleDestinationTree, CycleNotDirected, CycleNotUndirected, CycleSourceTree, defaultCursor, defaultTool, div, documentBounds, DocumentScroll, doubleClick, firstInput, fixedBounds, grid, groupSelectionAdornmentTemplate, groupTemplate, groupTemplateMap, hasHorizontalScrollbar, hasVerticalScrollbar, highlighteds, InfiniteScroll, initialAutoScale, initialContentAlignment, initialDocumentSpot, initialPosition, initialScale, initialViewportSpot, isEnabled, isModelReadOnly, isModified, isMouseCaptured, isReadOnly, isTreePathToChildren, lastInput, layers, layout, links, linkSelectionAdornmentTemplate, linkTemplate, linkTemplateMap, maxScale, maxSelectionCount, minScale, model, mouseDragOver, mouseDrop, mouseHold, mouseHover, mouseOver, nodes, nodeSelectionAdornmentTemplate, nodeTemplate, nodeTemplateMap, None, padding, parts, position, positionComputation, scale, scaleComputation, scrollHorizontalLineChange, scrollMargin, scrollMode, scrollVerticalLineChange, selection, skipsUndoManager, toolManager, toolTip, undoManager, Uniform, UniformToFill, validCycle, viewportBounds, zoomPoint
Methods borrowed from class Diagram:
add, addChangedListener, addDiagramListener, addLayer, addLayerAfter, addLayerBefore, addModelChangedListener, alignDocument, centerRect, clear, clearHighlighteds, clearSelection, commitTransaction, computeBounds, computePartsBounds, copyParts, delayInitialization, findLayer, findLinkForData, findLinksByExample, findNodeForData, findNodeForKey, findNodesByExample, findObjectAt, findObjectsAt, findObjectsIn, findObjectsNear, findPartAt, findPartForData, findPartForKey, findTopLevelGroups, findTreeRoots, focus, highlight, highlightCollection, layoutDiagram, makeImage, makeImageData, makeSvg, moveParts, rebuildParts, remove, removeChangedListener, removeDiagramListener, removeLayer, removeModelChangedListener, removeParts, requestUpdate, rollbackTransaction, scroll, scrollToRect, select, selectCollection, setProperties, startTransaction, transformDocToView, transformViewToDoc, updateAllRelationshipsFromData, updateAllTargetBindings, zoomToFit, zoomToRect