# Class Overview

GoJS® Diagramming Components
version 3.0.13
by Northwoods Software®

#### Hierarchy

- Diagram
  - Overview

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:

      const 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.

Animations are not shown in an Overview.

At the current time methods such as Diagram.makeImage, Diagram.makeImageData and Diagram.makeSvg do not work on Overviews.

#####
Index

### Constructors

constructor

### Accessors

box
drawsGrid
drawsTemporaryLayers
observed
updateDelay

#####
Inherited Index

### Accessors

Diagram.allowClipboard
Diagram.allowCopy
Diagram.allowDelete
Diagram.allowDragOut
Diagram.allowDrop
Diagram.allowGroup
Diagram.allowHorizontalScroll
Diagram.allowInsert
Diagram.allowLink
Diagram.allowMove
Diagram.allowRelink
Diagram.allowReshape
Diagram.allowResize
Diagram.allowRotate
Diagram.allowSelect
Diagram.allowTextEdit
Diagram.allowUndo
Diagram.allowUngroup
Diagram.allowVerticalScroll
Diagram.allowZoom
Diagram.animationManager
Diagram.autoScale
Diagram.autoScrollInterval
Diagram.autoScrollRegion
Diagram.click
Diagram.commandHandler
Diagram.contentAlignment
Diagram.contextClick
Diagram.contextMenu
Diagram.currentCursor
Diagram.currentTool
Diagram.defaultCursor
Diagram.defaultScale
Diagram.defaultTool
Diagram.div
Diagram.documentBounds
Diagram.doubleClick
Diagram.firstInput
Diagram.fixedBounds
Diagram.grid
Diagram.groupSelectionAdornmentTemplate
Diagram.groupTemplate
Diagram.groupTemplateMap
Diagram.handlesDragDropForTopLevelParts
Diagram.hasHorizontalScrollbar
Diagram.hasVerticalScrollbar
Diagram.highlighteds
Diagram.initialAutoScale
Diagram.initialContentAlignment
Diagram.initialDocumentSpot
Diagram.initialPosition
Diagram.initialScale
Diagram.initialViewportSpot
Diagram.isEnabled
Diagram.isModelReadOnly
Diagram.isModified
Diagram.isMouseCaptured
Diagram.isReadOnly
Diagram.isTreePathToChildren
Diagram.lastInput
Diagram.layers
Diagram.layout
Diagram.linkSelectionAdornmentTemplate
Diagram.linkTemplate
Diagram.linkTemplateMap
Diagram.links
Diagram.maxScale
Diagram.maxSelectionCount
Diagram.minScale
Diagram.model
Diagram.mouseDragOver
Diagram.mouseDrop
Diagram.mouseEnter
Diagram.mouseHold
Diagram.mouseHover
Diagram.mouseLeave
Diagram.mouseOver
Diagram.nodeSelectionAdornmentTemplate
Diagram.nodeTemplate
Diagram.nodeTemplateMap
Diagram.nodes
Diagram.opacity
Diagram.padding
Diagram.parts
Diagram.position
Diagram.positionComputation
Diagram.renderer
Diagram.routers
Diagram.scale
Diagram.scaleComputation
Diagram.scrollHorizontalLineChange
Diagram.scrollMargin
Diagram.scrollMode
Diagram.scrollVerticalLineChange
Diagram.scrollsPageOnFocus
Diagram.selection
Diagram.skipsUndoManager
Diagram.themeManager
Diagram.toolManager
Diagram.toolTip
Diagram.undoManager
Diagram.validCycle
Diagram.viewSize
Diagram.viewportBounds
Diagram.zoomPoint

### Methods

Diagram.add
Diagram.addChangedListener
Diagram.addDiagramListener
Diagram.addLayer
Diagram.addLayerAfter
Diagram.addLayerBefore
Diagram.addModelChangedListener
Diagram.alignDocument
Diagram.attach
Diagram.centerRect
Diagram.clear
Diagram.clearHighlighteds
Diagram.clearSelection
Diagram.commit
Diagram.commitTransaction
Diagram.computeMove
Diagram.computePartsBounds
Diagram.copyParts
Diagram.delayInitialization
Diagram.ensureBounds
Diagram.findLayer
Diagram.findLinkForData
Diagram.findLinkForKey
Diagram.findLinksByExample
Diagram.findNodeForData
Diagram.findNodeForKey
Diagram.findNodesByExample
Diagram.findObjectAt
Diagram.findObjectsAt
Diagram.findObjectsIn
Diagram.findObjectsNear
Diagram.findPartAt
Diagram.findPartForData
Diagram.findPartForKey
Diagram.findPartsAt
Diagram.findPartsIn
Diagram.findPartsNear
Diagram.findRouter
Diagram.findTopLevelGroups
Diagram.findTreeRoots
Diagram.focus
Diagram.highlight
Diagram.highlightCollection
Diagram.layoutDiagram
Diagram.makeImage
Diagram.makeImageData
Diagram.makeSvg
Diagram.moveParts
Diagram.rebuildParts
Diagram.remove
Diagram.removeChangedListener
Diagram.removeDiagramListener
Diagram.removeLayer
Diagram.removeModelChangedListener
Diagram.removeParts
Diagram.requestUpdate
Diagram.rollbackTransaction
Diagram.scroll
Diagram.scrollToRect
Diagram.select
Diagram.selectCollection
Diagram.set
Diagram.setDivBackground
Diagram.setProperties
Diagram.startTransaction
Diagram.transformDocToView
Diagram.transformViewToDoc
Diagram.updateAllRelationshipsFromData
Diagram.updateAllTargetBindings
Diagram.updateAllThemeBindings
Diagram.zoomToFit
Diagram.zoomToRect

## Constructors

### constructor

- new Overview(div?: string | Element, init?: Partial<Overview>): Overview

- #### Parameters

  - ##### `Optional` div: string | Element

    A reference to a DIV HTML element or its ID as a string. If no DIV is supplied, an Overview will be created in memory. The Overviews's Diagram.div property can then be set later on.

  - ##### `Optional` init: Partial<Overview>

    Optional initialization properties.

  #### Returns Overview

- new Overview(init?: Partial<Overview>): Overview

- #### Parameters

  - ##### `Optional` init: Partial<Overview>

    Optional initialization properties.

  #### Returns Overview

## Accessors

### box
: Part

- Gets or sets the rectangular Part that represents the viewport of the observed Diagram. By default the part contains only a magenta Shape. The box's Part.selectionObject is what is resized by the Overview to the apparent size of the observed diagram's viewport.

### drawsGrid
: boolean

- Gets or sets whether this overview draws the Diagram.grid of the observed Diagram, if it is visible. The default value is true.

  This property is only considered when drawsTemporaryLayers is true. Setting this to false may help improve drawing performance.

  Setting this property does not notify about any changed event.

  `since`

  2.2

### drawsTemporaryLayers
: boolean

- Gets or sets whether this overview draws the temporary layers of the observed Diagram. The default value is true. Setting this property to false may improve drawing performance, especially if the Diagram.grid is visible.

  Setting this property does not notify about any changed event.

### observed
: Diagram

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

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

### updateDelay
: number

- Gets or sets how long it waits before updating, in milliseconds. The default value is zero. Any new value must be a non-negative number.

  Setting this property does not notify about any changed event.

  `since`

  2.2

Copyright © 1998-2024 by Northwoods Software Corporation.