GoJS® Diagram Class

Class Diagram

A Diagram is associated with an HTML DIV element. Constructing a Diagram createsan HTML Canvas element which it places inside of the given DIV element, in addition to several helper DIVs.GoJS will manage the contents of this DIV -- you should not modify the contents of the DIV,although you may style the given DIV (background, border, etc) and position and size it as needed.

Minimal Diagram construction looks like this. HTML:

<div id="myDiagramDiv" style="border: solid 1px black; width:400px; height:400px"></div>

JavaScript:

var $ = go.GraphObject.make;  // for conciseness myDiagram = $(go.Diagram, "myDiagramDiv",  // create a Diagram for the DIV HTML element               {                 initialContentAlignment: go.Spot.Center,  // center the content                 "undoManager.isEnabled": true  // enable undo & redo               });

The diagram will draw onto an HTML Canvas element, created inside the Diagram DIV.

Each Diagram holds a set of Layers each of which holds some number of Partssuch as Nodes and Links.Each Part consists of GraphObjects such as TextBlocks and Shapesand Panels holding yet more GraphObjects.

A Diagram and its Parts provide the visual representation of a Model that holds JavaScriptdata objects for the nodes and the links.The model provides the way to recognize the relationships between the data.

Two Diagrams can display and manipulate the same Model. (Example)

A diagram will automatically create Nodes and Links corresponding to the model data.The diagram has a number of named templates it uses to create the actual parts:nodeTemplateMap, groupTemplateMap, and linkTemplateMap.Each template may have some data Bindings that set the part's GraphObjects' propertiesbased on the value of properties of the data.

A simple Node template and Model data (both nodes and links) may look like this:

var $ = go.GraphObject.make;  // for conciseness// define a simple Node templatemyDiagram.nodeTemplate =  $(go.Node, "Auto",  // the Shape will go around the TextBlock    $(go.Shape, "RoundedRectangle",      // Shape.fill is bound to Node.data.color      new go.Binding("fill", "color")),    $(go.TextBlock,      { margin: 3 },  // some room around the text      // TextBlock.text is bound to Node.data.key      new go.Binding("text", "key"))  );// create the model data that will be represented by Nodes and LinksmyDiagram.model = new go.GraphLinksModel([  { key: "Alpha", color: "lightblue" },  { key: "Beta", color: "orange" },  { key: "Gamma", color: "lightgreen" },  { key: "Delta", color: "pink" }],[  { from: "Alpha", to: "Beta" },  { from: "Alpha", to: "Gamma" },  { from: "Beta", to: "Beta" },  { from: "Gamma", to: "Delta" },  { from: "Delta", to: "Alpha" }]);

The above code is used to make the Minimal sample, a simple example ofcreating a Diagram and setting its model.

Read about models on the Using Models page in the introduction.A diagram is responsible for scrolling (position) and zooming (scale) all of the parts that it shows.Each Part occupies some area given by its GraphObject.actualBounds.

The union of all of the parts' bounds constitutes the documentBounds.The document bounds determines the area that the diagram can be scrolled to.There are several properties that you can set, such as initialContentAlignment,that control the initial size and position of the diagram contents.

At any later time you can also explicitly set the position and/or scale toget the appearance that you want. But you may find it easier to call methods to get the desired effect.For example, if you want to make a particular Node be centered in the viewport,call either centerRect or scrollToRect with the Node's GraphObject.actualBounds,depending on whether or not you want the view to be scrolled if the node is already in view.

Read in the Introduction about Viewportsand the Initial Viewport.You can have the diagram perform automatic layouts of its nodes and links by settinglayout to an instance of the Layout subclass of your choice.The default layout is an instance of the Layout base class that ignores links andonly positions Nodes that do not have a location.This default layout will allow you to programmatically position nodes (including by loadingfrom a database) and will also allow the user to manually position nodes using the DraggingTool.

If you do supply a particular layout as the layout, you can control which Parts it operateson by setting Part.isLayoutPositioned.Normally, of course, it works on all top-level nodes and links.The layout is performed both after the model is first loaded as well as after any part is added or removedor changes visibility or size.You can disable the initial layout by setting Layout.isInitial to false.You can disable later automatic layouts by setting Layout.isOngoing to false.

See the Layouts page in the Introduction for a summary of layout behavior.

A diagram maintains a collection of selected parts, the Diagram.selection.To select a Part you set its Part.isSelected property to true.

There are many properties, named "allow...", that control what operations the usermay perform on the parts in the diagram. These correspond to the same namedproperties on Layer that govern the behavior for those parts in a particular layer.Furthermore for some of these properties there are corresponding properties onPart, named "...able", that govern the behavior for that individual part.For example, the allowCopy property corresponds to Layer.allowCopy andto the property Part.copyable.The Part.canCopy predicate is false if any of these properties is false.

See the Permissions page for a more thorough discussion.

The commandHandler implements various standard commands,such as the CommandHandler.deleteSelection method and theCommandHandler.canDeleteSelection predicate.

See the Commands page for a listing of keyboard commands andthe use of commands in general.

The diagram supports modular behavior for mouse events by implementing "tools".All mouse and keyboard events are represented by InputEvents and redirectedto the currentTool.The default tool is an instance of ToolManager which keeps three lists of mode-less tools:ToolManager.mouseDownTools, ToolManager.mouseMoveTools, and ToolManager.mouseUpTools.The ToolManager searches these lists when a mouse event happens to find the first tool that can run.It then makes that tool the new currentTool, where it can continue to process input events.When the tool is done, it stops itself, causing the defaultTool to be the new currentTool.

Mouse-down tools include:

ToolManager.actionTool, to support objects like "buttons"
ToolManager.relinkingTool, to reconnect an existing link
ToolManager.linkReshapingTool, to modify the route of an existing link
ToolManager.resizingTool, to change the size of an object
ToolManager.rotatingTool, to change the angle of an object

Mouse-move tools include:

ToolManager.linkingTool, to draw a new link
ToolManager.draggingTool, to move or copy the selection
ToolManager.dragSelectingTool, to select parts within a rectangular area
ToolManager.panningTool, to pan the diagram

Mouse-up tools include:

ToolManager.contextMenuTool, to manage context menus
ToolManager.textEditingTool, to support in-place text editing
ToolManager.clickCreatingTool, to create new parts where the user clicks
ToolManager.clickSelectingTool, to select parts

You can also run a tool in a modal fashion by explicitly setting currentTool.That tool will keep running until some code replaces the currentTool/This normally happens when the current tool calls Tool.stopTool, such as on a mouse-up event.

See the Tools page for a listing of predefined tools and how they operate.

A diagram raises various DiagramEvents when interesting things happen that may have affected the whole diagram.See the documentation for DiagramEvent for a complete listing.

Constructor Summary Details

Name Description

Name	Description
Diagram(div)	Construct an empty Diagram for a particular DIV HTML element.More... You will normally initialize properties of the Diagram that control its appearance and behavior.These properties include: templates (such as nodeTemplate or linkSelectionAdornmentTemplate), an automatic layout (if desired, layout), positioning or scaling (such as initialContentAlignment or initialAutoScale), permissions (such as isReadOnly or allowDelete), or Tool or CommandHandler customization (such as CommandHandler.archetypeGroupData orTool.isEnabled): `diagram.toolManager.dragSelectingTool.isEnabled = false;`. Then you will need to construct a Model (usually a GraphLinksModel) for the Diagram,initialize its data by setting its Model.nodeDataArray and other properties,and then set the diagram's model. Finally, if you want to disassociate the Diagram from the HTML Div element, set Diagram.div to null.If you remove a part of the HTML DOM containing a Div with a Diagram, you will need toset div to null in order for the page to recover the memory. It is commonplace to use the static function GraphObject.make to build a Diagram: var $ = go.GraphObject.make; var diagram = $(go.Diagram, "myDiagramDiv", { initialContentAlignment: go.Spot.Center, allowZoom: false, "animationManager.isEnabled": false, // turn off automatic animations "grid.visible": true, // display a background grid for the whole diagram "grid.gridCellSize": new go.Size(20, 20), // allow double-click in background to create a new node "clickCreatingTool.archetypeNodeData": { text: "Node" }, // allow Ctrl-G to call the groupSelection command "commandHandler.archetypeGroupData": { text: "Group", isGroup: true, color: "blue" }, "commandHandler.copiesTree": true, // for the copy command "commandHandler.deletesTree": true, // for the delete command "toolManager.hoverDelay": 100, // how quickly tooltips are shown // mouse wheel zooms instead of scrolls "toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom, "draggingTool.dragsTree": true, // dragging for both move and copy "draggingTool.isGridSnapEnabled": true, layout: $(go.TreeLayout, { angle: 90, sorting: go.TreeLayout.SortingAscending }), "undoManager.isEnabled": true, // enable undo & redo // a Changed listener on the Diagram.model "ModelChanged": function(e) { if (e.isTransactionFinished) saveModel(); } }); Parameters: {Element\|string=} div A reference to a DIV HTML element or its ID as a string.If no DIV is supplied one will be created in memory. The Diagram's Diagram.div propertycan then be set later on.

Diagram(div)

Construct an empty Diagram for a particular DIV HTML element.More...

You will normally initialize properties of the Diagram that control its appearance and behavior.These properties include:

templates (such as nodeTemplate or linkSelectionAdornmentTemplate),
an automatic layout (if desired, layout),
positioning or scaling (such as initialContentAlignment or initialAutoScale),
permissions (such as isReadOnly or allowDelete), or
Tool or CommandHandler customization (such as CommandHandler.archetypeGroupData orTool.isEnabled): diagram.toolManager.dragSelectingTool.isEnabled = false;.

Then you will need to construct a Model (usually a GraphLinksModel) for the Diagram,initialize its data by setting its Model.nodeDataArray and other properties,and then set the diagram's model.

Finally, if you want to disassociate the Diagram from the HTML Div element, set Diagram.div to null.If you remove a part of the HTML DOM containing a Div with a Diagram, you will need toset div to null in order for the page to recover the memory.

It is commonplace to use the static function GraphObject.make to build a Diagram:

 var $ = go.GraphObject.make; var diagram =   $(go.Diagram, "myDiagramDiv",     {       initialContentAlignment: go.Spot.Center,       allowZoom: false,       "animationManager.isEnabled": false,  // turn off automatic animations       "grid.visible": true,  // display a background grid for the whole diagram       "grid.gridCellSize": new go.Size(20, 20),       // allow double-click in background to create a new node       "clickCreatingTool.archetypeNodeData": { text: "Node" },       // allow Ctrl-G to call the groupSelection command       "commandHandler.archetypeGroupData":           { text: "Group", isGroup: true, color: "blue" },       "commandHandler.copiesTree": true,  // for the copy command       "commandHandler.deletesTree": true, // for the delete command       "toolManager.hoverDelay": 100,  // how quickly tooltips are shown       // mouse wheel zooms instead of scrolls       "toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,       "draggingTool.dragsTree": true,  // dragging for both move and copy       "draggingTool.isGridSnapEnabled": true,       layout: $(go.TreeLayout,                 { angle: 90, sorting: go.TreeLayout.SortingAscending }),       "undoManager.isEnabled": true,  // enable undo & redo       // a Changed listener on the Diagram.model       "ModelChanged": function(e) { if (e.isTransactionFinished) saveModel(); }     });

Parameters:
{Element|string=} div: A reference to a DIV HTML element or its ID as a string.If no DIV is supplied one will be created in memory. The Diagram's Diagram.div propertycan then be set later on.

Properties Summary Details

Name, Value Type	Description
allowClipboard {boolean}	Gets or sets whether the user may copy to or paste parts from the internal clipboard.More... This allows use of CommandHandler.cutSelection,CommandHandler.copySelection and CommandHandler.pasteSelection.The initial value is true.
allowCopy {boolean}	Gets or sets whether the user may copy objects.More... The initial value is true.
allowDelete {boolean}	Gets or sets whether the user may delete objects from the Diagram.More... The initial value is true.
allowDragOut {boolean}	Gets or sets whether the user may start a drag-and-drop in this Diagram,possibly dropping in a different element.More... The initial value is false.
allowDrop {boolean}	Gets or sets whether the user may end a drag-and-drop operation in this Diagram.More... This is typically set to true when a Diagram is used with a Palette. The initial value is false.
allowGroup {boolean}	Gets or sets whether the user may group parts together.More... The initial value is true.
allowHorizontalScroll {boolean}	Gets or sets whether the user is allowed to use the horizontal scrollbar.More... The initial value is true. See also: hasHorizontalScrollbar allowVerticalScroll
allowInsert {boolean}	Gets or sets whether the user may add parts to the Diagram.More... The initial value is true.
allowLink {boolean}	Gets or sets whether the user may draw new links.More... The initial value is true.
allowMove {boolean}	Gets or sets whether the user may move objects.More... The initial value is true.
allowRelink {boolean}	Gets or sets whether the user may reconnect existing links.More... The initial value is true.
allowReshape {boolean}	Gets or sets whether the user may reshape parts.More... The initial value is true.
allowResize {boolean}	Gets or sets whether the user may resize parts.More... The initial value is true.
allowRotate {boolean}	Gets or sets whether the user may rotate parts.More... The initial value is true.
allowSelect {boolean}	Gets or sets whether the user may select objects.More... The initial value is true.
allowTextEdit {boolean}	Gets or sets whether the user may do in-place text editing.More... The initial value is true.
allowUndo {boolean}	Gets or sets whether the user may undo or redo any changes.More... The initial value is true.
allowUngroup {boolean}	Gets or sets whether the user may ungroup existing groups.More... The initial value is true.
allowVerticalScroll {boolean}	Gets or sets whether the user is allowed to use the vertical scrollbar.More... The initial value is true. See also: hasVerticalScrollbar allowHorizontalScroll
allowZoom {boolean}	Gets or sets whether the user may zoom into or out of the Diagram.More... The initial value is true.
animationManager {AnimationManager} 1.4	This read-only property returns the AnimationManager for this Diagram.More...
autoScale {EnumValue}	Gets or sets the autoScale behavior of the Diagram, controlling whether or not theDiagram's bounds automatically scale to fit the view.More... The only accepted values are the constant properties of Diagram,Diagram.None, Diagram.Uniform, or Diagram.UniformToFill.Setting this will change the Diagram's Diagram.scale and Diagram.position, if appropriate. The default value is Diagram.None - the scale and position are not automatically adjustedaccording to the area covered by the document.When the value is not None, any value for initialAutoScale or initialScale is ignored. When autoScale is set to a non-Diagram.None value,the user will not be able to zoom, and setting scale will do nothing.If you only want to scale automatically on initialization, use initialAutoScale. Note that depending on the values of maxScale and minScale, the actual value for scalemight be limited.
autoScrollRegion {Margin\|number}	Gets or sets the Margin that describes the Diagram's autoScrollRegion.More... The default value is a Margin of 16 on all sides.When the mouse drag point is within this region on the left or right sides,the view will automatically scroll horizontally in that direction. When the point is withinthe region on the top or bottom, the view will automatically scrollvertically in that direction. You can specify a distance of zero to disable autoscrollingin a direction; a value of 0,0,0,0 turns off autoscrolling altogether.
click {function(InputEvent) \| null}	Gets or sets the function to execute when the user single-primary-clickson the background of the Diagram.More... This typically involves a mouse-down followed by a prompt mouse-upat approximately the same position using the left (primary) mouse button.This property is used by the ClickSelectingToolwhen the user clicks on no object.The function is called in addition to the DiagramEventthat is raised with the name "BackgroundSingleClicked". If this property value is a function, it is called with an InputEvent.By default this property is null. If you do provide a function that makes changes to the diagram or to its model,you should do so within a transaction -- call startTransaction and commitTransaction. See also: doubleClick contextClick GraphObject.click
commandHandler {CommandHandler}	Gets or sets the CommandHandler for this Diagram.More... This is set to a new instance of CommandHandler on Diagram instantiation. Setting this property does not notify about any changed event; the new value must not be null.
contentAlignment {Spot}	Gets or sets the content alignment Spot of this Diagram, to be used in determininghow parts are positioned when the viewportBounds width or height is smaller than the documentBounds.More... For instance a spot of Spot.Center would ensure that the Diagram'scontents are always centered in the viewport. If you want the content to be aligned only initially, use initialContentAlignment instead. The default value is Spot.Default, which causes no automatic scrolling or positioning.When the value is not Default, any value for initialContentAlignment or initialPosition is ignored.
contextClick {function(InputEvent) \| null}	Gets or sets the function to execute when the user single-secondary-clickson the background of the Diagram.More... This typically involves a mouse-down followed by a prompt mouse-upat approximately the same position using the right (secondary) mouse button.This property is used by the ClickSelectingToolwhen the user clicks on no object.The function is called in addition to the DiagramEventthat is raised with the name "BackgroundContextClicked". If this property value is a function, it is called with an InputEvent.By default this property is null. If you do provide a function that makes changes to the diagram or to its model,you should do so within a transaction -- call startTransaction and commitTransaction. See also: click doubleClick GraphObject.contextClick
contextMenu {Adornment\|HTMLInfo}	This Adornment or HTMLInfo is shown when the use context clicks in the background.More... The default value is null, which means no context menu is shown.On touch devices, a special default context menu will appear even there is no context menu defined.See ContextMenuTool.defaultTouchContextMenu for details. diagram.contextMenu = $(go.Adornment, "Vertical", $("ContextMenuButton", $(go.TextBlock, "Undo"), { click: function(e, obj) { e.diagram.commandHandler.undo(); } }, new go.Binding("visible", "", function(o) { return o.diagram.commandHandler.canUndo(); }).ofObject()), $("ContextMenuButton", $(go.TextBlock, "Redo"), { click: function(e, obj) { e.diagram.commandHandler.redo(); } }, new go.Binding("visible", "", function(o) { return o.diagram.commandHandler.canRedo(); }).ofObject()) ); See also: GraphObject.contextMenu ContextMenuTool
currentCursor {string}	Gets or sets the current cursor for the Diagram, overriding the defaultCursor.More... Valid CSS cursors are accepted,such as "auto", "default", "none", "context-menu", "help", "pointer", "progress", "wait", etc. It is possible to use custom cursors with the syntax "url(path_to_image), default".A fallback (like default here) is necessary for a custom cursor to work. To read more about cursor syntax, go to:CSS cursors (mozilla.org). If the specified cursor is not accepted by the platform, GoJS will append`-webkit-` or `-moz-` prefixes. Setting this property does not notify about any changed event.Setting this value to the empty string ('') returns the Diagram's cursor to the defaultCursor. See also: defaultCursor GraphObject.cursor
currentTool {Tool}	Gets or sets the current tool for this Diagram that handles all input events.More... This value is frequently replaced by the toolManager as different tools run. Each Diagram has a number of tools that define its behavior when responding to mouse events.These include ClickSelectingTool, DraggingTool, DragSelectingTool, LinkingTool, and ResizingTool, among others. Initially this is set to the value of defaultTool.Setting this to a null value is treated as if it were set to the defaultTool,because there should always be a currently running tool, except when the diagram is being initialized. A ToolManager is the default tool used by a Diagram - it chooses to run one of the other toolsdepending on the circumstances. Setting this property to a new tool stops the previous current tool Setting this property does not notify about any changed event. See also: defaultTool toolManager
defaultCursor {string}	Gets or sets the cursor to be used for the Diagramwhen no GraphObject specifies a different cursor.More... Valid CSS cursors are accepted,such as "auto", "default", "none", "context-menu", "help", "pointer", "progress", "wait", etc. It is possible to use custom cursors with the syntax "url(path_to_image), default".A fallback (like default here) is necessary for a custom cursor to work. To read more about cursor syntax, go to:CSS cursors (mozilla.org).The default value is "auto". See also: currentCursor GraphObject.cursor
defaultTool {Tool}	Gets or sets the default tool for this Diagram that becomes the current tool when the current tool stops.More... Initially this value is the same tool as toolManager, which is an instance of ToolManager. Setting this property also sets the currentTool if the old default tool is the currently running tool. Setting this property does not notify about any changed event; the new value must not be null. See also: currentTool toolManager
div {HTMLDivElement}	Gets or sets the Diagram's HTMLDivElement, via an HTML Element ID.More... This is typically set automatically when a Div is supplied as an argument to Diagram's constructor. Setting this property to a new value will clobber any HTML andinner DOM elements inside of both the new and the old divs.It will then populate the Div with the elements(inner Divs, Canvases) needed for the Diagram to function. If you want to disassociate the Diagram from the HTML Div element, set Diagram.div to null.If you remove a part of the HTML DOM containing a Div with a Diagram, you will need toset div to null in order for the page to recover the memory. You should not attempt to manually modify the contents of this Div.Changing this property value does not raise a Changed event.
documentBounds {Rect}	This read-only property returns the bounds of the diagram's contents, in document coordinates.More... This is normally computed and set by computeBounds during Diagram updatesthat can occur for any number of relevant reasons, such as a Part changing size. The Diagram's documentBounds can have an unvarying specific valueby setting the fixedBounds property. If the documentBounds are larger than the viewportBounds,scrollbars will appear on desktop browsers. You can disable scrolling with theallowHorizontalScroll and allowVerticalScroll properties, andyou can disable scrollbars themselves with the hasHorizontalScrollbarand hasVerticalScrollbar properties.
doubleClick {function(InputEvent) \| null}	Gets or sets the function to execute when the user double-primary-clickson the background of the Diagram.More... This typically involves a mouse-down/up/down/up in rapid successionat approximately the same position using the left (primary) mouse button.This property is used by the ClickSelectingToolwhen the user clicks on no object.The function is called in addition to the DiagramEventthat is raised with the name "BackgroundDoubleClicked". If this property value is a function, it is called with an InputEvent.By default this property is null. If you do provide a function that makes changes to the diagram or to its model,you should do so within a transaction -- call startTransaction and commitTransaction. See also: click contextClick GraphObject.doubleClick
firstInput {InputEvent}	Gets or sets the most recent mouse-down InputEvent that occurred.More... Setting this property does not notify about any changed event. See also: lastInput
fixedBounds {Rect}	Gets or sets a fixed bounding rectangle to be returned by documentBoundsand computeBounds.More... By default this has Double.NaN values, meaning that computeBoundswill compute the union of all of the parts in the Diagram to determine the documentBounds.If all x/y/width/height values are real numbers, this value is used as the documentBounds.
grid {Panel}	Gets or sets a Panel of type Panel.Grid acting as the background gridextending across the whole viewport of this diagram.
groupSelectionAdornmentTemplate {Adornment}	Gets or sets the default selection Adornment template, used to adorn selected Groups.More... Each Group can have its own Part.selectionAdornmentTemplate, which if non-null will take precedence over this Diagram property. This Adornment must not be in the visual tree of any Diagram.
groupTemplate {Group}	Gets or sets the default Group template used as the archetypefor group data that is added to the model.More... Setting this property just modifies the groupTemplateMapby replacing the entry named with the empty string.The value must not be null and must be a Group, not a Node or simple Part.This Part must not be in the visual tree of any Diagram.
groupTemplateMap {Map.}	Gets or sets a Map mapping template names to Groups.More... These groups are copied for each group data that is added to the model. The new value must not be null, nor may it contain a Node or Link or simple Part.The Links must not be in the visual tree of any Diagram.Replacing this Map will automatically call rebuildParts. If you modify this Map, by replacing a Group in it or by adding orremoving a map entry, you need to explicitly call rebuildParts afterwards.
hasHorizontalScrollbar {boolean}	Gets or sets whether the Diagram has a horizontal Scrollbar.More... To enable or disable scrolling itself, use allowHorizontalScroll and allowVerticalScroll. Adding or removing a scrollbar modifies the diagram's viewport. The initial value is true. See also: allowHorizontalScroll hasVerticalScrollbar
hasVerticalScrollbar {boolean}	Gets or sets whether the Diagram has a vertical Scrollbar.More... To enable or disable scrolling itself, use allowHorizontalScroll and allowVerticalScroll. Adding or removing a scrollbar modifies the diagram's viewport. The initial value is true. See also: allowVerticalScroll hasHorizontalScrollbar
highlighteds {Set.}	This read-only property returns the read-only collection of highlighted parts.More... Do not modify this collection.If you want to highlight or remove the highlight for a particular Part in a Diagram,set the Part.isHighlighted property.If you want to remove all highlights, call clearHighlighteds.If you want to removal all highlights and highlight a single object, call highlight.
initialAutoScale {EnumValue}	Gets or sets the initialAutoScale of the Diagram.More... The only accepted values are listed as constant properties of Diagram,such as Diagram.None, Diagram.Uniform, or Diagram.UniformToFill.Setting this will change the Diagram's Diagram.scale and Diagram.position, if appropriate. If you want to always automatically scale the Diagram, use autoScale instead.If you want to set the scale to a value on initialization (for instance every time the model is replaced),use initialScale. The default value is Diagram.None -- the scale and position are not automatically adjustedaccording to the area covered by the document. Note that depending on the values of maxScale and minScale, the actual value for scalemight be limited.
initialContentAlignment {Spot}	Gets or sets the initial content alignment Spot of this Diagram, to be used in determininghow parts are positioned initially relative to the viewport.More... For instance a spot of Spot.Center would ensure that the Diagram's contents are initially centered in the viewport. If you want the content to be constantly aligned with a spot, use contentAlignment instead. The default value is Spot.Default, which causes no automatic scrolling or positioning. See also: initialDocumentSpot initialViewportSpot
initialDocumentSpot {Spot}	Gets or sets the spot in the document's area that should be coincident with theinitialViewportSpot of the viewport when the document is first initialized.More... The default value is Spot.TopLeft.If you set this, often you will also want to set initialViewportSpot.If you set initialPosition, it will take precedence over this property. See also: initialViewportSpot initialPosition initialContentAlignment
initialPosition {Point} 1.1	Gets or sets the initial coordinates of this Diagram in the viewport, eventually setting the position.More... This value is relevant on initialization of a model or if delayInitialization is called.Value must be of type Point in document coordinates.The default is Point(NaN, NaN). Setting this property does not notify about any changed event. See also: initialDocumentSpot initialViewportSpot
initialScale {number} 1.1	Gets or sets the initial scale of this Diagram in the viewport, eventually setting the scale.More... This value is relevant on initialization of a model or if delayInitialization is called.The default is NaN.
initialViewportSpot {Spot}	Gets or sets the spot in the viewport that should be coincident with theinitialDocumentSpot of the document when the document is first initialized.More... The default value is Spot.TopLeft.If you set this, often you will also want to set initialDocumentSpot.If you set initialPosition, it will take precedence over this property. See also: initialDocumentSpot initialContentAlignment
isEnabled {boolean}	Gets or sets whether the user may interact with the Diagram.More... See also: isReadOnly isModelReadOnly
isModelReadOnly {boolean}	Gets or sets whether the Diagram's Diagram.model is Model.isReadOnly.More... See also: isReadOnly isEnabled
isModified {boolean}	Gets or sets whether this Diagram's state has been modified.More... Setting this property does not notify about any changed event,but it does raise the "Modified" DiagramEvent,although perhaps not immediately. Returns true if the Diagram has been changed,if the undoManager has recorded any changes, orif an undo has been performed without a corresponding redo. Replacing the model automatically sets this property to false after the initial layout has completed.The "Modified" DiagramEvent is also raised when an undo or a redo has finished.A "Modified" DiagramEvent listener must not modify this Diagram or its Model.
isMouseCaptured {boolean}	Gets or sets whether mouse events initiated within the Diagram will be captured.More... The initial value is true.Setting this property does not notify about any changed event.
isReadOnly {boolean}	Gets or sets whether the Diagram may be modified by the user,while still allowing the user to scroll, zoom, and select.More... The initial value is false. See also: isModelReadOnly isEnabled
isTreePathToChildren {boolean}	Gets or sets whether the Diagram tree structure is defined bylinks going from the parent node to their children, or vice-versa.More... By default this property is true: links go from the parent node to the child node.
lastInput {InputEvent}	Gets or sets the last InputEvent that occurred.More... This property is useful in tools and real-time operations for determiningwhere the mouse pointer was most recently located. Setting this property does not notify about any changed event. See also: firstInput
layers {Iterator.}	This read-only property returns an iterator for this Diagram's Layers.More... See also: addLayer removeLayer
layout {Layout}	Gets or sets the Layout used to position all of the top-level nodes and links in this Diagram.More... By default this property is an instance of a simple Layoutthat assigns positions to all parts that need it.The value cannot be null.
links {Iterator.}	This read-only property returns an iterator of all Links in the Diagram.More... This includes both data-bound and unbound links,and both top-level links and links inside Groups.
linkSelectionAdornmentTemplate {Adornment}	Gets or sets the default selection Adornment template, used to adorn selected Links.More... Each Link can have its own Part.selectionAdornmentTemplate, which if non-null will take precedence over this Diagram property. This Adornment must not be in the visual tree of any Diagram.
linkTemplate {Link}	Gets or sets the default Link template used as the archetypefor link data that is added to the model.More... Setting this property just modifies the linkTemplateMapby replacing the entry named with the empty string.The value must not be null and must be a Link, not a Node or simple Part.This Link must not be in the visual tree of any Diagram.
linkTemplateMap {Map.}	Gets or sets a Map mapping template names to Links.More... These links are copied for each link data that is added to the model. The new value must not be null and must contain only Links, not Nodes or simple Parts.The Links must not be in the visual tree of any Diagram.Replacing this Map will automatically call rebuildParts. If you modify this Map, by replacing a Link in it or by adding orremoving a map entry, you need to explicitly call rebuildParts afterwards.
maxScale {number}	Gets or sets the largest value that scale may take.More... This property is only used to limit the range of new values of scale. The default value is 100.0.Values must be no less than one.Setting this to a value that is less than the current scalewill cause the current diagram scale to be set to this new value.
maxSelectionCount {number}	Gets or sets the maximum number of selected objects.More... The default value is a large positive integer.Values must be non-negative.Decreasing this value may cause objects to be removed from selectionin order to meet the new lower limit.
minScale {number}	Gets or sets the smallest value greater than zero that scale may take.More... This property is only used to limit the range of new values of scale. The default value is 0.0001.Values must be larger than zero and not greater than one.Setting this to a value that is greater than the current scalewill cause the current diagram scale to be set to this new value.
model {Model}	Gets or sets the Model holding data corresponding to thedata-bound nodes and links of this Diagram.More... Replacing this value causes all of the bound Nodes and Links to be deleted and re-createdfrom the new model data. Models may be shared by multiple Diagrams. One common approach is to have twoDiagrams displaying the same Model but using different templates(see nodeTemplate, nodeTemplateMap, and the associated link and group properties) and sometimes even different Layouts. Setting this property does not notify about any changed event; the new value must not be null.Typically a new Model will have its own UndoManager, thereby replacing the Diagram'scurrent UndoManager. Replacing or re-setting the model will re-initialize the Diagram, taking in to accountinitialPosition, initialScale, initialAutoScale, and initialContentAlignment.It will also set isModified to false. It is an error to replace the Diagram.model while a transaction is in progress.
mouseDragOver {function(InputEvent) \| null}	Gets or sets the function to execute when the user is dragging the selection inthe background of the Diagram during a DraggingTool drag-and-drop,not over any GraphObjects.More... If this property value is a function, it is called with an InputEvent.It is called within the transaction performed by the DraggingTool.By default this property is null. This function is called with Diagram.skipsUndoManager temporarily set to true,so that any changes to GraphObjects are not recorded in the UndoManager.You do not need to start and commit any transaction in this function.After calling this function the diagram will be updated immediately. For example, if you want to prevent the user from dropping Parts into the background of the diagram,and want to provide feedback about that during a drag: myDiagram.mouseDragOver = function(e) { myDiagram.currentCursor = "no-drop"; }; See also: mouseDrop GraphObject.mouseDragEnter GraphObject.mouseDragLeave
mouseDrop {function(InputEvent) \| null}	Gets or sets the function to execute when the user drops the selection inthe background of the Diagram at the end of a DraggingTool drag-and-drop,not onto any GraphObjects.More... If this property value is a function, it is called with an InputEvent.It is called within the transaction performed by the DraggingTool.By default this property is null. For example, if you want to prevent the user from dropping Parts into the background of the diagram: myDiagram.mouseDrop = function(e) { myDiagram.currentTool.doCancel(); }; See also: mouseDragOver GraphObject.mouseDrop
mouseHold {function(InputEvent) \| null}	Gets or sets the function to execute when the user holds the mouse stationary inthe background of the Diagram while holding down a button,not over any GraphObjects.More... This property is used by the ToolManager. If this property value is a function, it is called with an InputEvent.By default this property is null. If you do provide a function that makes changes to the diagram or to its model,you should do so within a transaction -- call startTransaction and commitTransaction. See also: GraphObject.mouseHold
mouseHover {function(InputEvent) \| null}	Gets or sets the function to execute when the user holds the mouse stationary inthe background of the Diagram without holding down any buttons,not over any GraphObjects.More... This property is used by the ToolManager. If this property value is a function, it is called with an InputEvent.By default this property is null. If you do provide a function that makes changes to the diagram or to its model,you should do so within a transaction -- call startTransaction and commitTransaction. See also: mouseOver GraphObject.mouseHover ToolManager.doMouseHover
mouseOver {function(InputEvent) \| null}	Gets or sets the function to execute when the user moves the mouse inthe background of the Diagram without holding down any buttons,not over any GraphObjects.More... This property is used by the ToolManager. If this property value is a function, it is called with an InputEvent.By default this property is null. This function is called with Diagram.skipsUndoManager temporarily set to true,so that any changes to GraphObjects are not recorded in the UndoManager.You do not need to start and commit any transaction in this function.After calling this function the diagram will be updated immediately. See also: mouseHover GraphObject.mouseOver
nodes {Iterator.}	This read-only property returns an iterator of all Nodes and Groups in the Diagram.More... This includes both data-bound and unbound nodes,and both top-level nodes and nodes inside Groups.All of the simple Parts are accessible via the parts property. See also findTopLevelGroups and findTreeRoots.
nodeSelectionAdornmentTemplate {Adornment}	Gets or sets the default selection Adornment template, used to adorn selected Parts other than Groups or Links.More... Each Node or simple Part can have its own Part.selectionAdornmentTemplate, which if non-null will take precedence over this Diagram property. This Adornment must not be in the visual tree of any Diagram.
nodeTemplate {Part}	Gets or sets the default Node template used as the archetypefor node data that is added to the model.More... Setting this property just modifies the nodeTemplateMapby replacing the entry named with the empty string. The value must not be null.The template may be either a Node or a simple Part,but not a Link or a Group. This Part must not be in the visual tree of any Diagram.
nodeTemplateMap {Map.}	Gets or sets a Map mapping template names to Parts.More... These nodes are copied for each node data that is added to the model. The new value must not be null and must contain Nodes or simple Parts.These Parts must not be in the visual tree of any Diagram.Replacing this Map will automatically call rebuildParts. If you modify this Map, by replacing a Node or by adding orremoving a map entry, you need to explicitly call rebuildParts afterwards.Any new map values must not be Links or Groups. If you want to create Groups, use groupTemplateMap instead.
padding {Margin\|number}	Gets or sets the Margin that describes the Diagram's padding,which controls how much extra space there is around the area occupied by the document.More... This keeps nodes from butting up against the side of the diagram (unless scrolled). The default value is a margin of 5, all around the edge of the document.
parts {Iterator.}	This read-only property returns an iterator of all Parts in the Diagramthat are not Nodes or Links or Adornments.More... This includes both data-bound and unbound parts,and both top-level parts and parts inside Groups.Use the nodes or links properties for getting thecollection of all Nodes or Links in the diagram.
position {Point}	Gets or sets the coordinates of this Diagram in the viewport.More... Value must be of type Point in document coordinates.The default is Point(NaN, NaN), but is typically set to a real value when a Diagram is initialized. Scrolling and panning the Diagram modify the Diagram's position. Setting this property does not notify about any changed event.However you can listen with addDiagramListener for a DiagramEventwith the name "ViewportBoundsChanged".The viewportBounds x and y values are always the same as the Diagram's position values.
positionComputation {function(Diagram, Point):Point \| null} 1.5	Gets or sets the function used to determine the position that this Diagram can be scrolled or moved to.More... By default this function is null and the Diagram's position is bound only by the document bounds. When this property is set the function is given a reference to the diagram and the proposed new position Point.The function must return a new point. An example that disallows decimal position values: function computeIntegralPosition(diagram, pt) { return new go.Point(Math.floor(pt.x), Math.floor(pt.y)); } The function, if supplied, must not have any side-effects.
scale {number}	Gets or sets the scale transform of this Diagram.More... Value must be a positive number.The default value is 1.Any new value will be coerced to be between minScale and maxScale. Scale can automatically be set by the autoScale property.There are also initialScale and initialAutoScale forsetting the scale on (re)initialization of a Diagram. Setting this property does not notify about any changed event.However you can listen with addDiagramListener for a DiagramEventwith the name "ViewportBoundsChanged".
scaleComputation {function(Diagram, number):number \| null} 1.5	Gets or sets the function used to determine valid scale values for this Diagram.
scrollHorizontalLineChange {number}	Gets or sets the distance in screen pixels that the horizontal scrollbar will scrollwhen scrolling by a line.More... The default value is 16. See also: scrollVerticalLineChange
scrollMargin {Margin\|number} 1.5	Gets or sets a scrollable area that surrounds the document bounds, allowing the user to scroll into empty space.More... The margin is only effective in each direction when the document bounds plus margin is greater than the viewport bounds. The default value is a margin of 0, all around the edge of the document.
scrollMode {EnumValue} 1.5	Gets or sets the scrollMode of the Diagram, allowing the user to eitherscroll to document bound borders with Diagram.DocumentScroll,or scroll endlessly with Diagram.InfiniteScroll.More... The default value is Diagram.DocumentScroll.
scrollVerticalLineChange {number}	Gets or sets the distance in screen pixels that the vertical scrollbar will scrollwhen scrolling by a line.More... The default value is 16. See also: scrollHorizontalLineChange
selection {Set.}	This read-only property returns the read-only collection of selected objects.More... Do not modify this collection.If you want to select or deselect a particular object in a Diagram,set the Part.isSelected property.If you want to deselect all objects, call clearSelection.If you want to deselect all objects and select a single object, call select. You can limit how many objects the user can select by setting maxSelectionCount.
skipsUndoManager {boolean}	Gets or sets whether ChangedEvents are not recorded by the UndoManager.More... The initial and normal value is false.WARNING: while this property is true do not perform any changes that cause any previous transactionsto become impossible to undo. While this property is true, changing the Diagram or any GraphObject does not call UndoManager.handleChanged.Even when this property is true,transactions (such as calls to startTransaction) andundo/redo (such as calls to CommandHandler.undo)are still delegated to the undoManager. You should set this to true only temporarily, and you should remember its previous valuebefore setting this to true.When finishing the period for which you want the UndoManager to be disabled,you should set this back to the remembered value it had before it was set to true. For more permanent disabling of the UndoManager, set UndoManager.isEnabled to false. Setting this property also sets Model.skipsUndoManager to the same value.Setting this property does not notify about any changed event.
toolManager {ToolManager}	Gets or sets the ToolManager for this Diagram.More... This tool is used for mode-less operation.It is responsible for choosing a particular tool to run as the currentTool. This tool is normally also the defaultTool.If you don't want the ToolManager to run at all,replace the defaultTool with your own tool. Setting this property does not notify about any changed event; the new value must not be null.If you set this property, you will probably also want to set defaultTool. See also: defaultTool
toolTip {Adornment\|HTMLInfo}	This Adornment or HTMLInfo is shown when the mouse stays motionless in the background.More... The default value is null, which means no tooltip is shown. Here is a simple example: diagram.toolTip = $(go.Adornment, "Auto", $(go.Shape, { fill: "#CCFFCC" }), $(go.TextBlock, { margin: 4 }, "This diagram lets you control the world.") ); See also: GraphObject.toolTip ToolManager.doToolTip
undoManager {UndoManager}	This read-only property returns the UndoManager for this Diagram, which actually belongs to the model.More... The default UndoManager has its UndoManager.isEnabled property set to false.If you want users to undo and redo, you should set that property to true once you have initialized the Diagram or its Model. Note that the UndoManager might be shared with other Diagrams that are showing the same Model.The UndoManager might also be shared with other Models too.
validCycle {EnumValue}	Gets or sets what kinds of graphs this diagram allows the user to draw.More... By default this property is Diagram.CycleAll -- all kinds of cycles are permitted.Common values include Diagram.CycleDestinationTree and Diagram.CycleNotDirected.
viewportBounds {Rect}	This read-only property returns the bounds of the portion of the Diagram in document coordinates that is viewable from its HTML Canvas.More... Typically when the viewport bounds are smaller than the documentBounds, the user can scroll or pan the view. The x and y coordinates are equal to the position of the Diagram,and the width and height are equal to the Diagram's canvas width and height,divided by the scale.
zoomPoint {Point} 1.2	Gets or sets the zoom point of this Diagram, in viewport coordinates.More... This is used by Tool.standardMouseWheel and scale-setting commands to control where to zoom in or out. Typical usage is to remember the value of this property andto set this property to some point within the viewport (between zero and the canvas width and height).This is commonly accomplished by using the InputEvent.viewPoint of Diagram.lastInput.Then one changes the scale somehow, perhaps by executing one of the CommandHandler commands,or by rotating the mouse wheel, or just by setting the Diagram.scale property.Finally one restores the original value of this property. The default value is Point(NaN, NaN).Value must be of type Point, in element coordinates, not in document coordinates.Setting this property does not notify about any changed event.

Method Summary Details

Name, Return Type	Description
add(part)	Adds a Part to the Layer that matches the Part's Part.layerName,or else the default layer, which is named with the empty string.More... Normally parts added to a diagram are top-level parts.If you want nodes to be members of a Group, in addition to calling this methodcall Group.addMembers or set each Part.containingGroup. Parameters: {Part} part
addChangedListener(listener)	Register an event handler that is called when there is a ChangedEvent because this Diagramor one of its Parts has changed, but not because the Model or any model data has changed.More... It is unusual to listen for Diagram ChangedEvents --it is far more common to listen for specific DiagramEvents by calling addDiagramListener,or to listen for Model ChangedEvents (i.e. changes to the model) by calling addModelChangedListener. See also: removeChangedListener Parameters: {function(ChangedEvent)} listener a function that takes a ChangedEvent as its argument.
addDiagramListener(name, listener)	Register an event handler that is called when there is a DiagramEvent of a given name.More... See the DiagramEvent documentation for a complete listing of diagram event names and their purposes. Parameters: {string} name the name is normally capitalized, but this method uses case-insensitive comparison. {function(DiagramEvent)} listener a function that takes a DiagramEvent as its argument.
addLayer(layer)	Adds a new Layer to the list of layers.More... If Layer.isTemporary is false, the layer is added after all existing non-temporary layers.If Layer.isTemporary is true, the layer is added as the very last layer. See also: addLayerBefore addLayerAfter removeLayer findLayer Parameters: {Layer} layer The new Layer to add. It is an error if the Layer already belongs to a Diagram.
addLayerAfter(layer, existingLayer)	Adds a layer to the list of layers after a specified layer.More... This method can also re-order layers. See also: addLayer addLayerBefore removeLayer Parameters: {Layer} layer the new Layer to add or existing Layer to move in Z-order. {Layer} existingLayer the other Layer in this Diagram which should come just before the new or moved layer.
addLayerBefore(layer, existingLayer)	Adds a layer to the list of layers before a specified layer.More... This method can also re-order layers. See also: addLayer addLayerAfter removeLayer Parameters: {Layer} layer the new Layer to add or existing Layer to move in Z-order. {Layer} existingLayer the other Layer in this Diagram which should come just after the new or moved layer.
addModelChangedListener(listener) 1.6	Register an event handler on this Diagram's Diagram.model that is called when there is a ChangedEvent on the Model, not in this diagram.More... Be sure to call removeModelChangedListener when you are done with the diagram. This is convenient when the Diagram.model may be replaced.Using this method to register a Model Changed listener is more convenient than calling Model.addChangedListener directlybecause when this diagram's Model is replaced, one does not need to call Model.removeChangedListener on the old Modeland then Model.addChangedListener again on the new Model. You can establish Model Changed listeners when you create a Diagram with GraphObject.make. For example: $(go.Diagram, . . ., { "ModelChanged": function(e) { if (e.isTransactionFinished) saveModel(); } . . . }) See also: removeModelChangedListener Parameters: {function(ChangedEvent)} listener a function that takes a ChangedEvent as its argument.
alignDocument(documentspot, viewportspot)	Aligns the Diagram's position based on a desired document Spot and viewport Spot.More... Parameters: {Spot} documentspot {Spot} viewportspot
centerRect(r)	Modifies the position to show a given Rect of the Diagram by centering theviewport on that Rect.More... See also scrollToRect See also: scrollToRect scroll Parameters: {Rect} r
clear()	Removes all Parts from the Diagram, including unbound Parts and the background grid,and also clears out the Model and UndoManager.More... This operation is not undoable. Alternative actions are to replace the model with a new Model(probably a GraphLinksModel or a TreeModel),or to set Model.nodeDataArray with an empty JavaScript Array(and GraphLinksModel.linkDataArray). This does not remove any listeners from the diagram.
clearHighlighteds() 1.4	Remove highlights from all Parts.More... This removes all parts from the highlighteds collection. See also: highlight highlightCollection Part.isHighlighted
clearSelection()	Deselect all selected Parts.More... This removes all parts from the selection collection.This method raises the "ChangingSelection" and "ChangedSelection" Diagram events. See also: select selectCollection
commitTransaction(tname) {boolean}	Commit the changes of the current transaction.More... This just calls UndoManager.commitTransaction. Parameters: {string=} tname a descriptive name for the transaction. Returns: {boolean} the value returned by UndoManager.commitTransaction.
computeBounds() {Rect}	This is called during a Diagram update to determine a new value for documentBounds.More... By default this computes the union of the bounds of all the visibleGraphObjects in this Diagram, unless Diagram.fixedBounds is set. To compute the bounds of a collection of Parts, call computePartsBounds. Returns: {Rect} a Rect in document coordinates.
computePartsBounds(coll, includeLinks) {Rect} 1.1	Find the union of the GraphObject.actualBounds of all of the Parts in the given collection,excluding Links unless the second argument is true.More... Unlike computeBounds, this ignores the visibility of each Part and does not add any padding to the result. Parameters: {Iterable.} coll a collection of Parts. {boolean=} includeLinks defaults to false Returns: {Rect} This returns the bounding area of the given Parts;if there are no Parts in the collection, this returns a Rect with zero width and height and an X and Y that are NaN.
copyParts(coll, diagram, check) {Map.} 1.3	Make a copy of a collection of Parts and return them in a Map mapping each original Part to its copy.More... It may optionally add them to a given Diagram.Copying a Group will also copy its member Nodes and Links.Copying a Link will also copy any label Nodes that it owns. This does not perform a transaction nor does it raise a DiagramEvent.Call CommandHandler.copySelection, which calls this method,if you want to copy all selected Parts into the clipboard.The CommandHandler.copySelection command may also copy additional Parts as well, depending on CommandHandler.copiesTree. Parameters: {Iterable.} coll A List or a Set or Iterator of Parts. {Diagram} diagram The destination diagram; if null, the copied parts are not added to this diagram. {boolean} check Whether to check Part.canCopy on each part. Returns: {Map.}
delayInitialization(func) 1.1	Updates the diagram immediately, then resets initialization flags so thatactions taken in the argument function will be considered part of Diagram initialization,and will participate in initial layouts, initialAutoScale, initialContentAlignment, etc.More... This is useful in situations where you do not wish for the first content added to the diagram to be consideredthe "initial" content, such as with a Node that represents a "Loading" bar. Parameters: {function()\|null=} func an optional function of actions to perform as part of another diagram initialization.
findLayer(name) {Layer}	Finds a layer with a given name.More... See also: addLayerBefore addLayerAfter removeLayer Parameters: {string} name Returns: {Layer} a Layer with the given name, or null if no such layer was found.
findLinkForData(linkdata) {Link}	Look for a Link corresponding to a GraphLinksModel's link data object.More... Parameters: {Object} linkdata a JavaScript object matched by reference identity; use findLinksByExample if you want to find those Links whose data matches an example data object Returns: {Link} an existing Link in this Diagram that wascreated because its `Part.data` was the link data in the Diagram's Model.
findLinksByExample(examples) {Iterator.} 1.5	Return a collection of Links that are bound to data whose properties have valuesthat match those specified by the given example data.More... See the documentation of findNodesByExample for how the exampledata can match data of bound Parts. See also: findNodesByExample Parameters: {...Object} examples one or more JavaScript Objects whose properties are either predicates to be applied or RegExps to be tested or values to be compared to the corresponding data property value Returns: {Iterator.}
findNodeForData(nodedata) {Node}	Look for a Node or Group corresponding to a model's node data object.More... Parameters: {Object} nodedata a JavaScript object matched by reference identity; use findNodesByExample if you want to find those Nodes whose data matches an example data object Returns: {Node} an existing Node or Group in this Diagram that wascreated because its `Part.data` was the node data in the Diagram's Model;this will be null if there is no such part or if it's just a Part or Link.
findNodeForKey(key) {Node}	Look for a Node or Group corresponding to a model's node data object's unique key.More... Parameters: {(string\|number\|undefined)} key a string or number. Returns: {Node} null if a node data with that key cannot be found in the model,or if a corresponding Node or Group cannot be found in the Diagram,or if what is found is just a Part.
findNodesByExample(examples) {Iterator.} 1.5	Return a collection of Nodes and Groups that are bound to data whose properties have valuesthat match those specified by the given example data.More... For example, calling this method with an argument object:`{ sex: "M", name: /^Alex/i, age: function(n) { return n >= 18; } }`will return an iterator of Nodes whose `Node.data` is a JavaScript object whose: sex is "M" (a case-sensitive string comparison), and name starts with the string "Alex" (using a case-insensitive match), and age is greater than or equal to 18 Here is how an example value can match the corresponding data value: A string, number, or boolean is compared with the === operator. A function is treated as a predicate and applied to the data value. A regular expression (RexExp) is matched against the toString() of the data value.Common expressions include: `/abc/` matches any string that includes exactly the substring "abc" `/abc/i` matches any string that includes the substring "abc", but uses a case-insensitive comparison `/^no/i` matches any string that starts with "no", ignoring case `/ism$` matches any string that ends with "ism" exactly `/(green\|red) apple/` matches any string that includes either "green apple" or "red apple" For more details read Regular Expressions (mozilla.org). An Array requires the data value to also be an Array of equal or greater length.Each example array item that is not undefined is matched with the corresponding data array item. An Object is recursively matched with the data value, which must also be an Object. All properties given by the argument example data must be present on the node data,unless the example property value is undefined.All other data properties are ignored when matching. When multiple argument objects are given, if any of the objects match the node's data,the node is included in the results. See also: findLinksByExample Parameters: {...Object} examples one or more JavaScript Objects whose properties are either predicates to be applied or RegExps to be tested or values to be compared to the corresponding data property value Returns: {Iterator.}
findObjectAt(p, navig, pred) {GraphObject}	Find the front-most GraphObjectat the given point in document coordinates.More... If Layer.visible is false, this method will not find any objects in that layer.However, Layer.opacity does not affect this method. Example usage: // Returns the top-most object that is a selectable Part, or null if there isn't onemyDiagram.findObjectAt( myDiagram.lastInput.documentPoint, // Navigation function function(x) { return x.part; }, // Because of the navigation function, x will always be a Part. function(x) { return x.canSelect(); }); See also: findObjectsAt findObjectsIn findObjectsNear findPartAt Parameters: {Point} p A Point in document coordinates. {function(GraphObject):GraphObject \| null=} navig A function taking a GraphObject andreturning a GraphObject, defaulting to the identity. {function(GraphObject):boolean \| null=} pred A function taking the GraphObjectreturned by navig and returning true if that object should be returned,defaulting to a predicate that always returns true. Returns: {GraphObject} The first GraphObject returned by the navig functionand satisfying the pred function that is at the point p, in Z-order from front to back,or else null if nothing is found.
findObjectsAt(p, navig, pred, coll) {Iterable.}	Return a collection of the GraphObjectsat the given point in document coordinates.More... If Layer.visible is false, this method will not find any objects in that layer.However, Layer.opacity does not affect this method. Example usage: // Returns the Nodes that are at a given point, overlapping each othermyDiagram.findObjectsAt(somePoint, // Navigation function -- only return Nodes function(x) { var p = x.part; return (p instanceof go.Node) ? p : null; }); See also: findObjectAt findObjectsIn findObjectsNear findPartAt Parameters: {Point} p A Point in document coordinates. {function(GraphObject):GraphObject \| null=} navig A function taking a GraphObject andreturning a GraphObject, defaulting to the identity.If this function returns null, the given GraphObject will not be included in the results. {function(GraphObject):boolean \| null=} pred A function taking the GraphObjectreturned by navig and returning true if that object should be returned,defaulting to a predicate that always returns true. {List.\|Set.=} coll An optional collection (List or Set) to add the results to. Returns: {Iterable.} a collection of GraphObjects returned by the navig functionand satisfying the pred that are located at the point p, or else an empty collection.If a List or Set was passed in, it is returned.
findObjectsIn(r, navig, pred, partialInclusion, coll) {Iterable.}	Returns a collection of all GraphObjects that are inside or that intersecta given Rect in document coordinates.More... If Layer.visible is false, this method will not find any objects in that layer.However, Layer.opacity does not affect this method. Example usage: // Returns the Links that intersect a given rectangle and have a certain data propertymyDiagram.findObjectsIn(someRect, // Navigation function -- only return Links function(x) { var p = x.part; return (p instanceof go.Link) ? p : null; }, // Predicate that always receives a Link, due to above navigation function function(link) { return link.data.someProp > 17; }, // the links may only partly overlap the given rectangle true); See also: findObjectAt findObjectsAt findObjectsNear findPartAt Parameters: {Rect} r A Rect in document coordinates. {function(GraphObject):GraphObject \| null=} navig A function taking a GraphObject andreturning a GraphObject, defaulting to the identity.If this function returns null, the given GraphObject will not be included in the results. {function(GraphObject):boolean \| null=} pred A function taking the GraphObjectreturned by navig and returning true if that object should be returned,defaulting to a predicate that always returns true. {boolean=} partialInclusion Whether an object can match if it merely intersects the rectangular area (true) orif it must be entirely inside the rectangular area (false). The default value is false. {List.\|Set.=} coll An optional collection (List or Set) to add the results to. Returns: {Iterable.} a collection of GraphObjects returned by the navig functionand satisfying the pred function that are within the rectangle r, or else an empty collection.If a List or Set was passed in, it is returned.
findObjectsNear(p, dist, navig, pred, partialInclusion, coll) {Iterable.}	Returns a collection of all GraphObjects that are within a certain distanceof a given point in document coordinates.More... If Layer.visible is false, this method will not find any objects in that layer.However, Layer.opacity does not affect this method. Example usage: // Returns the Nodes that intersect a given circular area and have a certain data propertymyDiagram.findObjectsNear(somePoint, // The circular area is centered at somePoint and has radius 100 100, // Navigation function -- only return Nodes function(x) { var p = x.part; return (p instanceof go.Node) ? p : null; }, // Predicate that always receives a Node, due to above navigation function function(node) { return node.data.someProp > 17; }, // the nodes may only partly overlap the given circular area true); See also: findObjectAt findObjectsAt findObjectsIn findPartAt Parameters: {Point} p A Point in document coordinates. {number} dist The distance from the point. {function(GraphObject):GraphObject \| null=} navig A function taking a GraphObject andreturning a GraphObject, defaulting to the identity.If this function returns null, the given GraphObject will not be included in the results. {function(GraphObject):boolean \| null=} pred A function taking the GraphObjectreturned by navig and returning true if that object should be returned,defaulting to a predicate that always returns true. {=} partialInclusion* Whether an object can match if it merely intersects the circular area (true) orif it must be entirely inside the circular area (false). The default value is true.The default is true. {List.\|Set.=} coll An optional collection (List or Set) to add the results to. Returns: {Iterable.} a collection of GraphObjects returned by the navig functionand satisfying the pred that are located near the point p, or else an empty collection.If a List or Set was passed in, it is returned.
findPartAt(p, selectable) {Part}	This convenience function finds the front-most Partthat is at a given point that might be selectable and that is not in a temporary layer.More... This just calls findObjectAt with appropriate arguments,but ignoring Layers that are Layer.isTemporary. See also: findObjectAt findObjectsAt findObjectsIn findObjectsNear Parameters: {Point} p a Point in document coordinates. {boolean} selectable Whether to only consider parts that are Part.selectable. Returns: {Part}
findPartForData(data) {Part}	Look for a Part, Node, Group, or Link corresponding to a Model's data object.More... We recommend that you call findNodeForData or findLinkForData if you are looking for a Node or a Link. Parameters: {Object} data a JavaScript object matched by reference identity Returns: {Part} an existing Part in this Diagram that wascreated because its `Part.data` was the data in the Diagram's Model.
findPartForKey(key) {Part}	Look for a Part or Node or Group corresponding to a model's data object's unique key.More... This will find a Link if the model is a GraphLinksModel that is maintaining a key on the link data objects. Parameters: {(string\|number\|undefined)} key a string or number. Returns: {Part} null if a data with that key cannot be found in the model,or if a corresponding Part cannot be found in the Diagram.This will not return a Link unless the model is a GraphLinksModel andGraphLinksModel.linkKeyProperty has been set.If the same key is used for both a node data object and a link data object, this will return a Node.
findTopLevelGroups() {Iterator.} 1.2	Returns an iterator of all Groups that are at top-level,in other words that are not themselves inside other Groups.More... This is useful for when you want to traverse the diagram's graph by recursing into Groups. Returns: {Iterator.}
findTreeRoots() {Iterator.} 1.2	Returns an iterator of all top-level Nodes that have no tree parents.More... This is useful for when you want to traverse the diagram's graph by starting at the root of each tree,assuming that the diagram consists of one tree or a forest of trees. Returns: {Iterator.}
focus()	Explicitly bring HTML focus to the Diagram's canvas.More... Used in tools that may create other HTML elements such as TextEditingTool.This method is not overridable.
<static> Diagram.fromDiv(div) {Diagram}	This static function gets the Diagram that is attached to an HTML DIV element.More... Parameters: {Element\|string} div Returns: {Diagram} null if there is no Diagram associated with the given DIV,or if the argument is not a DIV element nor a string naming such a DIV element in the HTML document.
highlight(part) 1.4	Make the given part the only highlighted part.More... See also: Part.isHighlighted highlightCollection clearHighlighteds Parameters: {Part} part a Part that is already in a layer of this Diagram.If the value is null, this does nothing.
highlightCollection(coll) 1.4	Highlight all of the Parts supplied in the given collection, and clear all other highlighted Parts.More... See also: Part.isHighlighted highlight clearHighlighteds Parameters: {Iterable.\|Array.} coll a List or Set or Iterator or Array, of Parts to be highlighted.
<static> Diagram.inherit(derivedclass, baseclass)	This static function declares that a class (constructor function) derives from another class --*but please note that most classes do not support inheritance.More... Because you must not modify the prototypes for the GoJS* classes,in order to override methods you need to define a new class that inherits from a predefined class.You can then modify the prototype of your derived class. Typical usage is: function BaseClass() { this._total = 0; } BaseClass.prototype.increment = function(x) { this._total += x; } function DerivedClass() { this._anotherProperty = ""; } go.Diagram.inherit(DerivedClass, BaseClass); DerivedClass.prototype.someMethod = ...; *Note that most classes do not support inheritance.Currently you can only inherit from Layout, Tool, CommandHandler, and Link or their subclasses.When you override a method, you must strongly consider calling the base method.Please read the Introduction page on Extensions for how to override methods and how to call a base method. The call to `Diagram.inherit` should be made immediately after defining the subclass constructor functionand before defining any new methods or overriding any base class methods.You must not call this static function more than once on a derived class. The need for subclassing is greatly diminished by the presence of a number of properties that have functional values.Setting such a property to a function will cause that function to be called as if it werean event handler for that particular object.Example properties include: GraphObject.click, GraphObject.mouseEnter, Part.layerChanged,Node.treeExpandedChanged, LinkingBaseTool.linkValidation, CommandHandler.memberValidation,TextEditingTool.textValidation. Parameters: {Function} derivedclass* {Function} baseclass
layoutDiagram(invalidateAll)	Perform all invalid layouts.More... If the optional argument is true,this will perform all of the layouts (Diagram.layout and all Group.layouts),not just the invalid ones. Under normal circumstances you should not need to call this method,because layouts will be performed automatically after they become invalid.However you may have disabled automatic layouts by setting Layout.isInitialand/or Layout.isOngoing to false, or by restricting a Part's Part.layoutConditions.If that is the case you might call this method(perhaps due to a user command) to perform the layout at a time of your choosing. Parameters: {boolean=} invalidateAll If true, this will explicitly set Layout.isValidLayout to false on each Layout in the diagram.
makeImage(properties) {HTMLImageElement}	Create an HTMLImageElement that contains a bitmap of the current Diagram.More... This method is just a convenience function that creates an image,sets its source to the returned string of makeImageData,and returns a reference to that Image. By default this method returns a snapshot of the visible diagram, but optional arguments give more options. At the current time methods such as Diagram.makeImage,Diagram.makeImageData and Diagram.makeSvg do not work on Overviews. See also: makeImageData makeSvg Parameters: {{ size: Size, scale: number, maxSize: Size, position: Point, parts: Iterable, padding: (Margin\|number), showTemporary: boolean, showGrid: boolean, document: Document, type: string, details: * }\|Object=} properties a JavaScript object detailing optional arguments for image creation, to be passed to makeImageData. Returns: {HTMLImageElement} An HTML Image element.
makeImageData(properties) {ImageData\|string}	Create a bitmap of the current Diagram encoded as a base64 string, or returned as an ImageData object.More... This method uses the toDataURL method of the HTMLCanvasElement to create the data URL,or the getImageData method of the Canvas Context.Unlike toDataURL, this method will not throw an error if cross-domain imageswere drawn on the canvas, instead it will return a data URL of a bitmap with those images omitted. See the page on Making Images for usage examples. At the current time methods such as Diagram.makeImage,Diagram.makeImageData and Diagram.makeSvg do not work on Overviews. See also: makeImage Parameters: {{ size: Size, scale: number, maxSize: Size, position: Point, parts: Iterable, padding: (Margin\|number), showTemporary: boolean, showGrid: boolean, document: Document, returnType: string, callback: function(Blob), type: string, details: * }\|Object=} properties a JavaScript object detailing optional arguments for image creation. Image creation arguments: size:The size of the created image, as a Size, limited by the maxSize property.If no scale or position is specified then the diagram will be scaled to fit the given size.If you set a size, you should also set a position. If you are scaling the diagram, you may also want to scale the size. scale:The scale of the diagram. If scale is specified and size is not, the resulting image will be sized to uniformlyfit the space needed for the given scale.Can be constrained by the maxSize property. A scale value of `NaN` willautomatically scale ot fit within the maxSize, but may be smaller, with a maximum computed scale of 1. maxSize:The maximum size of the created image, as a Size. The default value is `(Infinity, Infinity)` for SVG and `(2000, 2000)` for images.This is typically used when scale is specified. position:The position of the diagram, as a Point.By default this is the position of Diagram.documentBounds with the Diagram.padding removed.If a specific parts collection is used, by default this is the top-left diagram position of their collective bounds.If you set a `position`, you should also set a `size`. parts:An iterator of GraphObjects, typically Parts, such as one from Diagram.selection or Layer.parts.If GraphObjects are specified their containing Part will be drawn. By default all Parts are drawn except temporary parts (see showTemporary). padding:A Margin (or number) to pad the image with. If a size is specified,the padding will not increase the image size, it will only offset the Diagram contents within the image.The default value is a padding of `1`. background:A valid CSS color to replace the default (transparent) canvas background. Any padding area is also colored. showTemporary:A boolean value, defaulting to false,that determines whether or not temporary objects such as adornments are included in the image. showGrid:A boolean value, defaulting to the value of showTemporary,that determines whether or not the Grid Layer (containing Diagram.grid) is included in the imageregardless of the value of showTemporary.This is useful if you want to include the grid but not adornments, or vice versa. document:An HTML Document, defaulting to `window.document`This may be useful to set if you intend your Image or SVG to be opened in a new window. Additional Image-specific arguments: type:The optional MIME type of the image. Valid values are typically `"image/png"` and `"image/jpeg"`.Some browsers allow `"image/webp"`. The default value is `"image/png"`, and unrecognized values will defer to the default. returnType:The optional return type of the image data. Valid values are `"ImageData"`, `"string"`, and `"blob"`.The `"string"` option returns a base64 string representation of the image.The `"ImageData"` option returns an `ImageData` object representation of the image.The `"blob"` option requires that the callback property is also defined.The default value is `"string"`, and unrecognized values will return a string. callback:Only used if the returnType is `"blob"`.The function to call when a blob is finished creation. It has one argument, the blob object.See the Minimal Image Blob Download sample for an example usage,which also demonstrates downloading an image file without involving a web server. details:The optional details to pass to the HTMLCanvasElement's toDataURL function.If the type is `"image/jpeg"` then this can be a number from `0` to `1`, inclusive, describing the desired jpeg quality. Additional SVG-specific arguments: elementFinished:A function with two arguments, GraphObject and SVGElement.As the SVG elements are created representing each graph object, this function is called on them,allowing you to modify the SVG as it is being built, to assign stylesheets, IDs, etc. Example: elementFinished: function(graphObject, SVGElement) { // set something on every SVG element that represents a GoJS TextBlock if (graphObject instanceof go.TextBlock) SVGElement.setAttribute(...);} Returns: {ImageData\|string} An ImageData, or a base64-encoded string describing an image.
makeSvg(properties) {SVGElement}	Create an SVGElement that contains a SVG rendering of the current Diagram.More... By default this method returns a snapshot of the visible diagram, but optional arguments give more options. See the page on Making SVG for usage examples.See the Minimal SVG Download sample,which also demonstrates downloading an SVG file without involving a web server. See makeImageData for a complete explanation of possible parameters. At the current time methods such as Diagram.makeImage,Diagram.makeImageData and Diagram.makeSvg do not work on Overviews. See also: makeImage Parameters: {{ size: Size, scale: number, maxSize: Size, position: Point, parts: Iterable, padding: (Margin\|number), showTemporary: boolean, showGrid: boolean, document: Document, elementFinished: function(GraphObject, SVGElement), details: * }\|Object=} properties a JavaScript object detailing optional arguments for SVG creation. Returns: {SVGElement}
moveParts(coll, offset, check) 1.3	Move a collection of Parts in this Diagram by a given offset.More... Moving a Group will also move its member Nodes and Links.Moving with a zero X and a zero Y offset is potentially useful in order to snap Parts to the grid if DraggingTool.isGridSnapEnabled is true. This does not perform a transaction nor does it raise a DiagramEvent. This calls DraggingTool.moveParts to carefully perform the movement of the parts. Parameters: {Iterable.} coll A List or a Set or Iterator of Parts, or null to move all of the Parts in this Diagram. {Point} offset the X and Y change to be made to each Part, in document coordinates. {boolean} check Whether to check Part.canMove on each part.
rebuildParts()	Remove all of the Parts created from model dataand then create them again.More... This must be called after modifying or replacing any of the template mapssuch as nodeTemplateMap.This re-selects all of the new Parts that were created from data of the original selected Parts. If you modify a template Map, there is no notification that the map has changed.You will need to call rebuildParts explicitly.If you are replacing the nodeTemplate or the nodeTemplateMap orthe corresponding properties for Groups or Links,the Diagram property setters will automatically call rebuildParts. It is extremely wasteful to call this method after making some model data changes that you want tobe reflected in the diagram. Instead, it is better call Model.setDataProperty,Model.addNodeData, Model.removeNodeData, or other model methods.Not only do those methods update efficiently, they also preserve unbound state and support undo/redo.
remove(part)	Removes a Part from its Layer, provided the Layer is in this Diagram.More... Removing a Node will also remove any Links that are connected with it.Removing a Group will also remove all of its members.Removing a Link will also remove all of its label Nodes, if it has any. Parameters: {Part} part
removeChangedListener(listener)	Unregister a ChangedEvent handler.More... See also: addChangedListener Parameters: {function(ChangedEvent)} listener a function that takes a ChangedEvent as its argument.
removeDiagramListener(name, listener)	Unregister a DiagramEvent handler.More... See the documentation for DiagramEvent for a complete listing of diagram event names and their purposes. Parameters: {string} name the name is normally capitalized, but this method uses case-insensitive comparison. {function(DiagramEvent)} listener a function that takes a DiagramEvent as its argument.
removeLayer(layer)	Removes the given layer from the list of layers.More... Removing a layer does not remove the Parts in the layer. Instead, those Parts are placed into the default layer.To remove all Parts in a layer you can call Diagram.removeParts with Layer.parts as the argument. You cannot remove the default layer, the one named with the empty string. See also: addLayer addLayerBefore addLayerAfter findLayer Parameters: {Layer} layer
removeModelChangedListener(listener) 1.6	Unregister a ChangedEvent handler from this Diagram's Diagram.model.More... See also: addModelChangedListener Parameters: {function(ChangedEvent)} listener a function that takes a ChangedEvent as its argument.
removeParts(coll, check) 1.3	This method removes from this Diagram all of the Parts in a collection.More... Removing a Node will also remove any Links that are connected with it.Removing a Group will also remove all of its members.Removing a Link will also remove all of its label Nodes, if it has any. This does not perform a transaction nor does it raise a DiagramEvent.Call CommandHandler.deleteSelection, which calls this method,if you want to delete all selected Parts.The CommandHandler.deleteSelection command may delete other Parts as well, depending on CommandHandler.deletesTree. At this time there is no "addParts" method -- just call Diagram.add on each Part. Parameters: {Iterable.\|Array.} coll A List or Set or Iterator or Array of Parts. {boolean} check Whether to check Part.canDelete on each part.
requestUpdate(alwaysQueueUpdate) 1.6	Usage of this method is uncommon and may affect performance,for efficiency do not call this method unless you have a well-defined need.More... Normally, GoJS updates the diagram automatically, and completeing a transaction ensures an immediate update. The most common reason to call this method when the HTML Div has changed size but the window has not changed size,and the Diagram needs to be notified of this DOM change. See an example of resizing diagramshere. Requests that in the near-future the diagram makes sure all GraphObjects are arranged,recomputes the document bounds, updates the scrollbars, and redraws the viewport. Parameters: {boolean=} alwaysQueueUpdate If true the Diagram will queue another update,even if an update is already occurring. The default value is false.Side effects in an "InitialLayoutCompleted" DiagramEvent listener might necessitate setting this parameter.
rollbackTransaction() {boolean}	Rollback the current transaction, undoing any recorded changes.More... This just calls UndoManager.rollbackTransaction. Returns: {boolean} the value returned by UndoManager.rollbackTransaction.
scroll(unit, dir, dist)	Scrolling function used by primarily by commandHandler's CommandHandler.doKeyDown.More... See also: scrollToRect centerRect Parameters: {string} unit A string representing the unit of the scroll operation. Can be 'pixel', 'line', 'page', or 'document'. {string} dir The direction of the scroll operation. Can be 'up', 'down', 'left', or 'right'. {number=} dist An optional distance multiplier, for multiple pixels, lines, or pages. The default value is 1. This argument is ignored when the unit is 'document'.
scrollToRect(r)	Modifies the position to show a given Rect of the Diagram by centering theviewport on that Rect.More... Does nothing if the Rect is already in view. See also centerRect See also: centerRect scroll Parameters: {Rect} r
select(part)	Make the given object the only selected object.More... This method raises the "ChangingSelection" and "ChangedSelection" Diagram events. See also: selectCollection clearSelection Parameters: {Part} part a Part that is already in a layer of this Diagram.If the value is null, this does nothing.
selectCollection(coll)	Select all of the Parts supplied in the given collection, and deselect all other Parts.More... This method raises the "ChangingSelection" and "ChangedSelection" Diagram events. See also: select clearSelection Parameters: {Iterable.\|Array.} coll a List or Set or Iterator or Array, of Parts to be selected.
setProperties(props) 1.5	This method sets a collection of properties according to the property/value pairs that have been set on the given Object,in the same manner as GraphObject.make does when constructing a Diagram with an argument that is a simple JavaScript Object.More... You can set properties on an object that is the value of a property of the Diagram,or on the Diagram.toolManager, by using a subpropname.property syntax for the property name.At the current time only a single dot is permitted in the property "name". The property name may also be the name of a DiagramEvent, in which case this calls addDiagramListener with that DiagramEvent name. aDiagram.setProperties({ allowDelete: false, // display a background grid for the whole diagram "grid.visible": true, "grid.gridCellSize": new go.Size(20, 20), "animationManager.isEnabled": false, // turn off automatic animations // specify a group membership validation predicate "commandHandler.memberValidation": function(group, part) { return ...; }, "commandHandler.copiesTree": true, // for the copy command // mouse wheel zooms instead of scrolls "toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom, "draggingTool.dragsTree": true, // dragging for both move and copy "draggingTool.isGridSnapEnabled": true, layout: $(go.TreeLayout), // add a DiagramEvent listener "ExternalObjectsDropped": function(e) { e.subject.each(function(part) { ... }); }}); Parameters: {Object} props a plain JavaScript object with various property values to be set on this Diagram or on a part of this Diagram.
startTransaction(tname) {boolean}	Begin a transaction, where the changes are held by a Transaction objectin the UndoManager.More... This just calls UndoManager.startTransaction. Parameters: {string=} tname a descriptive name for the transaction. Returns: {boolean} the value returned by UndoManager.startTransaction.
transformDocToView(p) {Point}	Given a Point in document coorindates, return a new Point in viewport coordinates.More... See also: transformViewToDoc GraphObject.getDocumentPoint Parameters: {Point} p Returns: {Point} The given Point converted into View coordinates.
transformViewToDoc(p) {Point}	Given a point in viewport coordinates, return a new Point in document coordinates.More... See also: transformDocToView GraphObject.getDocumentPoint Parameters: {Point} p Returns: {Point} The given point converted into Document coordinates.
updateAllRelationshipsFromData() 1.5	Add or remove any nodes or links according to additional or missing data objects in the modeland update all of the references to nodes, in case they had been modified in the model withoutproperly notifying the model by calling Model.addNodeData orGraphLinksModel.removeLinkData orGraphLinksModel.setGroupKeyForNodeData orGraphLinksModel.setToKeyForLinkData or other similar methods.More... This method does not conduct a transaction, so you need to start and commit one yourself. It is better to call Model.addNodeData, Model.removeNodeData,GraphLinksModel.addLinkData, GraphLinksModel.removeLinkData,Model.setDataProperty, and other model methods to add/remove/modify data,because those methods will both record changes for undo/redo and will update all bindingsthat make depend on that property.Simply modifying the data and calling an "update..." method will not be able to recordthe previous value(s) of properties in the model data to support undo. This only adds, removes, or updates the relationships between nodes and links,to have them reflect what is now declared in the model data.If you know which model data objects have been modified,it will be more efficient to update only the Parts that need itby calling Part.updateRelationshipsFromData. To update GraphObject properties that are data bound, call updateAllTargetBindings. See also: updateAllTargetBindings
updateAllTargetBindings(srcprop)	Update all of the data-bound properties of Nodes and Links in this diagram,without having to call Model.setDataProperty.More... This copies/converts model data properties to set properties on Parts.This method does not conduct a transaction, so you need to start and commit one yourself. It is better to call Model.setDataProperty to modify data properties,because that will both record changes for undo/redo and will update all bindingsthat make depend on that property.Simply modifying the data and calling an "update..." method will not be able to recordthe previous value(s) of properties in the model data to support undo. If you know which model data objects have been modified,it will be more efficient to update only the Parts that need itby calling Panel.updateTargetBindings. To update relationships between nodes, call updateAllRelationshipsFromData. See also: updateAllRelationshipsFromData Parameters: {string=} srcprop An optional source data property name: when provided, only evaluates those Bindings that use that particular property; when not provided or when it is the empty string, all bindings are evaluated.
zoomToFit()	Scales the Diagram to uniformly fit into the viewport.More... To have this done automatically,set the Diagram's autoScale to Uniform.
zoomToRect(r, scaling) 1.1	Modifies the scale and position of the Diagramso that the viewport displays a given document-coordinates rectangle.More... Parameters: {Rect} r rectangular bounds in document coordinates. {EnumValue=} scaling an optional value of either Uniform (the default) or UniformToFill.

Constants Summary Details

Name	Description
CycleAll {EnumValue}	This value for Diagram.validCycle states thatthere are no restrictions on making cycles of links.
CycleDestinationTree {EnumValue}	This value for Diagram.validCycle states thatany number of destination links may go out of a node, but at most onesource link may come into a node, and there are no directed cycles.
CycleNotDirected {EnumValue}	This value for Diagram.validCycle states thata valid link from a node will not produce a directed cycle in the graph.
CycleNotUndirected {EnumValue}	This value for Diagram.validCycle states thata valid link from a node will not produce an undirected cycle in the graph.
CycleSourceTree {EnumValue}	This value for Diagram.validCycle states thatany number of source links may come into a node, but at most onedestination link may go out of a node, and there are no directed cycles.
DocumentScroll {EnumValue}	This value for Diagram.scrollMode states thatthe viewport constrains scrolling to the Diagram document bounds.
InfiniteScroll {EnumValue}	This value for Diagram.scrollMode states thatthe viewport does not constrain scrolling to the Diagram document bounds.
None {EnumValue}	The default autoScale type, used as the value of Diagram.autoScale:The Diagram does not attempt to scale so that its documentBounds would fit the view.
Uniform {EnumValue}	Diagrams with this autoScale type, used as the value of Diagram.autoScale,are scaled uniformly until the whole documentBounds fits in the view.
UniformToFill {EnumValue}	Diagrams with this autoScale type, used as the value of Diagram.autoScale,are scaled until the documentBounds fits in the view in one direction whilea scrollbar is still needed in the other direction.