You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

6151 lines
401 KiB

<!doctype html>
<html class="default no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Diagram | GoJS API</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../assets/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/css/main.css">
</head>
<body>
<header>
<!-- non-fixed navbar -->
<nav id="non-fixed-nav" class="navbar navbar-inverse navbar-top">
<div class="container-fluid">
<div class="navbar-header">
<div class="navheader-container">
<div class="navheader-collapse" data-toggle="collapse" data-target="#navbar">
<a id="toplogo" class="navbar-brand" href="../../index.html">GoJS</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="../../index.html">Home</a></li>
<li><a href="../../learn/index.html">Learn</a></li>
<li><a href="../../samples/index.html">Samples</a></li>
<li><a href="../../intro/index.html">Intro</a></li>
<li><a href="../../api/index.html" target="api">API</a></li>
<li><a href="https://www.nwoods.com/components/evalform.htm">Register</a></li>
<li><a href="../../download.html">Download</a></li>
<li><a href="https://forum.nwoods.com/c/gojs">Forum</a></li>
<li><a href="https://www.nwoods.com/contact.html" onclick="ga('send','event','Outbound Link','click','contact');">Contact</a></li>
<li class="buy"><a href="https://www.nwoods.com/sales/index.html" onclick="ga('send','event','Outbound Link','click','buy');">Buy</a></li>
<li class="activate"><a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="tsd-page-header">
<div class="tsd-page-toolbar">
<div class="container-fluid plr15">
<div class="table-wrap">
<div class="table-cell" id="tsd-search" data-index="../assets/js/search.js" data-base="..">
<div class="field">
<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
<input id="tsd-search-field" type="text" />
</div>
<ul class="results">
<li class="state loading">Preparing search index...</li>
<li class="state failure">The search index is not available</li>
</ul>
<a href="../index.html" class="title">GoJS API</a>
</div>
<div class="table-cell" id="tsd-widgets">
<div id="tsd-filter">
<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
<div class="tsd-filter-group">
<div class="tsd-select" id="tsd-filter-visibility">
<span class="tsd-select-label">All</span>
<ul class="tsd-select-list">
<li data-value="public">Public</li>
<li data-value="protected">Public/Protected</li>
<li data-value="private" class="selected">All</li>
</ul>
</div>
</div>
</div>
<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
</div>
</div>
</div>
</div>
<div class="tsd-page-title">
<div class="container-fluid plr15">
<div class="top-copyright">
<!--<b>GoJS</b>&reg; Diagramming Components<br/>version &lt;br/&gt;version 2.0.17 for TypeScript/HTML<br/>by <a href="https://www.nwoods.com/">Northwoods Software&reg;</a>-->
<b>GoJS</b>&reg; Diagramming Components<br/>version 2.0.17<br/>by <a href="https://www.nwoods.com/">Northwoods Software&reg;</a>
</div>
<div>
<h1>Class Diagram</h1>
</div>
</div>
</div>
</div>
</header>
<div class="container-fluid container-main plr15">
<div class="row">
<div class="col-8 col-content">
<section class="tsd-panel tsd-hierarchy">
<h3>Hierarchy</h3>
<ul class="tsd-hierarchy">
<li>
<span class="target">Diagram</span>
<ul class="tsd-hierarchy">
<li>
<a href="Palette.html" class="tsd-signature-type">Palette</a>
</li>
<li>
<a href="Overview.html" class="tsd-signature-type">Overview</a>
</li>
</ul>
</li>
</ul>
</section>
<section class="tsd-panel tsd-comment">
<div class="tsd-comment tsd-typography">
<p>A Diagram is associated with an HTML DIV element. Constructing a Diagram creates
an HTML Canvas element which it places inside of the given DIV element, in addition to several helper DIVs.
<strong>GoJS</strong> 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.</p>
<p>Minimal Diagram construction looks like this. HTML:</p>
<pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"myDiagramDiv"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"border: solid 1px black; width:400px; height:400px"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
<p>JavaScript:</p>
<pre><code class="hljs js"><span class="hljs-keyword">var</span> $ = go.GraphObject.make; <span class="hljs-comment">// for conciseness</span>
myDiagram = $(go.Diagram, <span class="hljs-string">"myDiagramDiv"</span>, <span class="hljs-comment">// create a Diagram for the DIV HTML element</span>
{
<span class="hljs-string">"undoManager.isEnabled"</span>: <span class="hljs-literal">true</span> <span class="hljs-comment">// enable undo &amp; redo</span>
});</code></pre>
<p>The diagram will draw onto an HTML Canvas element, created inside the Diagram DIV.</p>
<p>Each Diagram holds a set of <a href="Layer.html">Layer</a>s each of which holds some number of <a href="Part.html">Part</a>s
such as <a href="Node.html">Node</a>s and <a href="Link.html">Link</a>s.
Each <a href="Part.html">Part</a> consists of <a href="GraphObject.html">GraphObject</a>s such as <a href="TextBlock.html">TextBlock</a>s and <a href="Shape.html">Shape</a>s
and <a href="Panel.html">Panel</a>s holding yet more GraphObjects.</p>
<p>A Diagram and its Parts provide the visual representation of a <a href="Model.html">Model</a> that holds JavaScript
data objects for the nodes and the links.
The model provides the way to recognize the relationships between the data.</p>
<p class="boxrun">
Two Diagrams can display and manipulate the same Model. (<a href="../../samples/updateDemo.html">Example</a>)
<p>A diagram will automatically create <a href="Node.html">Node</a>s and <a href="Link.html">Link</a>s corresponding to the model data.
The diagram has a number of named templates it uses to create the actual parts:
<a href="Diagram.html#nodeTemplateMap">nodeTemplateMap</a>, <a href="Diagram.html#groupTemplateMap">groupTemplateMap</a>, and <a href="Diagram.html#linkTemplateMap">linkTemplateMap</a>.
Each template may have some data <a href="Binding.html">Binding</a>s that set the part&#39;s <a href="GraphObject.html">GraphObject</a>s&#39; properties
based on the value of properties of the data.</p>
<p>A simple Node template and Model data (both nodes and links) may look like this:</p>
<pre><code class="hljs js"><span class="hljs-keyword">var</span> $ = go.GraphObject.make; <span class="hljs-comment">// for conciseness</span>
<span class="hljs-comment">// define a simple Node template</span>
myDiagram.nodeTemplate =
$(go.Node, <span class="hljs-string">"Auto"</span>, <span class="hljs-comment">// the Shape will go around the TextBlock</span>
$(go.Shape, <span class="hljs-string">"RoundedRectangle"</span>,
<span class="hljs-comment">// Shape.fill is bound to Node.data.color</span>
<span class="hljs-keyword">new</span> go.Binding(<span class="hljs-string">"fill"</span>, <span class="hljs-string">"color"</span>)),
$(go.TextBlock,
{ <span class="hljs-attr">margin</span>: <span class="hljs-number">3</span> }, <span class="hljs-comment">// some room around the text</span>
<span class="hljs-comment">// TextBlock.text is bound to Node.data.key</span>
<span class="hljs-keyword">new</span> go.Binding(<span class="hljs-string">"text"</span>, <span class="hljs-string">"key"</span>))
);
<span class="hljs-comment">// create the model data that will be represented by Nodes and Links</span>
myDiagram.model = <span class="hljs-keyword">new</span> go.GraphLinksModel(
[
{ <span class="hljs-attr">key</span>: <span class="hljs-string">"Alpha"</span>, <span class="hljs-attr">color</span>: <span class="hljs-string">"lightblue"</span> },
{ <span class="hljs-attr">key</span>: <span class="hljs-string">"Beta"</span>, <span class="hljs-attr">color</span>: <span class="hljs-string">"orange"</span> },
{ <span class="hljs-attr">key</span>: <span class="hljs-string">"Gamma"</span>, <span class="hljs-attr">color</span>: <span class="hljs-string">"lightgreen"</span> },
{ <span class="hljs-attr">key</span>: <span class="hljs-string">"Delta"</span>, <span class="hljs-attr">color</span>: <span class="hljs-string">"pink"</span> }
],
[
{ <span class="hljs-attr">from</span>: <span class="hljs-string">"Alpha"</span>, <span class="hljs-attr">to</span>: <span class="hljs-string">"Beta"</span> },
{ <span class="hljs-attr">from</span>: <span class="hljs-string">"Alpha"</span>, <span class="hljs-attr">to</span>: <span class="hljs-string">"Gamma"</span> },
{ <span class="hljs-attr">from</span>: <span class="hljs-string">"Beta"</span>, <span class="hljs-attr">to</span>: <span class="hljs-string">"Beta"</span> },
{ <span class="hljs-attr">from</span>: <span class="hljs-string">"Gamma"</span>, <span class="hljs-attr">to</span>: <span class="hljs-string">"Delta"</span> },
{ <span class="hljs-attr">from</span>: <span class="hljs-string">"Delta"</span>, <span class="hljs-attr">to</span>: <span class="hljs-string">"Alpha"</span> }
]);</code></pre>
<p class="boxrun">
The above code is used to make the <a href="../../samples/minimal.html">Minimal sample</a>, a simple example of
creating a Diagram and setting its model.
<p class="boxread">
Read about models on the <a href="../../intro/usingModels.html">Using Models</a> page in the introduction.
A diagram is responsible for scrolling (<a href="Diagram.html#position">position</a>) and zooming (<a href="Diagram.html#scale">scale</a>) all of the parts that it shows.
Each <a href="Part.html">Part</a> occupies some area given by its <a href="GraphObject.html#actualBounds">GraphObject.actualBounds</a>.
<p>The union of all of the parts&#39; bounds constitutes the <a href="Diagram.html#documentBounds">documentBounds</a>.
The document bounds determines the area that the diagram can be scrolled to.
There are several properties that you can set, such as <a href="Diagram.html#initialContentAlignment">initialContentAlignment</a>,
that control the initial size and position of the diagram contents.</p>
<p>At any later time you can also explicitly set the <a href="Diagram.html#position">position</a> and/or <a href="Diagram.html#scale">scale</a> to
get 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 <a href="Diagram.html#centerRect">centerRect</a> or <a href="Diagram.html#scrollToRect">scrollToRect</a> with the Node&#39;s <a href="GraphObject.html#actualBounds">GraphObject.actualBounds</a>,
depending on whether or not you want the view to be scrolled if the node is already in view.</p>
<p class="boxread">
Read in the Introduction about <a href="../../intro/viewport.html">Viewports</a>
and the <a href="../../intro/initialView.html">Initial Viewport</a>.
You can have the diagram perform automatic layouts of its nodes and links by setting
<a href="Diagram.html#layout">layout</a> to an instance of the <a href="Layout.html">Layout</a> subclass of your choice.
The default <a href="Diagram.html#layout">layout</a> is an instance of the <a href="Layout.html">Layout</a> base class that ignores links and
only positions <a href="Node.html">Node</a>s that do not have a location.
This default layout will allow you to programmatically position nodes (including by loading
from a database) and will also allow the user to manually position nodes using the <a href="DraggingTool.html">DraggingTool</a>.
<p>If you do supply a particular layout as the <a href="Diagram.html#layout">layout</a>, you can control which <a href="Part.html">Part</a>s it operates
on by setting <a href="Part.html#isLayoutPositioned">Part.isLayoutPositioned</a>.
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 removed
or changes visibility or size.
You can disable the initial layout by setting <a href="Layout.html#isInitial">Layout.isInitial</a> to false.
You can disable later automatic layouts by setting <a href="Layout.html#isOngoing">Layout.isOngoing</a> to false.</p>
<p class="boxread">
See the <a href="../../intro/layouts.html">Layouts</a> page in the Introduction for a summary of layout behavior.
<p>A diagram maintains a collection of selected parts, the <a href="Diagram.html#selection">Diagram.selection</a>.
To select a Part you set its <a href="Part.html#isSelected">Part.isSelected</a> property to true.</p>
<p>There are many properties, named &quot;allow...&quot;, that control what operations the user
may perform on the parts in the diagram. These correspond to the same named
properties on <a href="Layer.html">Layer</a> that govern the behavior for those parts in a particular layer.
Furthermore for some of these properties there are corresponding properties on
<a href="Part.html">Part</a>, named &quot;...able&quot;, that govern the behavior for that individual part.
For example, the <a href="Diagram.html#allowCopy">allowCopy</a> property corresponds to <a href="Layer.html#allowCopy">Layer.allowCopy</a> and
to the property <a href="Part.html#copyable">Part.copyable</a>.
The <a href="Part.html#canCopy">Part.canCopy</a> predicate is false if any of these properties is false.</p>
<p class="boxread">
See the <a href="../../intro/permissions.html">Permissions</a> page for a more thorough discussion.
<p>The <a href="Diagram.html#commandHandler">commandHandler</a> implements various standard commands,
such as the <a href="CommandHandler.html#deleteSelection">CommandHandler.deleteSelection</a> method and the
<a href="CommandHandler.html#canDeleteSelection">CommandHandler.canDeleteSelection</a> predicate.</p>
<p class="boxread">
See the <a href="../../intro/commands.html">Commands</a> page for a listing of keyboard commands and
the use of commands in general.
<p>The diagram supports modular behavior for mouse events by implementing &quot;tools&quot;.
All mouse and keyboard events are represented by <a href="InputEvent.html">InputEvent</a>s and redirected
to the <a href="Diagram.html#currentTool">currentTool</a>.
The default tool is an instance of <a href="ToolManager.html">ToolManager</a> which keeps three lists of mode-less tools:
<a href="ToolManager.html#mouseDownTools">ToolManager.mouseDownTools</a>, <a href="ToolManager.html#mouseMoveTools">ToolManager.mouseMoveTools</a>, and <a href="ToolManager.html#mouseUpTools">ToolManager.mouseUpTools</a>.
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 <a href="Diagram.html#currentTool">currentTool</a>, where it can continue to process input events.
When the tool is done, it stops itself, causing the <a href="Diagram.html#defaultTool">defaultTool</a> to be the new <a href="Diagram.html#currentTool">currentTool</a>.</p>
<p>Mouse-down tools include:</p>
<ul>
<li><a href="ToolManager.html#actionTool">ToolManager.actionTool</a>, to support objects like &quot;buttons&quot;</li>
<li><a href="ToolManager.html#relinkingTool">ToolManager.relinkingTool</a>, to reconnect an existing link</li>
<li><a href="ToolManager.html#linkReshapingTool">ToolManager.linkReshapingTool</a>, to modify the route of an existing link</li>
<li><a href="ToolManager.html#rotatingTool">ToolManager.rotatingTool</a>, to change the angle of an object</li>
<li><a href="ToolManager.html#resizingTool">ToolManager.resizingTool</a>, to change the size of an object</li>
</ul>
<p>Mouse-move tools include:</p>
<ul>
<li><a href="ToolManager.html#linkingTool">ToolManager.linkingTool</a>, to draw a new link</li>
<li><a href="ToolManager.html#draggingTool">ToolManager.draggingTool</a>, to move or copy the selection</li>
<li><a href="ToolManager.html#dragSelectingTool">ToolManager.dragSelectingTool</a>, to select parts within a rectangular area</li>
<li><a href="ToolManager.html#panningTool">ToolManager.panningTool</a>, to pan the diagram</li>
</ul>
<p>Mouse-up tools include:</p>
<ul>
<li><a href="ToolManager.html#contextMenuTool">ToolManager.contextMenuTool</a>, to manage context menus</li>
<li><a href="ToolManager.html#textEditingTool">ToolManager.textEditingTool</a>, to support in-place text editing</li>
<li><a href="ToolManager.html#clickCreatingTool">ToolManager.clickCreatingTool</a>, to create new parts where the user clicks</li>
<li><a href="ToolManager.html#clickSelectingTool">ToolManager.clickSelectingTool</a>, to select parts</li>
</ul>
<p>You can also run a tool in a modal fashion by explicitly setting <a href="Diagram.html#currentTool">currentTool</a>.
That tool will keep running until some code replaces the <a href="Diagram.html#currentTool">currentTool</a>.
This normally happens when the current tool calls <a href="Tool.html#stopTool">Tool.stopTool</a>, such as on a mouse-up event.</p>
<p class="boxread">
See the <a href="../../intro/tools.html">Tools</a> page for a listing of predefined tools and how they operate.
<p>A diagram raises various <a href="DiagramEvent.html">DiagramEvent</a>s when interesting things happen that may have affected the whole diagram.
See the documentation for <a href="DiagramEvent.html">DiagramEvent</a> for a complete listing.</p>
<p>When you need to display multiple Models, but not at the same time, you can do so by using only one Diagram and setting the <a href="Diagram.html#model">model</a> to a different one.
You can also have two Diagrams share a DIV by swapping the <a href="Diagram.html#div">div</a> to <code>null</code> on one Diagram and setting it on the other.
When permanently removing a Diagram,t o clear any memory used,
set the <a href="Diagram.html#div">div</a> to <code>null</code> and remove all references to the Diagram. These scenarios are discussed more on the
<a href="../../intro/replacingDeleting.html">Replacing Diagrams and Models</a> intro page.</p>
</div>
</section>
<section class="tsd-panel-group tsd-index-group">
<h2>Index</h2>
<section class="tsd-panel tsd-index-panel">
<div class="tsd-index-content">
<section class="tsd-index-section ">
<h3>Constructors</h3>
<ul class="tsd-index-list">
<li class="tsd-kind-constructor tsd-parent-kind-class"><a href="Diagram.html#constructor" class="tsd-kind-icon">constructor</a></li>
</ul>
</section>
<section class="tsd-index-section ">
<h3>Properties</h3>
<ul class="tsd-index-list">
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#allowClipboard" class="tsd-kind-icon">allow<wbr>Clipboard</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#allowCopy" class="tsd-kind-icon">allow<wbr>Copy</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#allowDelete" class="tsd-kind-icon">allow<wbr>Delete</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#allowDragOut" class="tsd-kind-icon">allow<wbr>Drag<wbr>Out</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#allowDrop" class="tsd-kind-icon">allow<wbr>Drop</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#allowGroup" class="tsd-kind-icon">allow<wbr>Group</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#allowHorizontalScroll" class="tsd-kind-icon">allow<wbr>Horizontal<wbr>Scroll</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#allowInsert" class="tsd-kind-icon">allow<wbr>Insert</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#allowLink" class="tsd-kind-icon">allow<wbr>Link</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#allowMove" class="tsd-kind-icon">allow<wbr>Move</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#allowRelink" class="tsd-kind-icon">allow<wbr>Relink</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#allowReshape" class="tsd-kind-icon">allow<wbr>Reshape</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#allowResize" class="tsd-kind-icon">allow<wbr>Resize</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#allowRotate" class="tsd-kind-icon">allow<wbr>Rotate</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#allowSelect" class="tsd-kind-icon">allow<wbr>Select</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#allowTextEdit" class="tsd-kind-icon">allow<wbr>Text<wbr>Edit</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#allowUndo" class="tsd-kind-icon">allow<wbr>Undo</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#allowUngroup" class="tsd-kind-icon">allow<wbr>Ungroup</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#allowVerticalScroll" class="tsd-kind-icon">allow<wbr>Vertical<wbr>Scroll</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#allowZoom" class="tsd-kind-icon">allow<wbr>Zoom</a></li>
<li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Diagram.html#animationManager" class="tsd-kind-icon">animation<wbr>Manager</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#autoScale" class="tsd-kind-icon">auto<wbr>Scale</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#autoScrollRegion" class="tsd-kind-icon">auto<wbr>Scroll<wbr>Region</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#click" class="tsd-kind-icon">click</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#commandHandler" class="tsd-kind-icon">command<wbr>Handler</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#contentAlignment" class="tsd-kind-icon">content<wbr>Alignment</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#contextClick" class="tsd-kind-icon">context<wbr>Click</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#contextMenu" class="tsd-kind-icon">context<wbr>Menu</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#currentCursor" class="tsd-kind-icon">current<wbr>Cursor</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#currentTool" class="tsd-kind-icon">current<wbr>Tool</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#defaultCursor" class="tsd-kind-icon">default<wbr>Cursor</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#defaultScale" class="tsd-kind-icon">default<wbr>Scale</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#defaultTool" class="tsd-kind-icon">default<wbr>Tool</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#div" class="tsd-kind-icon">div</a></li>
<li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Diagram.html#documentBounds" class="tsd-kind-icon">document<wbr>Bounds</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#doubleClick" class="tsd-kind-icon">double<wbr>Click</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#firstInput" class="tsd-kind-icon">first<wbr>Input</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#fixedBounds" class="tsd-kind-icon">fixed<wbr>Bounds</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#grid" class="tsd-kind-icon">grid</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#groupSelectionAdornmentTemplate" class="tsd-kind-icon">group<wbr>Selection<wbr>Adornment<wbr>Template</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#groupTemplate" class="tsd-kind-icon">group<wbr>Template</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#groupTemplateMap" class="tsd-kind-icon">group<wbr>Template<wbr>Map</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#handlesDragDropForTopLevelParts" class="tsd-kind-icon">handles<wbr>Drag<wbr>Drop<wbr>For<wbr>Top<wbr>Level<wbr>Parts</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#hasHorizontalScrollbar" class="tsd-kind-icon">has<wbr>Horizontal<wbr>Scrollbar</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#hasVerticalScrollbar" class="tsd-kind-icon">has<wbr>Vertical<wbr>Scrollbar</a></li>
<li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Diagram.html#highlighteds" class="tsd-kind-icon">highlighteds</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#initialAutoScale" class="tsd-kind-icon">initial<wbr>Auto<wbr>Scale</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#initialContentAlignment" class="tsd-kind-icon">initial<wbr>Content<wbr>Alignment</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#initialDocumentSpot" class="tsd-kind-icon">initial<wbr>Document<wbr>Spot</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#initialPosition" class="tsd-kind-icon">initial<wbr>Position</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#initialScale" class="tsd-kind-icon">initial<wbr>Scale</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#initialViewportSpot" class="tsd-kind-icon">initial<wbr>Viewport<wbr>Spot</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#isEnabled" class="tsd-kind-icon">is<wbr>Enabled</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#isModelReadOnly" class="tsd-kind-icon">is<wbr>Model<wbr>Read<wbr>Only</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#isModified" class="tsd-kind-icon">is<wbr>Modified</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#isMouseCaptured" class="tsd-kind-icon">is<wbr>Mouse<wbr>Captured</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#isReadOnly" class="tsd-kind-icon">is<wbr>Read<wbr>Only</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#isTreePathToChildren" class="tsd-kind-icon">is<wbr>Tree<wbr>Path<wbr>ToChildren</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#lastInput" class="tsd-kind-icon">last<wbr>Input</a></li>
<li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Diagram.html#layers" class="tsd-kind-icon">layers</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#layout" class="tsd-kind-icon">layout</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class tsd-is-static"><a href="Diagram.html#static-licenseKey" class="tsd-kind-icon">license<wbr>Key</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#linkSelectionAdornmentTemplate" class="tsd-kind-icon">link<wbr>Selection<wbr>Adornment<wbr>Template</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#linkTemplate" class="tsd-kind-icon">link<wbr>Template</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#linkTemplateMap" class="tsd-kind-icon">link<wbr>Template<wbr>Map</a></li>
<li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Diagram.html#links" class="tsd-kind-icon">links</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#maxScale" class="tsd-kind-icon">max<wbr>Scale</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#maxSelectionCount" class="tsd-kind-icon">max<wbr>Selection<wbr>Count</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#minScale" class="tsd-kind-icon">min<wbr>Scale</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#model" class="tsd-kind-icon">model</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#mouseDragOver" class="tsd-kind-icon">mouse<wbr>Drag<wbr>Over</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#mouseDrop" class="tsd-kind-icon">mouse<wbr>Drop</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#mouseEnter" class="tsd-kind-icon">mouse<wbr>Enter</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#mouseHold" class="tsd-kind-icon">mouse<wbr>Hold</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#mouseHover" class="tsd-kind-icon">mouse<wbr>Hover</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#mouseLeave" class="tsd-kind-icon">mouse<wbr>Leave</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#mouseOver" class="tsd-kind-icon">mouse<wbr>Over</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#nodeSelectionAdornmentTemplate" class="tsd-kind-icon">node<wbr>Selection<wbr>Adornment<wbr>Template</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#nodeTemplate" class="tsd-kind-icon">node<wbr>Template</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#nodeTemplateMap" class="tsd-kind-icon">node<wbr>Template<wbr>Map</a></li>
<li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Diagram.html#nodes" class="tsd-kind-icon">nodes</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#padding" class="tsd-kind-icon">padding</a></li>
<li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Diagram.html#parts" class="tsd-kind-icon">parts</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#position" class="tsd-kind-icon">position</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#positionComputation" class="tsd-kind-icon">position<wbr>Computation</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#scale" class="tsd-kind-icon">scale</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#scaleComputation" class="tsd-kind-icon">scale<wbr>Computation</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#scrollHorizontalLineChange" class="tsd-kind-icon">scroll<wbr>Horizontal<wbr>Line<wbr>Change</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#scrollMargin" class="tsd-kind-icon">scroll<wbr>Margin</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#scrollMode" class="tsd-kind-icon">scroll<wbr>Mode</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#scrollVerticalLineChange" class="tsd-kind-icon">scroll<wbr>Vertical<wbr>Line<wbr>Change</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#scrollsPageOnFocus" class="tsd-kind-icon">scrolls<wbr>Page<wbr>OnFocus</a></li>
<li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Diagram.html#selection" class="tsd-kind-icon">selection</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#skipsUndoManager" class="tsd-kind-icon">skips<wbr>Undo<wbr>Manager</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#toolManager" class="tsd-kind-icon">tool<wbr>Manager</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#toolTip" class="tsd-kind-icon">tool<wbr>Tip</a></li>
<li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Diagram.html#undoManager" class="tsd-kind-icon">undo<wbr>Manager</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#validCycle" class="tsd-kind-icon">valid<wbr>Cycle</a></li>
<li class="tsd-kind-get-signature tsd-parent-kind-class tsd-is-static"><a href="Diagram.html#static-version" class="tsd-kind-icon">version</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#viewSize" class="tsd-kind-icon">view<wbr>Size</a></li>
<li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Diagram.html#viewportBounds" class="tsd-kind-icon">viewport<wbr>Bounds</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#zoomPoint" class="tsd-kind-icon">zoom<wbr>Point</a></li>
</ul>
</section>
<section class="tsd-index-section ">
<h3>Methods</h3>
<ul class="tsd-index-list">
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#add" class="tsd-kind-icon">add</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#addChangedListener" class="tsd-kind-icon">add<wbr>Changed<wbr>Listener</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#addDiagramListener" class="tsd-kind-icon">add<wbr>Diagram<wbr>Listener</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#addLayer" class="tsd-kind-icon">add<wbr>Layer</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#addLayerAfter" class="tsd-kind-icon">add<wbr>Layer<wbr>After</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#addLayerBefore" class="tsd-kind-icon">add<wbr>Layer<wbr>Before</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#addModelChangedListener" class="tsd-kind-icon">add<wbr>Model<wbr>Changed<wbr>Listener</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#alignDocument" class="tsd-kind-icon">align<wbr>Document</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#centerRect" class="tsd-kind-icon">center<wbr>Rect</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#clear" class="tsd-kind-icon">clear</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#clearHighlighteds" class="tsd-kind-icon">clear<wbr>Highlighteds</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#clearSelection" class="tsd-kind-icon">clear<wbr>Selection</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#commit" class="tsd-kind-icon">commit</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#commitTransaction" class="tsd-kind-icon">commit<wbr>Transaction</a></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-is-protected"><a href="Diagram.html#computeBounds" class="tsd-kind-icon">compute<wbr>Bounds</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#computeMove" class="tsd-kind-icon">compute<wbr>Move</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#computePartsBounds" class="tsd-kind-icon">compute<wbr>Parts<wbr>Bounds</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#copyParts" class="tsd-kind-icon">copy<wbr>Parts</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#delayInitialization" class="tsd-kind-icon">delay<wbr>Initialization</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#findLayer" class="tsd-kind-icon">find<wbr>Layer</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#findLinkForData" class="tsd-kind-icon">find<wbr>Link<wbr>For<wbr>Data</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#findLinksByExample" class="tsd-kind-icon">find<wbr>Links<wbr>ByExample</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#findNodeForData" class="tsd-kind-icon">find<wbr>Node<wbr>For<wbr>Data</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#findNodeForKey" class="tsd-kind-icon">find<wbr>Node<wbr>For<wbr>Key</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#findNodesByExample" class="tsd-kind-icon">find<wbr>Nodes<wbr>ByExample</a></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter"><a href="Diagram.html#findObjectAt" class="tsd-kind-icon">find<wbr>Object<wbr>At</a></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter"><a href="Diagram.html#findObjectsAt" class="tsd-kind-icon">find<wbr>Objects<wbr>At</a></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter"><a href="Diagram.html#findObjectsIn" class="tsd-kind-icon">find<wbr>Objects<wbr>In</a></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter"><a href="Diagram.html#findObjectsNear" class="tsd-kind-icon">find<wbr>Objects<wbr>Near</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#findPartAt" class="tsd-kind-icon">find<wbr>Part<wbr>At</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#findPartForData" class="tsd-kind-icon">find<wbr>Part<wbr>For<wbr>Data</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#findPartForKey" class="tsd-kind-icon">find<wbr>Part<wbr>For<wbr>Key</a></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter"><a href="Diagram.html#findPartsAt" class="tsd-kind-icon">find<wbr>Parts<wbr>At</a></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter"><a href="Diagram.html#findPartsIn" class="tsd-kind-icon">find<wbr>Parts<wbr>In</a></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter"><a href="Diagram.html#findPartsNear" class="tsd-kind-icon">find<wbr>Parts<wbr>Near</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#findTopLevelGroups" class="tsd-kind-icon">find<wbr>Top<wbr>Level<wbr>Groups</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#findTreeRoots" class="tsd-kind-icon">find<wbr>Tree<wbr>Roots</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#focus" class="tsd-kind-icon">focus</a></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-is-static"><a href="Diagram.html#static-fromDiv" class="tsd-kind-icon">from<wbr>Div</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#highlight" class="tsd-kind-icon">highlight</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#highlightCollection" class="tsd-kind-icon">highlight<wbr>Collection</a></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-is-static"><a href="Diagram.html#static-inherit" class="tsd-kind-icon">inherit</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#layoutDiagram" class="tsd-kind-icon">layout<wbr>Diagram</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#makeImage" class="tsd-kind-icon">make<wbr>Image</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#makeImageData" class="tsd-kind-icon">make<wbr>Image<wbr>Data</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#makeSvg" class="tsd-kind-icon">make<wbr>Svg</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#moveParts" class="tsd-kind-icon">move<wbr>Parts</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#rebuildParts" class="tsd-kind-icon">rebuild<wbr>Parts</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#remove" class="tsd-kind-icon">remove</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#removeChangedListener" class="tsd-kind-icon">remove<wbr>Changed<wbr>Listener</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#removeDiagramListener" class="tsd-kind-icon">remove<wbr>Diagram<wbr>Listener</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#removeLayer" class="tsd-kind-icon">remove<wbr>Layer</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#removeModelChangedListener" class="tsd-kind-icon">remove<wbr>Model<wbr>Changed<wbr>Listener</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#removeParts" class="tsd-kind-icon">remove<wbr>Parts</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#requestUpdate" class="tsd-kind-icon">request<wbr>Update</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#rollbackTransaction" class="tsd-kind-icon">rollback<wbr>Transaction</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#scroll" class="tsd-kind-icon">scroll</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#scrollToRect" class="tsd-kind-icon">scroll<wbr>ToRect</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#select" class="tsd-kind-icon">select</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#selectCollection" class="tsd-kind-icon">select<wbr>Collection</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#setProperties" class="tsd-kind-icon">set<wbr>Properties</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#startTransaction" class="tsd-kind-icon">start<wbr>Transaction</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#transformDocToView" class="tsd-kind-icon">transform<wbr>Doc<wbr>ToView</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#transformViewToDoc" class="tsd-kind-icon">transform<wbr>View<wbr>ToDoc</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#updateAllRelationshipsFromData" class="tsd-kind-icon">update<wbr>All<wbr>Relationships<wbr>From<wbr>Data</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#updateAllTargetBindings" class="tsd-kind-icon">update<wbr>All<wbr>Target<wbr>Bindings</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#zoomToFit" class="tsd-kind-icon">zoom<wbr>ToFit</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#zoomToRect" class="tsd-kind-icon">zoom<wbr>ToRect</a></li>
</ul>
</section>
<section class="tsd-index-section ">
<h3>Constants</h3>
<ul class="tsd-index-list">
<li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Diagram.html#static-CycleAll" class="tsd-kind-icon">Cycle<wbr>All</a></li>
<li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Diagram.html#static-CycleDestinationTree" class="tsd-kind-icon">Cycle<wbr>Destination<wbr>Tree</a></li>
<li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Diagram.html#static-CycleNotDirected" class="tsd-kind-icon">Cycle<wbr>Not<wbr>Directed</a></li>
<li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Diagram.html#static-CycleNotUndirected" class="tsd-kind-icon">Cycle<wbr>Not<wbr>Undirected</a></li>
<li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Diagram.html#static-CycleSourceTree" class="tsd-kind-icon">Cycle<wbr>Source<wbr>Tree</a></li>
<li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Diagram.html#static-DocumentScroll" class="tsd-kind-icon">Document<wbr>Scroll</a></li>
<li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Diagram.html#static-InfiniteScroll" class="tsd-kind-icon">Infinite<wbr>Scroll</a></li>
<li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Diagram.html#static-None" class="tsd-kind-icon">None</a></li>
<li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Diagram.html#static-Uniform" class="tsd-kind-icon">Uniform</a></li>
<li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Diagram.html#static-UniformToFill" class="tsd-kind-icon">Uniform<wbr>ToFill</a></li>
</ul>
</section>
</div>
</section>
</section>
<section class="tsd-panel-group tsd-member-group ">
<h2>Constructors</h2>
<section class="tsd-panel tsd-member tsd-kind-constructor tsd-parent-kind-class">
<a name="constructor" class="tsd-anchor"></a>
<h3>
constructor
</h3>
<ul class="tsd-signatures tsd-kind-constructor tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">new <wbr>Diagram<span class="tsd-signature-symbol">(</span>div<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Element</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Diagram.html" class="tsd-signature-type">Diagram</a></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Construct an empty Diagram for a particular DIV HTML element.</p>
<p>You will normally initialize properties of the Diagram that control its appearance and behavior.
These properties include:</p>
<ul>
<li>templates (such as <a href="Diagram.html#nodeTemplate">nodeTemplate</a> or <a href="Diagram.html#linkSelectionAdornmentTemplate">linkSelectionAdornmentTemplate</a>),</li>
<li>an automatic layout (if desired, <a href="Diagram.html#layout">layout</a>),</li>
<li>positioning or scaling (such as <a href="Diagram.html#initialContentAlignment">initialContentAlignment</a> or <a href="Diagram.html#initialAutoScale">initialAutoScale</a>),</li>
<li>permissions (such as <a href="Diagram.html#isReadOnly">isReadOnly</a> or <a href="Diagram.html#allowDelete">allowDelete</a>), or</li>
<li>Tool or CommandHandler customization (such as <a href="CommandHandler.html#archetypeGroupData">CommandHandler.archetypeGroupData</a> or
<a href="Tool.html#isEnabled">Tool.isEnabled</a>): <code>diagram.toolManager.dragSelectingTool.isEnabled = false;</code>.</li>
</ul>
<p>Then you will need to construct a Model (usually a <a href="GraphLinksModel.html">GraphLinksModel</a>) for the Diagram,
initialize its data by setting its <a href="Model.html#nodeDataArray">Model.nodeDataArray</a> and other properties,
and then set the diagram&#39;s <a href="Diagram.html#model">model</a>.</p>
<p>Finally, if you want to disassociate the Diagram from the HTML Div element, set <a href="Diagram.html#div">Diagram.div</a> to null.
If you remove a part of the HTML DOM containing a Div with a Diagram, you will need to
set <a href="Diagram.html#div">div</a> to null in order for the page to recover the memory.</p>
<p>It is commonplace to use the static function <a href="GraphObject.html#static-make">GraphObject.make</a> to build a Diagram:</p>
<pre><code class="hljs js"><span class="hljs-keyword">var</span> $ = go.GraphObject.make;
<span class="hljs-keyword">var</span> diagram =
$(go.Diagram, <span class="hljs-string">"myDiagramDiv"</span>,
{
<span class="hljs-attr">allowZoom</span>: <span class="hljs-literal">false</span>,
<span class="hljs-string">"animationManager.isEnabled"</span>: <span class="hljs-literal">false</span>, <span class="hljs-comment">// turn off automatic animations</span>
<span class="hljs-string">"grid.visible"</span>: <span class="hljs-literal">true</span>, <span class="hljs-comment">// display a background grid for the whole diagram</span>
<span class="hljs-string">"grid.gridCellSize"</span>: <span class="hljs-keyword">new</span> go.Size(<span class="hljs-number">20</span>, <span class="hljs-number">20</span>),
<span class="hljs-comment">// allow double-click in background to create a new node</span>
<span class="hljs-string">"clickCreatingTool.archetypeNodeData"</span>: { <span class="hljs-attr">text</span>: <span class="hljs-string">"Node"</span> },
<span class="hljs-comment">// allow Ctrl-G to call the groupSelection command</span>
<span class="hljs-string">"commandHandler.archetypeGroupData"</span>:
{ <span class="hljs-attr">text</span>: <span class="hljs-string">"Group"</span>, <span class="hljs-attr">isGroup</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">color</span>: <span class="hljs-string">"blue"</span> },
<span class="hljs-string">"commandHandler.copiesTree"</span>: <span class="hljs-literal">true</span>, <span class="hljs-comment">// for the copy command</span>
<span class="hljs-string">"commandHandler.deletesTree"</span>: <span class="hljs-literal">true</span>, <span class="hljs-comment">// for the delete command</span>
<span class="hljs-string">"toolManager.hoverDelay"</span>: <span class="hljs-number">100</span>, <span class="hljs-comment">// how quickly tooltips are shown</span>
<span class="hljs-comment">// mouse wheel zooms instead of scrolls</span>
<span class="hljs-string">"toolManager.mouseWheelBehavior"</span>: go.ToolManager.WheelZoom,
<span class="hljs-string">"draggingTool.dragsTree"</span>: <span class="hljs-literal">true</span>, <span class="hljs-comment">// dragging for both move and copy</span>
<span class="hljs-string">"draggingTool.isGridSnapEnabled"</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">layout</span>: $(go.TreeLayout,
{ <span class="hljs-attr">angle</span>: <span class="hljs-number">90</span>, <span class="hljs-attr">sorting</span>: go.TreeLayout.SortingAscending }),
<span class="hljs-string">"undoManager.isEnabled"</span>: <span class="hljs-literal">true</span>, <span class="hljs-comment">// enable undo &amp; redo</span>
<span class="hljs-comment">// a Changed listener on the Diagram.model</span>
<span class="hljs-string">"ModelChanged"</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>) </span>{ <span class="hljs-keyword">if</span> (e.isTransactionFinished) saveModel(); }
});</code></pre>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> div: <span class="tsd-signature-type">Element</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">string</span></h5>
<div class="tsd-comment tsd-typography">
<p>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&#39;s <a href="Diagram.html#div">Diagram.div</a> property
can then be set later on.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <a href="Diagram.html" class="tsd-signature-type">Diagram</a></h4>
</li>
</ul>
</section>
</section>
<section class="tsd-panel-group tsd-member-group ">
<h2>Properties</h2>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="allowClipboard" class="tsd-anchor"></a>
<h3>
allow<wbr>Clipboard
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets whether the user may copy to or paste parts from the internal clipboard.
This allows use of <a href="CommandHandler.html#cutSelection">CommandHandler.cutSelection</a>,
<a href="CommandHandler.html#copySelection">CommandHandler.copySelection</a> and <a href="CommandHandler.html#pasteSelection">CommandHandler.pasteSelection</a>.
The initial value is true.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="allowCopy" class="tsd-anchor"></a>
<h3>
allow<wbr>Copy
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets whether the user may copy objects.
The initial value is true.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="allowDelete" class="tsd-anchor"></a>
<h3>
allow<wbr>Delete
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets whether the user may delete objects from the Diagram.
The initial value is true.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="allowDragOut" class="tsd-anchor"></a>
<h3>
allow<wbr>Drag<wbr>Out
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets whether the user may start a drag-and-drop in this Diagram,
possibly dropping in a different element.
The initial value is false.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="allowDrop" class="tsd-anchor"></a>
<h3>
allow<wbr>Drop
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets whether the user may end a drag-and-drop operation in this Diagram.
This is typically set to true when a Diagram is used with a <a href="Palette.html">Palette</a>.</p>
<p>The initial value is true.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="allowGroup" class="tsd-anchor"></a>
<h3>
allow<wbr>Group
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets whether the user may group parts together.
The initial value is true.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="allowHorizontalScroll" class="tsd-anchor"></a>
<h3>
allow<wbr>Horizontal<wbr>Scroll
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets whether the user is allowed to use the horizontal scrollbar.
The initial value is true.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#hasHorizontalScrollbar">hasHorizontalScrollbar</a>, <a href="Diagram.html#allowVerticalScroll">allowVerticalScroll</a></p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="allowInsert" class="tsd-anchor"></a>
<h3>
allow<wbr>Insert
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets whether the user may add parts to the Diagram.
The initial value is true.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="allowLink" class="tsd-anchor"></a>
<h3>
allow<wbr>Link
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets whether the user may draw new links.
The initial value is true.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="allowMove" class="tsd-anchor"></a>
<h3>
allow<wbr>Move
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets whether the user may move objects.
The initial value is true.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="allowRelink" class="tsd-anchor"></a>
<h3>
allow<wbr>Relink
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets whether the user may reconnect existing links.
The initial value is true.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="allowReshape" class="tsd-anchor"></a>
<h3>
allow<wbr>Reshape
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets whether the user may reshape parts.
The initial value is true.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="allowResize" class="tsd-anchor"></a>
<h3>
allow<wbr>Resize
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets whether the user may resize parts.
The initial value is true.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="allowRotate" class="tsd-anchor"></a>
<h3>
allow<wbr>Rotate
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets whether the user may rotate parts.
The initial value is true.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="allowSelect" class="tsd-anchor"></a>
<h3>
allow<wbr>Select
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets whether the user may select objects.
The initial value is true.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="allowTextEdit" class="tsd-anchor"></a>
<h3>
allow<wbr>Text<wbr>Edit
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets whether the user may do in-place text editing.
The initial value is true.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="allowUndo" class="tsd-anchor"></a>
<h3>
allow<wbr>Undo
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets whether the user may undo or redo any changes.
The initial value is true.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="allowUngroup" class="tsd-anchor"></a>
<h3>
allow<wbr>Ungroup
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets whether the user may ungroup existing groups.
The initial value is true.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="allowVerticalScroll" class="tsd-anchor"></a>
<h3>
allow<wbr>Vertical<wbr>Scroll
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets whether the user is allowed to use the vertical scrollbar.
The initial value is true.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#hasVerticalScrollbar">hasVerticalScrollbar</a>, <a href="Diagram.html#allowHorizontalScroll">allowHorizontalScroll</a></p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="allowZoom" class="tsd-anchor"></a>
<h3>
allow<wbr>Zoom
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets whether the user may zoom into or out of the Diagram.
The initial value is true.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-get-signature tsd-parent-kind-class">
<a name="animationManager" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagReadOnly">Read-only</span>
animation<wbr>Manager
<span class="tsd-signature-symbol">: </span><a href="AnimationManager.html" class="tsd-signature-type">AnimationManager</a> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>This read-only property returns the <a href="AnimationManager.html">AnimationManager</a> for this Diagram.</p>
<dl class="tsd-comment-tags">
<dt>since</dt>
<dd><p>1.4</p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="autoScale" class="tsd-anchor"></a>
<h3>
auto<wbr>Scale
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the autoScale behavior of the Diagram, controlling whether or not the
Diagram&#39;s bounds automatically scale to fit the view.</p>
<p>The only accepted values are the constant properties of Diagram,
<a href="Diagram.html#static-None">Diagram.None</a>, <a href="Diagram.html#static-Uniform">Diagram.Uniform</a>, or <a href="Diagram.html#static-UniformToFill">Diagram.UniformToFill</a>.
Setting this will change the Diagram&#39;s <a href="Diagram.html#scale">Diagram.scale</a> and <a href="Diagram.html#position">Diagram.position</a>, if appropriate.</p>
<p>The default value is <a href="Diagram.html#static-None">Diagram.None</a> - the scale and position are not automatically adjusted
according to the area covered by the document.
When the value is not None, any value for <a href="Diagram.html#initialAutoScale">initialAutoScale</a> or <a href="Diagram.html#initialScale">initialScale</a> is ignored.</p>
<p class="box">
When autoScale is set to a non-<a href="Diagram.html#static-None">Diagram.None</a> value,
the user will not be able to zoom, and setting <a href="Diagram.html#scale">scale</a> will do nothing.
If you only want to scale automatically on initialization, use <a href="Diagram.html#initialAutoScale">initialAutoScale</a>.
<p>Setting this property to <a href="Diagram.html#static-Uniform">Diagram.Uniform</a> is basically the same as calling <a href="Diagram.html#zoomToFit">zoomToFit</a>
all the time, or just disabling interactive zooming.</p>
<p>Note that depending on the values of <a href="Diagram.html#maxScale">maxScale</a> and <a href="Diagram.html#minScale">minScale</a>, the actual value for <a href="Diagram.html#scale">scale</a>
might be limited.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="autoScrollRegion" class="tsd-anchor"></a>
<h3>
auto<wbr>Scroll<wbr>Region
<span class="tsd-signature-symbol">: </span><a href="../index.html#MarginLike" class="tsd-signature-type">MarginLike</a> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the Margin that describes the Diagram&#39;s autoScrollRegion. 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 within
the region on the top or bottom, the view will automatically scroll
vertically in that direction. You can specify a distance of zero to disable autoscrolling
in a direction; a value of 0,0,0,0 turns off autoscrolling altogether.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="click" class="tsd-anchor"></a>
<h3>
click
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">e</span><span class="tsd-signature-symbol">: </span><a href="InputEvent.html" class="tsd-signature-type">InputEvent</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the function to execute when the user single-primary-clicks
on the background of the Diagram.
This typically involves a mouse-down followed by a prompt mouse-up
at approximately the same position using the left (primary) mouse button.
This property is used by the <a href="ClickSelectingTool.html">ClickSelectingTool</a>
when the user clicks on no object.
The function is called in addition to the <a href="DiagramEvent.html">DiagramEvent</a>
that is raised with the name &quot;BackgroundSingleClicked&quot;.</p>
<p>If this property value is a function, it is called with an <a href="InputEvent.html">InputEvent</a>.
By default this property is null.</p>
<p>If you do provide a function that makes changes to the diagram or to its model,
you should do so within a transaction -- call <a href="Diagram.html#startTransaction">startTransaction</a> and <a href="Diagram.html#commitTransaction">commitTransaction</a>.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#doubleClick">doubleClick</a>, <a href="Diagram.html#contextClick">contextClick</a>, <a href="GraphObject.html#click">GraphObject.click</a></p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="commandHandler" class="tsd-anchor"></a>
<h3>
command<wbr>Handler
<span class="tsd-signature-symbol">: </span><a href="CommandHandler.html" class="tsd-signature-type">CommandHandler</a> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the <a href="CommandHandler.html">CommandHandler</a> for this Diagram.</p>
<p>This is set to a new instance of <a href="CommandHandler.html">CommandHandler</a> on Diagram instantiation.</p>
<p>Setting this property does not notify about any changed event.
The value cannot be null and must not be shared with other Diagrams.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="contentAlignment" class="tsd-anchor"></a>
<h3>
content<wbr>Alignment
<span class="tsd-signature-symbol">: </span><a href="Spot.html" class="tsd-signature-type">Spot</a> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the content alignment <a href="Spot.html">Spot</a> of this Diagram, to be used in determining
how parts are positioned when the <a href="Diagram.html#viewportBounds">viewportBounds</a> width or height is smaller than the <a href="Diagram.html#documentBounds">documentBounds</a>.</p>
<p>For instance a spot of <a href="Spot.html#static-Center">Spot.Center</a> would ensure that the Diagram&#39;s
contents are always centered in the viewport.</p>
<p>If you want the content to be aligned only initially, use <a href="Diagram.html#initialContentAlignment">initialContentAlignment</a> instead.</p>
<p>The default value is <a href="Spot.html#static-Default">Spot.Default</a>, which causes no automatic scrolling or positioning.
When the value is not Default, any value for <a href="Diagram.html#initialContentAlignment">initialContentAlignment</a> or <a href="Diagram.html#initialPosition">initialPosition</a> is ignored.</p>
<p>Setting this property has the same effect as implementing
a &quot;LayoutCompleted&quot; DiagramEvent listener that scrolls the viewport to align the content.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="contextClick" class="tsd-anchor"></a>
<h3>
context<wbr>Click
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">e</span><span class="tsd-signature-symbol">: </span><a href="InputEvent.html" class="tsd-signature-type">InputEvent</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the function to execute when the user single-secondary-clicks
on the background of the Diagram.
This typically involves a mouse-down followed by a prompt mouse-up
at approximately the same position using the right (secondary) mouse button.
This property is used by the <a href="ClickSelectingTool.html">ClickSelectingTool</a>
when the user clicks on no object.
The function is called in addition to the <a href="DiagramEvent.html">DiagramEvent</a>
that is raised with the name &quot;BackgroundContextClicked&quot;.</p>
<p>If this property value is a function, it is called with an <a href="InputEvent.html">InputEvent</a>.
By default this property is null.</p>
<p>If you do provide a function that makes changes to the diagram or to its model,
you should do so within a transaction -- call <a href="Diagram.html#startTransaction">startTransaction</a> and <a href="Diagram.html#commitTransaction">commitTransaction</a>.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#click">click</a>, <a href="Diagram.html#doubleClick">doubleClick</a>, <a href="GraphObject.html#contextClick">GraphObject.contextClick</a></p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="contextMenu" class="tsd-anchor"></a>
<h3>
context<wbr>Menu
<span class="tsd-signature-symbol">: </span><a href="Adornment.html" class="tsd-signature-type">Adornment</a><span class="tsd-signature-symbol"> | </span><a href="HTMLInfo.html" class="tsd-signature-type">HTMLInfo</a><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>This <a href="Adornment.html">Adornment</a> or <a href="HTMLInfo.html">HTMLInfo</a> is shown when the use context clicks in the background.
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 <a href="ContextMenuTool.html#defaultTouchContextMenu">ContextMenuTool.defaultTouchContextMenu</a> for details.</p>
<pre><code class="hljs js"> diagram.contextMenu =
$(<span class="hljs-string">"ContextMenu"</span>,
$(<span class="hljs-string">"ContextMenuButton"</span>,
$(go.TextBlock, <span class="hljs-string">"Undo"</span>),
{ <span class="hljs-attr">click</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e, obj</span>) </span>{ e.diagram.commandHandler.undo(); } },
<span class="hljs-keyword">new</span> go.Binding(<span class="hljs-string">"visible"</span>, <span class="hljs-string">""</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">o</span>) </span>{
<span class="hljs-keyword">return</span> o.diagram.commandHandler.canUndo();
}).ofObject()),
$(<span class="hljs-string">"ContextMenuButton"</span>,
$(go.TextBlock, <span class="hljs-string">"Redo"</span>),
{ <span class="hljs-attr">click</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e, obj</span>) </span>{ e.diagram.commandHandler.redo(); } },
<span class="hljs-keyword">new</span> go.Binding(<span class="hljs-string">"visible"</span>, <span class="hljs-string">""</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">o</span>) </span>{
<span class="hljs-keyword">return</span> o.diagram.commandHandler.canRedo();
}).ofObject())
);</code></pre>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="GraphObject.html#contextMenu">GraphObject.contextMenu</a>, <a href="ContextMenuTool.html">ContextMenuTool</a></p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="currentCursor" class="tsd-anchor"></a>
<h3>
current<wbr>Cursor
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the current cursor for the Diagram, overriding the <a href="Diagram.html#defaultCursor">defaultCursor</a>.</p>
<p>Valid CSS cursors are accepted,
such as &quot;auto&quot;, &quot;default&quot;, &quot;none&quot;, &quot;context-menu&quot;, &quot;help&quot;, &quot;pointer&quot;, &quot;progress&quot;, &quot;wait&quot;, etc.</p>
<p>It is possible to use custom cursors with the syntax &quot;url(path_to_image), default&quot;.
A fallback (like default here) is necessary for a custom cursor to work.</p>
<p>To read more about cursor syntax, go to:
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/cursor">CSS cursors (mozilla.org)</a>.</p>
<p>If the specified cursor is not accepted by the platform, GoJS will append
<code>-webkit-</code> or <code>-moz-</code> prefixes.</p>
<p>Setting this property does not notify about any changed event.
Setting this value to the empty string (&#39;&#39;) returns the Diagram&#39;s cursor to the <a href="Diagram.html#defaultCursor">defaultCursor</a>.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#defaultCursor">defaultCursor</a>, <a href="GraphObject.html#cursor">GraphObject.cursor</a></p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="currentTool" class="tsd-anchor"></a>
<h3>
current<wbr>Tool
<span class="tsd-signature-symbol">: </span><a href="Tool.html" class="tsd-signature-type">Tool</a> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the current tool for this Diagram that handles all input events.
This value is frequently replaced by the <a href="Diagram.html#toolManager">toolManager</a> as different tools run.</p>
<p>Each Diagram has a number of tools that define its behavior when responding to mouse events.
These include <a href="ClickSelectingTool.html">ClickSelectingTool</a>, <a href="DraggingTool.html">DraggingTool</a>, <a href="DragSelectingTool.html">DragSelectingTool</a>, <a href="LinkingTool.html">LinkingTool</a>, and <a href="ResizingTool.html">ResizingTool</a>, among others.</p>
<p>Initially this is set to the value of <a href="Diagram.html#defaultTool">defaultTool</a>.
Setting this to a null value is treated as if it were set to the <a href="Diagram.html#defaultTool">defaultTool</a>,
because there should always be a currently running tool, except when the diagram is being initialized.</p>
<p>A <a href="ToolManager.html">ToolManager</a> is the default tool used by a Diagram - it chooses to run one of the other tools
depending on the circumstances.</p>
<p>Setting this property to a new tool stops the previous current tool</p>
<p>Setting this property does not notify about any changed event.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#defaultTool">defaultTool</a>, <a href="Diagram.html#toolManager">toolManager</a></p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="defaultCursor" class="tsd-anchor"></a>
<h3>
default<wbr>Cursor
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the cursor to be used for the Diagram
when no <a href="GraphObject.html">GraphObject</a> specifies a different cursor.</p>
<p>Valid CSS cursors are accepted,
such as &quot;auto&quot;, &quot;default&quot;, &quot;none&quot;, &quot;context-menu&quot;, &quot;help&quot;, &quot;pointer&quot;, &quot;progress&quot;, &quot;wait&quot;, etc.</p>
<p>It is possible to use custom cursors with the syntax &quot;url(path_to_image), default&quot;.
A fallback (like default here) is necessary for a custom cursor to work.</p>
<p>To read more about cursor syntax, go to:
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/cursor">CSS cursors (mozilla.org)</a>.
The default value is &quot;auto&quot;.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#currentCursor">currentCursor</a>, <a href="GraphObject.html#cursor">GraphObject.cursor</a></p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="defaultScale" class="tsd-anchor"></a>
<h3>
default<wbr>Scale
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the <a href="Diagram.html#scale">Diagram.scale</a> set by <a href="CommandHandler.html#resetZoom">CommandHandler.resetZoom</a>
and when computing stretch values, such as when <a href="Diagram.html#autoScale">autoScale</a> or
<a href="Diagram.html#initialAutoScale">initialAutoScale</a> are set, or when <a href="Diagram.html#zoomToFit">zoomToFit</a> is called.</p>
<p>The default value is 1.0.
The value must be a number larger than 0.
Setting this property does not raise any events.</p>
<dl class="tsd-comment-tags">
<dt>since</dt>
<dd><p>2.0</p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="defaultTool" class="tsd-anchor"></a>
<h3>
default<wbr>Tool
<span class="tsd-signature-symbol">: </span><a href="Tool.html" class="tsd-signature-type">Tool</a> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the default tool for this Diagram that becomes the current tool when the current tool stops.
Initially this value is the same tool as <a href="Diagram.html#toolManager">toolManager</a>, which is an instance of <a href="ToolManager.html">ToolManager</a>.</p>
<p>Setting this property also sets the <a href="Diagram.html#currentTool">currentTool</a> if the old default tool is the currently running tool.</p>
<p>Setting this property does not notify about any changed event.
The value cannot be null and must not be shared with other Diagrams.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#currentTool">currentTool</a>, <a href="Diagram.html#toolManager">toolManager</a></p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="div" class="tsd-anchor"></a>
<h3>
div
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">HTMLDivElement</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the Diagram&#39;s HTMLDivElement, via an HTML Element ID.
This is typically set automatically when a Div is supplied as an argument to Diagram&#39;s constructor.</p>
<p>Setting this property to a new value will clobber any HTML and
inner 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.</p>
<p>If you want to disassociate the Diagram from the HTML Div element, set <a href="Diagram.html#div">Diagram.div</a> to null.
If you remove a part of the HTML DOM containing a Div with a Diagram, you will need to
set <a href="Diagram.html#div">div</a> to null in order for the page to recover the memory.</p>
<p>You should not attempt to manually modify the contents of this Div.
Changing this property value does not raise a Changed event.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-get-signature tsd-parent-kind-class">
<a name="documentBounds" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagReadOnly">Read-only</span>
document<wbr>Bounds
<span class="tsd-signature-symbol">: </span><a href="Rect.html" class="tsd-signature-type">Rect</a> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>This read-only property returns the bounds of the diagram&#39;s contents, in document coordinates.</p>
<p>This is normally computed and set by <a href="Diagram.html#computeBounds">computeBounds</a> during Diagram updates
that can occur for any number of relevant reasons, such as a <a href="Part.html">Part</a> changing size.</p>
<p>The Diagram&#39;s documentBounds can have an unvarying specific value
by setting the <a href="Diagram.html#fixedBounds">fixedBounds</a> property.</p>
<p>If the documentBounds are larger than the <a href="Diagram.html#viewportBounds">viewportBounds</a>,
scrollbars will appear on desktop browsers. You can disable scrolling with the
<a href="Diagram.html#allowHorizontalScroll">allowHorizontalScroll</a> and <a href="Diagram.html#allowVerticalScroll">allowVerticalScroll</a> properties, and
you can disable scrollbars themselves with the <a href="Diagram.html#hasHorizontalScrollbar">hasHorizontalScrollbar</a>
and <a href="Diagram.html#hasVerticalScrollbar">hasVerticalScrollbar</a> properties.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="doubleClick" class="tsd-anchor"></a>
<h3>
double<wbr>Click
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">e</span><span class="tsd-signature-symbol">: </span><a href="InputEvent.html" class="tsd-signature-type">InputEvent</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the function to execute when the user double-primary-clicks
on the background of the Diagram.
This typically involves a mouse-down/up/down/up in rapid succession
at approximately the same position using the left (primary) mouse button.
This property is used by the <a href="ClickSelectingTool.html">ClickSelectingTool</a>
when the user clicks on no object.
The function is called in addition to the <a href="DiagramEvent.html">DiagramEvent</a>
that is raised with the name &quot;BackgroundDoubleClicked&quot;.</p>
<p>If this property value is a function, it is called with an <a href="InputEvent.html">InputEvent</a>.
By default this property is null.</p>
<p>If you do provide a function that makes changes to the diagram or to its model,
you should do so within a transaction -- call <a href="Diagram.html#startTransaction">startTransaction</a> and <a href="Diagram.html#commitTransaction">commitTransaction</a>.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#click">click</a>, <a href="Diagram.html#contextClick">contextClick</a>, <a href="GraphObject.html#doubleClick">GraphObject.doubleClick</a></p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="firstInput" class="tsd-anchor"></a>
<h3>
first<wbr>Input
<span class="tsd-signature-symbol">: </span><a href="InputEvent.html" class="tsd-signature-type">InputEvent</a> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the most recent mouse-down <a href="InputEvent.html">InputEvent</a> that occurred.</p>
<p>Setting this property does not notify about any changed event.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#lastInput">lastInput</a></p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="fixedBounds" class="tsd-anchor"></a>
<h3>
fixed<wbr>Bounds
<span class="tsd-signature-symbol">: </span><a href="Rect.html" class="tsd-signature-type">Rect</a> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets a fixed bounding rectangle to be returned by <a href="Diagram.html#documentBounds">documentBounds</a>
and <a href="Diagram.html#computeBounds">computeBounds</a>.
By default this has NaN values, meaning that <a href="Diagram.html#computeBounds">computeBounds</a>
will compute the union of all of the parts in the Diagram to determine the <a href="Diagram.html#documentBounds">documentBounds</a>.
If all x/y/width/height values are real numbers, this value is used as the <a href="Diagram.html#documentBounds">documentBounds</a>.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="grid" class="tsd-anchor"></a>
<h3>
grid
<span class="tsd-signature-symbol">: </span><a href="Panel.html" class="tsd-signature-type">Panel</a> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets a <a href="Panel.html">Panel</a> of type <a href="Panel.html#static-Grid">Panel.Grid</a> acting as the background grid
extending across the whole viewport of this diagram.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="groupSelectionAdornmentTemplate" class="tsd-anchor"></a>
<h3>
group<wbr>Selection<wbr>Adornment<wbr>Template
<span class="tsd-signature-symbol">: </span><a href="Adornment.html" class="tsd-signature-type">Adornment</a> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the default selection <a href="Adornment.html">Adornment</a> template, used to adorn selected Groups.</p>
<p>Each <a href="Group.html">Group</a> can have its own <a href="Part.html#selectionAdornmentTemplate">Part.selectionAdornmentTemplate</a>, which if non-null will take precedence over this Diagram property.</p>
<p>This Adornment must not be in the visual tree of any Diagram.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="groupTemplate" class="tsd-anchor"></a>
<h3>
group<wbr>Template
<span class="tsd-signature-symbol">: </span><a href="Group.html" class="tsd-signature-type">Group</a> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the default <a href="Group.html">Group</a> template used as the archetype
for group data that is added to the <a href="Diagram.html#model">model</a>.</p>
<p>Setting this property just modifies the <a href="Diagram.html#groupTemplateMap">groupTemplateMap</a>
by replacing the entry named with the empty string.
The value must not be null and must be a <a href="Group.html">Group</a>, not a <a href="Node.html">Node</a> or simple <a href="Part.html">Part</a>.
This Part must not be in the visual tree of any Diagram.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="groupTemplateMap" class="tsd-anchor"></a>
<h3>
group<wbr>Template<wbr>Map
<span class="tsd-signature-symbol">: </span><a href="Map.html" class="tsd-signature-type">Map</a><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">, </span><a href="Group.html" class="tsd-signature-type">Group</a><span class="tsd-signature-symbol">&gt;</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets a <a href="Map.html">Map</a> mapping template names to <a href="Group.html">Group</a>s.
These groups are copied for each group data that is added to the <a href="Diagram.html#model">model</a>.</p>
<p>The new value must not be null, nor may it contain a <a href="Node.html">Node</a> or <a href="Link.html">Link</a> or simple <a href="Part.html">Part</a>.
The Links must not be in the visual tree of any Diagram.
Replacing this Map will automatically call <a href="Diagram.html#rebuildParts">rebuildParts</a>.</p>
<p>If you modify this <a href="Map.html">Map</a>, by replacing a <a href="Group.html">Group</a> in it or by adding or
removing a map entry, you need to explicitly call <a href="Diagram.html#rebuildParts">rebuildParts</a> afterwards.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="handlesDragDropForTopLevelParts" class="tsd-anchor"></a>
<h3>
handles<wbr>Drag<wbr>Drop<wbr>For<wbr>Top<wbr>Level<wbr>Parts
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets whether drag-and-drop events may be bubbled up to the diagram if not handled by a part.
The default value is false -- each Node or Link that in the diagram needs to define
its own <a href="GraphObject.html#mouseDragEnter">GraphObject.mouseDragEnter</a>, <a href="GraphObject.html#mouseDragLeave">GraphObject.mouseDragLeave</a>, and <a href="GraphObject.html#mouseDrop">GraphObject.mouseDrop</a>
event handlers if you want dragging/dropping on a part to act as if the user were acting on the diagram.</p>
<p>If set to true, this will call <a href="Diagram.html#mouseDragOver">Diagram.mouseDragOver</a> during a drag, even while dragging over top-level parts,
and <a href="Diagram.html#mouseDrop">Diagram.mouseDrop</a> will be called even when dropping onto parts.</p>
<p>This property will have no impact while dropping on a Group.
The Group&#39;s mouseDrop and <a href="Group.html#handlesDragDropForMembers">Group.handlesDragDropForMembers</a> should be set if desired.</p>
<p>GraphObjects do not have a mouseDragOver property, so if this is set to true, the Diagram&#39;s mouseDragOver will
always be called, even when dragging over a part.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#mouseDragOver">mouseDragOver</a>, <a href="Diagram.html#mouseDrop">mouseDrop</a>, <a href="Group.html#handlesDragDropForMembers">Group.handlesDragDropForMembers</a>, <a href="GraphObject.html#mouseDrop">GraphObject.mouseDrop</a></p>
</dd>
<dt>since</dt>
<dd><p>2.0</p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="hasHorizontalScrollbar" class="tsd-anchor"></a>
<h3>
has<wbr>Horizontal<wbr>Scrollbar
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets whether the Diagram has a horizontal Scrollbar.</p>
<p>To enable or disable scrolling itself, use <a href="Diagram.html#allowHorizontalScroll">allowHorizontalScroll</a> and <a href="Diagram.html#allowVerticalScroll">allowVerticalScroll</a>.</p>
<p>Adding or removing a scrollbar modifies the diagram&#39;s viewport.</p>
<p>The initial value is true.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#allowHorizontalScroll">allowHorizontalScroll</a>, <a href="Diagram.html#hasVerticalScrollbar">hasVerticalScrollbar</a></p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="hasVerticalScrollbar" class="tsd-anchor"></a>
<h3>
has<wbr>Vertical<wbr>Scrollbar
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets whether the Diagram has a vertical Scrollbar.</p>
<p>To enable or disable scrolling itself, use <a href="Diagram.html#allowHorizontalScroll">allowHorizontalScroll</a> and <a href="Diagram.html#allowVerticalScroll">allowVerticalScroll</a>.</p>
<p>Adding or removing a scrollbar modifies the diagram&#39;s viewport.</p>
<p>The initial value is true.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#allowVerticalScroll">allowVerticalScroll</a>, <a href="Diagram.html#hasHorizontalScrollbar">hasHorizontalScrollbar</a></p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-get-signature tsd-parent-kind-class">
<a name="highlighteds" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagReadOnly">Read-only</span>
highlighteds
<span class="tsd-signature-symbol">: </span><a href="Set.html" class="tsd-signature-type">Set</a><span class="tsd-signature-symbol">&lt;</span><a href="Part.html" class="tsd-signature-type">Part</a><span class="tsd-signature-symbol">&gt;</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>This read-only property returns the read-only collection of highlighted parts.</p>
<p>Do not modify this collection.
If you want to highlight or remove the highlight for a particular Part in a Diagram,
set the <a href="Part.html#isHighlighted">Part.isHighlighted</a> property.
If you want to remove all highlights, call <a href="Diagram.html#clearHighlighteds">clearHighlighteds</a>.
If you want to removal all highlights and highlight a single object, call <a href="Diagram.html#highlight">highlight</a>.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="initialAutoScale" class="tsd-anchor"></a>
<h3>
initial<wbr>Auto<wbr>Scale
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets how the scale of the diagram is automatically
set at the time of the &quot;InitialLayoutCompleted&quot; DiagramEvent, after the model has been replaced.</p>
<p>The only accepted values are listed as constant properties of Diagram,
such as <a href="Diagram.html#static-None">Diagram.None</a>, <a href="Diagram.html#static-Uniform">Diagram.Uniform</a>, or <a href="Diagram.html#static-UniformToFill">Diagram.UniformToFill</a>.
Setting this will change the Diagram&#39;s <a href="Diagram.html#scale">Diagram.scale</a> and <a href="Diagram.html#position">Diagram.position</a>, if appropriate.</p>
<p>If you want to always automatically scale the Diagram, set <a href="Diagram.html#autoScale">autoScale</a> instead.
If you want to set the scale to a specific value on initialization (each time the model is replaced),
set <a href="Diagram.html#initialScale">initialScale</a>.</p>
<p>The default value is <a href="Diagram.html#static-None">Diagram.None</a> -- the scale and position are not automatically adjusted
according to the area covered by the document.</p>
<p>Setting this property to <a href="Diagram.html#static-Uniform">Diagram.Uniform</a> is basically the same as calling <a href="Diagram.html#zoomToFit">zoomToFit</a>
in an &quot;InitialLayoutCompleted&quot; <a href="DiagramEvent.html">DiagramEvent</a> listener.</p>
<p>Note that depending on the values of <a href="Diagram.html#maxScale">maxScale</a> and <a href="Diagram.html#minScale">minScale</a>, the actual value for <a href="Diagram.html#scale">scale</a>
might be limited.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="initialContentAlignment" class="tsd-anchor"></a>
<h3>
initial<wbr>Content<wbr>Alignment
<span class="tsd-signature-symbol">: </span><a href="Spot.html" class="tsd-signature-type">Spot</a> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the initial content alignment <a href="Spot.html">Spot</a> of this Diagram, to be used in determining
how parts are positioned initially relative to the viewport, when the <a href="Diagram.html#viewportBounds">viewportBounds</a> width or height is smaller than the <a href="Diagram.html#documentBounds">documentBounds</a>.</p>
<p>For instance a spot of <a href="Spot.html#static-Center">Spot.Center</a> would ensure that the Diagram&#39;s contents are initially centered in the viewport.</p>
<p>To initially align the document when the documentBounds are larger than the viewport, use <a href="Diagram.html#initialDocumentSpot">initialDocumentSpot</a> and <a href="Diagram.html#initialViewportSpot">initialViewportSpot</a>.</p>
<p>If you want the content to be constantly aligned with a spot, use <a href="Diagram.html#contentAlignment">contentAlignment</a> instead.</p>
<p>The default value is <a href="Spot.html#static-Default">Spot.Default</a>, which causes no automatic scrolling or positioning.</p>
<p>Setting this property has the same effect as implementing
an &quot;InitialLayoutCompleted&quot; DiagramEvent listener that scrolls the viewport to align the content.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#initialDocumentSpot">initialDocumentSpot</a>, <a href="Diagram.html#initialViewportSpot">initialViewportSpot</a></p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="initialDocumentSpot" class="tsd-anchor"></a>
<h3>
initial<wbr>Document<wbr>Spot
<span class="tsd-signature-symbol">: </span><a href="Spot.html" class="tsd-signature-type">Spot</a> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the spot in the document&#39;s area that should be coincident with the
<a href="Diagram.html#initialViewportSpot">initialViewportSpot</a> of the viewport when the document is first initialized.
The default value is <a href="Spot.html#static-TopLeft">Spot.TopLeft</a>.</p>
<p>If you set this, often you will also want to set <a href="Diagram.html#initialViewportSpot">initialViewportSpot</a>.
If you set <a href="Diagram.html#initialPosition">initialPosition</a>, it will take precedence over this property.</p>
<p>Setting this property and <a href="Diagram.html#initialViewportSpot">initialViewportSpot</a> has the same effect as implementing
an &quot;InitialLayoutCompleted&quot; DiagramEvent listener that calls <a href="Diagram.html#alignDocument">alignDocument</a>.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#initialViewportSpot">initialViewportSpot</a>, <a href="Diagram.html#initialPosition">initialPosition</a>, <a href="Diagram.html#initialContentAlignment">initialContentAlignment</a></p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="initialPosition" class="tsd-anchor"></a>
<h3>
initial<wbr>Position
<span class="tsd-signature-symbol">: </span><a href="Point.html" class="tsd-signature-type">Point</a> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the initial coordinates of this Diagram in the viewport, eventually setting the <a href="Diagram.html#position">position</a>.
This value is relevant on initialization of a <a href="Diagram.html#model">model</a> or if <a href="Diagram.html#delayInitialization">delayInitialization</a> is called.
Value must be of type Point in document coordinates.
The default is Point(NaN, NaN).</p>
<p>Setting this property has the same effect as implementing
an &quot;InitialLayoutCompleted&quot; DiagramEvent listener that sets <a href="Diagram.html#position">position</a>.</p>
<p>Setting this property does not notify about any changed event.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#initialDocumentSpot">initialDocumentSpot</a>, <a href="Diagram.html#initialViewportSpot">initialViewportSpot</a></p>
</dd>
<dt>since</dt>
<dd><p>1.1</p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="initialScale" class="tsd-anchor"></a>
<h3>
initial<wbr>Scale
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the initial scale of this Diagram in the viewport, eventually setting the <a href="Diagram.html#scale">scale</a>.
This value is relevant on initialization of a <a href="Diagram.html#model">model</a> or if <a href="Diagram.html#delayInitialization">delayInitialization</a> is called.
The default is NaN.</p>
<p>Setting this property has the same effect as implementing
an &quot;InitialLayoutCompleted&quot; DiagramEvent listener that sets <a href="Diagram.html#scale">scale</a>.</p>
<dl class="tsd-comment-tags">
<dt>since</dt>
<dd><p>1.1</p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="initialViewportSpot" class="tsd-anchor"></a>
<h3>
initial<wbr>Viewport<wbr>Spot
<span class="tsd-signature-symbol">: </span><a href="Spot.html" class="tsd-signature-type">Spot</a> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the spot in the viewport that should be coincident with the
<a href="Diagram.html#initialDocumentSpot">initialDocumentSpot</a> of the document when the document is first initialized.
The default value is <a href="Spot.html#static-TopLeft">Spot.TopLeft</a>.</p>
<p>If you set this, often you will also want to set <a href="Diagram.html#initialDocumentSpot">initialDocumentSpot</a>.
If you set <a href="Diagram.html#initialPosition">initialPosition</a>, it will take precedence over this property.</p>
<p>Setting this property and <a href="Diagram.html#initialDocumentSpot">initialDocumentSpot</a> has the same effect as implementing
an &quot;InitialLayoutCompleted&quot; DiagramEvent listener that calls <a href="Diagram.html#alignDocument">alignDocument</a>.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#initialDocumentSpot">initialDocumentSpot</a>, <a href="Diagram.html#initialContentAlignment">initialContentAlignment</a></p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="isEnabled" class="tsd-anchor"></a>
<h3>
is<wbr>Enabled
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets whether the user may interact with the Diagram.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#isReadOnly">isReadOnly</a>, <a href="Diagram.html#isModelReadOnly">isModelReadOnly</a></p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="isModelReadOnly" class="tsd-anchor"></a>
<h3>
is<wbr>Model<wbr>Read<wbr>Only
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets whether the Diagram&#39;s <a href="Diagram.html#model">Diagram.model</a> is <a href="Model.html#isReadOnly">Model.isReadOnly</a>.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#isReadOnly">isReadOnly</a>, <a href="Diagram.html#isEnabled">isEnabled</a></p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="isModified" class="tsd-anchor"></a>
<h3>
is<wbr>Modified
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets whether this Diagram&#39;s state has been modified.
Setting this property does not notify about any changed event,
but it does raise the &quot;Modified&quot; <a href="DiagramEvent.html">DiagramEvent</a>,
although perhaps not immediately.</p>
<p>Returns true if the Diagram has been changed,
if the <a href="Diagram.html#undoManager">undoManager</a> has recorded any changes, or
if an undo has been performed without a corresponding redo.</p>
<p>Replacing the <a href="Diagram.html#model">model</a> automatically sets this property to false after the initial layout has completed.
The &quot;Modified&quot; DiagramEvent is also raised when an undo or a redo has finished.
A &quot;Modified&quot; DiagramEvent listener must not modify this Diagram or its Model.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="isMouseCaptured" class="tsd-anchor"></a>
<h3>
is<wbr>Mouse<wbr>Captured
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets whether mouse events initiated within the Diagram will be captured.
The initial value is true.
Setting this property does not notify about any changed event.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="isReadOnly" class="tsd-anchor"></a>
<h3>
is<wbr>Read<wbr>Only
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets whether the Diagram may be modified by the user,
while still allowing the user to scroll, zoom, and select.
The initial value is false.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#isModelReadOnly">isModelReadOnly</a>, <a href="Diagram.html#isEnabled">isEnabled</a></p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="isTreePathToChildren" class="tsd-anchor"></a>
<h3>
is<wbr>Tree<wbr>Path<wbr>ToChildren
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets whether the Diagram tree structure is defined by
links going from the parent node to their children, or vice-versa.
By default this property is true: links go from the parent node to the child node.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="lastInput" class="tsd-anchor"></a>
<h3>
last<wbr>Input
<span class="tsd-signature-symbol">: </span><a href="InputEvent.html" class="tsd-signature-type">InputEvent</a> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the last <a href="InputEvent.html">InputEvent</a> that occurred.</p>
<p>This property is useful in tools and real-time operations for determining
where the mouse pointer was most recently located.</p>
<p>Setting this property does not notify about any changed event.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#firstInput">firstInput</a></p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-get-signature tsd-parent-kind-class">
<a name="layers" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagReadOnly">Read-only</span>
layers
<span class="tsd-signature-symbol">: </span><a href="Iterator.html" class="tsd-signature-type">Iterator</a><span class="tsd-signature-symbol">&lt;</span><a href="Layer.html" class="tsd-signature-type">Layer</a><span class="tsd-signature-symbol">&gt;</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>This read-only property returns an iterator for this Diagram&#39;s Layers.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#addLayer">addLayer</a>, <a href="Diagram.html#removeLayer">removeLayer</a></p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="layout" class="tsd-anchor"></a>
<h3>
layout
<span class="tsd-signature-symbol">: </span><a href="Layout.html" class="tsd-signature-type">Layout</a> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the <a href="Layout.html">Layout</a> used to position all of the top-level nodes and links in this Diagram.
By default this property is an instance of a simple <a href="Layout.html">Layout</a>
that assigns positions to all parts that need it.
The value cannot be null and must not be shared with other Diagrams.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class tsd-is-static">
<a name="static-licenseKey" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagStatic">Static</span>
license<wbr>Key
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the license key.</p>
<dl class="tsd-comment-tags">
<dt>since</dt>
<dd><p>2.0</p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="linkSelectionAdornmentTemplate" class="tsd-anchor"></a>
<h3>
link<wbr>Selection<wbr>Adornment<wbr>Template
<span class="tsd-signature-symbol">: </span><a href="Adornment.html" class="tsd-signature-type">Adornment</a> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the default selection <a href="Adornment.html">Adornment</a> template, used to adorn selected Links.</p>
<p>Each <a href="Link.html">Link</a> can have its own <a href="Part.html#selectionAdornmentTemplate">Part.selectionAdornmentTemplate</a>, which if non-null will take precedence over this Diagram property.</p>
<p>This Adornment must not be in the visual tree of any Diagram.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="linkTemplate" class="tsd-anchor"></a>
<h3>
link<wbr>Template
<span class="tsd-signature-symbol">: </span><a href="Link.html" class="tsd-signature-type">Link</a> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the default <a href="Link.html">Link</a> template used as the archetype
for link data that is added to the <a href="Diagram.html#model">model</a>.</p>
<p>Setting this property just modifies the <a href="Diagram.html#linkTemplateMap">linkTemplateMap</a>
by replacing the entry named with the empty string.
The value must not be null and must be a <a href="Link.html">Link</a>, not a <a href="Node.html">Node</a> or simple <a href="Part.html">Part</a>.
This Link must not be in the visual tree of any Diagram.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="linkTemplateMap" class="tsd-anchor"></a>
<h3>
link<wbr>Template<wbr>Map
<span class="tsd-signature-symbol">: </span><a href="Map.html" class="tsd-signature-type">Map</a><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">, </span><a href="Link.html" class="tsd-signature-type">Link</a><span class="tsd-signature-symbol">&gt;</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets a <a href="Map.html">Map</a> mapping template names to <a href="Link.html">Link</a>s.
These links are copied for each link data that is added to the <a href="Diagram.html#model">model</a>.</p>
<p>The new value must not be null and must contain only <a href="Link.html">Link</a>s, not <a href="Node.html">Node</a>s or simple <a href="Part.html">Part</a>s.
The Links must not be in the visual tree of any Diagram.
Replacing this Map will automatically call <a href="Diagram.html#rebuildParts">rebuildParts</a>.</p>
<p>If you modify this <a href="Map.html">Map</a>, by replacing a <a href="Link.html">Link</a> in it or by adding or
removing a map entry, you need to explicitly call <a href="Diagram.html#rebuildParts">rebuildParts</a> afterwards.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-get-signature tsd-parent-kind-class">
<a name="links" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagReadOnly">Read-only</span>
links
<span class="tsd-signature-symbol">: </span><a href="Iterator.html" class="tsd-signature-type">Iterator</a><span class="tsd-signature-symbol">&lt;</span><a href="Link.html" class="tsd-signature-type">Link</a><span class="tsd-signature-symbol">&gt;</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>This read-only property returns an iterator of all <a href="Link.html">Link</a>s in the Diagram.</p>
<p>This includes both data-bound and unbound links,
and both top-level links and links inside <a href="Group.html">Group</a>s.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="maxScale" class="tsd-anchor"></a>
<h3>
max<wbr>Scale
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the largest value that <a href="Diagram.html#scale">scale</a> may take.
This property is only used to limit the range of new values of <a href="Diagram.html#scale">scale</a>.</p>
<p>The default value is 100.0.
Values must be no less than one.
Setting this to a value that is less than the current <a href="Diagram.html#scale">scale</a>
will cause the current diagram scale to be set to this new value.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="maxSelectionCount" class="tsd-anchor"></a>
<h3>
max<wbr>Selection<wbr>Count
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the maximum number of selected objects.
The default value is a large positive integer.
Values must be non-negative.
Decreasing this value may cause objects to be removed from <a href="Diagram.html#selection">selection</a>
in order to meet the new lower limit.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="minScale" class="tsd-anchor"></a>
<h3>
min<wbr>Scale
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the smallest value greater than zero that <a href="Diagram.html#scale">scale</a> may take.
This property is only used to limit the range of new values of <a href="Diagram.html#scale">scale</a>.</p>
<p>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 <a href="Diagram.html#scale">scale</a>
will cause the current diagram scale to be set to this new value.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="model" class="tsd-anchor"></a>
<h3>
model
<span class="tsd-signature-symbol">: </span><a href="Model.html" class="tsd-signature-type">Model</a> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the <a href="Model.html">Model</a> holding data corresponding to the
data-bound nodes and links of this Diagram.</p>
<p>Replacing this value causes all of the bound Nodes and Links to be deleted and re-created
from the new model data.</p>
<p>Models may be shared by multiple Diagrams. One common approach is to have two
Diagrams displaying the same Model but using different templates
(see <a href="Diagram.html#nodeTemplate">nodeTemplate</a>, <a href="Diagram.html#nodeTemplateMap">nodeTemplateMap</a>, and the associated link and group properties) and sometimes even different Layouts.</p>
<p>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 <a href="UndoManager.html">UndoManager</a>, thereby replacing the Diagram&#39;s
current UndoManager.</p>
<p>Replacing or re-setting the model will re-initialize the Diagram, taking in to account
<a href="Diagram.html#initialPosition">initialPosition</a>, <a href="Diagram.html#initialScale">initialScale</a>, <a href="Diagram.html#initialAutoScale">initialAutoScale</a>, and <a href="Diagram.html#initialContentAlignment">initialContentAlignment</a>.
It will also set <a href="Diagram.html#isModified">isModified</a> to false.</p>
<p>The default behavior when replacing the model is to copy a few <a href="UndoManager.html">UndoManager</a> properties to the
new UndoManager, including <a href="UndoManager.html#isEnabled">UndoManager.isEnabled</a> and <a href="UndoManager.html#maxHistoryLength">UndoManager.maxHistoryLength</a>.</p>
<p>It is an error to replace the Diagram.model while a transaction is in progress.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="mouseDragOver" class="tsd-anchor"></a>
<h3>
mouse<wbr>Drag<wbr>Over
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">e</span><span class="tsd-signature-symbol">: </span><a href="InputEvent.html" class="tsd-signature-type">InputEvent</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the function to execute when the user is dragging the selection in
the background of the Diagram during a <a href="DraggingTool.html">DraggingTool</a> drag-and-drop,
not over any <a href="GraphObject.html">GraphObject</a>s.</p>
<p>If this property value is a function, it is called with an <a href="InputEvent.html">InputEvent</a>.
It is called within the transaction performed by the <a href="DraggingTool.html">DraggingTool</a>.
By default this property is null.</p>
<p>Note that for a drag-and-drop that originates in a different diagram, the target diagram&#39;s
selection collection will not be the parts that are being dragged.
Instead the temporary parts being dragged can be found as the source diagram&#39;s <a href="DraggingTool.html#copiedParts">DraggingTool.copiedParts</a>.</p>
<p>This function is called with <a href="Diagram.html#skipsUndoManager">Diagram.skipsUndoManager</a> temporarily set to true,
so that any changes to <a href="GraphObject.html">GraphObject</a>s are not recorded in the <a href="UndoManager.html">UndoManager</a>.
You do not need to start and commit any transaction in this function.
After calling this function the diagram will be updated immediately.</p>
<p>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:</p>
<pre><code class="hljs js"> myDiagram.mouseDragOver = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>) </span>{
myDiagram.currentCursor = <span class="hljs-string">"no-drop"</span>;
}</code></pre>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#mouseDrop">mouseDrop</a>, <a href="GraphObject.html#mouseDragEnter">GraphObject.mouseDragEnter</a>, <a href="GraphObject.html#mouseDragLeave">GraphObject.mouseDragLeave</a></p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="mouseDrop" class="tsd-anchor"></a>
<h3>
mouse<wbr>Drop
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">e</span><span class="tsd-signature-symbol">: </span><a href="InputEvent.html" class="tsd-signature-type">InputEvent</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the function to execute when the user drops the selection in
the background of the Diagram at the end of a <a href="DraggingTool.html">DraggingTool</a> drag-and-drop,
not onto any <a href="GraphObject.html">GraphObject</a>s.</p>
<p>If this property value is a function, it is called with an <a href="InputEvent.html">InputEvent</a>.
It is called within the transaction performed by the <a href="DraggingTool.html">DraggingTool</a>.
By default this property is null.</p>
<p>For example, if you want to prevent the user from dropping Parts into the background of the diagram:</p>
<pre><code class="hljs js"> myDiagram.mouseDrop = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>) </span>{
myDiagram.currentTool.doCancel();
}</code></pre>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#mouseDragOver">mouseDragOver</a>, <a href="GraphObject.html#mouseDrop">GraphObject.mouseDrop</a></p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="mouseEnter" class="tsd-anchor"></a>
<h3>
mouse<wbr>Enter
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">e</span><span class="tsd-signature-symbol">: </span><a href="InputEvent.html" class="tsd-signature-type">InputEvent</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the function to execute when the mouse enters the Diagram.
(When the browser&#39;s <a href="https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter">mouseEnter</a> event fires on the Diagram canvas.)</p>
<p>If this property value is a function, it is called with an <a href="InputEvent.html">InputEvent</a>.
By default this property is null.</p>
<p>If you do provide a function that makes changes to the diagram or to its model,
you should do so within a transaction -- call <a href="Diagram.html#startTransaction">startTransaction</a> and <a href="Diagram.html#commitTransaction">commitTransaction</a>.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#mouseLeave">mouseLeave</a>, <a href="GraphObject.html#mouseEnter">GraphObject.mouseEnter</a></p>
</dd>
<dt>since</dt>
<dd><p>2.0</p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="mouseHold" class="tsd-anchor"></a>
<h3>
mouse<wbr>Hold
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">e</span><span class="tsd-signature-symbol">: </span><a href="InputEvent.html" class="tsd-signature-type">InputEvent</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the function to execute when the user holds the mouse stationary in
the background of the Diagram while holding down a button,
not over any <a href="GraphObject.html">GraphObject</a>s.
This property is used by the <a href="ToolManager.html">ToolManager</a>.</p>
<p>If this property value is a function, it is called with an <a href="InputEvent.html">InputEvent</a>.
By default this property is null.</p>
<p>If you do provide a function that makes changes to the diagram or to its model,
you should do so within a transaction -- call <a href="Diagram.html#startTransaction">startTransaction</a> and <a href="Diagram.html#commitTransaction">commitTransaction</a>.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="GraphObject.html#mouseHold">GraphObject.mouseHold</a></p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="mouseHover" class="tsd-anchor"></a>
<h3>
mouse<wbr>Hover
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">e</span><span class="tsd-signature-symbol">: </span><a href="InputEvent.html" class="tsd-signature-type">InputEvent</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the function to execute when the user holds the mouse stationary in
the background of the Diagram without holding down any buttons,
not over any <a href="GraphObject.html">GraphObject</a>s.
This property is used by the <a href="ToolManager.html">ToolManager</a>.</p>
<p>If this property value is a function, it is called with an <a href="InputEvent.html">InputEvent</a>.
By default this property is null.</p>
<p>If you do provide a function that makes changes to the diagram or to its model,
you should do so within a transaction -- call <a href="Diagram.html#startTransaction">startTransaction</a> and <a href="Diagram.html#commitTransaction">commitTransaction</a>.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#mouseOver">mouseOver</a>, <a href="GraphObject.html#mouseHover">GraphObject.mouseHover</a>, <a href="ToolManager.html#doMouseHover">ToolManager.doMouseHover</a></p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="mouseLeave" class="tsd-anchor"></a>
<h3>
mouse<wbr>Leave
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">e</span><span class="tsd-signature-symbol">: </span><a href="InputEvent.html" class="tsd-signature-type">InputEvent</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the function to execute when the mouse leaves the Diagram.</p>
<p>If this property value is a function, it is called with an <a href="InputEvent.html">InputEvent</a>.
By default this property is null.</p>
<p>If you do provide a function that makes changes to the diagram or to its model,
you should do so within a transaction -- call <a href="Diagram.html#startTransaction">startTransaction</a> and <a href="Diagram.html#commitTransaction">commitTransaction</a>.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#mouseEnter">mouseEnter</a>, <a href="GraphObject.html#mouseLeave">GraphObject.mouseLeave</a></p>
</dd>
<dt>since</dt>
<dd><p>2.0</p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="mouseOver" class="tsd-anchor"></a>
<h3>
mouse<wbr>Over
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">e</span><span class="tsd-signature-symbol">: </span><a href="InputEvent.html" class="tsd-signature-type">InputEvent</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the function to execute when the user moves the mouse in
the background of the Diagram without holding down any buttons,
not over any <a href="GraphObject.html">GraphObject</a>s.
This property is used by the <a href="ToolManager.html">ToolManager</a>.</p>
<p>If this property value is a function, it is called with an <a href="InputEvent.html">InputEvent</a>.
By default this property is null.</p>
<p>This function is called with <a href="Diagram.html#skipsUndoManager">Diagram.skipsUndoManager</a> temporarily set to true,
so that any changes to <a href="GraphObject.html">GraphObject</a>s are not recorded in the <a href="UndoManager.html">UndoManager</a>.
You do not need to start and commit any transaction in this function.
After calling this function the diagram will be updated immediately.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#mouseHover">mouseHover</a>, <a href="GraphObject.html#mouseOver">GraphObject.mouseOver</a></p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="nodeSelectionAdornmentTemplate" class="tsd-anchor"></a>
<h3>
node<wbr>Selection<wbr>Adornment<wbr>Template
<span class="tsd-signature-symbol">: </span><a href="Adornment.html" class="tsd-signature-type">Adornment</a> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the default selection <a href="Adornment.html">Adornment</a> template, used to adorn selected Parts other than Groups or Links.</p>
<p>Each <a href="Node.html">Node</a> or simple <a href="Part.html">Part</a> can have its own <a href="Part.html#selectionAdornmentTemplate">Part.selectionAdornmentTemplate</a>,
which if non-null will take precedence over this Diagram property.</p>
<p>This Adornment must not be in the visual tree of any Diagram.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="nodeTemplate" class="tsd-anchor"></a>
<h3>
node<wbr>Template
<span class="tsd-signature-symbol">: </span><a href="Part.html" class="tsd-signature-type">Part</a> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the default <a href="Node.html">Node</a> template used as the archetype
for node data that is added to the <a href="Diagram.html#model">model</a>.
Setting this property just modifies the <a href="Diagram.html#nodeTemplateMap">nodeTemplateMap</a>
by replacing the entry named with the empty string.</p>
<p>The value must not be null.
The template may be either a <a href="Node.html">Node</a> or a simple <a href="Part.html">Part</a>,
but not a <a href="Link.html">Link</a> or a <a href="Group.html">Group</a>.</p>
<p>This Part must not be in the visual tree of any Diagram.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="nodeTemplateMap" class="tsd-anchor"></a>
<h3>
node<wbr>Template<wbr>Map
<span class="tsd-signature-symbol">: </span><a href="Map.html" class="tsd-signature-type">Map</a><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">, </span><a href="Part.html" class="tsd-signature-type">Part</a><span class="tsd-signature-symbol">&gt;</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets a <a href="Map.html">Map</a> mapping template names to <a href="Part.html">Part</a>s.
These nodes are copied for each node data that is added to the <a href="Diagram.html#model">model</a>.</p>
<p>The new value must not be null and must contain <a href="Node.html">Node</a>s or simple <a href="Part.html">Part</a>s.
These Parts must not be in the visual tree of any Diagram.
Replacing this Map will automatically call <a href="Diagram.html#rebuildParts">rebuildParts</a>.</p>
<p>If you modify this <a href="Map.html">Map</a>, by replacing a <a href="Node.html">Node</a> or by adding or
removing a map entry, you need to explicitly call <a href="Diagram.html#rebuildParts">rebuildParts</a> afterwards.
Any new map values must not be <a href="Link.html">Link</a>s or <a href="Group.html">Group</a>s.</p>
<p>If you want to create <a href="Group.html">Group</a>s, use <a href="Diagram.html#groupTemplateMap">groupTemplateMap</a> instead.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-get-signature tsd-parent-kind-class">
<a name="nodes" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagReadOnly">Read-only</span>
nodes
<span class="tsd-signature-symbol">: </span><a href="Iterator.html" class="tsd-signature-type">Iterator</a><span class="tsd-signature-symbol">&lt;</span><a href="Node.html" class="tsd-signature-type">Node</a><span class="tsd-signature-symbol">&gt;</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>This read-only property returns an iterator of all <a href="Node.html">Node</a>s and <a href="Group.html">Group</a>s in the Diagram.</p>
<p>This includes both data-bound and unbound nodes,
and both top-level nodes and nodes inside <a href="Group.html">Group</a>s.
All of the simple <a href="Part.html">Part</a>s are accessible via the <a href="Diagram.html#parts">parts</a> property.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#findTopLevelGroups">findTopLevelGroups</a>, <a href="Diagram.html#findTreeRoots">findTreeRoots</a></p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="padding" class="tsd-anchor"></a>
<h3>
padding
<span class="tsd-signature-symbol">: </span><a href="../index.html#MarginLike" class="tsd-signature-type">MarginLike</a> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the Margin that describes the Diagram&#39;s padding,
which controls how much extra space in document coordinates there is around the area occupied by the document.
This keeps nodes from butting up against the side of the diagram (unless scrolled).</p>
<p>The default value is a margin of 5, all around the edge of the document.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-get-signature tsd-parent-kind-class">
<a name="parts" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagReadOnly">Read-only</span>
parts
<span class="tsd-signature-symbol">: </span><a href="Iterator.html" class="tsd-signature-type">Iterator</a><span class="tsd-signature-symbol">&lt;</span><a href="Part.html" class="tsd-signature-type">Part</a><span class="tsd-signature-symbol">&gt;</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>This read-only property returns an iterator of all <a href="Part.html">Part</a>s in the Diagram
that are not <a href="Node.html">Node</a>s or <a href="Link.html">Link</a>s or <a href="Adornment.html">Adornment</a>s.</p>
<p>This includes both data-bound and unbound parts,
and both top-level parts and parts inside <a href="Group.html">Group</a>s.
Use the <a href="Diagram.html#nodes">nodes</a> or <a href="Diagram.html#links">links</a> properties for getting the
collection of all <a href="Node.html">Node</a>s or <a href="Link.html">Link</a>s in the diagram.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="position" class="tsd-anchor"></a>
<h3>
position
<span class="tsd-signature-symbol">: </span><a href="Point.html" class="tsd-signature-type">Point</a> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the coordinates of this Diagram in the viewport.
Value must be of type <a href="Point.html">Point</a> in document coordinates.
The default is Point(NaN, NaN), but is typically set to a real value when a Diagram is initialized.</p>
<p>Scrolling and panning the Diagram modify the Diagram&#39;s position.</p>
<p>Setting this property does not notify about any changed event.
However you can listen with <a href="Diagram.html#addDiagramListener">addDiagramListener</a> for a <a href="DiagramEvent.html">DiagramEvent</a>
with the name &quot;ViewportBoundsChanged&quot;.</p>
<p>The <a href="Diagram.html#viewportBounds">viewportBounds</a> x and y values are always the same as the Diagram&#39;s position values.</p>
<p>If you set this property any replacement of the <a href="Diagram.html#model">model</a> will result in a layout
and a computation of new <a href="Diagram.html#documentBounds">documentBounds</a>, which in turn may cause the diagram to be scrolled
and zoomed, depending on various Diagram properties named &quot;initial...&quot;.
You may want to set <a href="Diagram.html#initialPosition">initialPosition</a> instead of setting this property around the time
that you are loading a model.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="positionComputation" class="tsd-anchor"></a>
<h3>
position<wbr>Computation
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">thisDiagram</span><span class="tsd-signature-symbol">: </span><a href="Diagram.html" class="tsd-signature-type">Diagram</a><span class="tsd-signature-symbol">, </span><span class="tsd-signature-symbol">newPosition</span><span class="tsd-signature-symbol">: </span><a href="Point.html" class="tsd-signature-type">Point</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Point.html" class="tsd-signature-type">Point</a><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the function used to determine the position that this Diagram can be scrolled or moved to.</p>
<p>By default this function is null and the Diagram&#39;s position is bound only by the document bounds.</p>
<p>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.</p>
<p>An example that disallows decimal position values:</p>
<pre><code class="hljs js"> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">computeIntegralPosition</span>(<span class="hljs-params">diagram, pt</span>) </span>{
<span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> go.Point(<span class="hljs-built_in">Math</span>.floor(pt.x), <span class="hljs-built_in">Math</span>.floor(pt.y));
}</code></pre>
<p>The function, if supplied, must not have any side-effects.</p>
<dl class="tsd-comment-tags">
<dt>since</dt>
<dd><p>1.5</p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="scale" class="tsd-anchor"></a>
<h3>
scale
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the scale transform of this Diagram.
Value must be a positive number.
The default value is 1.
Any new value will be coerced to be between <a href="Diagram.html#minScale">minScale</a> and <a href="Diagram.html#maxScale">maxScale</a>.</p>
<p>Scale can automatically be set by the <a href="Diagram.html#autoScale">autoScale</a> property.
There are also <a href="Diagram.html#initialScale">initialScale</a> and <a href="Diagram.html#initialAutoScale">initialAutoScale</a> for
setting the scale on (re)initialization of a Diagram.</p>
<p>Setting this property does not notify about any changed event.
However you can listen with <a href="Diagram.html#addDiagramListener">addDiagramListener</a> for a <a href="DiagramEvent.html">DiagramEvent</a>
with the name &quot;ViewportBoundsChanged&quot;.</p>
<p>If you set this property any replacement of the <a href="Diagram.html#model">model</a> will result in a layout
and a computation of new <a href="Diagram.html#documentBounds">documentBounds</a>, which in turn may cause the diagram to be scrolled
and zoomed, depending on various Diagram properties named &quot;initial...&quot;.
You may want to set <a href="Diagram.html#initialScale">initialScale</a> instead of setting this property around the time
that you are loading a model.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="scaleComputation" class="tsd-anchor"></a>
<h3>
scale<wbr>Computation
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">thisDiagram</span><span class="tsd-signature-symbol">: </span><a href="Diagram.html" class="tsd-signature-type">Diagram</a><span class="tsd-signature-symbol">, </span><span class="tsd-signature-symbol">newScale</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the function used to determine valid scale values for this Diagram.</p>
<dl class="tsd-comment-tags">
<dt>since</dt>
<dd><p>1.5</p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="scrollHorizontalLineChange" class="tsd-anchor"></a>
<h3>
scroll<wbr>Horizontal<wbr>Line<wbr>Change
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the distance in screen pixels that the horizontal scrollbar will scroll
when scrolling by a line.</p>
<p>The default value is 16.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#scrollVerticalLineChange">scrollVerticalLineChange</a></p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="scrollMargin" class="tsd-anchor"></a>
<h3>
scroll<wbr>Margin
<span class="tsd-signature-symbol">: </span><a href="../index.html#MarginLike" class="tsd-signature-type">MarginLike</a> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets a scrollable area in document coordinates that surrounds the document bounds, allowing the user to scroll into empty space.</p>
<p>The margin is only effective in each direction when the document bounds plus margin is greater than the viewport bounds.</p>
<p>The default value is a margin of 0, all around the edge of the document.</p>
<dl class="tsd-comment-tags">
<dt>since</dt>
<dd><p>1.5</p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="scrollMode" class="tsd-anchor"></a>
<h3>
scroll<wbr>Mode
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the scrollMode of the Diagram, allowing the user to either
scroll to document bound borders with <a href="Diagram.html#static-DocumentScroll">Diagram.DocumentScroll</a>,
or scroll endlessly with <a href="Diagram.html#static-InfiniteScroll">Diagram.InfiniteScroll</a>.</p>
<p>The default value is <a href="Diagram.html#static-DocumentScroll">Diagram.DocumentScroll</a>.
Changing this property value does not raise a Changed event.</p>
<dl class="tsd-comment-tags">
<dt>since</dt>
<dd><p>1.5</p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="scrollVerticalLineChange" class="tsd-anchor"></a>
<h3>
scroll<wbr>Vertical<wbr>Line<wbr>Change
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the distance in screen pixels that the vertical scrollbar will scroll
when scrolling by a line.</p>
<p>The default value is 16.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#scrollHorizontalLineChange">scrollHorizontalLineChange</a></p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="scrollsPageOnFocus" class="tsd-anchor"></a>
<h3>
scrolls<wbr>Page<wbr>OnFocus
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets whether the page may be scrolled when the diagram receives focus.
This happens in some browsers when the top-left corner of the diagram&#39;s HTMLDivElement
is scrolled out of view, the diagram does not have focus, and the user clicks in the diagram.</p>
<p>The default value is false.</p>
<dl class="tsd-comment-tags">
<dt>since</dt>
<dd><p>1.8</p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-get-signature tsd-parent-kind-class">
<a name="selection" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagReadOnly">Read-only</span>
selection
<span class="tsd-signature-symbol">: </span><a href="Set.html" class="tsd-signature-type">Set</a><span class="tsd-signature-symbol">&lt;</span><a href="Part.html" class="tsd-signature-type">Part</a><span class="tsd-signature-symbol">&gt;</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>This read-only property returns the read-only collection of selected objects.</p>
<p>Do not modify this collection.
If you want to select or deselect a particular object in a Diagram,
set the <a href="Part.html#isSelected">Part.isSelected</a> property.
If you want to deselect all objects, call <a href="Diagram.html#clearSelection">clearSelection</a>.
If you want to deselect all objects and select a single object, call <a href="Diagram.html#select">select</a>.</p>
<p>You can limit how many objects the user can select by setting <a href="Diagram.html#maxSelectionCount">maxSelectionCount</a>.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="skipsUndoManager" class="tsd-anchor"></a>
<h3>
skips<wbr>Undo<wbr>Manager
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets whether ChangedEvents are not recorded by the UndoManager.
The initial and normal value is false.
WARNING: while this property is true do not perform any changes that cause any previous transactions
to become impossible to undo.</p>
<p>While this property is true, changing the Diagram or any GraphObject does not call <a href="UndoManager.html#handleChanged">UndoManager.handleChanged</a>.
Even when this property is true,
transactions (such as calls to <a href="Diagram.html#startTransaction">startTransaction</a>) and
undo/redo (such as calls to <a href="CommandHandler.html#undo">CommandHandler.undo</a>)
are still delegated to the <a href="Diagram.html#undoManager">undoManager</a>.</p>
<p>You should set this to true only temporarily, and you should remember its previous value
before 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.</p>
<p>For more permanent disabling of the <a href="UndoManager.html">UndoManager</a>, set <a href="UndoManager.html#isEnabled">UndoManager.isEnabled</a> to false.</p>
<p>Setting this property also sets <a href="Model.html#skipsUndoManager">Model.skipsUndoManager</a> to the same value.
Setting this property does not notify about any changed event.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="toolManager" class="tsd-anchor"></a>
<h3>
tool<wbr>Manager
<span class="tsd-signature-symbol">: </span><a href="ToolManager.html" class="tsd-signature-type">ToolManager</a> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the <a href="ToolManager.html">ToolManager</a> for this Diagram.
This tool is used for mode-less operation.
It is responsible for choosing a particular tool to run as the <a href="Diagram.html#currentTool">currentTool</a>.</p>
<p>This tool is normally also the <a href="Diagram.html#defaultTool">defaultTool</a>.
If you don&#39;t want the ToolManager to run at all,
replace the <a href="Diagram.html#defaultTool">defaultTool</a> with your own tool.</p>
<p>Setting this property does not notify about any changed event.
The value cannot be null and must not be shared with other Diagrams.
If you set this property, you will probably also want to set <a href="Diagram.html#defaultTool">defaultTool</a>.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#defaultTool">defaultTool</a></p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="toolTip" class="tsd-anchor"></a>
<h3>
tool<wbr>Tip
<span class="tsd-signature-symbol">: </span><a href="Adornment.html" class="tsd-signature-type">Adornment</a><span class="tsd-signature-symbol"> | </span><a href="HTMLInfo.html" class="tsd-signature-type">HTMLInfo</a><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>This <a href="Adornment.html">Adornment</a> or <a href="HTMLInfo.html">HTMLInfo</a> is shown when the mouse stays motionless in the background.
The default value is null, which means no tooltip is shown.</p>
<p>Here is a simple example:</p>
<pre><code class="hljs js"> diagram.toolTip =
$(go.Adornment, <span class="hljs-string">"Auto"</span>,
$(go.Shape, { <span class="hljs-attr">fill</span>: <span class="hljs-string">"#CCFFCC"</span> }),
$(go.TextBlock, { <span class="hljs-attr">margin</span>: <span class="hljs-number">4</span> },
<span class="hljs-string">"This diagram lets you control the world."</span>)
);</code></pre>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="GraphObject.html#toolTip">GraphObject.toolTip</a>, <a href="ToolManager.html#doToolTip">ToolManager.doToolTip</a></p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-get-signature tsd-parent-kind-class">
<a name="undoManager" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagReadOnly">Read-only</span>
undo<wbr>Manager
<span class="tsd-signature-symbol">: </span><a href="UndoManager.html" class="tsd-signature-type">UndoManager</a> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>This read-only property returns the <a href="UndoManager.html">UndoManager</a> for this Diagram, which actually belongs to the <a href="Diagram.html#model">model</a>.</p>
<p>The default UndoManager has its <a href="UndoManager.html#isEnabled">UndoManager.isEnabled</a> 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.</p>
<p>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.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="validCycle" class="tsd-anchor"></a>
<h3>
valid<wbr>Cycle
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets what kinds of graphs this diagram allows the user to draw.
By default this property is <a href="Diagram.html#static-CycleAll">Diagram.CycleAll</a> -- all kinds of cycles are permitted.
Common values include <a href="Diagram.html#static-CycleDestinationTree">Diagram.CycleDestinationTree</a> and <a href="Diagram.html#static-CycleNotDirected">Diagram.CycleNotDirected</a>.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-get-signature tsd-parent-kind-class tsd-is-static">
<a name="static-version" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagStatic">Static</span>
<span class="tsd-flag ts-flagReadOnly">Read-only</span>
version
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets the current GoJS version.</p>
<dl class="tsd-comment-tags">
<dt>since</dt>
<dd><p>2.0</p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="viewSize" class="tsd-anchor"></a>
<h3>
view<wbr>Size
<span class="tsd-signature-symbol">: </span><a href="Size.html" class="tsd-signature-type">Size</a> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets a fixed bounding rectangle to be returned by <a href="Diagram.html#viewportBounds">viewportBounds</a>
when <a href="Diagram.html#div">div</a> is null.
By default this is (NaN, NaN), and it is not typically set except in DOM-less environments
where there will not be a Diagram DIV. Normally, the viewportBounds is sized by the DIV.</p>
<p>See the intro page on <a href="../../intro/nodeScript.html">GoJS within Node</a> for a usage example.</p>
<dl class="tsd-comment-tags">
<dt>since</dt>
<dd><p>2.0</p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-get-signature tsd-parent-kind-class">
<a name="viewportBounds" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagReadOnly">Read-only</span>
viewport<wbr>Bounds
<span class="tsd-signature-symbol">: </span><a href="Rect.html" class="tsd-signature-type">Rect</a> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>This read-only property returns the bounds of the portion of the Diagram in document coordinates that is viewable from its HTML Canvas.
Typically when the viewport bounds are smaller than the <a href="Diagram.html#documentBounds">documentBounds</a>, the user can scroll or pan the view.</p>
<p>The x and y coordinates are equal to the <a href="Diagram.html#position">position</a> of the Diagram,
and the width and height are equal to the Diagram&#39;s canvas width and height,
divided by the <a href="Diagram.html#scale">scale</a>.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="zoomPoint" class="tsd-anchor"></a>
<h3>
zoom<wbr>Point
<span class="tsd-signature-symbol">: </span><a href="Point.html" class="tsd-signature-type">Point</a> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the zoom point of this Diagram, in viewport coordinates.
This is used by <a href="Tool.html#standardMouseWheel">Tool.standardMouseWheel</a> and scale-setting commands to control where to zoom in or out.</p>
<p>Typical usage is to remember the value of this property and
to set this property to some point within the viewport (between zero and the canvas width and height).
This is commonly accomplished by using the <a href="InputEvent.html#viewPoint">InputEvent.viewPoint</a> of <a href="Diagram.html#lastInput">Diagram.lastInput</a>.
Then one changes the <a href="Diagram.html#scale">scale</a> somehow, perhaps by executing one of the <a href="CommandHandler.html">CommandHandler</a> commands,
or by rotating the mouse wheel, or just by setting the <a href="Diagram.html#scale">Diagram.scale</a> property.
Finally one restores the original value of this property.</p>
<p>The default value is Point(NaN, NaN).
Value must be of type <a href="Point.html">Point</a>, in element coordinates, not in document coordinates.
Setting this property does not notify about any changed event.</p>
<dl class="tsd-comment-tags">
<dt>since</dt>
<dd><p>1.2</p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
</section>
<section class="tsd-panel-group tsd-member-group ">
<h2>Methods</h2>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="add" class="tsd-anchor"></a>
<h3>
add
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">add<span class="tsd-signature-symbol">(</span>part<span class="tsd-signature-symbol">: </span><a href="Part.html" class="tsd-signature-type">Part</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Adds a <a href="Part.html">Part</a> to the <a href="Layer.html">Layer</a> that matches the Part&#39;s <a href="Part.html#layerName">Part.layerName</a>,
or else the default layer, which is named with the empty string.</p>
<p>Normally parts added to a diagram are top-level parts.
If you want nodes to be members of a <a href="Group.html">Group</a>, in addition to calling this method
call <a href="Group.html#addMembers">Group.addMembers</a> or set each <a href="Part.html#containingGroup">Part.containingGroup</a>.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#remove">remove</a></p>
</dd>
</dl>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>part: <a href="Part.html" class="tsd-signature-type">Part</a></h5>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="addChangedListener" class="tsd-anchor"></a>
<h3>
add<wbr>Changed<wbr>Listener
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">add<wbr>Changed<wbr>Listener<span class="tsd-signature-symbol">(</span>listener<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">e</span><span class="tsd-signature-symbol">: </span><a href="ChangedEvent.html" class="tsd-signature-type">ChangedEvent</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Register an event handler that is called when there is a <a href="ChangedEvent.html">ChangedEvent</a> because this Diagram
or one of its Parts has changed, but not because the Model or any model data has changed.</p>
<p>It is unusual to listen for Diagram ChangedEvents --
it is far more common to listen for specific <a href="DiagramEvent.html">DiagramEvent</a>s by calling <a href="Diagram.html#addDiagramListener">addDiagramListener</a>,
or to listen for Model ChangedEvents (i.e. changes to the model) by calling <a href="Diagram.html#addModelChangedListener">addModelChangedListener</a>.</p>
<p>Do not add or remove Changed listeners during the execution of a Changed listener.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#removeChangedListener">removeChangedListener</a></p>
</dd>
</dl>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>listener: <span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">e</span><span class="tsd-signature-symbol">: </span><a href="ChangedEvent.html" class="tsd-signature-type">ChangedEvent</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></h5>
<div class="tsd-comment tsd-typography">
<p>a function that takes a <a href="ChangedEvent.html">ChangedEvent</a> as its argument.</p>
</div>
<ul class="tsd-parameters">
</ul>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="addDiagramListener" class="tsd-anchor"></a>
<h3>
add<wbr>Diagram<wbr>Listener
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">add<wbr>Diagram<wbr>Listener<span class="tsd-signature-symbol">(</span>name<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">DiagramEventName</span>, listener<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">e</span><span class="tsd-signature-symbol">: </span><a href="DiagramEvent.html" class="tsd-signature-type">DiagramEvent</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Register an event handler that is called when there is a <a href="DiagramEvent.html">DiagramEvent</a> of a given name.</p>
<p>See the <a href="DiagramEvent.html">DiagramEvent</a> documentation for a complete listing of diagram event names and their purposes.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#removeDiagramListener">removeDiagramListener</a></p>
</dd>
</dl>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>name: <span class="tsd-signature-type">DiagramEventName</span></h5>
<div class="tsd-comment tsd-typography">
<p>the name is normally capitalized, but this method uses case-insensitive comparison.</p>
</div>
</li>
<li>
<h5>listener: <span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">e</span><span class="tsd-signature-symbol">: </span><a href="DiagramEvent.html" class="tsd-signature-type">DiagramEvent</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></h5>
<div class="tsd-comment tsd-typography">
<p>a function that takes a <a href="DiagramEvent.html">DiagramEvent</a> as its argument.</p>
</div>
<ul class="tsd-parameters">
</ul>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="addLayer" class="tsd-anchor"></a>
<h3>
add<wbr>Layer
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">add<wbr>Layer<span class="tsd-signature-symbol">(</span>layer<span class="tsd-signature-symbol">: </span><a href="Layer.html" class="tsd-signature-type">Layer</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Adds a new <a href="Layer.html">Layer</a> to the list of layers.
If <a href="Layer.html#isTemporary">Layer.isTemporary</a> is false, the layer is added after all existing non-temporary layers.
If <a href="Layer.html#isTemporary">Layer.isTemporary</a> is true, the layer is added as the very last layer.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#addLayerBefore">addLayerBefore</a>, <a href="Diagram.html#addLayerAfter">addLayerAfter</a>, <a href="Diagram.html#removeLayer">removeLayer</a>, <a href="Diagram.html#findLayer">findLayer</a></p>
</dd>
</dl>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>layer: <a href="Layer.html" class="tsd-signature-type">Layer</a></h5>
<div class="tsd-comment tsd-typography">
<p>The new Layer to add. It is an error if the Layer already belongs to a Diagram.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="addLayerAfter" class="tsd-anchor"></a>
<h3>
add<wbr>Layer<wbr>After
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">add<wbr>Layer<wbr>After<span class="tsd-signature-symbol">(</span>layer<span class="tsd-signature-symbol">: </span><a href="Layer.html" class="tsd-signature-type">Layer</a>, existingLayer<span class="tsd-signature-symbol">: </span><a href="Layer.html" class="tsd-signature-type">Layer</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Adds a layer to the list of layers after a specified layer.
This method can also re-order layers.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#addLayer">addLayer</a>, <a href="Diagram.html#addLayerBefore">addLayerBefore</a>, <a href="Diagram.html#removeLayer">removeLayer</a></p>
</dd>
</dl>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>layer: <a href="Layer.html" class="tsd-signature-type">Layer</a></h5>
<div class="tsd-comment tsd-typography">
<p>the new Layer to add or existing Layer to move in Z-order.</p>
</div>
</li>
<li>
<h5>existingLayer: <a href="Layer.html" class="tsd-signature-type">Layer</a></h5>
<div class="tsd-comment tsd-typography">
<p>the other Layer in this Diagram which should come just before the new or moved layer.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="addLayerBefore" class="tsd-anchor"></a>
<h3>
add<wbr>Layer<wbr>Before
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">add<wbr>Layer<wbr>Before<span class="tsd-signature-symbol">(</span>layer<span class="tsd-signature-symbol">: </span><a href="Layer.html" class="tsd-signature-type">Layer</a>, existingLayer<span class="tsd-signature-symbol">: </span><a href="Layer.html" class="tsd-signature-type">Layer</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Adds a layer to the list of layers before a specified layer.
This method can also re-order layers.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#addLayer">addLayer</a>, <a href="Diagram.html#addLayerAfter">addLayerAfter</a>, <a href="Diagram.html#removeLayer">removeLayer</a></p>
</dd>
</dl>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>layer: <a href="Layer.html" class="tsd-signature-type">Layer</a></h5>
<div class="tsd-comment tsd-typography">
<p>the new Layer to add or existing Layer to move in Z-order.</p>
</div>
</li>
<li>
<h5>existingLayer: <a href="Layer.html" class="tsd-signature-type">Layer</a></h5>
<div class="tsd-comment tsd-typography">
<p>the other Layer in this Diagram which should come just after the new or moved layer.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="addModelChangedListener" class="tsd-anchor"></a>
<h3>
add<wbr>Model<wbr>Changed<wbr>Listener
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">add<wbr>Model<wbr>Changed<wbr>Listener<span class="tsd-signature-symbol">(</span>listener<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">e</span><span class="tsd-signature-symbol">: </span><a href="ChangedEvent.html" class="tsd-signature-type">ChangedEvent</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Register an event handler on this Diagram&#39;s <a href="Diagram.html#model">Diagram.model</a> that is called when there is a <a href="ChangedEvent.html">ChangedEvent</a>
on the <a href="Model.html">Model</a>, not in this diagram.
Be sure to call <a href="Diagram.html#removeModelChangedListener">removeModelChangedListener</a> when you are done with the diagram.</p>
<p>This is convenient when the <a href="Diagram.html#model">Diagram.model</a> may be replaced.
Using this method to register a Model Changed listener is more convenient than calling <a href="Model.html#addChangedListener">Model.addChangedListener</a> directly
because when this diagram&#39;s Model is replaced, one does not need to call <a href="Model.html#removeChangedListener">Model.removeChangedListener</a> on the old Model
and then <a href="Model.html#addChangedListener">Model.addChangedListener</a> again on the new Model.</p>
<p>You can establish Model Changed listeners when you create a Diagram with <a href="GraphObject.html#static-make">GraphObject.make</a>. For example:</p>
<pre><code class="hljs js">$(go.Diagram, . . .,
{
<span class="hljs-string">"ModelChanged"</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>) </span>{ <span class="hljs-keyword">if</span> (e.isTransactionFinished) saveModel(); }
. . .
})</code></pre>
<p>Do not add or remove Changed listeners during the execution of a Changed listener.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#removeModelChangedListener">removeModelChangedListener</a></p>
</dd>
<dt>since</dt>
<dd><p>1.6</p>
</dd>
</dl>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>listener: <span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">e</span><span class="tsd-signature-symbol">: </span><a href="ChangedEvent.html" class="tsd-signature-type">ChangedEvent</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></h5>
<div class="tsd-comment tsd-typography">
<p>a function that takes a <a href="ChangedEvent.html">ChangedEvent</a> as its argument.</p>
</div>
<ul class="tsd-parameters">
</ul>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="alignDocument" class="tsd-anchor"></a>
<h3>
align<wbr>Document
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">align<wbr>Document<span class="tsd-signature-symbol">(</span>documentspot<span class="tsd-signature-symbol">: </span><a href="Spot.html" class="tsd-signature-type">Spot</a>, viewportspot<span class="tsd-signature-symbol">: </span><a href="Spot.html" class="tsd-signature-type">Spot</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Aligns the Diagram&#39;s <a href="Diagram.html#position">position</a> based on a desired document <a href="Spot.html">Spot</a> and viewport <a href="Spot.html">Spot</a>.</p>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>documentspot: <a href="Spot.html" class="tsd-signature-type">Spot</a></h5>
</li>
<li>
<h5>viewportspot: <a href="Spot.html" class="tsd-signature-type">Spot</a></h5>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="centerRect" class="tsd-anchor"></a>
<h3>
center<wbr>Rect
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">center<wbr>Rect<span class="tsd-signature-symbol">(</span>r<span class="tsd-signature-symbol">: </span><a href="Rect.html" class="tsd-signature-type">Rect</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Modifies the <a href="Diagram.html#position">position</a> to show a given Rect of the Diagram by centering the
viewport on that Rect.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#scrollToRect">scrollToRect</a>, <a href="Diagram.html#scroll">scroll</a></p>
</dd>
</dl>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>r: <a href="Rect.html" class="tsd-signature-type">Rect</a></h5>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="clear" class="tsd-anchor"></a>
<h3>
clear
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">clear<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Removes all Parts from the Diagram, including unbound Parts except for the background grid,
and also clears out the <a href="Model.html">Model</a> and <a href="UndoManager.html">UndoManager</a> and clipboard.
This operation is not undoable.</p>
<p>Alternative actions are to replace the <a href="Diagram.html#model">model</a> with a new <a href="Model.html">Model</a>
(probably a <a href="GraphLinksModel.html">GraphLinksModel</a> or a <a href="TreeModel.html">TreeModel</a>),
or to set <a href="Model.html#nodeDataArray">Model.nodeDataArray</a> with an empty JavaScript Array
(and <a href="GraphLinksModel.html#linkDataArray">GraphLinksModel.linkDataArray</a>).</p>
<p>This does not remove any listeners from the diagram.</p>
</div>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="clearHighlighteds" class="tsd-anchor"></a>
<h3>
clear<wbr>Highlighteds
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">clear<wbr>Highlighteds<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Remove highlights from all <a href="Part.html">Part</a>s.
This removes all parts from the <a href="Diagram.html#highlighteds">highlighteds</a> collection.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#highlight">highlight</a>, <a href="Diagram.html#highlightCollection">highlightCollection</a>, <a href="Part.html#isHighlighted">Part.isHighlighted</a></p>
</dd>
<dt>since</dt>
<dd><p>1.4</p>
</dd>
</dl>
</div>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="clearSelection" class="tsd-anchor"></a>
<h3>
clear<wbr>Selection
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">clear<wbr>Selection<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Deselect all selected <a href="Part.html">Part</a>s.
This removes all parts from the <a href="Diagram.html#selection">selection</a> collection.
This method raises the &quot;ChangingSelection&quot; and &quot;ChangedSelection&quot; Diagram events.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#select">select</a>, <a href="Diagram.html#selectCollection">selectCollection</a></p>
</dd>
</dl>
</div>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="commit" class="tsd-anchor"></a>
<h3>
commit
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">commit<span class="tsd-signature-symbol">(</span>func<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">d</span><span class="tsd-signature-symbol">: </span><a href="Diagram.html" class="tsd-signature-type">Diagram</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span>, tname<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Starts a new transaction, calls the provided function, and commits the transaction.
Code is called within a try-finally statement.
If the function does not return normally, this rolls back the transaction rather than committing it.
Example usage:</p>
<pre><code class="hljs js">myDiagram.commit(<span class="hljs-function"><span class="hljs-params">d</span> =&gt;</span> d.remove(somePart), <span class="hljs-string">"Remove Part"</span>);</code></pre>
<dl class="tsd-comment-tags">
<dt>since</dt>
<dd><p>1.8</p>
</dd>
</dl>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>func: <span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">d</span><span class="tsd-signature-symbol">: </span><a href="Diagram.html" class="tsd-signature-type">Diagram</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></h5>
<div class="tsd-comment tsd-typography">
<p>the function to call as the transaction body</p>
</div>
<ul class="tsd-parameters">
</ul>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> tname: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span></h5>
<div class="tsd-comment tsd-typography">
<p>a descriptive name for the transaction, or null to temporarily set <a href="Diagram.html#skipsUndoManager">skipsUndoManager</a> to true;
if no string transaction name is given, an empty string is used as the transaction name</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="commitTransaction" class="tsd-anchor"></a>
<h3>
commit<wbr>Transaction
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">commit<wbr>Transaction<span class="tsd-signature-symbol">(</span>tname<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Commit the changes of the current transaction.
This just calls <a href="UndoManager.html#commitTransaction">UndoManager.commitTransaction</a>.</p>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> tname: <span class="tsd-signature-type">string</span></h5>
<div class="tsd-comment tsd-typography">
<p>a descriptive name for the transaction.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">boolean</span></h4>
<p>the value returned by <a href="UndoManager.html#commitTransaction">UndoManager.commitTransaction</a>.</p>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-protected">
<a name="computeBounds" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagProtected">Protected</span> <span class="tsd-flag ts-flagVirtual">Virtual</span>
compute<wbr>Bounds
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-protected">
<li class="tsd-signature tsd-kind-icon">compute<wbr>Bounds<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Rect.html" class="tsd-signature-type">Rect</a></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>This is called during a Diagram update to determine a new value for <a href="Diagram.html#documentBounds">documentBounds</a>.
By default this computes the union of the bounds of all the visible
<a href="GraphObject.html">GraphObject</a>s in this Diagram, unless <a href="Diagram.html#fixedBounds">Diagram.fixedBounds</a> is set.</p>
<p>To compute the bounds of a collection of Parts, call <a href="Diagram.html#computePartsBounds">computePartsBounds</a>.</p>
</div>
<h4 class="tsd-returns-title">Returns <a href="Rect.html" class="tsd-signature-type">Rect</a></h4>
<p>a Rect in document coordinates.</p>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="computeMove" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagVirtual">Virtual</span>
compute<wbr>Move
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">compute<wbr>Move<span class="tsd-signature-symbol">(</span>n<span class="tsd-signature-symbol">: </span><a href="Part.html" class="tsd-signature-type">Part</a>, newloc<span class="tsd-signature-symbol">: </span><a href="Point.html" class="tsd-signature-type">Point</a>, dragOptions<span class="tsd-signature-symbol">: </span><a href="DraggingOptions.html" class="tsd-signature-type">DraggingOptions</a>, result<span class="tsd-signature-symbol">?: </span><a href="Point.html" class="tsd-signature-type">Point</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Point.html" class="tsd-signature-type">Point</a></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>You do not need to call or orverride this method, but you may want to override <a href="DraggingTool.html#computeMove">DraggingTool.computeMove</a>, which calls this method.</p>
<p>This method computes the new location for a <a href="Node.html">Node</a> or simple <a href="Part.html">Part</a>,
given a new desired location and an optional Map of dragged parts,
taking any grid-snapping into consideration,
any <a href="Part.html#dragComputation">Part.dragComputation</a> function,
and any <a href="Part.html#minLocation">Part.minLocation</a> and <a href="Part.html#maxLocation">Part.maxLocation</a>.</p>
<dl class="tsd-comment-tags">
<dt>since</dt>
<dd><p>2.0</p>
</dd>
</dl>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>n: <a href="Part.html" class="tsd-signature-type">Part</a></h5>
<div class="tsd-comment tsd-typography">
<p>the Node or simple Part that is being moved</p>
</div>
</li>
<li>
<h5>newloc: <a href="Point.html" class="tsd-signature-type">Point</a></h5>
<div class="tsd-comment tsd-typography">
<p>the proposed new location</p>
</div>
</li>
<li>
<h5>dragOptions: <a href="DraggingOptions.html" class="tsd-signature-type">DraggingOptions</a></h5>
<div class="tsd-comment tsd-typography">
<p>the proposed new location</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> result: <a href="Point.html" class="tsd-signature-type">Point</a></h5>
<div class="tsd-comment tsd-typography">
<p>an optional Point that is modified and returned</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <a href="Point.html" class="tsd-signature-type">Point</a></h4>
<p>the possibly grid-snapped computed Point that is within the minimum and maximum permitted locations</p>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="computePartsBounds" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagVirtual">Virtual</span>
compute<wbr>Parts<wbr>Bounds
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">compute<wbr>Parts<wbr>Bounds<span class="tsd-signature-symbol">(</span>coll<span class="tsd-signature-symbol">: </span><a href="Iterable.html" class="tsd-signature-type">Iterable</a><span class="tsd-signature-symbol">&lt;</span><a href="Part.html" class="tsd-signature-type">Part</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">Array</span><span class="tsd-signature-symbol">&lt;</span><a href="Part.html" class="tsd-signature-type">Part</a><span class="tsd-signature-symbol">&gt;</span>, includeLinks<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Rect.html" class="tsd-signature-type">Rect</a></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Find the union of the <a href="GraphObject.html#actualBounds">GraphObject.actualBounds</a> of all of the <a href="Part.html">Part</a>s in the given collection,
excluding Links unless the second argument is true.</p>
<p>Unlike <a href="Diagram.html#computeBounds">computeBounds</a>, this ignores the visibility of each Part and does not add any padding to the result.</p>
<dl class="tsd-comment-tags">
<dt>since</dt>
<dd><p>1.1</p>
</dd>
</dl>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>coll: <a href="Iterable.html" class="tsd-signature-type">Iterable</a><span class="tsd-signature-symbol">&lt;</span><a href="Part.html" class="tsd-signature-type">Part</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">Array</span><span class="tsd-signature-symbol">&lt;</span><a href="Part.html" class="tsd-signature-type">Part</a><span class="tsd-signature-symbol">&gt;</span></h5>
<div class="tsd-comment tsd-typography">
<p>an iterable collection or Array of <a href="Part.html">Part</a>s.</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> includeLinks: <span class="tsd-signature-type">boolean</span></h5>
<div class="tsd-comment tsd-typography">
<p>defaults to false</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <a href="Rect.html" class="tsd-signature-type">Rect</a></h4>
<p>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.</p>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="copyParts" class="tsd-anchor"></a>
<h3>
copy<wbr>Parts
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">copy<wbr>Parts<span class="tsd-signature-symbol">(</span>coll<span class="tsd-signature-symbol">: </span><a href="Iterable.html" class="tsd-signature-type">Iterable</a><span class="tsd-signature-symbol">&lt;</span><a href="Part.html" class="tsd-signature-type">Part</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">Array</span><span class="tsd-signature-symbol">&lt;</span><a href="Part.html" class="tsd-signature-type">Part</a><span class="tsd-signature-symbol">&gt;</span>, diagram<span class="tsd-signature-symbol">: </span><a href="Diagram.html" class="tsd-signature-type">Diagram</a><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span>, check<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Map.html" class="tsd-signature-type">Map</a><span class="tsd-signature-symbol">&lt;</span><a href="Part.html" class="tsd-signature-type">Part</a><span class="tsd-signature-symbol">, </span><a href="Part.html" class="tsd-signature-type">Part</a><span class="tsd-signature-symbol">&gt;</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Make a copy of a collection of <a href="Part.html">Part</a>s and return them in a <a href="Map.html">Map</a> mapping each original Part to its copy.
It may optionally add them to a given <a href="Diagram.html">Diagram</a>.
Copying a <a href="Group.html">Group</a> will also copy its member Nodes and Links.
Copying a <a href="Link.html">Link</a> will also copy any label Nodes that it owns.</p>
<p>This does not perform a transaction nor does it raise a <a href="DiagramEvent.html">DiagramEvent</a>.
Call <a href="CommandHandler.html#copySelection">CommandHandler.copySelection</a>, which calls this method,
if you want to copy all selected Parts into the clipboard.
The <a href="CommandHandler.html#copySelection">CommandHandler.copySelection</a> command may also copy additional Parts as well, depending on <a href="CommandHandler.html#copiesTree">CommandHandler.copiesTree</a>.</p>
<dl class="tsd-comment-tags">
<dt>since</dt>
<dd><p>1.3</p>
</dd>
</dl>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>coll: <a href="Iterable.html" class="tsd-signature-type">Iterable</a><span class="tsd-signature-symbol">&lt;</span><a href="Part.html" class="tsd-signature-type">Part</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">Array</span><span class="tsd-signature-symbol">&lt;</span><a href="Part.html" class="tsd-signature-type">Part</a><span class="tsd-signature-symbol">&gt;</span></h5>
<div class="tsd-comment tsd-typography">
<p>A <a href="List.html">List</a> or a <a href="Set.html">Set</a> or <a href="Iterator.html">Iterator</a> of <a href="Part.html">Part</a>s, or an Array of <a href="Part.html">Part</a>s.</p>
</div>
</li>
<li>
<h5>diagram: <a href="Diagram.html" class="tsd-signature-type">Diagram</a><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span></h5>
<div class="tsd-comment tsd-typography">
<p>The destination diagram; if null, the copied parts are not added to this diagram.</p>
</div>
</li>
<li>
<h5>check: <span class="tsd-signature-type">boolean</span></h5>
<div class="tsd-comment tsd-typography">
<p>Whether to check <a href="Part.html#canCopy">Part.canCopy</a> on each part.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <a href="Map.html" class="tsd-signature-type">Map</a><span class="tsd-signature-symbol">&lt;</span><a href="Part.html" class="tsd-signature-type">Part</a><span class="tsd-signature-symbol">, </span><a href="Part.html" class="tsd-signature-type">Part</a><span class="tsd-signature-symbol">&gt;</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="delayInitialization" class="tsd-anchor"></a>
<h3>
delay<wbr>Initialization
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">delay<wbr>Initialization<span class="tsd-signature-symbol">(</span>func<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Updates the diagram immediately, then resets initialization flags so that
actions taken in the argument function will be considered part of Diagram initialization,
and will participate in initial layouts, <a href="Diagram.html#initialAutoScale">initialAutoScale</a>, <a href="Diagram.html#initialContentAlignment">initialContentAlignment</a>, etc.</p>
<p>This is useful in situations where you do not wish for the first content added to the diagram to be considered
the &quot;initial&quot; content, such as with a Node that represents a &quot;Loading&quot; bar.</p>
<dl class="tsd-comment-tags">
<dt>since</dt>
<dd><p>1.1</p>
</dd>
</dl>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> func: <span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span></h5>
<div class="tsd-comment tsd-typography">
<p>an optional function of actions to perform as part of another diagram initialization.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="findLayer" class="tsd-anchor"></a>
<h3>
find<wbr>Layer
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">find<wbr>Layer<span class="tsd-signature-symbol">(</span>name<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Layer.html" class="tsd-signature-type">Layer</a><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Finds a layer with a given name.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#addLayerBefore">addLayerBefore</a>, <a href="Diagram.html#addLayerAfter">addLayerAfter</a>, <a href="Diagram.html#removeLayer">removeLayer</a></p>
</dd>
</dl>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>name: <span class="tsd-signature-type">string</span></h5>
</li>
</ul>
<h4 class="tsd-returns-title">Returns
<a href="Layer.html" class="tsd-signature-type">Layer</a>
<span class="tsd-signature-symbol"> | </span>
<span class="tsd-signature-type">null</span>
</h4>
<p>a Layer with the given name, or null if no such layer was found.</p>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="findLinkForData" class="tsd-anchor"></a>
<h3>
find<wbr>Link<wbr>For<wbr>Data
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">find<wbr>Link<wbr>For<wbr>Data<span class="tsd-signature-symbol">(</span>linkdata<span class="tsd-signature-symbol">: </span><a href="ObjectData.html" class="tsd-signature-type">ObjectData</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Link.html" class="tsd-signature-type">Link</a><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Look for a <a href="Link.html">Link</a> corresponding to a <a href="GraphLinksModel.html">GraphLinksModel</a>&#39;s link data object.</p>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>linkdata: <a href="ObjectData.html" class="tsd-signature-type">ObjectData</a></h5>
<div class="tsd-comment tsd-typography">
<p>a JavaScript object matched by reference identity;
use <a href="Diagram.html#findLinksByExample">findLinksByExample</a> if you want to find those Links whose data matches an example data object</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns
<a href="Link.html" class="tsd-signature-type">Link</a>
<span class="tsd-signature-symbol"> | </span>
<span class="tsd-signature-type">null</span>
</h4>
<p>an existing <a href="Link.html">Link</a> in this Diagram that was
created because its <code>Part.data</code> was the link data in the Diagram&#39;s <a href="Model.html">Model</a>.</p>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="findLinksByExample" class="tsd-anchor"></a>
<h3>
find<wbr>Links<wbr>ByExample
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">find<wbr>Links<wbr>ByExample<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">...</span>examples<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Array</span><span class="tsd-signature-symbol">&lt;</span><a href="ObjectData.html" class="tsd-signature-type">ObjectData</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Iterator.html" class="tsd-signature-type">Iterator</a><span class="tsd-signature-symbol">&lt;</span><a href="Link.html" class="tsd-signature-type">Link</a><span class="tsd-signature-symbol">&gt;</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Search for Links by matching the Link data with example data holding values, RegExps, or predicates.</p>
<p>See the documentation of <a href="Diagram.html#findNodesByExample">findNodesByExample</a> for how the example
data can match data of bound Parts.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#findNodesByExample">findNodesByExample</a></p>
</dd>
<dt>since</dt>
<dd><p>1.5</p>
</dd>
</dl>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5><span class="tsd-flag ts-flagRest">Rest</span> <span class="tsd-signature-symbol">...</span>examples: <span class="tsd-signature-type">Array</span><span class="tsd-signature-symbol">&lt;</span><a href="ObjectData.html" class="tsd-signature-type">ObjectData</a><span class="tsd-signature-symbol">&gt;</span></h5>
<div class="tsd-comment tsd-typography">
<p>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</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <a href="Iterator.html" class="tsd-signature-type">Iterator</a><span class="tsd-signature-symbol">&lt;</span><a href="Link.html" class="tsd-signature-type">Link</a><span class="tsd-signature-symbol">&gt;</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="findNodeForData" class="tsd-anchor"></a>
<h3>
find<wbr>Node<wbr>For<wbr>Data
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">find<wbr>Node<wbr>For<wbr>Data<span class="tsd-signature-symbol">(</span>nodedata<span class="tsd-signature-symbol">: </span><a href="ObjectData.html" class="tsd-signature-type">ObjectData</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Node.html" class="tsd-signature-type">Node</a><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Look for a <a href="Node.html">Node</a> or <a href="Group.html">Group</a> corresponding to a model&#39;s node data object.</p>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>nodedata: <a href="ObjectData.html" class="tsd-signature-type">ObjectData</a></h5>
<div class="tsd-comment tsd-typography">
<p>a JavaScript object matched by reference identity;
use <a href="Diagram.html#findNodesByExample">findNodesByExample</a> if you want to find those Nodes whose data matches an example data object</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns
<a href="Node.html" class="tsd-signature-type">Node</a>
<span class="tsd-signature-symbol"> | </span>
<span class="tsd-signature-type">null</span>
</h4>
<p>an existing <a href="Node.html">Node</a> or <a href="Group.html">Group</a> in this Diagram that was
created because its <code>Part.data</code> was the node data in the Diagram&#39;s <a href="Model.html">Model</a>.
This will be null if there is no such part or if it&#39;s just a <a href="Part.html">Part</a> or <a href="Link.html">Link</a>.</p>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="findNodeForKey" class="tsd-anchor"></a>
<h3>
find<wbr>Node<wbr>For<wbr>Key
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">find<wbr>Node<wbr>For<wbr>Key<span class="tsd-signature-symbol">(</span>key<span class="tsd-signature-symbol">: </span><a href="../index.html#Key" class="tsd-signature-type">Key</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Node.html" class="tsd-signature-type">Node</a><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Look for a <a href="Node.html">Node</a> or <a href="Group.html">Group</a> corresponding to a model&#39;s node data object&#39;s unique key.</p>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>key: <a href="../index.html#Key" class="tsd-signature-type">Key</a></h5>
<div class="tsd-comment tsd-typography">
<p>a string or number.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns
<a href="Node.html" class="tsd-signature-type">Node</a>
<span class="tsd-signature-symbol"> | </span>
<span class="tsd-signature-type">null</span>
</h4>
<p>null if a node data with that key cannot be found in the model,
or if a corresponding <a href="Node.html">Node</a> or <a href="Group.html">Group</a> cannot be found in the Diagram,
or if what is found is just a <a href="Part.html">Part</a>.</p>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="findNodesByExample" class="tsd-anchor"></a>
<h3>
find<wbr>Nodes<wbr>ByExample
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">find<wbr>Nodes<wbr>ByExample<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">...</span>examples<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Array</span><span class="tsd-signature-symbol">&lt;</span><a href="ObjectData.html" class="tsd-signature-type">ObjectData</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Iterator.html" class="tsd-signature-type">Iterator</a><span class="tsd-signature-symbol">&lt;</span><a href="Node.html" class="tsd-signature-type">Node</a><span class="tsd-signature-symbol">&gt;</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Search for Nodes or Groups by matching the Node data with example data holding values, RegExps, or predicates.</p>
<p>For example, calling this method with an argument object:
<code>{ sex: &quot;M&quot;, name: /^Alex/i, age: function(n) { return n &gt;= 18; } }</code>
will return an iterator of Nodes whose <code>Node.data</code> is a JavaScript object whose:</p>
<ul>
<li>sex is &quot;M&quot; (a case-sensitive string comparison), and</li>
<li>name starts with the string &quot;Alex&quot; (using a case-insensitive match), and</li>
<li>age is greater than or equal to 18</li>
</ul>
<p>Here is how an example value can match the corresponding data value:</p>
<ul>
<li><p>A string, number, or boolean is compared with the === operator.</p>
</li>
<li><p>A function is treated as a predicate and applied to the data value.</p>
</li>
<li><p>A regular expression (RexExp) is matched against the toString() of the data value.
Common expressions include:</p>
<ul>
<li><code>/abc/</code> matches any string that includes exactly the substring &quot;abc&quot;</li>
<li><code>/abc/i</code> matches any string that includes the substring &quot;abc&quot;, but uses a case-insensitive comparison</li>
<li><code>/^no/i</code> matches any string that starts with &quot;no&quot;, ignoring case</li>
<li><code>/ism$</code> matches any string that ends with &quot;ism&quot; exactly</li>
<li><code>/(green|red) apple/</code> matches any string that includes either &quot;green apple&quot; or &quot;red apple&quot;</li>
</ul>
<p>For more details read <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">Regular Expressions (mozilla.org)</a>.</p>
</li>
<li><p>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.</p>
</li>
<li><p>An Object is recursively matched with the data value, which must also be an Object.</p>
</li>
</ul>
<p>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.</p>
<p>When multiple argument objects are given, if any of the objects match the node&#39;s data,
the node is included in the results.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#findLinksByExample">findLinksByExample</a></p>
</dd>
<dt>since</dt>
<dd><p>1.5</p>
</dd>
</dl>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5><span class="tsd-flag ts-flagRest">Rest</span> <span class="tsd-signature-symbol">...</span>examples: <span class="tsd-signature-type">Array</span><span class="tsd-signature-symbol">&lt;</span><a href="ObjectData.html" class="tsd-signature-type">ObjectData</a><span class="tsd-signature-symbol">&gt;</span></h5>
<div class="tsd-comment tsd-typography">
<p>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</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <a href="Iterator.html" class="tsd-signature-type">Iterator</a><span class="tsd-signature-symbol">&lt;</span><a href="Node.html" class="tsd-signature-type">Node</a><span class="tsd-signature-symbol">&gt;</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter">
<a name="findObjectAt" class="tsd-anchor"></a>
<h3>
find<wbr>Object<wbr>At
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter">
<li class="tsd-signature tsd-kind-icon">find<wbr>Object<wbr>At&lt;T&gt;<span class="tsd-signature-symbol">(</span>p<span class="tsd-signature-symbol">: </span><a href="Point.html" class="tsd-signature-type">Point</a>, navig<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">a</span><span class="tsd-signature-symbol">: </span><a href="GraphObject.html" class="tsd-signature-type">GraphObject</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span>, pred<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">a</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">T</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span><span class="tsd-signature-symbol">)</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Find the front-most <a href="GraphObject.html">GraphObject</a> at the given point in document coordinates.</p>
<p>If <a href="Layer.html#visible">Layer.visible</a> is false, this method will not find any objects in that layer.
However, <a href="Layer.html#opacity">Layer.opacity</a> does not affect this method.</p>
<p>Example usage:</p>
<pre><code class="hljs js"><span class="hljs-comment">// Returns the top-most object that is a selectable Part, or null if there isn't one</span>
myDiagram.findObjectAt(
myDiagram.lastInput.documentPoint,
<span class="hljs-comment">// Navigation function</span>
<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">x</span>) </span>{ <span class="hljs-keyword">return</span> x.part; },
<span class="hljs-comment">// Because of the navigation function, x will always be a Part.</span>
<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">x</span>) </span>{ <span class="hljs-keyword">return</span> x.canSelect(); }
);</code></pre>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#findObjectsAt">findObjectsAt</a>, <a href="Diagram.html#findObjectsIn">findObjectsIn</a>, <a href="Diagram.html#findObjectsNear">findObjectsNear</a>, <a href="Diagram.html#findPartAt">findPartAt</a></p>
</dd>
</dl>
</div>
<h4 class="tsd-type-parameters-title">Type parameters</h4>
<ul class="tsd-type-parameters">
<li>
<h4>T<span class="tsd-signature-symbol">: </span><a href="GraphObject.html" class="tsd-signature-type">GraphObject</a></h4>
</li>
</ul>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>p: <a href="Point.html" class="tsd-signature-type">Point</a></h5>
<div class="tsd-comment tsd-typography">
<p>A Point in document coordinates.</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> navig: <span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">a</span><span class="tsd-signature-symbol">: </span><a href="GraphObject.html" class="tsd-signature-type">GraphObject</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span></h5>
<div class="tsd-comment tsd-typography">
<p>A function taking a GraphObject and
returning a GraphObject, defaulting to the identity.</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> pred: <span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">a</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">T</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span></h5>
<div class="tsd-comment tsd-typography">
<p>A function taking the GraphObject
returned by navig and returning true if that object should be returned,
defaulting to a predicate that always returns true.</p>
</div>
</li>
</ul>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter">
<a name="findObjectsAt" class="tsd-anchor"></a>
<h3>
find<wbr>Objects<wbr>At
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter">
<li class="tsd-signature tsd-kind-icon">find<wbr>Objects<wbr>At&lt;T, S&gt;<span class="tsd-signature-symbol">(</span>p<span class="tsd-signature-symbol">: </span><a href="Point.html" class="tsd-signature-type">Point</a>, navig<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">a</span><span class="tsd-signature-symbol">: </span><a href="GraphObject.html" class="tsd-signature-type">GraphObject</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span>, pred<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">a</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">T</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span>, coll<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">S</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">S</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Return a collection of the <a href="GraphObject.html">GraphObject</a>s at the given point in document coordinates.</p>
<p>If <a href="Layer.html#visible">Layer.visible</a> is false, this method will not find any objects in that layer.
However, <a href="Layer.html#opacity">Layer.opacity</a> does not affect this method.</p>
<p>Example usage:</p>
<pre><code class="hljs js"><span class="hljs-comment">// Returns the Nodes that are at a given point, overlapping each other</span>
myDiagram.findObjectsAt(somePoint,
<span class="hljs-comment">// Navigation function -- only return Nodes</span>
<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">x</span>) </span>{ <span class="hljs-keyword">var</span> p = x.part; <span class="hljs-keyword">return</span> (p <span class="hljs-keyword">instanceof</span> go.Node) ? p : <span class="hljs-literal">null</span>; }
);</code></pre>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#findObjectAt">findObjectAt</a>, <a href="Diagram.html#findObjectsIn">findObjectsIn</a>, <a href="Diagram.html#findObjectsNear">findObjectsNear</a>, <a href="Diagram.html#findPartsAt">findPartsAt</a></p>
</dd>
</dl>
</div>
<h4 class="tsd-type-parameters-title">Type parameters</h4>
<ul class="tsd-type-parameters">
<li>
<h4>T<span class="tsd-signature-symbol">: </span><a href="GraphObject.html" class="tsd-signature-type">GraphObject</a></h4>
</li>
<li>
<h4>S<span class="tsd-signature-symbol">: </span><a href="List.html" class="tsd-signature-type">List</a><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">T</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol"> | </span><a href="Set.html" class="tsd-signature-type">Set</a><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">T</span><span class="tsd-signature-symbol">&gt;</span></h4>
</li>
</ul>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>p: <a href="Point.html" class="tsd-signature-type">Point</a></h5>
<div class="tsd-comment tsd-typography">
<p>A Point in document coordinates.</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> navig: <span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">a</span><span class="tsd-signature-symbol">: </span><a href="GraphObject.html" class="tsd-signature-type">GraphObject</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span></h5>
<div class="tsd-comment tsd-typography">
<p>A function taking a GraphObject and
returning a GraphObject, defaulting to the identity.
If this function returns null, the given GraphObject will not be included in the results.</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> pred: <span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">a</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">T</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span></h5>
<div class="tsd-comment tsd-typography">
<p>A function taking the GraphObject
returned by navig and returning true if that object should be returned,
defaulting to a predicate that always returns true.</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> coll: <span class="tsd-signature-type">S</span></h5>
<div class="tsd-comment tsd-typography">
<p>An optional collection (List or Set) to add the results to.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">S</span></h4>
<p>a collection of GraphObjects returned by the <em>navig</em> function
and satisfying the <em>pred</em> that are located at the point <em>p</em>, or else an empty collection.
If a List or Set was passed in, it is returned.</p>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter">
<a name="findObjectsIn" class="tsd-anchor"></a>
<h3>
find<wbr>Objects<wbr>In
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter">
<li class="tsd-signature tsd-kind-icon">find<wbr>Objects<wbr>In&lt;T, S&gt;<span class="tsd-signature-symbol">(</span>r<span class="tsd-signature-symbol">: </span><a href="Rect.html" class="tsd-signature-type">Rect</a>, navig<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">a</span><span class="tsd-signature-symbol">: </span><a href="GraphObject.html" class="tsd-signature-type">GraphObject</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span>, pred<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">a</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">T</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span>, partialInclusion<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">boolean</span>, coll<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">S</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">S</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Returns a collection of all <a href="GraphObject.html">GraphObject</a>s that are inside or that intersect
a given <a href="Rect.html">Rect</a> in document coordinates.</p>
<p>If <a href="Layer.html#visible">Layer.visible</a> is false, this method will not find any objects in that layer.
However, <a href="Layer.html#opacity">Layer.opacity</a> does not affect this method.</p>
<p>Example usage:</p>
<pre><code class="hljs js"><span class="hljs-comment">// Returns the Links that intersect a given rectangle and have a certain data property</span>
myDiagram.findObjectsIn(someRect,
<span class="hljs-comment">// Navigation function -- only return Links</span>
<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">x</span>) </span>{ <span class="hljs-keyword">var</span> p = x.part; <span class="hljs-keyword">return</span> (p <span class="hljs-keyword">instanceof</span> go.Link) ? p : <span class="hljs-literal">null</span>; },
<span class="hljs-comment">// Predicate that always receives a Link, due to above navigation function</span>
<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">link</span>) </span>{ <span class="hljs-keyword">return</span> link.data.someProp &gt; <span class="hljs-number">17</span>; },
<span class="hljs-comment">// the links may only partly overlap the given rectangle</span>
<span class="hljs-literal">true</span>
);</code></pre>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#findObjectAt">findObjectAt</a>, <a href="Diagram.html#findObjectsAt">findObjectsAt</a>, <a href="Diagram.html#findObjectsNear">findObjectsNear</a>, <a href="Diagram.html#findPartsIn">findPartsIn</a></p>
</dd>
</dl>
</div>
<h4 class="tsd-type-parameters-title">Type parameters</h4>
<ul class="tsd-type-parameters">
<li>
<h4>T<span class="tsd-signature-symbol">: </span><a href="GraphObject.html" class="tsd-signature-type">GraphObject</a></h4>
</li>
<li>
<h4>S<span class="tsd-signature-symbol">: </span><a href="List.html" class="tsd-signature-type">List</a><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">T</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol"> | </span><a href="Set.html" class="tsd-signature-type">Set</a><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">T</span><span class="tsd-signature-symbol">&gt;</span></h4>
</li>
</ul>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>r: <a href="Rect.html" class="tsd-signature-type">Rect</a></h5>
<div class="tsd-comment tsd-typography">
<p>A Rect in document coordinates.</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> navig: <span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">a</span><span class="tsd-signature-symbol">: </span><a href="GraphObject.html" class="tsd-signature-type">GraphObject</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span></h5>
<div class="tsd-comment tsd-typography">
<p>A function taking a GraphObject and
returning a GraphObject, defaulting to the identity.
If this function returns null, the given GraphObject will not be included in the results.</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> pred: <span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">a</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">T</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span></h5>
<div class="tsd-comment tsd-typography">
<p>A function taking the GraphObject
returned by navig and returning true if that object should be returned,
defaulting to a predicate that always returns true.</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> partialInclusion: <span class="tsd-signature-type">boolean</span></h5>
<div class="tsd-comment tsd-typography">
<p>Whether an object can match if it merely intersects the rectangular area (true) or
if it must be entirely inside the rectangular area (false). The default value is false.</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> coll: <span class="tsd-signature-type">S</span></h5>
<div class="tsd-comment tsd-typography">
<p>An optional collection (List or Set) to add the results to.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">S</span></h4>
<p>a collection of GraphObjects returned by the <em>navig</em> function
and satisfying the <em>pred</em> function that are within the rectangle <em>r</em>, or else an empty collection.
If a List or Set was passed in, it is returned.</p>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter">
<a name="findObjectsNear" class="tsd-anchor"></a>
<h3>
find<wbr>Objects<wbr>Near
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter">
<li class="tsd-signature tsd-kind-icon">find<wbr>Objects<wbr>Near&lt;T, S&gt;<span class="tsd-signature-symbol">(</span>p<span class="tsd-signature-symbol">: </span><a href="Point.html" class="tsd-signature-type">Point</a>, dist<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>, navig<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">a</span><span class="tsd-signature-symbol">: </span><a href="GraphObject.html" class="tsd-signature-type">GraphObject</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span>, pred<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">a</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">T</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span>, partialInclusion<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">S</span>, coll<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">S</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">S</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Returns a collection of all <a href="GraphObject.html">GraphObject</a>s that are within a certain distance
of a given point in document coordinates.</p>
<p>If <a href="Layer.html#visible">Layer.visible</a> is false, this method will not find any objects in that layer.
However, <a href="Layer.html#opacity">Layer.opacity</a> does not affect this method.</p>
<p>Example usage:</p>
<pre><code class="hljs js"><span class="hljs-comment">// Returns the Nodes that intersect a given circular area and have a certain data property</span>
myDiagram.findObjectsNear(somePoint,
<span class="hljs-comment">// The circular area is centered at somePoint and has radius 100</span>
<span class="hljs-number">100</span>,
<span class="hljs-comment">// Navigation function -- only return Nodes</span>
<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">x</span>) </span>{ <span class="hljs-keyword">var</span> p = x.part; <span class="hljs-keyword">return</span> (p <span class="hljs-keyword">instanceof</span> go.Node) ? p : <span class="hljs-literal">null</span>; },
<span class="hljs-comment">// Predicate that always receives a Node, due to above navigation function</span>
<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">node</span>) </span>{ <span class="hljs-keyword">return</span> node.data.someProp &gt; <span class="hljs-number">17</span>; },
<span class="hljs-comment">// the nodes may only partly overlap the given circular area</span>
<span class="hljs-literal">true</span>
);</code></pre>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#findObjectAt">findObjectAt</a>, <a href="Diagram.html#findObjectsAt">findObjectsAt</a>, <a href="Diagram.html#findObjectsIn">findObjectsIn</a>, <a href="Diagram.html#findPartsNear">findPartsNear</a></p>
</dd>
</dl>
</div>
<h4 class="tsd-type-parameters-title">Type parameters</h4>
<ul class="tsd-type-parameters">
<li>
<h4>T<span class="tsd-signature-symbol">: </span><a href="GraphObject.html" class="tsd-signature-type">GraphObject</a></h4>
</li>
<li>
<h4>S<span class="tsd-signature-symbol">: </span><a href="List.html" class="tsd-signature-type">List</a><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">T</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol"> | </span><a href="Set.html" class="tsd-signature-type">Set</a><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">T</span><span class="tsd-signature-symbol">&gt;</span></h4>
</li>
</ul>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>p: <a href="Point.html" class="tsd-signature-type">Point</a></h5>
<div class="tsd-comment tsd-typography">
<p>A Point in document coordinates.</p>
</div>
</li>
<li>
<h5>dist: <span class="tsd-signature-type">number</span></h5>
<div class="tsd-comment tsd-typography">
<p>The distance from the point.</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> navig: <span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">a</span><span class="tsd-signature-symbol">: </span><a href="GraphObject.html" class="tsd-signature-type">GraphObject</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span></h5>
<div class="tsd-comment tsd-typography">
<p>A function taking a GraphObject and
returning a GraphObject, defaulting to the identity.
If this function returns null, the given GraphObject will not be included in the results.</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> pred: <span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">a</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">T</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span></h5>
<div class="tsd-comment tsd-typography">
<p>A function taking the GraphObject
returned by navig and returning true if that object should be returned,
defaulting to a predicate that always returns true.</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> partialInclusion: <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">S</span></h5>
<div class="tsd-comment tsd-typography">
<p>Whether an object can match if it merely intersects the circular area (true) or
if it must be entirely inside the circular area (false). The default value is true.
The default is true.</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> coll: <span class="tsd-signature-type">S</span></h5>
<div class="tsd-comment tsd-typography">
<p>An optional collection (List or Set) to add the results to.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">S</span></h4>
<p>a collection of GraphObjects returned by the <em>navig</em> function
and satisfying the <em>pred</em> that are located near the point <em>p</em>, or else an empty collection.
If a List or Set was passed in, it is returned.</p>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="findPartAt" class="tsd-anchor"></a>
<h3>
find<wbr>Part<wbr>At
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">find<wbr>Part<wbr>At<span class="tsd-signature-symbol">(</span>p<span class="tsd-signature-symbol">: </span><a href="Point.html" class="tsd-signature-type">Point</a>, selectable<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Part.html" class="tsd-signature-type">Part</a><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>This convenience function finds the front-most <a href="Part.html">Part</a>
that is at a given point that might be selectable and that is not in a temporary layer.</p>
<p>This just calls <a href="Diagram.html#findObjectAt">findObjectAt</a> with appropriate arguments,
but ignoring Layers that are <a href="Layer.html#isTemporary">Layer.isTemporary</a>.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#findObjectAt">findObjectAt</a>, <a href="Diagram.html#findObjectsAt">findObjectsAt</a>, <a href="Diagram.html#findObjectsIn">findObjectsIn</a>, <a href="Diagram.html#findObjectsNear">findObjectsNear</a>, <a href="Diagram.html#findPartsAt">findPartsAt</a>, <a href="Diagram.html#findPartsIn">findPartsIn</a>, <a href="Diagram.html#findPartsNear">findPartsNear</a></p>
</dd>
</dl>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>p: <a href="Point.html" class="tsd-signature-type">Point</a></h5>
<div class="tsd-comment tsd-typography">
<p>a Point in document coordinates.</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> selectable: <span class="tsd-signature-type">boolean</span></h5>
<div class="tsd-comment tsd-typography">
<p>Whether to only consider parts that are <a href="Part.html#selectable">Part.selectable</a>. The default is true.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns
<a href="Part.html" class="tsd-signature-type">Part</a>
<span class="tsd-signature-symbol"> | </span>
<span class="tsd-signature-type">null</span>
</h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="findPartForData" class="tsd-anchor"></a>
<h3>
find<wbr>Part<wbr>For<wbr>Data
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">find<wbr>Part<wbr>For<wbr>Data<span class="tsd-signature-symbol">(</span>data<span class="tsd-signature-symbol">: </span><a href="ObjectData.html" class="tsd-signature-type">ObjectData</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Part.html" class="tsd-signature-type">Part</a><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Look for a <a href="Part.html">Part</a>, <a href="Node.html">Node</a>, <a href="Group.html">Group</a>, or <a href="Link.html">Link</a> corresponding to a <a href="Model.html">Model</a>&#39;s data object.
We recommend that you call <a href="Diagram.html#findNodeForData">findNodeForData</a> or <a href="Diagram.html#findLinkForData">findLinkForData</a> if you are looking for a <a href="Node.html">Node</a> or a <a href="Link.html">Link</a>.</p>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>data: <a href="ObjectData.html" class="tsd-signature-type">ObjectData</a></h5>
<div class="tsd-comment tsd-typography">
<p>a JavaScript object matched by reference identity</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns
<a href="Part.html" class="tsd-signature-type">Part</a>
<span class="tsd-signature-symbol"> | </span>
<span class="tsd-signature-type">null</span>
</h4>
<p>an existing <a href="Part.html">Part</a> in this Diagram that was
created because its <code>Part.data</code> was the data in the Diagram&#39;s <a href="Model.html">Model</a>.</p>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="findPartForKey" class="tsd-anchor"></a>
<h3>
find<wbr>Part<wbr>For<wbr>Key
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">find<wbr>Part<wbr>For<wbr>Key<span class="tsd-signature-symbol">(</span>key<span class="tsd-signature-symbol">: </span><a href="../index.html#Key" class="tsd-signature-type">Key</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Part.html" class="tsd-signature-type">Part</a><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Look for a <a href="Part.html">Part</a> or <a href="Node.html">Node</a> or <a href="Group.html">Group</a> corresponding to a model&#39;s data object&#39;s unique key.
This will find a <a href="Link.html">Link</a> if the model is a <a href="GraphLinksModel.html">GraphLinksModel</a> that is maintaining a key on the link data objects.</p>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>key: <a href="../index.html#Key" class="tsd-signature-type">Key</a></h5>
<div class="tsd-comment tsd-typography">
<p>a string or number.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns
<a href="Part.html" class="tsd-signature-type">Part</a>
<span class="tsd-signature-symbol"> | </span>
<span class="tsd-signature-type">null</span>
</h4>
<p>null if a data with that key cannot be found in the model,
or if a corresponding <a href="Part.html">Part</a> cannot be found in the Diagram.
This will not return a <a href="Link.html">Link</a> unless the model is a <a href="GraphLinksModel.html">GraphLinksModel</a> and
<a href="GraphLinksModel.html#linkKeyProperty">GraphLinksModel.linkKeyProperty</a> 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.</p>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter">
<a name="findPartsAt" class="tsd-anchor"></a>
<h3>
find<wbr>Parts<wbr>At
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter">
<li class="tsd-signature tsd-kind-icon">find<wbr>Parts<wbr>At&lt;T, S&gt;<span class="tsd-signature-symbol">(</span>p<span class="tsd-signature-symbol">: </span><a href="Point.html" class="tsd-signature-type">Point</a>, selectable<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">boolean</span>, coll<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">S</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">S</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>This convenience function finds all <a href="Part.html">Part</a>s that are at a point in document coordinates
and that are not in temporary layers.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#findPartAt">findPartAt</a>, <a href="Diagram.html#findPartsIn">findPartsIn</a>, <a href="Diagram.html#findPartsNear">findPartsNear</a>, <a href="Diagram.html#findObjectsAt">findObjectsAt</a></p>
</dd>
<dt>since</dt>
<dd><p>2.0</p>
</dd>
</dl>
</div>
<h4 class="tsd-type-parameters-title">Type parameters</h4>
<ul class="tsd-type-parameters">
<li>
<h4>T<span class="tsd-signature-symbol">: </span><a href="Part.html" class="tsd-signature-type">Part</a></h4>
</li>
<li>
<h4>S<span class="tsd-signature-symbol">: </span><a href="List.html" class="tsd-signature-type">List</a><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">T</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol"> | </span><a href="Set.html" class="tsd-signature-type">Set</a><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">T</span><span class="tsd-signature-symbol">&gt;</span></h4>
</li>
</ul>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>p: <a href="Point.html" class="tsd-signature-type">Point</a></h5>
<div class="tsd-comment tsd-typography">
<p>A Point in document coordinates.</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> selectable: <span class="tsd-signature-type">boolean</span></h5>
<div class="tsd-comment tsd-typography">
<p>Whether to only consider parts that are <a href="Part.html#selectable">Part.selectable</a>. The default is true.</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> coll: <span class="tsd-signature-type">S</span></h5>
<div class="tsd-comment tsd-typography">
<p>An optional collection (List or Set) to add the results to.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">S</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter">
<a name="findPartsIn" class="tsd-anchor"></a>
<h3>
find<wbr>Parts<wbr>In
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter">
<li class="tsd-signature tsd-kind-icon">find<wbr>Parts<wbr>In&lt;T, S&gt;<span class="tsd-signature-symbol">(</span>r<span class="tsd-signature-symbol">: </span><a href="Rect.html" class="tsd-signature-type">Rect</a>, partialInclusion<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">boolean</span>, selectable<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">boolean</span>, coll<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">S</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">S</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>This convenience function finds <a href="Part.html">Part</a>s that are inside or that intersect
a given <a href="Rect.html">Rect</a> in document coordinates.</p>
<p>This just calls <a href="Diagram.html#findObjectsIn">findObjectsIn</a> with appropriate arguments,
but ignoring Layers that are <a href="Layer.html#isTemporary">Layer.isTemporary</a>.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#findPartAt">findPartAt</a>, <a href="Diagram.html#findPartsAt">findPartsAt</a>, <a href="Diagram.html#findPartsNear">findPartsNear</a>, <a href="Diagram.html#findObjectsIn">findObjectsIn</a></p>
</dd>
<dt>since</dt>
<dd><p>2.0</p>
</dd>
</dl>
</div>
<h4 class="tsd-type-parameters-title">Type parameters</h4>
<ul class="tsd-type-parameters">
<li>
<h4>T<span class="tsd-signature-symbol">: </span><a href="Part.html" class="tsd-signature-type">Part</a></h4>
</li>
<li>
<h4>S<span class="tsd-signature-symbol">: </span><a href="List.html" class="tsd-signature-type">List</a><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">T</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol"> | </span><a href="Set.html" class="tsd-signature-type">Set</a><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">T</span><span class="tsd-signature-symbol">&gt;</span></h4>
</li>
</ul>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>r: <a href="Rect.html" class="tsd-signature-type">Rect</a></h5>
<div class="tsd-comment tsd-typography">
<p>a Rect in document coordinates.</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> partialInclusion: <span class="tsd-signature-type">boolean</span></h5>
<div class="tsd-comment tsd-typography">
<p>Whether a Part can match if it merely intersects the rectangular area (true) or
if it must be entirely inside the rectangular area (false). The default value is false.</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> selectable: <span class="tsd-signature-type">boolean</span></h5>
<div class="tsd-comment tsd-typography">
<p>Whether to only consider parts that are <a href="Part.html#selectable">Part.selectable</a>. The default is true.</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> coll: <span class="tsd-signature-type">S</span></h5>
<div class="tsd-comment tsd-typography">
<p>An optional collection (List or Set) to add the results to.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">S</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter">
<a name="findPartsNear" class="tsd-anchor"></a>
<h3>
find<wbr>Parts<wbr>Near
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter">
<li class="tsd-signature tsd-kind-icon">find<wbr>Parts<wbr>Near&lt;T, S&gt;<span class="tsd-signature-symbol">(</span>p<span class="tsd-signature-symbol">: </span><a href="Point.html" class="tsd-signature-type">Point</a>, dist<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>, partialInclusion<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">boolean</span>, selectable<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">boolean</span>, coll<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">S</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">S</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>This convenience function finds <a href="Part.html">Part</a>s that are within a certain distance
of a given point in document coordinates.</p>
<p>This just calls <a href="Diagram.html#findObjectsNear">findObjectsNear</a> with appropriate arguments,
but ignoring Layers that are <a href="Layer.html#isTemporary">Layer.isTemporary</a>.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#findPartAt">findPartAt</a>, <a href="Diagram.html#findPartsAt">findPartsAt</a>, <a href="Diagram.html#findPartsIn">findPartsIn</a>, <a href="Diagram.html#findObjectsNear">findObjectsNear</a></p>
</dd>
<dt>since</dt>
<dd><p>2.0</p>
</dd>
</dl>
</div>
<h4 class="tsd-type-parameters-title">Type parameters</h4>
<ul class="tsd-type-parameters">
<li>
<h4>T<span class="tsd-signature-symbol">: </span><a href="Part.html" class="tsd-signature-type">Part</a></h4>
</li>
<li>
<h4>S<span class="tsd-signature-symbol">: </span><a href="List.html" class="tsd-signature-type">List</a><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">T</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol"> | </span><a href="Set.html" class="tsd-signature-type">Set</a><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">T</span><span class="tsd-signature-symbol">&gt;</span></h4>
</li>
</ul>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>p: <a href="Point.html" class="tsd-signature-type">Point</a></h5>
<div class="tsd-comment tsd-typography">
<p>A Point in document coordinates.</p>
</div>
</li>
<li>
<h5>dist: <span class="tsd-signature-type">number</span></h5>
<div class="tsd-comment tsd-typography">
<p>The distance from the point.</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> partialInclusion: <span class="tsd-signature-type">boolean</span></h5>
<div class="tsd-comment tsd-typography">
<p>Whether an object can match if it merely intersects the circular area (true) or
if it must be entirely inside the circular area (false). The default is true.</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> selectable: <span class="tsd-signature-type">boolean</span></h5>
<div class="tsd-comment tsd-typography">
<p>Whether to only consider parts that are <a href="Part.html#selectable">Part.selectable</a>. The default is true.</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> coll: <span class="tsd-signature-type">S</span></h5>
<div class="tsd-comment tsd-typography">
<p>An optional collection (List or Set) to add the results to.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">S</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="findTopLevelGroups" class="tsd-anchor"></a>
<h3>
find<wbr>Top<wbr>Level<wbr>Groups
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">find<wbr>Top<wbr>Level<wbr>Groups<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Iterator.html" class="tsd-signature-type">Iterator</a><span class="tsd-signature-symbol">&lt;</span><a href="Group.html" class="tsd-signature-type">Group</a><span class="tsd-signature-symbol">&gt;</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Returns an iterator of all <a href="Group.html">Group</a>s that are at top-level,
in other words that are not themselves inside other Groups.</p>
<p>This is useful for when you want to traverse the diagram&#39;s graph by recursing into Groups.</p>
<dl class="tsd-comment-tags">
<dt>since</dt>
<dd><p>1.2</p>
</dd>
</dl>
</div>
<h4 class="tsd-returns-title">Returns <a href="Iterator.html" class="tsd-signature-type">Iterator</a><span class="tsd-signature-symbol">&lt;</span><a href="Group.html" class="tsd-signature-type">Group</a><span class="tsd-signature-symbol">&gt;</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="findTreeRoots" class="tsd-anchor"></a>
<h3>
find<wbr>Tree<wbr>Roots
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">find<wbr>Tree<wbr>Roots<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Iterator.html" class="tsd-signature-type">Iterator</a><span class="tsd-signature-symbol">&lt;</span><a href="Node.html" class="tsd-signature-type">Node</a><span class="tsd-signature-symbol">&gt;</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Returns an iterator of all top-level <a href="Node.html">Node</a>s that have no tree parents.</p>
<p>This is useful for when you want to traverse the diagram&#39;s graph by starting at the root of each tree,
assuming that the diagram consists of one tree or a forest of trees.</p>
<dl class="tsd-comment-tags">
<dt>since</dt>
<dd><p>1.2</p>
</dd>
</dl>
</div>
<h4 class="tsd-returns-title">Returns <a href="Iterator.html" class="tsd-signature-type">Iterator</a><span class="tsd-signature-symbol">&lt;</span><a href="Node.html" class="tsd-signature-type">Node</a><span class="tsd-signature-symbol">&gt;</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="focus" class="tsd-anchor"></a>
<h3>
focus
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">focus<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Explicitly bring HTML focus to the Diagram&#39;s canvas.
This is called by tools that may create other HTML elements such as TextEditingTool.</p>
<p>If <a href="Diagram.html#scrollsPageOnFocus">scrollsPageOnFocus</a> is false, this tries to keep the page at the same scroll position
that it had before calling <a href="Diagram.html#focus">focus</a>.
This method is not overridable.</p>
</div>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-static">
<a name="static-fromDiv" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagStatic">Static</span>
from<wbr>Div
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-static">
<li class="tsd-signature tsd-kind-icon">from<wbr>Div<span class="tsd-signature-symbol">(</span>div<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Element</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Diagram.html" class="tsd-signature-type">Diagram</a><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>This static function gets the <a href="Diagram.html">Diagram</a> that is attached to an HTML DIV element.</p>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>div: <span class="tsd-signature-type">Element</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">string</span></h5>
</li>
</ul>
<h4 class="tsd-returns-title">Returns
<a href="Diagram.html" class="tsd-signature-type">Diagram</a>
<span class="tsd-signature-symbol"> | </span>
<span class="tsd-signature-type">null</span>
</h4>
<p>null if there is no <a href="Diagram.html">Diagram</a> 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.</p>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="highlight" class="tsd-anchor"></a>
<h3>
highlight
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">highlight<span class="tsd-signature-symbol">(</span>part<span class="tsd-signature-symbol">: </span><a href="Part.html" class="tsd-signature-type">Part</a><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Make the given part the only highlighted part.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Part.html#isHighlighted">Part.isHighlighted</a>, <a href="Diagram.html#highlightCollection">highlightCollection</a>, <a href="Diagram.html#clearHighlighteds">clearHighlighteds</a></p>
</dd>
<dt>since</dt>
<dd><p>1.4</p>
</dd>
</dl>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>part: <a href="Part.html" class="tsd-signature-type">Part</a><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span></h5>
<div class="tsd-comment tsd-typography">
<p>a Part that is already in a layer of this Diagram.
If the value is null, this does nothing.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="highlightCollection" class="tsd-anchor"></a>
<h3>
highlight<wbr>Collection
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">highlight<wbr>Collection<span class="tsd-signature-symbol">(</span>coll<span class="tsd-signature-symbol">: </span><a href="Iterable.html" class="tsd-signature-type">Iterable</a><span class="tsd-signature-symbol">&lt;</span><a href="Part.html" class="tsd-signature-type">Part</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">Array</span><span class="tsd-signature-symbol">&lt;</span><a href="Part.html" class="tsd-signature-type">Part</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Highlight all of the <a href="Part.html">Part</a>s supplied in the given collection, and clear all other highlighted Parts.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Part.html#isHighlighted">Part.isHighlighted</a>, <a href="Diagram.html#highlight">highlight</a>, <a href="Diagram.html#clearHighlighteds">clearHighlighteds</a></p>
</dd>
<dt>since</dt>
<dd><p>1.4</p>
</dd>
</dl>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>coll: <a href="Iterable.html" class="tsd-signature-type">Iterable</a><span class="tsd-signature-symbol">&lt;</span><a href="Part.html" class="tsd-signature-type">Part</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">Array</span><span class="tsd-signature-symbol">&lt;</span><a href="Part.html" class="tsd-signature-type">Part</a><span class="tsd-signature-symbol">&gt;</span></h5>
<div class="tsd-comment tsd-typography">
<p>a <a href="List.html">List</a> or <a href="Set.html">Set</a> or <a href="Iterator.html">Iterator</a> or Array, of <a href="Part.html">Part</a>s to be highlighted.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-static">
<a name="static-inherit" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagStatic">Static</span>
inherit
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-static">
<li class="tsd-signature tsd-kind-icon">inherit<span class="tsd-signature-symbol">(</span>derivedclass<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Function</span>, baseclass<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Function</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>This static function declares that a class (constructor function) derives from another class --
<strong><em>but please note that most classes do not support inheritance</em></strong>.
Do not call this function when your class is defined using an ES2015 or TypeScript &quot;class&quot; declaration.</p>
<p>Because you must not modify the prototypes for the <strong>GoJS</strong> 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.</p>
<p>Typical usage is:</p>
<pre><code class="hljs js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">BaseClass</span>(<span class="hljs-params"></span>) </span>{
<span class="hljs-keyword">this</span>._total = <span class="hljs-number">0</span>;
}
public increment(x) {
<span class="hljs-keyword">this</span>._total += x;
}
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">DerivedClass</span>(<span class="hljs-params"></span>) </span>{
<span class="hljs-keyword">this</span>._anotherProperty = <span class="hljs-string">""</span>;
}
go.Diagram.inherit(DerivedClass, BaseClass);
DerivedClass.prototype.someMethod = ...;</code></pre>
<p><strong><em>Note that most classes do not support inheritance.</em></strong>
Currently you can only inherit from <a href="Layout.html">Layout</a>, <a href="Tool.html">Tool</a>, <a href="CommandHandler.html">CommandHandler</a>, and <a href="Link.html">Link</a> or their subclasses.
When you override a method, you must strongly consider calling the base method.
Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call a base method.</p>
<p>The call to <code>Diagram.inherit</code> should be made immediately after defining the subclass constructor function
and 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, or at all on a class defined using an ES2015 or TypeScript class declaration.</p>
<p>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 were
an event handler for that particular object.
Example properties include: <a href="GraphObject.html#click">GraphObject.click</a>, <a href="GraphObject.html#mouseEnter">GraphObject.mouseEnter</a>, <a href="Part.html#layerChanged">Part.layerChanged</a>,
<a href="Node.html#treeExpandedChanged">Node.treeExpandedChanged</a>, <a href="LinkingBaseTool.html#linkValidation">LinkingBaseTool.linkValidation</a>, <a href="CommandHandler.html#memberValidation">CommandHandler.memberValidation</a>,
<a href="TextEditingTool.html#textValidation">TextEditingTool.textValidation</a>.</p>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>derivedclass: <span class="tsd-signature-type">Function</span></h5>
</li>
<li>
<h5>baseclass: <span class="tsd-signature-type">Function</span></h5>
<div class="tsd-comment tsd-typography">
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="layoutDiagram" class="tsd-anchor"></a>
<h3>
layout<wbr>Diagram
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">layout<wbr>Diagram<span class="tsd-signature-symbol">(</span>invalidateAll<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Perform all invalid layouts.
If the optional argument is true,
this will perform all of the layouts (<a href="Diagram.html#layout">Diagram.layout</a> and all <a href="Group.html#layout">Group.layout</a>s),
not just the invalid ones.</p>
<p>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 <a href="Layout.html#isInitial">Layout.isInitial</a>
and/or <a href="Layout.html#isOngoing">Layout.isOngoing</a> to false, or by restricting a Part&#39;s <a href="Part.html#layoutConditions">Part.layoutConditions</a>.
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.</p>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> invalidateAll: <span class="tsd-signature-type">boolean</span></h5>
<div class="tsd-comment tsd-typography">
<p>If true, this will explicitly set <a href="Layout.html#isValidLayout">Layout.isValidLayout</a> to false on each <a href="Layout.html">Layout</a> in the diagram.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="makeImage" class="tsd-anchor"></a>
<h3>
make<wbr>Image
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">make<wbr>Image<span class="tsd-signature-symbol">(</span>options<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">ImageRendererOptions</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">HTMLImageElement</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Create an HTMLImageElement that contains a bitmap of the current Diagram.
This method is just a convenience function that creates an image,
sets its source to the returned string of <a href="Diagram.html#makeImageData">makeImageData</a>,
and returns a reference to that Image.</p>
<p>See <a href="Diagram.html#makeImageData">makeImageData</a> for a complete explanation of possible options.</p>
<p>By default this method returns a snapshot of the visible diagram, but optional arguments give more options.</p>
<p>At the current time methods such as <a href="Diagram.html#makeImage">Diagram.makeImage</a>,
<a href="Diagram.html#makeImageData">Diagram.makeImageData</a> and <a href="Diagram.html#makeSvg">Diagram.makeSvg</a> do not work on <a href="Overview.html">Overview</a>s.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#makeImageData">makeImageData</a>, <a href="Diagram.html#makeSvg">makeSvg</a></p>
</dd>
</dl>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> options: <span class="tsd-signature-type">ImageRendererOptions</span></h5>
<div class="tsd-comment tsd-typography">
<p>a JavaScript object detailing optional arguments for image creation, to be passed to <a href="Diagram.html#makeImageData">makeImageData</a>.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns
<span class="tsd-signature-type">HTMLImageElement</span>
<span class="tsd-signature-symbol"> | </span>
<span class="tsd-signature-type">null</span>
</h4>
<p>An HTML Image element, or null if a callback is specified, or null if there is no DOM.</p>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="makeImageData" class="tsd-anchor"></a>
<h3>
make<wbr>Image<wbr>Data
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">make<wbr>Image<wbr>Data<span class="tsd-signature-symbol">(</span>options<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">ImageRendererOptions</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">HTMLImageElement</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">ImageData</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Create a bitmap of the current Diagram encoded as a base64 string, or returned as an ImageData object.
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 images
were drawn on the canvas, instead it will return a data URL of a bitmap with those images omitted.</p>
<p>A simple example:</p>
<pre><code class="hljs js">myDiagram.makeImageData({
<span class="hljs-attr">scale</span>: <span class="hljs-number">1.5</span>,
<span class="hljs-attr">size</span>: <span class="hljs-keyword">new</span> go.Size(<span class="hljs-number">100</span>,<span class="hljs-number">100</span>)
});</code></pre>
<p class="boxread">
See the page on <a href="../../intro/makingImages.html">Making Images</a> for more usage examples.
<p>At the current time methods such as <a href="Diagram.html#makeImage">Diagram.makeImage</a>,
<a href="Diagram.html#makeImageData">Diagram.makeImageData</a> and <a href="Diagram.html#makeSvg">Diagram.makeSvg</a> do not work on <a href="Overview.html">Overview</a>s.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#makeImage">makeImage</a></p>
</dd>
</dl>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> options: <span class="tsd-signature-type">ImageRendererOptions</span></h5>
<div class="tsd-comment tsd-typography">
<p>a JavaScript object detailing optional arguments for image creation.
Rendering options for both images and SVG:</p>
<ul>
<li><strong>size:</strong>
The size of the created image, as a <a href="Size.html">Size</a>, limited by the <strong>maxSize</strong> property.
If no <strong>scale</strong> or <strong>position</strong> is specified then the diagram will be scaled to fit the given size.
If you set a size, you should also set a <strong>position</strong>. If you are scaling the diagram, you may also want to scale the size.</li>
<li><strong>scale:</strong>
The scale of the diagram. If <strong>scale</strong> is specified and <strong>size</strong> is not, the resulting image will be sized to uniformly
fit the space needed for the given scale.
Can be constrained by the <strong>maxSize</strong> property. A scale value of <code>NaN</code> will
automatically scale ot fit within the maxSize, but may be smaller, with a maximum computed scale of 1.</li>
<li><strong>maxSize:</strong>
The maximum size of the created image, as a <a href="Size.html">Size</a>. The default value is <code>(Infinity, Infinity)</code> for SVG and <code>(2000, 2000)</code> for images.
This is typically used when <strong>scale</strong> is specified.</li>
<li><strong>position:</strong>
The position of the diagram, as a <a href="Point.html">Point</a>.
By default this is the position of <a href="Diagram.html#documentBounds">Diagram.documentBounds</a> with the <a href="Diagram.html#padding">Diagram.padding</a> 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 <code>position</code>, you should also set a <code>size</code>.</li>
<li><strong>parts:</strong>
An iterator of GraphObjects, typically Parts, such as one from <a href="Diagram.html#selection">Diagram.selection</a> or <a href="Layer.html#parts">Layer.parts</a>.
If GraphObjects are specified their containing Part will be drawn. By default all Parts are drawn except temporary parts (see <strong>showTemporary</strong>).</li>
<li><strong>padding:</strong>
A <a href="Margin.html">Margin</a> (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 <code>1</code>.</li>
<li><strong>background:</strong>
A valid CSS color to replace the default (transparent) canvas background. Any padding area is also colored.</li>
<li><strong>showTemporary:</strong>
A boolean value, defaulting to false,
that determines whether or not temporary objects such as adornments are included in the image.</li>
<li><strong>showGrid:</strong>
A boolean value, defaulting to the value of <strong>showTemporary</strong>,
that determines whether or not the Grid Layer (containing <a href="Diagram.html#grid">Diagram.grid</a>) is included in the image
regardless of the value of <strong>showTemporary</strong>.
This is useful if you want to include the grid but not adornments, or vice versa.</li>
<li><strong>document:</strong>
An HTML Document, defaulting to <code>window.document</code> (or the root object in other contexts)
This may be useful to set if you intend your Image or SVG to be opened in a new window.</li>
</ul>
<p>Additional image-specific arguments (not for SVG):</p>
<ul>
<li><strong>type:</strong>
The optional MIME type of the image. Valid values are typically <code>&quot;image/png&quot;</code> and <code>&quot;image/jpeg&quot;</code>.
Some browsers allow <code>&quot;image/webp&quot;</code>. The default value is <code>&quot;image/png&quot;</code>, and unrecognized values will defer to the default.</li>
<li><strong>returnType:</strong>
The optional return type of the image data. Valid values are <code>&quot;ImageData&quot;</code>, <code>&quot;string&quot;</code>, and <code>&quot;blob&quot;</code>.
The <code>&quot;string&quot;</code> option returns a base64 string representation of the image.
The <code>&quot;ImageData&quot;</code> option returns an <code>ImageData</code> object representation of the image.
The <code>&quot;Image&quot;</code> option returns an <code>HTMLImageElement</code> using <code>ImageData</code> as the <code>HTMLImageElement.src</code>.
The <code>&quot;blob&quot;</code> option requires that the <strong>callback</strong> property is also defined.
The default value is <code>&quot;string&quot;</code>, and unrecognized values will return a string.</li>
<li><strong>callback:</strong>
The function to call when an image is finished creation. It has one argument, which is of the type specified by the value of the <strong>returnType</strong>.
If provided, call the callback when finished instead of returning immediately. This can be useful if you need to wait for image assets to load.
This also respects the <strong>callbackTimeout</strong>.
This argument is necessary if the <strong>returnType</strong> is <code>&quot;blob&quot;</code>, however a callback can be used with any <strong>returnType</strong>.
See the <a href="../../samples/minimalBlob.html">Minimal Image Blob Download sample</a> for an example usage,
which also demonstrates downloading an image file without involving a web server.</li>
<li><strong>callbackTimeout:</strong>
If a <strong>callback</strong> is specified, the additional amount of time in milliseconds a call will wait before completeing. Right now, it will only wait if
image assets in the Diagram are not yet loaded. Default is 300 (milliseconds).</li>
<li><strong>details:</strong>
The optional details to pass to the HTMLCanvasElement&#39;s toDataURL function.
If the type is <code>&quot;image/jpeg&quot;</code> then this can be a number from <code>0</code> to <code>1</code>, inclusive, describing the desired jpeg quality.</li>
</ul>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns
<span class="tsd-signature-type">HTMLImageElement</span>
<span class="tsd-signature-symbol"> | </span>
<span class="tsd-signature-type">ImageData</span>
<span class="tsd-signature-symbol"> | </span>
<span class="tsd-signature-type">string</span>
<span class="tsd-signature-symbol"> | </span>
<span class="tsd-signature-type">null</span>
</h4>
<p>An ImageData, or a base64-encoded string describing an image, or null if a callback is specified.</p>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="makeSvg" class="tsd-anchor"></a>
<h3>
make<wbr>Svg
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">make<wbr>Svg<span class="tsd-signature-symbol">(</span>options<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">SvgRendererOptions</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">SVGElement</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Create an SVGElement that contains a SVG rendering of the current Diagram.</p>
<p>By default this method returns a snapshot of the visible diagram, but optional arguments give more options.</p>
<p class="boxread">
See the page on <a href="../../intro/makingSVG.html">Making SVG</a> for usage examples.
See the <a href="../../samples/minimalSVG.html">Minimal SVG Download sample</a>,
which also demonstrates downloading an SVG file without involving a web server.
<p>See <a href="Diagram.html#makeImageData">makeImageData</a> for an explanation of possible options that are shared by both methods.
Additional SVG-specific options for this method:</p>
<ul>
<li><strong>elementFinished:</strong>
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:<pre><code class="hljs js">elementFinished: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">graphObject, SVGElement</span>) </span>{
<span class="hljs-comment">// set something on every SVG element that represents a GoJS TextBlock</span>
<span class="hljs-keyword">if</span> (graphObject <span class="hljs-keyword">instanceof</span> go.TextBlock) SVGElement.setAttribute(...);
}</code></pre>
</li>
</ul>
<p>At the current time methods such as <a href="Diagram.html#makeImage">Diagram.makeImage</a>,
<a href="Diagram.html#makeImageData">Diagram.makeImageData</a> and <a href="Diagram.html#makeSvg">Diagram.makeSvg</a> do not work on <a href="Overview.html">Overview</a>s.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#makeImage">makeImage</a></p>
</dd>
</dl>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> options: <span class="tsd-signature-type">SvgRendererOptions</span></h5>
<div class="tsd-comment tsd-typography">
<p>a JavaScript object detailing optional arguments for SVG creation.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">SVGElement</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="moveParts" class="tsd-anchor"></a>
<h3>
move<wbr>Parts
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">move<wbr>Parts<span class="tsd-signature-symbol">(</span>coll<span class="tsd-signature-symbol">: </span><a href="Iterable.html" class="tsd-signature-type">Iterable</a><span class="tsd-signature-symbol">&lt;</span><a href="Part.html" class="tsd-signature-type">Part</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">Array</span><span class="tsd-signature-symbol">&lt;</span><a href="Part.html" class="tsd-signature-type">Part</a><span class="tsd-signature-symbol">&gt;</span>, offset<span class="tsd-signature-symbol">: </span><a href="Point.html" class="tsd-signature-type">Point</a>, check<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span>, dragOptions<span class="tsd-signature-symbol">?: </span><a href="DraggingOptions.html" class="tsd-signature-type">DraggingOptions</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Move a collection of <a href="Part.html">Part</a>s in this Diagram by a given offset.
Moving a <a href="Group.html">Group</a> 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 <a href="DraggingTool.html#isGridSnapEnabled">DraggingTool.isGridSnapEnabled</a> is true.</p>
<p>This does not perform a transaction nor does it raise a <a href="DiagramEvent.html">DiagramEvent</a>.</p>
<dl class="tsd-comment-tags">
<dt>since</dt>
<dd><p>1.3</p>
</dd>
</dl>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>coll: <a href="Iterable.html" class="tsd-signature-type">Iterable</a><span class="tsd-signature-symbol">&lt;</span><a href="Part.html" class="tsd-signature-type">Part</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">Array</span><span class="tsd-signature-symbol">&lt;</span><a href="Part.html" class="tsd-signature-type">Part</a><span class="tsd-signature-symbol">&gt;</span></h5>
<div class="tsd-comment tsd-typography">
<p>A <a href="List.html">List</a> or a <a href="Set.html">Set</a> or <a href="Iterator.html">Iterator</a> of <a href="Part.html">Part</a>s, or an Array of <a href="Part.html">Part</a>s,
or null to move all of the Parts in this Diagram.</p>
</div>
</li>
<li>
<h5>offset: <a href="Point.html" class="tsd-signature-type">Point</a></h5>
<div class="tsd-comment tsd-typography">
<p>the amount to move each Part, in document coordinates.</p>
</div>
</li>
<li>
<h5>check: <span class="tsd-signature-type">boolean</span></h5>
<div class="tsd-comment tsd-typography">
<p>Whether to check <a href="Part.html#canMove">Part.canMove</a> on each part.</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> dragOptions: <a href="DraggingOptions.html" class="tsd-signature-type">DraggingOptions</a></h5>
<div class="tsd-comment tsd-typography">
<p>Optional dragging options. By default this uses the settings from the Diagram&#39;s DraggingTool.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="rebuildParts" class="tsd-anchor"></a>
<h3>
rebuild<wbr>Parts
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">rebuild<wbr>Parts<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Remove all of the <a href="Part.html">Part</a>s created from model data
and then create them again.
This must be called after modifying or replacing any of the template maps
such as <a href="Diagram.html#nodeTemplateMap">nodeTemplateMap</a>.
This re-selects all of the new Parts that were created from data of the original selected Parts.</p>
<p>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 <a href="Diagram.html#nodeTemplate">nodeTemplate</a> or the <a href="Diagram.html#nodeTemplateMap">nodeTemplateMap</a> or
the corresponding properties for Groups or Links,
the Diagram property setters will automatically call rebuildParts.</p>
<p>It is extremely wasteful to call this method after making some model data changes that you want to
be reflected in the diagram. Instead, it is better call <a href="Model.html#setDataProperty">Model.setDataProperty</a>,
<a href="Model.html#addNodeData">Model.addNodeData</a>, <a href="Model.html#removeNodeData">Model.removeNodeData</a>, or other model methods.
Not only do those methods update efficiently, they also preserve unbound state and support undo/redo.</p>
</div>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="remove" class="tsd-anchor"></a>
<h3>
remove
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">remove<span class="tsd-signature-symbol">(</span>part<span class="tsd-signature-symbol">: </span><a href="Part.html" class="tsd-signature-type">Part</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Removes a <a href="Part.html">Part</a> from its <a href="Layer.html">Layer</a>, provided the Layer is in this Diagram.
Removing a <a href="Node.html">Node</a> will also remove any Links that are connected with it.
Removing a <a href="Group.html">Group</a> will also remove all of its members.
Removing a <a href="Link.html">Link</a> will also remove all of its label Nodes, if it has any.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#add">add</a></p>
</dd>
</dl>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>part: <a href="Part.html" class="tsd-signature-type">Part</a></h5>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="removeChangedListener" class="tsd-anchor"></a>
<h3>
remove<wbr>Changed<wbr>Listener
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">remove<wbr>Changed<wbr>Listener<span class="tsd-signature-symbol">(</span>listener<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">e</span><span class="tsd-signature-symbol">: </span><a href="ChangedEvent.html" class="tsd-signature-type">ChangedEvent</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Unregister a <a href="ChangedEvent.html">ChangedEvent</a> handler.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#addChangedListener">addChangedListener</a></p>
</dd>
</dl>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>listener: <span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">e</span><span class="tsd-signature-symbol">: </span><a href="ChangedEvent.html" class="tsd-signature-type">ChangedEvent</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></h5>
<div class="tsd-comment tsd-typography">
<p>a function that takes a <a href="ChangedEvent.html">ChangedEvent</a> as its argument.</p>
</div>
<ul class="tsd-parameters">
</ul>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="removeDiagramListener" class="tsd-anchor"></a>
<h3>
remove<wbr>Diagram<wbr>Listener
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">remove<wbr>Diagram<wbr>Listener<span class="tsd-signature-symbol">(</span>name<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">DiagramEventName</span>, listener<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">e</span><span class="tsd-signature-symbol">: </span><a href="DiagramEvent.html" class="tsd-signature-type">DiagramEvent</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Unregister a <a href="DiagramEvent.html">DiagramEvent</a> handler.</p>
<p>See the documentation for <a href="DiagramEvent.html">DiagramEvent</a> for a complete listing of diagram event names and their purposes.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#addDiagramListener">addDiagramListener</a></p>
</dd>
</dl>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>name: <span class="tsd-signature-type">DiagramEventName</span></h5>
<div class="tsd-comment tsd-typography">
<p>the name is normally capitalized, but this method uses case-insensitive comparison.</p>
</div>
</li>
<li>
<h5>listener: <span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">e</span><span class="tsd-signature-symbol">: </span><a href="DiagramEvent.html" class="tsd-signature-type">DiagramEvent</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></h5>
<div class="tsd-comment tsd-typography">
<p>a function that takes a <a href="DiagramEvent.html">DiagramEvent</a> as its argument.</p>
</div>
<ul class="tsd-parameters">
</ul>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="removeLayer" class="tsd-anchor"></a>
<h3>
remove<wbr>Layer
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">remove<wbr>Layer<span class="tsd-signature-symbol">(</span>layer<span class="tsd-signature-symbol">: </span><a href="Layer.html" class="tsd-signature-type">Layer</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Removes the given layer from the list of layers.</p>
<p>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 <a href="Diagram.html#removeParts">Diagram.removeParts</a> with <a href="Layer.html#parts">Layer.parts</a> as the argument.</p>
<p>You cannot remove the default layer, the one named with the empty string.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#addLayer">addLayer</a>, <a href="Diagram.html#addLayerBefore">addLayerBefore</a>, <a href="Diagram.html#addLayerAfter">addLayerAfter</a>, <a href="Diagram.html#findLayer">findLayer</a></p>
</dd>
</dl>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>layer: <a href="Layer.html" class="tsd-signature-type">Layer</a></h5>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="removeModelChangedListener" class="tsd-anchor"></a>
<h3>
remove<wbr>Model<wbr>Changed<wbr>Listener
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">remove<wbr>Model<wbr>Changed<wbr>Listener<span class="tsd-signature-symbol">(</span>listener<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">e</span><span class="tsd-signature-symbol">: </span><a href="ChangedEvent.html" class="tsd-signature-type">ChangedEvent</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Unregister a <a href="ChangedEvent.html">ChangedEvent</a> handler from this Diagram&#39;s <a href="Diagram.html#model">Diagram.model</a>.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#addModelChangedListener">addModelChangedListener</a></p>
</dd>
<dt>since</dt>
<dd><p>1.6</p>
</dd>
</dl>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>listener: <span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">e</span><span class="tsd-signature-symbol">: </span><a href="ChangedEvent.html" class="tsd-signature-type">ChangedEvent</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></h5>
<div class="tsd-comment tsd-typography">
<p>a function that takes a <a href="ChangedEvent.html">ChangedEvent</a> as its argument.</p>
</div>
<ul class="tsd-parameters">
</ul>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="removeParts" class="tsd-anchor"></a>
<h3>
remove<wbr>Parts
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">remove<wbr>Parts<span class="tsd-signature-symbol">(</span>coll<span class="tsd-signature-symbol">: </span><a href="Iterable.html" class="tsd-signature-type">Iterable</a><span class="tsd-signature-symbol">&lt;</span><a href="Part.html" class="tsd-signature-type">Part</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">Array</span><span class="tsd-signature-symbol">&lt;</span><a href="Part.html" class="tsd-signature-type">Part</a><span class="tsd-signature-symbol">&gt;</span>, check<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>This method removes from this Diagram all of the <a href="Part.html">Part</a>s in a collection.
Removing a <a href="Node.html">Node</a> will also remove any Links that are connected with it.
Removing a <a href="Group.html">Group</a> will also remove all of its members.
Removing a <a href="Link.html">Link</a> will also remove all of its label Nodes, if it has any.</p>
<p>This does not perform a transaction nor does it raise a <a href="DiagramEvent.html">DiagramEvent</a>.
Call <a href="CommandHandler.html#deleteSelection">CommandHandler.deleteSelection</a>, which calls this method,
if you want to delete all selected Parts.
The <a href="CommandHandler.html#deleteSelection">CommandHandler.deleteSelection</a> command may delete other Parts as well, depending on <a href="CommandHandler.html#deletesTree">CommandHandler.deletesTree</a>.</p>
<p>At this time there is no &quot;addParts&quot; method -- just call <a href="Diagram.html#add">Diagram.add</a> on each Part.</p>
<dl class="tsd-comment-tags">
<dt>since</dt>
<dd><p>1.3</p>
</dd>
</dl>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>coll: <a href="Iterable.html" class="tsd-signature-type">Iterable</a><span class="tsd-signature-symbol">&lt;</span><a href="Part.html" class="tsd-signature-type">Part</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">Array</span><span class="tsd-signature-symbol">&lt;</span><a href="Part.html" class="tsd-signature-type">Part</a><span class="tsd-signature-symbol">&gt;</span></h5>
<div class="tsd-comment tsd-typography">
<p>A <a href="List.html">List</a> or <a href="Set.html">Set</a> or <a href="Iterator.html">Iterator</a> or Array of <a href="Part.html">Part</a>s.</p>
</div>
</li>
<li>
<h5>check: <span class="tsd-signature-type">boolean</span></h5>
<div class="tsd-comment tsd-typography">
<p>Whether to check <a href="Part.html#canDelete">Part.canDelete</a> on each part.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="requestUpdate" class="tsd-anchor"></a>
<h3>
request<wbr>Update
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">request<wbr>Update<span class="tsd-signature-symbol">(</span>alwaysQueueUpdate<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Usage of this method is uncommon and may affect performance,
for efficiency do not call this method unless you have a well-defined need.
Normally, GoJS updates the diagram automatically, and completeing a transaction ensures an immediate update.</p>
<p>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 diagrams
<a href="../../intro/resizing.html">here</a>.</p>
<p>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.</p>
<dl class="tsd-comment-tags">
<dt>since</dt>
<dd><p>1.6</p>
</dd>
</dl>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> alwaysQueueUpdate: <span class="tsd-signature-type">boolean</span></h5>
<div class="tsd-comment tsd-typography">
<p>If true the Diagram will queue another update,
even if an update is already occurring. The default value is false.
Side effects in an &quot;InitialLayoutCompleted&quot; DiagramEvent listener might necessitate setting this parameter.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="rollbackTransaction" class="tsd-anchor"></a>
<h3>
rollback<wbr>Transaction
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">rollback<wbr>Transaction<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Rollback the current transaction, undoing any recorded changes.
This just calls <a href="UndoManager.html#rollbackTransaction">UndoManager.rollbackTransaction</a>.</p>
</div>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">boolean</span></h4>
<p>the value returned by <a href="UndoManager.html#rollbackTransaction">UndoManager.rollbackTransaction</a>.</p>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="scroll" class="tsd-anchor"></a>
<h3>
scroll
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">scroll<span class="tsd-signature-symbol">(</span>unit<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">"pixel"</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"line"</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"page"</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"document"</span>, dir<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">"up"</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"down"</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"left"</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"right"</span>, dist<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Scrolling function used by primarily by <a href="Diagram.html#commandHandler">commandHandler</a>&#39;s <a href="CommandHandler.html#doKeyDown">CommandHandler.doKeyDown</a>.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#scrollToRect">scrollToRect</a>, <a href="Diagram.html#centerRect">centerRect</a></p>
</dd>
</dl>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>unit: <span class="tsd-signature-type">"pixel"</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"line"</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"page"</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"document"</span></h5>
<div class="tsd-comment tsd-typography">
<p>A string representing the unit of the scroll operation. Can only be &#39;pixel&#39;, &#39;line&#39;, &#39;page&#39;, or &#39;document&#39;.</p>
</div>
</li>
<li>
<h5>dir: <span class="tsd-signature-type">"up"</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"down"</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"left"</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"right"</span></h5>
<div class="tsd-comment tsd-typography">
<p>The direction of the scroll operation. Can only be &#39;up&#39;, &#39;down&#39;, &#39;left&#39;, or &#39;right&#39;.</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> dist: <span class="tsd-signature-type">number</span></h5>
<div class="tsd-comment tsd-typography">
<p>An optional distance multiplier, for multiple pixels, lines, or pages. The default value is 1.
This argument is ignored when the unit is &#39;document&#39;.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="scrollToRect" class="tsd-anchor"></a>
<h3>
scroll<wbr>ToRect
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">scroll<wbr>ToRect<span class="tsd-signature-symbol">(</span>r<span class="tsd-signature-symbol">: </span><a href="Rect.html" class="tsd-signature-type">Rect</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Modifies the <a href="Diagram.html#position">position</a> to show a given Rect of the Diagram by centering the
viewport on that Rect. Does nothing if the Rect is already in view.</p>
<p>See also <a href="Diagram.html#centerRect">centerRect</a></p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#centerRect">centerRect</a>, <a href="Diagram.html#scroll">scroll</a></p>
</dd>
</dl>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>r: <a href="Rect.html" class="tsd-signature-type">Rect</a></h5>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="select" class="tsd-anchor"></a>
<h3>
select
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">select<span class="tsd-signature-symbol">(</span>part<span class="tsd-signature-symbol">: </span><a href="Part.html" class="tsd-signature-type">Part</a><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Make the given object the only selected object.
This method raises the &quot;ChangingSelection&quot; and &quot;ChangedSelection&quot; Diagram events.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#selectCollection">selectCollection</a>, <a href="Diagram.html#clearSelection">clearSelection</a></p>
</dd>
</dl>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>part: <a href="Part.html" class="tsd-signature-type">Part</a><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span></h5>
<div class="tsd-comment tsd-typography">
<p>a Part that is already in a layer of this Diagram.
If the value is null, this does nothing.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="selectCollection" class="tsd-anchor"></a>
<h3>
select<wbr>Collection
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">select<wbr>Collection<span class="tsd-signature-symbol">(</span>coll<span class="tsd-signature-symbol">: </span><a href="Iterable.html" class="tsd-signature-type">Iterable</a><span class="tsd-signature-symbol">&lt;</span><a href="Part.html" class="tsd-signature-type">Part</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">Array</span><span class="tsd-signature-symbol">&lt;</span><a href="Part.html" class="tsd-signature-type">Part</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Select all of the <a href="Part.html">Part</a>s supplied in the given collection, and deselect all other Parts.
This method raises the &quot;ChangingSelection&quot; and &quot;ChangedSelection&quot; Diagram events.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#select">select</a>, <a href="Diagram.html#clearSelection">clearSelection</a></p>
</dd>
</dl>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>coll: <a href="Iterable.html" class="tsd-signature-type">Iterable</a><span class="tsd-signature-symbol">&lt;</span><a href="Part.html" class="tsd-signature-type">Part</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">Array</span><span class="tsd-signature-symbol">&lt;</span><a href="Part.html" class="tsd-signature-type">Part</a><span class="tsd-signature-symbol">&gt;</span></h5>
<div class="tsd-comment tsd-typography">
<p>a <a href="List.html">List</a> or <a href="Set.html">Set</a> or <a href="Iterator.html">Iterator</a> or Array, of <a href="Part.html">Part</a>s to be selected.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="setProperties" class="tsd-anchor"></a>
<h3>
set<wbr>Properties
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">set<wbr>Properties<span class="tsd-signature-symbol">(</span>props<span class="tsd-signature-symbol">: </span><a href="ObjectData.html" class="tsd-signature-type">ObjectData</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>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 <a href="GraphObject.html#static-make">GraphObject.make</a> does when constructing a Diagram with an argument that is a simple JavaScript Object.</p>
<p>You can set properties on an object that is the value of a property of the Diagram,
or on the <a href="Diagram.html#toolManager">Diagram.toolManager</a>, by using a <em>subpropname.property</em> syntax for the property name.
At the current time only a single dot is permitted in the property &quot;name&quot;.</p>
<p>The property name may also be the name of a <a href="DiagramEvent.html">DiagramEvent</a>, in which case this calls <a href="Diagram.html#addDiagramListener">addDiagramListener</a> with that DiagramEvent name.</p>
<pre><code class="hljs js">aDiagram.setProperties({
<span class="hljs-attr">allowDelete</span>: <span class="hljs-literal">false</span>,
<span class="hljs-comment">// display a background grid for the whole diagram</span>
<span class="hljs-string">"grid.visible"</span>: <span class="hljs-literal">true</span>,
<span class="hljs-string">"grid.gridCellSize"</span>: <span class="hljs-keyword">new</span> go.Size(<span class="hljs-number">20</span>, <span class="hljs-number">20</span>),
<span class="hljs-string">"animationManager.isEnabled"</span>: <span class="hljs-literal">false</span>, <span class="hljs-comment">// turn off automatic animations</span>
<span class="hljs-comment">// specify a group membership validation predicate</span>
<span class="hljs-string">"commandHandler.memberValidation"</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">group, part</span>) </span>{ <span class="hljs-keyword">return</span> ...; },
<span class="hljs-string">"commandHandler.copiesTree"</span>: <span class="hljs-literal">true</span>, <span class="hljs-comment">// for the copy command</span>
<span class="hljs-comment">// mouse wheel zooms instead of scrolls</span>
<span class="hljs-string">"toolManager.mouseWheelBehavior"</span>: go.ToolManager.WheelZoom,
<span class="hljs-string">"draggingTool.dragsTree"</span>: <span class="hljs-literal">true</span>, <span class="hljs-comment">// dragging for both move and copy</span>
<span class="hljs-string">"draggingTool.isGridSnapEnabled"</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">layout</span>: $(go.TreeLayout),
<span class="hljs-comment">// add a DiagramEvent listener</span>
<span class="hljs-string">"ExternalObjectsDropped"</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>) </span>{ e.subject.each(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">part</span>) </span>{ ... }); }
});</code></pre>
<dl class="tsd-comment-tags">
<dt>since</dt>
<dd><p>1.5</p>
</dd>
</dl>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>props: <a href="ObjectData.html" class="tsd-signature-type">ObjectData</a></h5>
<div class="tsd-comment tsd-typography">
<p>a plain JavaScript object with various property values to be set on this Diagram or on a part of this Diagram.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="startTransaction" class="tsd-anchor"></a>
<h3>
start<wbr>Transaction
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">start<wbr>Transaction<span class="tsd-signature-symbol">(</span>tname<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Begin a transaction, where the changes are held by a <a href="Transaction.html">Transaction</a> object
in the <a href="UndoManager.html">UndoManager</a>.
This just calls <a href="UndoManager.html#startTransaction">UndoManager.startTransaction</a>.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#commit">commit</a></p>
</dd>
</dl>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> tname: <span class="tsd-signature-type">string</span></h5>
<div class="tsd-comment tsd-typography">
<p>a descriptive name for the transaction.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">boolean</span></h4>
<p>the value returned by <a href="UndoManager.html#startTransaction">UndoManager.startTransaction</a>.</p>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="transformDocToView" class="tsd-anchor"></a>
<h3>
transform<wbr>Doc<wbr>ToView
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">transform<wbr>Doc<wbr>ToView<span class="tsd-signature-symbol">(</span>p<span class="tsd-signature-symbol">: </span><a href="Point.html" class="tsd-signature-type">Point</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Point.html" class="tsd-signature-type">Point</a></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Given a Point in document coorindates, return a new Point in viewport coordinates.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#transformViewToDoc">transformViewToDoc</a>, <a href="GraphObject.html#getDocumentPoint">GraphObject.getDocumentPoint</a></p>
</dd>
</dl>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>p: <a href="Point.html" class="tsd-signature-type">Point</a></h5>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <a href="Point.html" class="tsd-signature-type">Point</a></h4>
<p>The given Point converted into View coordinates.</p>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="transformViewToDoc" class="tsd-anchor"></a>
<h3>
transform<wbr>View<wbr>ToDoc
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">transform<wbr>View<wbr>ToDoc<span class="tsd-signature-symbol">(</span>p<span class="tsd-signature-symbol">: </span><a href="Point.html" class="tsd-signature-type">Point</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Point.html" class="tsd-signature-type">Point</a></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Given a point in viewport coordinates, return a new Point in document coordinates.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#transformDocToView">transformDocToView</a>, <a href="GraphObject.html#getDocumentPoint">GraphObject.getDocumentPoint</a></p>
</dd>
</dl>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>p: <a href="Point.html" class="tsd-signature-type">Point</a></h5>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <a href="Point.html" class="tsd-signature-type">Point</a></h4>
<p>The given point converted into Document coordinates.</p>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="updateAllRelationshipsFromData" class="tsd-anchor"></a>
<h3>
update<wbr>All<wbr>Relationships<wbr>From<wbr>Data
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">update<wbr>All<wbr>Relationships<wbr>From<wbr>Data<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Add or remove any nodes or links according to additional or missing data objects in the model
and update all of the references to nodes, in case they had been modified in the model without
properly notifying the model by calling <a href="Model.html#addNodeData">Model.addNodeData</a> or
<a href="GraphLinksModel.html#removeLinkData">GraphLinksModel.removeLinkData</a> or
<a href="GraphLinksModel.html#setGroupKeyForNodeData">GraphLinksModel.setGroupKeyForNodeData</a> or
<a href="GraphLinksModel.html#setToKeyForLinkData">GraphLinksModel.setToKeyForLinkData</a> or other similar methods.
This method does not conduct a transaction, so you need to start and commit one yourself.</p>
<p>It is better to call <a href="Model.html#addNodeData">Model.addNodeData</a>, <a href="Model.html#removeNodeData">Model.removeNodeData</a>,
<a href="GraphLinksModel.html#addLinkData">GraphLinksModel.addLinkData</a>, <a href="GraphLinksModel.html#removeLinkData">GraphLinksModel.removeLinkData</a>,
<a href="Model.html#setDataProperty">Model.setDataProperty</a>, and other model methods to add/remove/modify data,
because those methods will both record changes for undo/redo and will update all bindings
that make depend on that property.
Simply modifying the data and calling an &quot;update...&quot; method will not be able to record
the previous value(s) of properties in the model data to support undo.</p>
<p>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 <a href="Part.html">Part</a>s that need it
by calling <a href="Part.html#updateRelationshipsFromData">Part.updateRelationshipsFromData</a>.</p>
<p>To update <a href="GraphObject.html">GraphObject</a> properties that are data bound, call <a href="Diagram.html#updateAllTargetBindings">updateAllTargetBindings</a>.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#updateAllTargetBindings">updateAllTargetBindings</a></p>
</dd>
<dt>since</dt>
<dd><p>1.5</p>
</dd>
</dl>
</div>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="updateAllTargetBindings" class="tsd-anchor"></a>
<h3>
update<wbr>All<wbr>Target<wbr>Bindings
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">update<wbr>All<wbr>Target<wbr>Bindings<span class="tsd-signature-symbol">(</span>srcprop<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Update all of the data-bound properties of <a href="Node.html">Node</a>s and <a href="Link.html">Link</a>s in this diagram,
without having to call <a href="Model.html#setDataProperty">Model.setDataProperty</a>.
This copies/converts model data properties to set properties on <a href="Part.html">Part</a>s.
This method does not conduct a transaction, so you need to start and commit one yourself.</p>
<p>It is better to call <a href="Model.html#setDataProperty">Model.setDataProperty</a> to modify data properties,
because that will both record changes for undo/redo and will update all bindings
that make depend on that property.
Simply modifying the data and calling an &quot;update...&quot; method will not be able to record
the previous value(s) of properties in the model data to support undo.</p>
<p>If you know which model data objects have been modified,
it will be more efficient to update only the <a href="Part.html">Part</a>s that need it
by calling <a href="Panel.html#updateTargetBindings">Panel.updateTargetBindings</a>.</p>
<p>To update relationships between nodes, call <a href="Diagram.html#updateAllRelationshipsFromData">updateAllRelationshipsFromData</a>.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#updateAllRelationshipsFromData">updateAllRelationshipsFromData</a></p>
</dd>
</dl>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> srcprop: <span class="tsd-signature-type">string</span></h5>
<div class="tsd-comment tsd-typography">
<p>An optional source data property name:
when provided, only evaluates those <a href="Binding.html">Binding</a>s that use that particular property;
when not provided or when it is the empty string, all bindings are evaluated.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="zoomToFit" class="tsd-anchor"></a>
<h3>
zoom<wbr>ToFit
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">zoom<wbr>ToFit<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Scales the Diagram to uniformly fit into the viewport. To have this done automatically,
set the Diagram&#39;s <a href="Diagram.html#autoScale">autoScale</a> to <a href="Diagram.html#static-Uniform">Diagram.Uniform</a>.</p>
</div>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="zoomToRect" class="tsd-anchor"></a>
<h3>
zoom<wbr>ToRect
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">zoom<wbr>ToRect<span class="tsd-signature-symbol">(</span>r<span class="tsd-signature-symbol">: </span><a href="Rect.html" class="tsd-signature-type">Rect</a>, scaling<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">EnumValue</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Modifies the <a href="Diagram.html#scale">scale</a> and <a href="Diagram.html#position">position</a> of the Diagram
so that the viewport displays a given document-coordinates rectangle.</p>
<dl class="tsd-comment-tags">
<dt>since</dt>
<dd><p>1.1</p>
</dd>
</dl>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>r: <a href="Rect.html" class="tsd-signature-type">Rect</a></h5>
<div class="tsd-comment tsd-typography">
<p>rectangular bounds in document coordinates.</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> scaling: <span class="tsd-signature-type">EnumValue</span></h5>
<div class="tsd-comment tsd-typography">
<p>an optional value of either <a href="Diagram.html#static-Uniform">Diagram.Uniform</a> (the default) or <a href="Diagram.html#static-UniformToFill">Diagram.UniformToFill</a>.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
</section>
<section class="tsd-panel-group tsd-member-group ">
<h2>Constants</h2>
<section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a name="static-CycleAll" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagStatic">Static</span>
Cycle<wbr>All
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span> </h3>
<div class="tsd-comment tsd-typography">
<p>This value for <a href="Diagram.html#validCycle">Diagram.validCycle</a> states that
there are no restrictions on making cycles of links.</p>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a name="static-CycleDestinationTree" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagStatic">Static</span>
Cycle<wbr>Destination<wbr>Tree
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span> </h3>
<div class="tsd-comment tsd-typography">
<p>This value for <a href="Diagram.html#validCycle">Diagram.validCycle</a> states that
any number of destination links may go out of a node, but at most one
source link may come into a node, and there are no directed cycles.</p>
<p>This value assumes that the graph does not already have any cycles in it,
or else the behavior may be indeterminate.</p>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a name="static-CycleNotDirected" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagStatic">Static</span>
Cycle<wbr>Not<wbr>Directed
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span> </h3>
<div class="tsd-comment tsd-typography">
<p>This value for <a href="Diagram.html#validCycle">Diagram.validCycle</a> states that
a valid link from a node will not produce a directed cycle in the graph.</p>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a name="static-CycleNotUndirected" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagStatic">Static</span>
Cycle<wbr>Not<wbr>Undirected
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span> </h3>
<div class="tsd-comment tsd-typography">
<p>This value for <a href="Diagram.html#validCycle">Diagram.validCycle</a> states that
a valid link from a node will not produce an undirected cycle in the graph.</p>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a name="static-CycleSourceTree" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagStatic">Static</span>
Cycle<wbr>Source<wbr>Tree
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span> </h3>
<div class="tsd-comment tsd-typography">
<p>This value for <a href="Diagram.html#validCycle">Diagram.validCycle</a> states that
any number of source links may come into a node, but at most one
destination link may go out of a node, and there are no directed cycles.</p>
<p>This value assumes that the graph does not already have any cycles in it,
or else the behavior may be indeterminate.</p>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a name="static-DocumentScroll" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagStatic">Static</span>
Document<wbr>Scroll
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span> </h3>
<div class="tsd-comment tsd-typography">
<p>This value for <a href="Diagram.html#scrollMode">Diagram.scrollMode</a> states that
the viewport constrains scrolling to the Diagram document bounds.</p>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a name="static-InfiniteScroll" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagStatic">Static</span>
Infinite<wbr>Scroll
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span> </h3>
<div class="tsd-comment tsd-typography">
<p>This value for <a href="Diagram.html#scrollMode">Diagram.scrollMode</a> states that
the viewport does not constrain scrolling to the Diagram document bounds.</p>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a name="static-None" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagStatic">Static</span>
None
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span> </h3>
<div class="tsd-comment tsd-typography">
<p>The default autoScale type, used as the value of <a href="Diagram.html#autoScale">Diagram.autoScale</a>:
The Diagram does not attempt to scale so that its documentBounds would fit the view.</p>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a name="static-Uniform" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagStatic">Static</span>
Uniform
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span> </h3>
<div class="tsd-comment tsd-typography">
<p>Diagrams with this autoScale type, used as the value of <a href="Diagram.html#autoScale">Diagram.autoScale</a>,
are scaled uniformly until the whole documentBounds fits in the view.</p>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a name="static-UniformToFill" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagStatic">Static</span>
Uniform<wbr>ToFill
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span> </h3>
<div class="tsd-comment tsd-typography">
<p>Diagrams with this autoScale type, used as the value of <a href="Diagram.html#autoScale">Diagram.autoScale</a>,
are scaled until the documentBounds fits in the view in one direction while
a scrollbar is still needed in the other direction.</p>
</div>
</section>
</section>
</div>
<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
<nav class="tsd-navigation primary">
<ul>
<li class="globals ">
<a href="../index.html"><em>GoJS <wbr>Class <wbr>Index</em></a>
</li>
</ul>
</nav>
<nav class="tsd-navigation secondary menu-sticky">
<ul class="before-current">
</ul>
<ul class="current">
<li class="current tsd-kind-class">
<a href="Diagram.html" class="tsd-kind-icon">Diagram</a>
<ul>
<li class=" tsd-kind-constructor tsd-parent-kind-class">
<a href="Diagram.html#constructor" class="tsd-kind-icon">constructor</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#allowClipboard" class="tsd-kind-icon">allow<wbr>Clipboard</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#allowCopy" class="tsd-kind-icon">allow<wbr>Copy</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#allowDelete" class="tsd-kind-icon">allow<wbr>Delete</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#allowDragOut" class="tsd-kind-icon">allow<wbr>Drag<wbr>Out</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#allowDrop" class="tsd-kind-icon">allow<wbr>Drop</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#allowGroup" class="tsd-kind-icon">allow<wbr>Group</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#allowHorizontalScroll" class="tsd-kind-icon">allow<wbr>Horizontal<wbr>Scroll</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#allowInsert" class="tsd-kind-icon">allow<wbr>Insert</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#allowLink" class="tsd-kind-icon">allow<wbr>Link</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#allowMove" class="tsd-kind-icon">allow<wbr>Move</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#allowRelink" class="tsd-kind-icon">allow<wbr>Relink</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#allowReshape" class="tsd-kind-icon">allow<wbr>Reshape</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#allowResize" class="tsd-kind-icon">allow<wbr>Resize</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#allowRotate" class="tsd-kind-icon">allow<wbr>Rotate</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#allowSelect" class="tsd-kind-icon">allow<wbr>Select</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#allowTextEdit" class="tsd-kind-icon">allow<wbr>Text<wbr>Edit</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#allowUndo" class="tsd-kind-icon">allow<wbr>Undo</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#allowUngroup" class="tsd-kind-icon">allow<wbr>Ungroup</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#allowVerticalScroll" class="tsd-kind-icon">allow<wbr>Vertical<wbr>Scroll</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#allowZoom" class="tsd-kind-icon">allow<wbr>Zoom</a>
</li>
<li class=" tsd-kind-get-signature tsd-parent-kind-class">
<a href="Diagram.html#animationManager" class="tsd-kind-icon">animation<wbr>Manager</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#autoScale" class="tsd-kind-icon">auto<wbr>Scale</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#autoScrollRegion" class="tsd-kind-icon">auto<wbr>Scroll<wbr>Region</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#click" class="tsd-kind-icon">click</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#commandHandler" class="tsd-kind-icon">command<wbr>Handler</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#contentAlignment" class="tsd-kind-icon">content<wbr>Alignment</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#contextClick" class="tsd-kind-icon">context<wbr>Click</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#contextMenu" class="tsd-kind-icon">context<wbr>Menu</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#currentCursor" class="tsd-kind-icon">current<wbr>Cursor</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#currentTool" class="tsd-kind-icon">current<wbr>Tool</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#defaultCursor" class="tsd-kind-icon">default<wbr>Cursor</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#defaultScale" class="tsd-kind-icon">default<wbr>Scale</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#defaultTool" class="tsd-kind-icon">default<wbr>Tool</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#div" class="tsd-kind-icon">div</a>
</li>
<li class=" tsd-kind-get-signature tsd-parent-kind-class">
<a href="Diagram.html#documentBounds" class="tsd-kind-icon">document<wbr>Bounds</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#doubleClick" class="tsd-kind-icon">double<wbr>Click</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#firstInput" class="tsd-kind-icon">first<wbr>Input</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#fixedBounds" class="tsd-kind-icon">fixed<wbr>Bounds</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#grid" class="tsd-kind-icon">grid</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#groupSelectionAdornmentTemplate" class="tsd-kind-icon">group<wbr>Selection<wbr>Adornment<wbr>Template</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#groupTemplate" class="tsd-kind-icon">group<wbr>Template</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#groupTemplateMap" class="tsd-kind-icon">group<wbr>Template<wbr>Map</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#handlesDragDropForTopLevelParts" class="tsd-kind-icon">handles<wbr>Drag<wbr>Drop<wbr>For<wbr>Top<wbr>Level<wbr>Parts</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#hasHorizontalScrollbar" class="tsd-kind-icon">has<wbr>Horizontal<wbr>Scrollbar</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#hasVerticalScrollbar" class="tsd-kind-icon">has<wbr>Vertical<wbr>Scrollbar</a>
</li>
<li class=" tsd-kind-get-signature tsd-parent-kind-class">
<a href="Diagram.html#highlighteds" class="tsd-kind-icon">highlighteds</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#initialAutoScale" class="tsd-kind-icon">initial<wbr>Auto<wbr>Scale</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#initialContentAlignment" class="tsd-kind-icon">initial<wbr>Content<wbr>Alignment</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#initialDocumentSpot" class="tsd-kind-icon">initial<wbr>Document<wbr>Spot</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#initialPosition" class="tsd-kind-icon">initial<wbr>Position</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#initialScale" class="tsd-kind-icon">initial<wbr>Scale</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#initialViewportSpot" class="tsd-kind-icon">initial<wbr>Viewport<wbr>Spot</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#isEnabled" class="tsd-kind-icon">is<wbr>Enabled</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#isModelReadOnly" class="tsd-kind-icon">is<wbr>Model<wbr>Read<wbr>Only</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#isModified" class="tsd-kind-icon">is<wbr>Modified</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#isMouseCaptured" class="tsd-kind-icon">is<wbr>Mouse<wbr>Captured</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#isReadOnly" class="tsd-kind-icon">is<wbr>Read<wbr>Only</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#isTreePathToChildren" class="tsd-kind-icon">is<wbr>Tree<wbr>Path<wbr>ToChildren</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#lastInput" class="tsd-kind-icon">last<wbr>Input</a>
</li>
<li class=" tsd-kind-get-signature tsd-parent-kind-class">
<a href="Diagram.html#layers" class="tsd-kind-icon">layers</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#layout" class="tsd-kind-icon">layout</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class tsd-is-static">
<a href="Diagram.html#static-licenseKey" class="tsd-kind-icon">license<wbr>Key</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#linkSelectionAdornmentTemplate" class="tsd-kind-icon">link<wbr>Selection<wbr>Adornment<wbr>Template</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#linkTemplate" class="tsd-kind-icon">link<wbr>Template</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#linkTemplateMap" class="tsd-kind-icon">link<wbr>Template<wbr>Map</a>
</li>
<li class=" tsd-kind-get-signature tsd-parent-kind-class">
<a href="Diagram.html#links" class="tsd-kind-icon">links</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#maxScale" class="tsd-kind-icon">max<wbr>Scale</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#maxSelectionCount" class="tsd-kind-icon">max<wbr>Selection<wbr>Count</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#minScale" class="tsd-kind-icon">min<wbr>Scale</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#model" class="tsd-kind-icon">model</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#mouseDragOver" class="tsd-kind-icon">mouse<wbr>Drag<wbr>Over</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#mouseDrop" class="tsd-kind-icon">mouse<wbr>Drop</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#mouseEnter" class="tsd-kind-icon">mouse<wbr>Enter</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#mouseHold" class="tsd-kind-icon">mouse<wbr>Hold</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#mouseHover" class="tsd-kind-icon">mouse<wbr>Hover</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#mouseLeave" class="tsd-kind-icon">mouse<wbr>Leave</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#mouseOver" class="tsd-kind-icon">mouse<wbr>Over</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#nodeSelectionAdornmentTemplate" class="tsd-kind-icon">node<wbr>Selection<wbr>Adornment<wbr>Template</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#nodeTemplate" class="tsd-kind-icon">node<wbr>Template</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#nodeTemplateMap" class="tsd-kind-icon">node<wbr>Template<wbr>Map</a>
</li>
<li class=" tsd-kind-get-signature tsd-parent-kind-class">
<a href="Diagram.html#nodes" class="tsd-kind-icon">nodes</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#padding" class="tsd-kind-icon">padding</a>
</li>
<li class=" tsd-kind-get-signature tsd-parent-kind-class">
<a href="Diagram.html#parts" class="tsd-kind-icon">parts</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#position" class="tsd-kind-icon">position</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#positionComputation" class="tsd-kind-icon">position<wbr>Computation</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#scale" class="tsd-kind-icon">scale</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#scaleComputation" class="tsd-kind-icon">scale<wbr>Computation</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#scrollHorizontalLineChange" class="tsd-kind-icon">scroll<wbr>Horizontal<wbr>Line<wbr>Change</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#scrollMargin" class="tsd-kind-icon">scroll<wbr>Margin</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#scrollMode" class="tsd-kind-icon">scroll<wbr>Mode</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#scrollVerticalLineChange" class="tsd-kind-icon">scroll<wbr>Vertical<wbr>Line<wbr>Change</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#scrollsPageOnFocus" class="tsd-kind-icon">scrolls<wbr>Page<wbr>OnFocus</a>
</li>
<li class=" tsd-kind-get-signature tsd-parent-kind-class">
<a href="Diagram.html#selection" class="tsd-kind-icon">selection</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#skipsUndoManager" class="tsd-kind-icon">skips<wbr>Undo<wbr>Manager</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#toolManager" class="tsd-kind-icon">tool<wbr>Manager</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#toolTip" class="tsd-kind-icon">tool<wbr>Tip</a>
</li>
<li class=" tsd-kind-get-signature tsd-parent-kind-class">
<a href="Diagram.html#undoManager" class="tsd-kind-icon">undo<wbr>Manager</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#validCycle" class="tsd-kind-icon">valid<wbr>Cycle</a>
</li>
<li class=" tsd-kind-get-signature tsd-parent-kind-class tsd-is-static">
<a href="Diagram.html#static-version" class="tsd-kind-icon">version</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#viewSize" class="tsd-kind-icon">view<wbr>Size</a>
</li>
<li class=" tsd-kind-get-signature tsd-parent-kind-class">
<a href="Diagram.html#viewportBounds" class="tsd-kind-icon">viewport<wbr>Bounds</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Diagram.html#zoomPoint" class="tsd-kind-icon">zoom<wbr>Point</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Diagram.html#add" class="tsd-kind-icon">add</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Diagram.html#addChangedListener" class="tsd-kind-icon">add<wbr>Changed<wbr>Listener</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Diagram.html#addDiagramListener" class="tsd-kind-icon">add<wbr>Diagram<wbr>Listener</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Diagram.html#addLayer" class="tsd-kind-icon">add<wbr>Layer</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Diagram.html#addLayerAfter" class="tsd-kind-icon">add<wbr>Layer<wbr>After</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Diagram.html#addLayerBefore" class="tsd-kind-icon">add<wbr>Layer<wbr>Before</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Diagram.html#addModelChangedListener" class="tsd-kind-icon">add<wbr>Model<wbr>Changed<wbr>Listener</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Diagram.html#alignDocument" class="tsd-kind-icon">align<wbr>Document</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Diagram.html#centerRect" class="tsd-kind-icon">center<wbr>Rect</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Diagram.html#clear" class="tsd-kind-icon">clear</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Diagram.html#clearHighlighteds" class="tsd-kind-icon">clear<wbr>Highlighteds</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Diagram.html#clearSelection" class="tsd-kind-icon">clear<wbr>Selection</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Diagram.html#commit" class="tsd-kind-icon">commit</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Diagram.html#commitTransaction" class="tsd-kind-icon">commit<wbr>Transaction</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class tsd-is-protected">
<a href="Diagram.html#computeBounds" class="tsd-kind-icon">compute<wbr>Bounds</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Diagram.html#computeMove" class="tsd-kind-icon">compute<wbr>Move</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Diagram.html#computePartsBounds" class="tsd-kind-icon">compute<wbr>Parts<wbr>Bounds</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Diagram.html#copyParts" class="tsd-kind-icon">copy<wbr>Parts</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Diagram.html#delayInitialization" class="tsd-kind-icon">delay<wbr>Initialization</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Diagram.html#findLayer" class="tsd-kind-icon">find<wbr>Layer</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Diagram.html#findLinkForData" class="tsd-kind-icon">find<wbr>Link<wbr>For<wbr>Data</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Diagram.html#findLinksByExample" class="tsd-kind-icon">find<wbr>Links<wbr>ByExample</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Diagram.html#findNodeForData" class="tsd-kind-icon">find<wbr>Node<wbr>For<wbr>Data</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Diagram.html#findNodeForKey" class="tsd-kind-icon">find<wbr>Node<wbr>For<wbr>Key</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Diagram.html#findNodesByExample" class="tsd-kind-icon">find<wbr>Nodes<wbr>ByExample</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter">
<a href="Diagram.html#findObjectAt" class="tsd-kind-icon">find<wbr>Object<wbr>At</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter">
<a href="Diagram.html#findObjectsAt" class="tsd-kind-icon">find<wbr>Objects<wbr>At</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter">
<a href="Diagram.html#findObjectsIn" class="tsd-kind-icon">find<wbr>Objects<wbr>In</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter">
<a href="Diagram.html#findObjectsNear" class="tsd-kind-icon">find<wbr>Objects<wbr>Near</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Diagram.html#findPartAt" class="tsd-kind-icon">find<wbr>Part<wbr>At</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Diagram.html#findPartForData" class="tsd-kind-icon">find<wbr>Part<wbr>For<wbr>Data</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Diagram.html#findPartForKey" class="tsd-kind-icon">find<wbr>Part<wbr>For<wbr>Key</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter">
<a href="Diagram.html#findPartsAt" class="tsd-kind-icon">find<wbr>Parts<wbr>At</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter">
<a href="Diagram.html#findPartsIn" class="tsd-kind-icon">find<wbr>Parts<wbr>In</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter">
<a href="Diagram.html#findPartsNear" class="tsd-kind-icon">find<wbr>Parts<wbr>Near</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Diagram.html#findTopLevelGroups" class="tsd-kind-icon">find<wbr>Top<wbr>Level<wbr>Groups</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Diagram.html#findTreeRoots" class="tsd-kind-icon">find<wbr>Tree<wbr>Roots</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Diagram.html#focus" class="tsd-kind-icon">focus</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class tsd-is-static">
<a href="Diagram.html#static-fromDiv" class="tsd-kind-icon">from<wbr>Div</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Diagram.html#highlight" class="tsd-kind-icon">highlight</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Diagram.html#highlightCollection" class="tsd-kind-icon">highlight<wbr>Collection</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class tsd-is-static">
<a href="Diagram.html#static-inherit" class="tsd-kind-icon">inherit</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Diagram.html#layoutDiagram" class="tsd-kind-icon">layout<wbr>Diagram</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Diagram.html#makeImage" class="tsd-kind-icon">make<wbr>Image</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Diagram.html#makeImageData" class="tsd-kind-icon">make<wbr>Image<wbr>Data</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Diagram.html#makeSvg" class="tsd-kind-icon">make<wbr>Svg</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Diagram.html#moveParts" class="tsd-kind-icon">move<wbr>Parts</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Diagram.html#rebuildParts" class="tsd-kind-icon">rebuild<wbr>Parts</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Diagram.html#remove" class="tsd-kind-icon">remove</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Diagram.html#removeChangedListener" class="tsd-kind-icon">remove<wbr>Changed<wbr>Listener</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Diagram.html#removeDiagramListener" class="tsd-kind-icon">remove<wbr>Diagram<wbr>Listener</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Diagram.html#removeLayer" class="tsd-kind-icon">remove<wbr>Layer</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Diagram.html#removeModelChangedListener" class="tsd-kind-icon">remove<wbr>Model<wbr>Changed<wbr>Listener</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Diagram.html#removeParts" class="tsd-kind-icon">remove<wbr>Parts</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Diagram.html#requestUpdate" class="tsd-kind-icon">request<wbr>Update</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Diagram.html#rollbackTransaction" class="tsd-kind-icon">rollback<wbr>Transaction</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Diagram.html#scroll" class="tsd-kind-icon">scroll</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Diagram.html#scrollToRect" class="tsd-kind-icon">scroll<wbr>ToRect</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Diagram.html#select" class="tsd-kind-icon">select</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Diagram.html#selectCollection" class="tsd-kind-icon">select<wbr>Collection</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Diagram.html#setProperties" class="tsd-kind-icon">set<wbr>Properties</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Diagram.html#startTransaction" class="tsd-kind-icon">start<wbr>Transaction</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Diagram.html#transformDocToView" class="tsd-kind-icon">transform<wbr>Doc<wbr>ToView</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Diagram.html#transformViewToDoc" class="tsd-kind-icon">transform<wbr>View<wbr>ToDoc</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Diagram.html#updateAllRelationshipsFromData" class="tsd-kind-icon">update<wbr>All<wbr>Relationships<wbr>From<wbr>Data</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Diagram.html#updateAllTargetBindings" class="tsd-kind-icon">update<wbr>All<wbr>Target<wbr>Bindings</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Diagram.html#zoomToFit" class="tsd-kind-icon">zoom<wbr>ToFit</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Diagram.html#zoomToRect" class="tsd-kind-icon">zoom<wbr>ToRect</a>
</li>
<li class=" tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a href="Diagram.html#static-CycleAll" class="tsd-kind-icon">Cycle<wbr>All</a>
</li>
<li class=" tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a href="Diagram.html#static-CycleDestinationTree" class="tsd-kind-icon">Cycle<wbr>Destination<wbr>Tree</a>
</li>
<li class=" tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a href="Diagram.html#static-CycleNotDirected" class="tsd-kind-icon">Cycle<wbr>Not<wbr>Directed</a>
</li>
<li class=" tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a href="Diagram.html#static-CycleNotUndirected" class="tsd-kind-icon">Cycle<wbr>Not<wbr>Undirected</a>
</li>
<li class=" tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a href="Diagram.html#static-CycleSourceTree" class="tsd-kind-icon">Cycle<wbr>Source<wbr>Tree</a>
</li>
<li class=" tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a href="Diagram.html#static-DocumentScroll" class="tsd-kind-icon">Document<wbr>Scroll</a>
</li>
<li class=" tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a href="Diagram.html#static-InfiniteScroll" class="tsd-kind-icon">Infinite<wbr>Scroll</a>
</li>
<li class=" tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a href="Diagram.html#static-None" class="tsd-kind-icon">None</a>
</li>
<li class=" tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a href="Diagram.html#static-Uniform" class="tsd-kind-icon">Uniform</a>
</li>
<li class=" tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a href="Diagram.html#static-UniformToFill" class="tsd-kind-icon">Uniform<wbr>ToFill</a>
</li>
</ul>
</li>
</ul>
<ul class="after-current">
</ul>
</nav>
</div>
</div>
</div>
<div class="container-fluid bottom-copyright plr15">
Copyright &copy; 1998-2019 by Northwoods Software Corporation.
</div>
<div class="overlay"></div>
<script src="../assets/js/main.js"></script>
<script src="../../assets/js/api.js"></script>
<script src="../../assets/js/bootstrap.min.js"></script>
<script>if (location.protocol == 'file:') document.write('<script src="../assets/js/search.js"><' + '/script>');</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-1506307-5', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>