UNPKG

gojs

Version:

Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams

201 lines (194 loc) 382 kB
<!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>&reg; 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 &quot;see&quot; 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 &quot;primary&quot; 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&#39;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&#39;s Part is in</li> <li><a href="GraphObject.html#diagram">diagram</a> returns the <a href="Diagram.html">Diagram</a> that this GraphObject&#39;s Part&#39;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">&quot;gray&quot;</span><span class="hl-2"> }, </span><span class="hl-0">// default color is &quot;gray&quot;</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">=&gt;</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">&quot;dodgerblue&quot;</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">=&gt;</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">&quot;gray&quot;</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">&quot;Auto&quot;</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">&quot;RoundedRectangle&quot;</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">&quot;fill&quot;</span><span class="hl-2">, </span><span class="hl-6">&quot;color&quot;</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">&quot;TB&quot;</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">&quot;text&quot;</span><span class="hl-2">, </span><span class="hl-6">&quot;key&quot;</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">=&gt;</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">&quot;https://en.wikipedia.org/Wiki/&quot;</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&#39;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 &quot;ports&quot;, 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 &quot;port&quot;, 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 &quot;labels&quot; 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 &quot;label&quot; 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"> =&gt; </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&#39;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"> =&gt; </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&#39;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"> =&gt; </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&#39;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"> =&gt; </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&#39;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