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.

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.

For more discussion, see Overview.

Constructor Summary Details

Name Description


{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, 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

Method Summary Details

Name, Return Type Description

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