gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
570 lines • 287 kB
HTML
<!doctype html>
<html class="default no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>GraphObject | 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>® Diagramming Components<br/>version <br/>version 2.1.18 for TypeScript/HTML<br/>by <a href="https://www.nwoods.com/">Northwoods Software®</a>-->
<b>GoJS</b>® Diagramming Components<br/>version 2.1.18<br/>by <a href="https://www.nwoods.com/">Northwoods Software®</a>
</div>
<div>
<h1>Class GraphObject</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">GraphObject</span>
<ul class="tsd-hierarchy">
<li>
<a href="Panel.html" class="tsd-signature-type">Panel</a>
</li>
<li>
<a href="Shape.html" class="tsd-signature-type">Shape</a>
</li>
<li>
<a href="TextBlock.html" class="tsd-signature-type">TextBlock</a>
</li>
<li>
<a href="Picture.html" class="tsd-signature-type">Picture</a>
</li>
<li>
<a href="Placeholder.html" class="tsd-signature-type">Placeholder</a>
</li>
</ul>
</li>
</ul>
</section>
<section class="tsd-panel tsd-comment">
<div class="tsd-comment tsd-typography">
<p>This is the abstract base class for all graphical objects.
Classes inheriting from GraphObject include:
<a href="Shape.html">Shape</a>, <a href="TextBlock.html">TextBlock</a>, <a href="Picture.html">Picture</a>, and <a href="Panel.html">Panel</a>.
From the Panel class the <a href="Part.html">Part</a> class is derived, from which the
<a href="Node.html">Node</a> and <a href="Link.html">Link</a> classes derive.</p>
<p>It is very common to make use of the static function <a href="GraphObject.html#static-make">GraphObject.make</a> in order to build up
a visual tree of GraphObjects. You can see many examples of this throughout the
Introduction, starting at <a href="../../intro/buildingObjects.html">Building Objects</a>,
and the Samples, starting with <a href="../../samples/minimal.html">Minimal Sample</a>.</p>
<p>Since GraphObject is an abstract class, programmers do not create GraphObjects themselves,
but this class defines many properties used by all kinds of GraphObjects.</p>
<p>The only visual properties on GraphObject are <a href="GraphObject.html#background">background</a> and <a href="GraphObject.html#areaBackground">areaBackground</a>.
However one can control whether the GraphObject is drawn at all by setting <a href="GraphObject.html#visible">visible</a>,
or by setting <a href="GraphObject.html#opacity">opacity</a> to zero if you still want the GraphObject to occupy space.
Also, if you want to control whether any mouse or touch events "see" the GraphObject,
you can set <a href="GraphObject.html#pickable">pickable</a> to false.</p>
<p>For more information about specifying how things get drawn, see the properties on the
<a href="Shape.html">Shape</a>, <a href="TextBlock.html">TextBlock</a>, and <a href="Picture.html">Picture</a> classes.</p>
<h3>GraphObject Sizing</h3>
<p>GraphObject defines most of the properties that cause objects to size themselves differently.
The most prominent ones include:</p>
<ul>
<li>The <a href="GraphObject.html#desiredSize">desiredSize</a>, <a href="GraphObject.html#minSize">minSize</a>, and <a href="GraphObject.html#maxSize">maxSize</a> properties are used to
explicitly set or limit the size of visual elements. <a href="GraphObject.html#width">width</a> and <a href="GraphObject.html#height">height</a> are
convenience properties that set the <a href="GraphObject.html#desiredSize">desiredSize</a> width and height, respectively.</li>
<li>The <a href="GraphObject.html#angle">angle</a> and <a href="GraphObject.html#scale">scale</a> properties are used to transform visual elements.</li>
<li>The <a href="GraphObject.html#stretch">stretch</a> property determines how a GraphObject will fill its visual space,
contextually granted to it by its containing <a href="Panel.html">Panel</a>. Top-level (<a href="Part.html">Part</a>)
GraphObjects are not affected by this property because they are always granted infinite space.</li>
</ul>
<p>All GraphObjects in a Diagram are measured and then arranged by their containing <a href="Panel.html">Panel</a>s in a tree-like fashion.
After measuring and arranging, a GraphObject will have valid values for the read-only
properties <a href="GraphObject.html#naturalBounds">naturalBounds</a>, <a href="GraphObject.html#measuredBounds">measuredBounds</a>, and <a href="GraphObject.html#actualBounds">actualBounds</a>.</p>
<ul>
<li>The <a href="GraphObject.html#naturalBounds">naturalBounds</a> of a GraphObject describe its local size,
without any transformations (<a href="GraphObject.html#scale">scale</a>, <a href="GraphObject.html#angle">angle</a>) affecting it.</li>
<li>The <a href="GraphObject.html#measuredBounds">measuredBounds</a> of a GraphObject describe its size within its containing Panel.</li>
<li>The <a href="GraphObject.html#actualBounds">actualBounds</a> of a GraphObject describe its position and given size inside of its panel.
This size may be smaller than <a href="GraphObject.html#measuredBounds">measuredBounds</a>, for instance if a GraphObject with a large <a href="GraphObject.html#desiredSize">desiredSize</a>
is placed in a <a href="Panel.html">Panel</a> of a smaller <a href="GraphObject.html#desiredSize">desiredSize</a>. Smaller <a href="GraphObject.html#actualBounds">actualBounds</a> than <a href="GraphObject.html#measuredBounds">measuredBounds</a>
typically means an object will be cropped.</li>
</ul>
<p class="boxread">
See <a href="../../intro/sizing.html">the Introduction page on sizing</a>
for usage information and examples.
<h3>GraphObject Size and Position within Panel</h3>
Several GraphObject properties guide the containing <a href="Panel.html">Panel</a> for how to size and position the object within the panel.
- The <a href="GraphObject.html#alignment">alignment</a> specifies where the object should be relative to some area of the panel.
For example, an alignment value of <a href="Spot.html#static-BottomRight">Spot.BottomRight</a> means that the GraphObject should be at the bottom-right corner of the panel.
- The <a href="GraphObject.html#alignmentFocus">alignmentFocus</a> specifies precisely which point of the GraphObject should be aligned at the <a href="GraphObject.html#alignment">alignment</a> spot.
- The <a href="GraphObject.html#column">column</a> and <a href="GraphObject.html#row">row</a> properties are only used by <a href="Panel.html#static-Table">Panel.Table</a> panels, to indicate where the GraphObject should be.
- The <a href="GraphObject.html#columnSpan">columnSpan</a> and <a href="GraphObject.html#rowSpan">rowSpan</a> properties tell the <a href="Panel.html#static-Table">Panel.Table</a> panel how large the GraphObject should be.
- The <a href="GraphObject.html#isPanelMain">isPanelMain</a> property indicates to some kinds of <a href="Panel.html">Panel</a>s that the GraphObject is the "primary" object
that other panel children should be measured with or positioned in.
- The <a href="GraphObject.html#margin">margin</a> property tells the containing <a href="Panel.html">Panel</a> how much extra space to put around this GraphObject.
- The <a href="GraphObject.html#position">position</a> property is used to determine the relative position of GraphObjects when they are elements of a <a href="Panel.html#static-Position">Panel.Position</a> panel.
<p class="boxread">
See <a href="../../intro/panels.html">the Introduction page on Panels</a>
and <a href="../../intro/tablePanels.html">Table Panels</a> for an overview of the capabilities.
<h3>Top-level GraphObjects are Parts</h3>
<p>A <a href="Part.html">Part</a> is a derived class of GraphObject representing a top-level object.
All top-level GraphObjects must be Parts, and Node, Link, Group, and Adornment derive from Part.
The position of a Part determines the point of the Part's top-left corner in document coordinates.
See also <a href="Part.html#location">Part.location</a>, which supports an way to specify the position based on a different
spot of a different element within the Part.</p>
<p>There are several read-only properties that help navigate up the visual tree.</p>
<ul>
<li><a href="GraphObject.html#panel">panel</a> returns the <a href="Panel.html">Panel</a> that directly contains this GraphObject</li>
<li><a href="GraphObject.html#part">part</a> returns the <a href="Part.html">Part</a> that this GraphObject is in, perhaps via intervening Panels;
this is frequently used in order to get to the model data, <a href="Panel.html#data">Panel.data</a></li>
<li><a href="GraphObject.html#layer">layer</a> returns the <a href="Layer.html">Layer</a> that this GraphObject's Part is in</li>
<li><a href="GraphObject.html#diagram">diagram</a> returns the <a href="Diagram.html">Diagram</a> that this GraphObject's Part's Layer is in</li>
</ul>
<p class="boxrun">
See <a href="../../samples/visualTree.html">the Visual Tree sample</a>
for a diagram displaying the visual tree of a simple diagram.
<h3>User Interaction</h3>
<p>GraphObjects have several properties enabling dynamic customizable interaction.
There are several definable functions that execute on input events: <a href="GraphObject.html#mouseDragEnter">mouseDragEnter</a>,
<a href="GraphObject.html#mouseDragLeave">mouseDragLeave</a>, <a href="GraphObject.html#mouseDrop">mouseDrop</a>, <a href="GraphObject.html#mouseEnter">mouseEnter</a>, <a href="GraphObject.html#mouseHold">mouseHold</a>,
<a href="GraphObject.html#mouseHover">mouseHover</a>, <a href="GraphObject.html#mouseLeave">mouseLeave</a>, and <a href="GraphObject.html#mouseOver">mouseOver</a>.
For example, you could define mouse enter-and-leave event handlers to modify the appearance of a link
as the mouse passes over it:</p>
<pre><code class="hljs js">myDiagram.linkTemplate =
$(go.Link,
$(go.Shape,
{ <span class="hljs-attr">strokeWidth</span>: <span class="hljs-number">2</span>, <span class="hljs-attr">stroke</span>: <span class="hljs-string">"gray"</span> }, <span class="hljs-comment">// default color is "gray"</span>
{ <span class="hljs-comment">// here E is the InputEvent and OBJ is this Shape</span>
mouseEnter: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e, obj</span>) </span>{ obj.strokeWidth = <span class="hljs-number">4</span>; obj.stroke = <span class="hljs-string">"dodgerblue"</span>; },
<span class="hljs-attr">mouseLeave</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e, obj</span>) </span>{ obj.strokeWidth = <span class="hljs-number">2</span>; obj.stroke = <span class="hljs-string">"gray"</span>; }
}));</code></pre>
<p>There are <a href="GraphObject.html#click">click</a>, <a href="GraphObject.html#doubleClick">doubleClick</a>, and <a href="GraphObject.html#contextClick">contextClick</a> functions
that execute when a user appropriately clicks the GraphObject.
These click functions are called with the <a href="InputEvent.html">InputEvent</a> as the first argument
and this GraphObject as the second argument.
For example, you could define a click event handler on a Node that goes to another page:</p>
<pre><code class="hljs js">myDiagram.nodeTemplate =
$(go.Node, <span class="hljs-string">"Auto"</span>,
$(go.Shape, <span class="hljs-string">"RoundedRectangle"</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">name</span>: <span class="hljs-string">"TB"</span>, <span class="hljs-attr">margin</span>: <span class="hljs-number">3</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">// second arg will be this GraphObject, which in this case is the Node itself:</span>
click: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e, node</span>) </span>{
<span class="hljs-built_in">window</span>.open(<span class="hljs-string">"https://en.wikipedia.org/Wiki/"</span> + node.data.key);
}
});</code></pre>
<p>Note: you may prefer defining <a href="DiagramEvent.html">DiagramEvent</a> listeners on the <a href="Diagram.html">Diagram</a>
rather than on individual GraphObjects. DiagramEvents also include more general events that
do not necessarily correspond to input events.</p>
<p>The properties <a href="GraphObject.html#actionCancel">actionCancel</a>, <a href="GraphObject.html#actionDown">actionDown</a>, <a href="GraphObject.html#actionMove">actionMove</a>,
and <a href="GraphObject.html#actionUp">actionUp</a> define functions to execute when the GraphObject's <a href="GraphObject.html#isActionable">isActionable</a> property
is set to true (default false). See the <a href="ActionTool.html">ActionTool</a> for more detail.</p>
<p class="boxread">
See <a href="../../intro/events.html">the Introduction page on Events</a> for a more general discussion.
<h3>GraphObjects as Ports</h3>
<p>In GoJS, <a href="Link.html">Link</a>s can only connect to elements within a <a href="Node.html">Node</a>
that are specified as "ports", and by default the only port is the Node itself.
Setting the <a href="GraphObject.html#portId">portId</a> of a GraphObject inside a Node allows that object to act as a port.
Note: the only kind of model that can save which port a link is connected with, i.e. portIds that are not an empty string,
is a <a href="GraphLinksModel.html">GraphLinksModel</a> whose <a href="GraphLinksModel.html#linkFromPortIdProperty">GraphLinksModel.linkFromPortIdProperty</a> and
<a href="GraphLinksModel.html#linkToPortIdProperty">GraphLinksModel.linkToPortIdProperty</a> have been set to name properties on the link data objects.</p>
<p>GraphObjects have several properties that are only relevant when they are acting as ports.
These port-related properties are:</p>
<ul>
<li><a href="GraphObject.html#portId">portId</a>, which must be set to a string that is unique within the <a href="Node.html">Node</a>,
in order for this GraphObject to be treated as a "port", rather than the whole node</li>
<li><a href="GraphObject.html#fromSpot">fromSpot</a> and <a href="GraphObject.html#toSpot">toSpot</a>, where a link should connect with this port</li>
<li><a href="GraphObject.html#fromEndSegmentLength">fromEndSegmentLength</a> and <a href="GraphObject.html#toEndSegmentLength">toEndSegmentLength</a>, the length of the link segment adjacent to this port</li>
<li><a href="GraphObject.html#fromShortLength">fromShortLength</a> and <a href="GraphObject.html#toShortLength">toShortLength</a>, the distance the link should terminate before touching this port</li>
<li><a href="GraphObject.html#fromLinkable">fromLinkable</a> and <a href="GraphObject.html#toLinkable">toLinkable</a>, whether the user may draw links connecting with this port</li>
<li><a href="GraphObject.html#fromLinkableDuplicates">fromLinkableDuplicates</a> and <a href="GraphObject.html#toLinkableDuplicates">toLinkableDuplicates</a>, whether the user may draw multiple links between the same pair of ports</li>
<li><a href="GraphObject.html#fromLinkableSelfNode">fromLinkableSelfNode</a> and <a href="GraphObject.html#toLinkableSelfNode">toLinkableSelfNode</a>, whether the user may draw a link between ports on the same node</li>
<li><a href="GraphObject.html#fromMaxLinks">fromMaxLinks</a> and <a href="GraphObject.html#toMaxLinks">toMaxLinks</a>, to limit the number of links connecting with this port in a particular direction</li>
</ul>
<p class="boxread">
See <a href="../../intro/ports.html">the Introduction page on ports</a>
and <a href="../../intro/links.html">link routing</a>
and <a href="../../intro/connectionPoints.html">link connection points</a>
for port usage information and examples.
<h3>GraphObjects as labels on a Link</h3>
<p>GraphObjects can also be used as "labels" on a <a href="Link.html">Link</a>.
In addition to the <a href="GraphObject.html#alignmentFocus">alignmentFocus</a> property, these properties direct a Link Panel
to position a "label" at a particular point along the route of the link, in a particular manner:</p>
<ul>
<li><a href="GraphObject.html#segmentIndex">segmentIndex</a>, which segment the label should be on</li>
<li><a href="GraphObject.html#segmentFraction">segmentFraction</a>, how far along the segment the label should be</li>
<li><a href="GraphObject.html#segmentOffset">segmentOffset</a>, where the label should be positioned relative to the segment</li>
<li><a href="GraphObject.html#segmentOrientation">segmentOrientation</a>, how the label should be rotated relative to the angle of the segment</li>
</ul>
<p class="boxread">
See <a href="../../intro/linkLabels.html">the Introduction page on link labels</a>
for examples of how to make use of labels on Links.
<h3>Interactive Behavior</h3>
<p>There are several properties that specify fairly high-level interactive behavior:</p>
<ul>
<li><a href="GraphObject.html#cursor">cursor</a>, a CSS string specifying a cursor</li>
<li><a href="GraphObject.html#contextMenu">contextMenu</a>, an <a href="Adornment.html">Adornment</a></li>
<li><a href="GraphObject.html#toolTip">toolTip</a>, an <a href="Adornment.html">Adornment</a></li>
</ul>
<p class="boxread">
For more information, please read <a href="../../intro/contextMenus.html">the Introduction page about Context Menus</a>
and <a href="../../intro/toolTips.html">the page about ToolTips</a>.
<p class="boxrun">
Also see <a href="../../samples/basic.html">the Basic sample</a>
for examples of how to show context menus and tooltips.
</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="GraphObject.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="GraphObject.html#actionCancel" class="tsd-kind-icon">action<wbr>Cancel</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#actionDown" class="tsd-kind-icon">action<wbr>Down</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#actionMove" class="tsd-kind-icon">action<wbr>Move</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#actionUp" class="tsd-kind-icon">action<wbr>Up</a></li>
<li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="GraphObject.html#actualBounds" class="tsd-kind-icon">actual<wbr>Bounds</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#alignment" class="tsd-kind-icon">alignment</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#alignmentFocus" class="tsd-kind-icon">alignment<wbr>Focus</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#angle" class="tsd-kind-icon">angle</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#areaBackground" class="tsd-kind-icon">area<wbr>Background</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#background" class="tsd-kind-icon">background</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#click" class="tsd-kind-icon">click</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#column" class="tsd-kind-icon">column</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#columnSpan" class="tsd-kind-icon">column<wbr>Span</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#contextClick" class="tsd-kind-icon">context<wbr>Click</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#contextMenu" class="tsd-kind-icon">context<wbr>Menu</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#cursor" class="tsd-kind-icon">cursor</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#desiredSize" class="tsd-kind-icon">desired<wbr>Size</a></li>
<li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="GraphObject.html#diagram" class="tsd-kind-icon">diagram</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#doubleClick" class="tsd-kind-icon">double<wbr>Click</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#enabledChanged" class="tsd-kind-icon">enabled<wbr>Changed</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#fromEndSegmentLength" class="tsd-kind-icon">from<wbr>End<wbr>Segment<wbr>Length</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#fromLinkable" class="tsd-kind-icon">from<wbr>Linkable</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#fromLinkableDuplicates" class="tsd-kind-icon">from<wbr>Linkable<wbr>Duplicates</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#fromLinkableSelfNode" class="tsd-kind-icon">from<wbr>Linkable<wbr>Self<wbr>Node</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#fromMaxLinks" class="tsd-kind-icon">from<wbr>Max<wbr>Links</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#fromShortLength" class="tsd-kind-icon">from<wbr>Short<wbr>Length</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#fromSpot" class="tsd-kind-icon">from<wbr>Spot</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#height" class="tsd-kind-icon">height</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#isActionable" class="tsd-kind-icon">is<wbr>Actionable</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#isPanelMain" class="tsd-kind-icon">is<wbr>Panel<wbr>Main</a></li>
<li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="GraphObject.html#layer" class="tsd-kind-icon">layer</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#margin" class="tsd-kind-icon">margin</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#maxSize" class="tsd-kind-icon">max<wbr>Size</a></li>
<li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="GraphObject.html#measuredBounds" class="tsd-kind-icon">measured<wbr>Bounds</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#minSize" class="tsd-kind-icon">min<wbr>Size</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#mouseDragEnter" class="tsd-kind-icon">mouse<wbr>Drag<wbr>Enter</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#mouseDragLeave" class="tsd-kind-icon">mouse<wbr>Drag<wbr>Leave</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#mouseDrop" class="tsd-kind-icon">mouse<wbr>Drop</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#mouseEnter" class="tsd-kind-icon">mouse<wbr>Enter</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#mouseHold" class="tsd-kind-icon">mouse<wbr>Hold</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#mouseHover" class="tsd-kind-icon">mouse<wbr>Hover</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#mouseLeave" class="tsd-kind-icon">mouse<wbr>Leave</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#mouseOver" class="tsd-kind-icon">mouse<wbr>Over</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#name" class="tsd-kind-icon">name</a></li>
<li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="GraphObject.html#naturalBounds" class="tsd-kind-icon">natural<wbr>Bounds</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#opacity" class="tsd-kind-icon">opacity</a></li>
<li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="GraphObject.html#panel" class="tsd-kind-icon">panel</a></li>
<li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="GraphObject.html#part" class="tsd-kind-icon">part</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#pickable" class="tsd-kind-icon">pickable</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#portId" class="tsd-kind-icon">port<wbr>Id</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#position" class="tsd-kind-icon">position</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#row" class="tsd-kind-icon">row</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#rowSpan" class="tsd-kind-icon">row<wbr>Span</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#scale" class="tsd-kind-icon">scale</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#segmentFraction" class="tsd-kind-icon">segment<wbr>Fraction</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#segmentIndex" class="tsd-kind-icon">segment<wbr>Index</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#segmentOffset" class="tsd-kind-icon">segment<wbr>Offset</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#segmentOrientation" class="tsd-kind-icon">segment<wbr>Orientation</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#shadowVisible" class="tsd-kind-icon">shadow<wbr>Visible</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#stretch" class="tsd-kind-icon">stretch</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#toEndSegmentLength" class="tsd-kind-icon">to<wbr>End<wbr>Segment<wbr>Length</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#toLinkable" class="tsd-kind-icon">to<wbr>Linkable</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#toLinkableDuplicates" class="tsd-kind-icon">to<wbr>Linkable<wbr>Duplicates</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#toLinkableSelfNode" class="tsd-kind-icon">to<wbr>Linkable<wbr>Self<wbr>Node</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#toMaxLinks" class="tsd-kind-icon">to<wbr>Max<wbr>Links</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#toShortLength" class="tsd-kind-icon">to<wbr>Short<wbr>Length</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#toSpot" class="tsd-kind-icon">to<wbr>Spot</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#toolTip" class="tsd-kind-icon">tool<wbr>Tip</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#visible" class="tsd-kind-icon">visible</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#width" class="tsd-kind-icon">width</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="GraphObject.html#bind" class="tsd-kind-icon">bind</a></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-is-protected"><a href="GraphObject.html#cloneProtected" class="tsd-kind-icon">clone<wbr>Protected</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphObject.html#copy" class="tsd-kind-icon">copy</a></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-is-static"><a href="GraphObject.html#static-defineBuilder" class="tsd-kind-icon">define<wbr>Builder</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphObject.html#getDocumentAngle" class="tsd-kind-icon">get<wbr>Document<wbr>Angle</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphObject.html#getDocumentBounds" class="tsd-kind-icon">get<wbr>Document<wbr>Bounds</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphObject.html#getDocumentPoint" class="tsd-kind-icon">get<wbr>Document<wbr>Point</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphObject.html#getDocumentScale" class="tsd-kind-icon">get<wbr>Document<wbr>Scale</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphObject.html#getLocalPoint" class="tsd-kind-icon">get<wbr>Local<wbr>Point</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphObject.html#isContainedBy" class="tsd-kind-icon">is<wbr>Contained<wbr>By</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphObject.html#isEnabledObject" class="tsd-kind-icon">is<wbr>Enabled<wbr>Object</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphObject.html#isVisibleObject" class="tsd-kind-icon">is<wbr>Visible<wbr>Object</a></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter tsd-is-static"><a href="GraphObject.html#static-make" class="tsd-kind-icon">make</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphObject.html#setProperties" class="tsd-kind-icon">set<wbr>Properties</a></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-is-static"><a href="GraphObject.html#static-takeBuilderArgument" class="tsd-kind-icon">take<wbr>Builder<wbr>Argument</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="GraphObject.html#static-Default" class="tsd-kind-icon">Default</a></li>
<li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="GraphObject.html#static-Fill" class="tsd-kind-icon">Fill</a></li>
<li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="GraphObject.html#static-FlipBoth" class="tsd-kind-icon">Flip<wbr>Both</a></li>
<li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="GraphObject.html#static-FlipHorizontal" class="tsd-kind-icon">Flip<wbr>Horizontal</a></li>
<li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="GraphObject.html#static-FlipVertical" class="tsd-kind-icon">Flip<wbr>Vertical</a></li>
<li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="GraphObject.html#static-Horizontal" class="tsd-kind-icon">Horizontal</a></li>
<li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="GraphObject.html#static-None" class="tsd-kind-icon">None</a></li>
<li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="GraphObject.html#static-Uniform" class="tsd-kind-icon">Uniform</a></li>
<li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="GraphObject.html#static-UniformToFill" class="tsd-kind-icon">Uniform<wbr>ToFill</a></li>
<li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="GraphObject.html#static-Vertical" class="tsd-kind-icon">Vertical</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>Graph<wbr>Object<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="GraphObject.html" class="tsd-signature-type">GraphObject</a></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>This is an abstract class, so you should not use this constructor.</p>
</div>
<h4 class="tsd-returns-title">Returns <a href="GraphObject.html" class="tsd-signature-type">GraphObject</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="actionCancel" class="tsd-anchor"></a>
<h3>
action<wbr>Cancel
<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">thisObj</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">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 <a href="ActionTool.html">ActionTool</a> is cancelled and this GraphObject's <a href="GraphObject.html#isActionable">isActionable</a>
is set to true.
This property is infrequently set.
By default this property is null.</p>
<p>This functional property is only set on objects such as buttons, knobs, or sliders that want to handle all events,
in conjunction with <a href="ActionTool.html">ActionTool</a>, pre-empting the normal tool mechanisms.</p>
<p>The <a href="ActionTool.html">ActionTool</a> does not conduct any transaction, so if this property has a value,
the function will not be called within a transaction.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="GraphObject.html#actionDown">actionDown</a>, <a href="GraphObject.html#actionMove">actionMove</a>, <a href="GraphObject.html#actionUp">actionUp</a></p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="actionDown" class="tsd-anchor"></a>
<h3>
action<wbr>Down
<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">thisObj</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">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 on a mouse-down event when this GraphObject's <a href="GraphObject.html#isActionable">isActionable</a>
is set to true.
This property is infrequently set.
By default this property is null.</p>
<p>This functional property is only set on objects such as buttons, knobs, or sliders that want to handle all events,
in conjunction with <a href="ActionTool.html">ActionTool</a>, pre-empting the normal tool mechanisms.</p>
<p>The <a href="ActionTool.html">ActionTool</a> does not conduct any transaction, so if this property has a value,
the function will not be called within a transaction.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="GraphObject.html#actionMove">actionMove</a>, <a href="GraphObject.html#actionUp">actionUp</a>, <a href="GraphObject.html#actionCancel">actionCancel</a></p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="actionMove" class="tsd-anchor"></a>
<h3>
action<wbr>Move
<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">thisObj</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">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 on a mouse-move event when this GraphObject's <a href="GraphObject.html#isActionable">isActionable</a>
is set to true.
This property is infrequently set.
By default this property is null.</p>
<p>This functional property is only set on objects such as buttons, knobs, or sliders that want to handle all events,
in conjunction with <a href="ActionTool.html">ActionTool</a>, pre-empting the normal tool mechanisms.</p>
<p>The <a href="ActionTool.html">ActionTool</a> does not conduct any transaction, so if this property has a value,
the function will not be called within a transaction.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="GraphObject.html#actionDown">actionDown</a>, <a href="GraphObject.html#actionUp">actionUp</a>, <a href="GraphObject.html#actionCancel">actionCancel</a></p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="actionUp" class="tsd-anchor"></a>
<h3>
action<wbr>Up
<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">thisObj</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">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 on a mouse-up event when this GraphObject's <a href="GraphObject.html#isActionable">isActionable</a>
is set to true.
This property is infrequently set.
By default this property is null.</p>
<p>This functional property is only set on objects such as buttons, knobs, or sliders that want to handle all events,
in conjunction with <a href="ActionTool.html">ActionTool</a>, pre-empting the normal tool mechanisms.</p>
<p>The <a href="ActionTool.html">ActionTool</a> does not conduct any transaction, so if this property has a value,
the function will not be called within a transaction.
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">Diagram.startTransaction</a> and
<a href="Diagram.html#commitTransaction">Diagram.commitTransaction</a>.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="GraphObject.html#actionDown">actionDown</a>, <a href="GraphObject.html#actionMove">actionMove</a>, <a href="GraphObject.html#actionCancel">actionCancel</a></p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-get-signature tsd-parent-kind-class">
<a name="actualBounds" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagReadOnly">Read-only</span>
actual<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 this GraphObject in container coordinates. This means that
the actualBounds are in the coordinate space of the GraphObject's <a href="Panel.html">Panel</a>,
unless this is a <a href="Part.html">Part</a>, in which case they are in
the <a href="Diagram.html">Diagram</a>'s coordinate system.</p>
<p>You must not modify any of the properties of the <a href="Rect.html">Rect</a> that is the value of this property.</p>
<p>If this GraphObject is a Part,
then the x and y values of the actualBounds are identical to that Part's <a href="GraphObject.html#position">position</a>,
and the width and height values of the actualBounds represent the rectangular space occupied
by the Part in <a href="Diagram.html#documentBounds">Diagram.documentBounds</a> coordinates.</p>
<p>If this GraphObject is not a top-level object (not a <a href="Part.html">Part</a>), then the actualBounds
x and y values represent that GraphObject's position within its Panel. In a Panel of type <a href="Panel.html#static-Position">Panel.Position</a>
this is identical to the GraphObject's <a href="GraphObject.html#position">position</a>, but in other cases it is dependent on
the unique workings of each Panel type. The actualBounds width and height
of a GraphObject are the final size after the <a href="GraphObject.html#scale">scale</a> and <a href="GraphObject.html#angle">angle</a> are applied.</p>
<p>It is possible for a GraphObject (be it an GraphObject or a Panel containing several more GraphObjects)
to have no containing Part, in which case these GraphObjects cannot possibly be in a Diagram.
These GraphObjects are unlikely to have real-number values for their actualBounds, as they may
never have had the chance to be measured and arranged.</p>
<p>As with all read-only properties, using this property as a binding source is unlikely to be useful.</p>
<dl class="tsd-comment-tags">
<dt>se