gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
201 lines (194 loc) • 382 kB
HTML
<!DOCTYPE html><html class="default"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>GraphObject | GoJS API</title><meta name="description" content="Documentation for GoJS API"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../../assets/css/style.css"/><link rel="stylesheet" href="../assets/style-tsd.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script async src="../assets/search.js" id="search-script"></script></head><body><script>document.body.classList.add(localStorage.getItem("tsd-theme") || "os")</script><header><nav id="navTop" class="w-full z-30 top-0 text-white bg-nwoods-primary"><div class="w-full container max-w-screen-lg mx-auto flex flex-wrap sm:flex-nowrap items-center justify-between mt-0 py-2"><div class="md:pl-4"><a class="text-white hover:text-white no-underline hover:no-underline\n font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary" href="../../index.html"><h1 class="my-0 p-1 leading-none">GoJS</h1></a></div><button id="topnavButton" class="rounded-lg sm:hidden focus:outline-none focus:ring" aria-label="Navigation"><svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6"><path id="topnavOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path><path id="topnavClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></button><div id="topnavList" class="hidden sm:block items-center w-auto mt-0 text-white p-0 z-20"><ul class="list-reset list-none font-semibold flex justify-end flex-wrap sm:flex-nowrap items-center px-0 pb-0"><li class="p-1 sm:p-0"><a class="topnav-link" href="../../learn/index.html">Learn</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="../../samples/index.html">Samples</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="../../intro/index.html">Intro</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="../../api/index.html">API</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/products/register.html">Register</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="../../download.html">Download</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="https://forum.nwoods.com/c/gojs/11">Forum</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/contact.html" target="_blank" rel="noopener" id="contactBtn">Contact</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/sales/index.html" target="_blank" rel="noopener" id="buyBtn">Buy</a></li></ul></div></div><hr class="border-b border-gray-600 opacity-50 my-0 py-0"/></nav><div class="tsd-page-header"><div class="tsd-page-toolbar"><div class="w-full max-w-screen-xl mx-auto px-2"><div class="table-wrap"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget search no-caption">Search</label><input type="text" id="tsd-search-field"/></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> <input type="checkbox" id="tsd-filter-inherited"/><label class="tsd-widget" for="tsd-filter-inherited">Inherited</label></div></div><a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a></div></div></div></div></div><div class="tsd-page-title"><div class="w-full max-w-screen-xl mx-auto px-2"><div class="top-copyright"><b>GoJS</b>® Diagramming Components<br/>version 2.3.8<br/>by <a href="https://www.nwoods.com/">Northwoods Software®</a></div><div><h1>Class GraphObject <span class="tsd-flag ts-flagAbstract">Abstract</span> </h1></div></div></div></header><div class="tsd w-full max-w-screen-xl mx-auto pb-4"><div class="row px-2 w-full"><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" data-tsd-kind="Class">Panel</a></li><li><a href="Shape.html" class="tsd-signature-type" data-tsd-kind="Class">Shape</a></li><li><a href="TextBlock.html" class="tsd-signature-type" data-tsd-kind="Class">TextBlock</a></li><li><a href="Picture.html" class="tsd-signature-type" data-tsd-kind="Class">Picture</a></li><li><a href="Placeholder.html" class="tsd-signature-type" data-tsd-kind="Class">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>
<div><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 property on GraphObject is <a href="GraphObject.html#background">background</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.
Call the <a href="GraphObject.html#isVisibleObject">isVisibleObject</a> predicate to determine whether the object is visible and
all of its containing panels are visible.
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.
<ul>
<li>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.</li>
<li>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.</li>
<li>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.</li>
<li>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.</li>
<li>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.</li>
<li>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.</li>
<li>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.</li>
</ul>
<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="language-js"><span class="hl-4">myDiagram</span><span class="hl-2">.</span><span class="hl-4">linkTemplate</span><span class="hl-2"> =</span><br/><span class="hl-2"> </span><span class="hl-5">$</span><span class="hl-2">(</span><span class="hl-4">go</span><span class="hl-2">.</span><span class="hl-4">Link</span><span class="hl-2">,</span><br/><span class="hl-2"> </span><span class="hl-5">$</span><span class="hl-2">(</span><span class="hl-4">go</span><span class="hl-2">.</span><span class="hl-4">Shape</span><span class="hl-2">,</span><br/><span class="hl-2"> { </span><span class="hl-4">strokeWidth:</span><span class="hl-2"> </span><span class="hl-7">2</span><span class="hl-2">, </span><span class="hl-4">stroke:</span><span class="hl-2"> </span><span class="hl-6">"gray"</span><span class="hl-2"> }, </span><span class="hl-0">// default color is "gray"</span><br/><span class="hl-2"> { </span><span class="hl-0">// here E is the InputEvent and OBJ is this Shape</span><br/><span class="hl-2"> </span><span class="hl-5">mouseEnter</span><span class="hl-4">:</span><span class="hl-2"> (</span><span class="hl-4">e</span><span class="hl-2">, </span><span class="hl-4">obj</span><span class="hl-2">) </span><span class="hl-1">=></span><span class="hl-2"> { </span><span class="hl-4">obj</span><span class="hl-2">.</span><span class="hl-4">strokeWidth</span><span class="hl-2"> = </span><span class="hl-7">4</span><span class="hl-2">; </span><span class="hl-4">obj</span><span class="hl-2">.</span><span class="hl-4">stroke</span><span class="hl-2"> = </span><span class="hl-6">"dodgerblue"</span><span class="hl-2">; },</span><br/><span class="hl-2"> </span><span class="hl-5">mouseLeave</span><span class="hl-4">:</span><span class="hl-2"> (</span><span class="hl-4">e</span><span class="hl-2">, </span><span class="hl-4">obj</span><span class="hl-2">) </span><span class="hl-1">=></span><span class="hl-2"> { </span><span class="hl-4">obj</span><span class="hl-2">.</span><span class="hl-4">strokeWidth</span><span class="hl-2"> = </span><span class="hl-7">2</span><span class="hl-2">; </span><span class="hl-4">obj</span><span class="hl-2">.</span><span class="hl-4">stroke</span><span class="hl-2"> = </span><span class="hl-6">"gray"</span><span class="hl-2">; }</span><br/><span class="hl-2"> }));</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="language-js"><span class="hl-4">myDiagram</span><span class="hl-2">.</span><span class="hl-4">nodeTemplate</span><span class="hl-2"> =</span><br/><span class="hl-2"> </span><span class="hl-5">$</span><span class="hl-2">(</span><span class="hl-4">go</span><span class="hl-2">.</span><span class="hl-4">Node</span><span class="hl-2">, </span><span class="hl-6">"Auto"</span><span class="hl-2">,</span><br/><span class="hl-2"> </span><span class="hl-5">$</span><span class="hl-2">(</span><span class="hl-4">go</span><span class="hl-2">.</span><span class="hl-4">Shape</span><span class="hl-2">, </span><span class="hl-6">"RoundedRectangle"</span><span class="hl-2">,</span><br/><span class="hl-2"> </span><span class="hl-1">new</span><span class="hl-2"> </span><span class="hl-4">go</span><span class="hl-2">.</span><span class="hl-5">Binding</span><span class="hl-2">(</span><span class="hl-6">"fill"</span><span class="hl-2">, </span><span class="hl-6">"color"</span><span class="hl-2">)),</span><br/><span class="hl-2"> </span><span class="hl-5">$</span><span class="hl-2">(</span><span class="hl-4">go</span><span class="hl-2">.</span><span class="hl-4">TextBlock</span><span class="hl-2">,</span><br/><span class="hl-2"> { </span><span class="hl-4">name:</span><span class="hl-2"> </span><span class="hl-6">"TB"</span><span class="hl-2">, </span><span class="hl-4">margin:</span><span class="hl-2"> </span><span class="hl-7">3</span><span class="hl-2"> },</span><br/><span class="hl-2"> </span><span class="hl-1">new</span><span class="hl-2"> </span><span class="hl-4">go</span><span class="hl-2">.</span><span class="hl-5">Binding</span><span class="hl-2">(</span><span class="hl-6">"text"</span><span class="hl-2">, </span><span class="hl-6">"key"</span><span class="hl-2">)),</span><br/><span class="hl-2"> { </span><span class="hl-0">// second arg will be this GraphObject, which in this case is the Node itself:</span><br/><span class="hl-2"> </span><span class="hl-5">click</span><span class="hl-4">:</span><span class="hl-2"> (</span><span class="hl-4">e</span><span class="hl-2">, </span><span class="hl-4">node</span><span class="hl-2">) </span><span class="hl-1">=></span><span class="hl-2"> {</span><br/><span class="hl-2"> </span><span class="hl-4">window</span><span class="hl-2">.</span><span class="hl-5">open</span><span class="hl-2">(</span><span class="hl-6">"https://en.wikipedia.org/Wiki/"</span><span class="hl-2"> + </span><span class="hl-4">node</span><span class="hl-2">.</span><span class="hl-4">data</span><span class="hl-2">.</span><span class="hl-4">key</span><span class="hl-2">);</span><br/><span class="hl-2"> }</span><br/><span class="hl-2"> });</span>
</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></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#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#apply" class="tsd-kind-icon">apply</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphObject.html#attach" class="tsd-kind-icon">attach</a></li><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"><a href="GraphObject.html#findBindingPanel" class="tsd-kind-icon">find<wbr/>Binding<wbr/>Panel</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"><a href="GraphObject.html#set" class="tsd-kind-icon">set</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"><a href="GraphObject.html#trigger" class="tsd-kind-icon">trigger</a></li><li class="tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter tsd-is-static"><a href="GraphObject.html#static-build" class="tsd-kind-icon">build</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 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 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/>To<wbr/>Fill</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 id="constructor" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> constructor<a href="#constructor" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></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" data-tsd-kind="Class">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" data-tsd-kind="Class">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 id="actionCancel" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> action<wbr/>Cancel<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span>e<span class="tsd-signature-symbol">: </span><a href="InputEvent.html" class="tsd-signature-type" data-tsd-kind="Class">InputEvent</a>, thisObj<span class="tsd-signature-symbol">: </span><a href="GraphObject.html" class="tsd-signature-type" data-tsd-kind="Class">GraphObject</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> => </span><span class="tsd-signature-type">void</span><a href="#actionCancel" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></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>
<div><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>
</div><dl class="tsd-comment-tags"><dt class="">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 id="actionDown" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> action<wbr/>Down<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span>e<span class="tsd-signature-symbol">: </span><a href="InputEvent.html" class="tsd-signature-type" data-tsd-kind="Class">InputEvent</a>, thisObj<span class="tsd-signature-symbol">: </span><a href="GraphObject.html" class="tsd-signature-type" data-tsd-kind="Class">GraphObject</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> => </span><span class="tsd-signature-type">void</span><a href="#actionDown" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></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>
<div><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>
</div><dl class="tsd-comment-tags"><dt class="">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 id="actionMove" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> action<wbr/>Move<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span>e<span class="tsd-signature-symbol">: </span><a href="InputEvent.html" class="tsd-signature-type" data-tsd-kind="Class">InputEvent</a>, thisObj<span class="tsd-signature-symbol">: </span><a href="GraphObject.html" class="tsd-signature-type" data-tsd-kind="Class">GraphObject</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> => </span><span class="tsd-signature-type">void</span><a href="#actionMove" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></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>
<div><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>
</div><dl class="tsd-comment-tags"><dt class="">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 id="actionUp" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> action<wbr/>Up<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span>e<span class="tsd-signature-symbol">: </span><a href="InputEvent.html" class="tsd-signature-type" data-tsd-kind="Class">InputEvent</a>, thisObj<span class="tsd-signature-symbol">: </span><a href="GraphObject.html" class="tsd-signature-type" data-tsd-kind="Class">GraphObject</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> => </span><span class="tsd-signature-type">void</span><a href="#actionUp" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></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>
<div><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