sgojs

<!doctype html> <html class="default no-js"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GraphObject | GoJS API</title> <meta name="description" content="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/css/main.css"> <script async src="../assets/js/search.js" id="search-script"></script> </head> <body> <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 font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary" href="../../index.html"> <h1 class="mb-0 p-1">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" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">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" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a></li> </ul> </div> </div> <hr class="border-b border-gray-600 opacity-50 my-0 py-0" /> </nav> <div class="tsd 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-index="../assets/js/search.json" data-base=".."> <div class="field"> <label for="tsd-search-field" class="tsd-widget search no-caption">Search</label> <input id="tsd-search-field" type="text" /> </div> <ul class="results"> <li class="state loading">Preparing search index...</li> <li class="state failure">The search index is not available</li> </ul> <a href="../index.html" class="title">GoJS API</a> </div> <div class="table-cell" id="tsd-widgets"> <div id="tsd-filter"> <a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a> <div class="tsd-filter-group"> <div class="tsd-select" id="tsd-filter-visibility"> <span class="tsd-select-label">All</span> <ul class="tsd-select-list"> <li data-value="public">Public</li> <li data-value="protected">Public/Protected</li> <li data-value="private" class="selected">All</li> </ul> </div> </div> </div> <a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a> </div> </div> </div> </div> <div class="tsd 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.1.47<br/>by <a href="https://www.nwoods.com/">Northwoods Software®</a> </div> <div> <h1>Class GraphObject</h1> </div> </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> <p>It is very common to make use of the static function <a href="GraphObject.html#static-make">GraphObject.make</a> in order to build up a visual tree of GraphObjects. You can see many examples of this throughout the Introduction, starting at <a href="../../intro/buildingObjects.html">Building Objects</a>, and the Samples, starting with <a href="../../samples/minimal.html">Minimal Sample</a>.</p> <p>Since GraphObject is an abstract class, programmers do not create GraphObjects themselves, but this class defines many properties used by all kinds of GraphObjects.</p> <p>The only visual properties on GraphObject are <a href="GraphObject.html#background">background</a> and <a href="GraphObject.html#areaBackground">areaBackground</a>. However one can control whether the GraphObject is drawn at all by setting <a href="GraphObject.html#visible">visible</a>, or by setting <a href="GraphObject.html#opacity">opacity</a> to zero if you still want the GraphObject to occupy space. Also, if you want to control whether any mouse or touch events "see" the GraphObject, you can set <a href="GraphObject.html#pickable">pickable</a> to false.</p> <p>For more information about specifying how things get drawn, see the properties on the <a href="Shape.html">Shape</a>, <a href="TextBlock.html">TextBlock</a>, and <a href="Picture.html">Picture</a> classes.</p> <h3>GraphObject Sizing</h3> <p>GraphObject defines most of the properties that cause objects to size themselves differently. The most prominent ones include:</p> <ul> <li>The <a href="GraphObject.html#desiredSize">desiredSize</a>, <a href="GraphObject.html#minSize">minSize</a>, and <a href="GraphObject.html#maxSize">maxSize</a> properties are used to explicitly set or limit the size of visual elements. <a href="GraphObject.html#width">width</a> and <a href="GraphObject.html#height">height</a> are convenience properties that set the <a href="GraphObject.html#desiredSize">desiredSize</a> width and height, respectively.</li> <li>The <a href="GraphObject.html#angle">angle</a> and <a href="GraphObject.html#scale">scale</a> properties are used to transform visual elements.</li> <li>The <a href="GraphObject.html#stretch">stretch</a> property determines how a GraphObject will fill its visual space, contextually granted to it by its containing <a href="Panel.html">Panel</a>. Top-level (<a href="Part.html">Part</a>) GraphObjects are not affected by this property because they are always granted infinite space.</li> </ul> <p>All GraphObjects in a Diagram are measured and then arranged by their containing <a href="Panel.html">Panel</a>s in a tree-like fashion. After measuring and arranging, a GraphObject will have valid values for the read-only properties <a href="GraphObject.html#naturalBounds">naturalBounds</a>, <a href="GraphObject.html#measuredBounds">measuredBounds</a>, and <a href="GraphObject.html#actualBounds">actualBounds</a>.</p> <ul> <li>The <a href="GraphObject.html#naturalBounds">naturalBounds</a> of a GraphObject describe its local size, without any transformations (<a href="GraphObject.html#scale">scale</a>, <a href="GraphObject.html#angle">angle</a>) affecting it.</li> <li>The <a href="GraphObject.html#measuredBounds">measuredBounds</a> of a GraphObject describe its size within its containing Panel.</li> <li>The <a href="GraphObject.html#actualBounds">actualBounds</a> of a GraphObject describe its position and given size inside of its panel. This size may be smaller than <a href="GraphObject.html#measuredBounds">measuredBounds</a>, for instance if a GraphObject with a large <a href="GraphObject.html#desiredSize">desiredSize</a> is placed in a <a href="Panel.html">Panel</a> of a smaller <a href="GraphObject.html#desiredSize">desiredSize</a>. Smaller <a href="GraphObject.html#actualBounds">actualBounds</a> than <a href="GraphObject.html#measuredBounds">measuredBounds</a> typically means an object will be cropped.</li> </ul> <p class="boxread"> See <a href="../../intro/sizing.html">the Introduction page on sizing</a> for usage information and examples. <h3>GraphObject Size and Position within Panel</h3> Several GraphObject properties guide the containing <a href="Panel.html">Panel</a> for how to size and position the object within the panel. <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 style="color: #9CDCFE">myDiagram</span><span style="color: #D4D4D4">.</span><span style="color: #9CDCFE">linkTemplate</span><span style="color: #D4D4D4"> =</span> <span style="color: #D4D4D4"> </span><span style="color: #DCDCAA">$</span><span style="color: #D4D4D4">(</span><span style="color: #9CDCFE">go</span><span style="color: #D4D4D4">.</span><span style="color: #9CDCFE">Link</span><span style="color: #D4D4D4">,</span> <span style="color: #D4D4D4"> </span><span style="color: #DCDCAA">$</span><span style="color: #D4D4D4">(</span><span style="color: #9CDCFE">go</span><span style="color: #D4D4D4">.</span><span style="color: #9CDCFE">Shape</span><span style="color: #D4D4D4">,</span> <span style="color: #D4D4D4"> { </span><span style="color: #9CDCFE">strokeWidth:</span><span style="color: #D4D4D4"> </span><span style="color: #B5CEA8">2</span><span style="color: #D4D4D4">, </span><span style="color: #9CDCFE">stroke:</span><span style="color: #D4D4D4"> </span><span style="color: #CE9178">"gray"</span><span style="color: #D4D4D4"> }, </span><span style="color: #6A9955">// default color is "gray"</span> <span style="color: #D4D4D4"> { </span><span style="color: #6A9955">// here E is the InputEvent and OBJ is this Shape</span> <span style="color: #D4D4D4"> </span><span style="color: #DCDCAA">mouseEnter</span><span style="color: #9CDCFE">:</span><span style="color: #D4D4D4"> </span><span style="color: #569CD6">function</span><span style="color: #D4D4D4">(</span><span style="color: #9CDCFE">e</span><span style="color: #D4D4D4">, </span><span style="color: #9CDCFE">obj</span><span style="color: #D4D4D4">) { </span><span style="color: #9CDCFE">obj</span><span style="color: #D4D4D4">.</span><span style="color: #9CDCFE">strokeWidth</span><span style="color: #D4D4D4"> = </span><span style="color: #B5CEA8">4</span><span style="color: #D4D4D4">; </span><span style="color: #9CDCFE">obj</span><span style="color: #D4D4D4">.</span><span style="color: #9CDCFE">stroke</span><span style="color: #D4D4D4"> = </span><span style="color: #CE9178">"dodgerblue"</span><span style="color: #D4D4D4">; },</span> <span style="color: #D4D4D4"> </span><span style="color: #DCDCAA">mouseLeave</span><span style="color: #9CDCFE">:</span><span style="color: #D4D4D4"> </span><span style="color: #569CD6">function</span><span style="color: #D4D4D4">(</span><span style="color: #9CDCFE">e</span><span style="color: #D4D4D4">, </span><span style="color: #9CDCFE">obj</span><span style="color: #D4D4D4">) { </span><span style="color: #9CDCFE">obj</span><span style="color: #D4D4D4">.</span><span style="color: #9CDCFE">strokeWidth</span><span style="color: #D4D4D4"> = </span><span style="color: #B5CEA8">2</span><span style="color: #D4D4D4">; </span><span style="color: #9CDCFE">obj</span><span style="color: #D4D4D4">.</span><span style="color: #9CDCFE">stroke</span><span style="color: #D4D4D4"> = </span><span style="color: #CE9178">"gray"</span><span style="color: #D4D4D4">; }</span> <span style="color: #D4D4D4"> }));</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 style="color: #9CDCFE">myDiagram</span><span style="color: #D4D4D4">.</span><span style="color: #9CDCFE">nodeTemplate</span><span style="color: #D4D4D4"> =</span> <span style="color: #D4D4D4"> </span><span style="color: #DCDCAA">$</span><span style="color: #D4D4D4">(</span><span style="color: #9CDCFE">go</span><span style="color: #D4D4D4">.</span><span style="color: #9CDCFE">Node</span><span style="color: #D4D4D4">, </span><span style="color: #CE9178">"Auto"</span><span style="color: #D4D4D4">,</span> <span style="color: #D4D4D4"> </span><span style="color: #DCDCAA">$</span><span style="color: #D4D4D4">(</span><span style="color: #9CDCFE">go</span><span style="color: #D4D4D4">.</span><span style="color: #9CDCFE">Shape</span><span style="color: #D4D4D4">, </span><span style="color: #CE9178">"RoundedRectangle"</span><span style="color: #D4D4D4">,</span> <span style="color: #D4D4D4"> </span><span style="color: #569CD6">new</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">go</span><span style="color: #D4D4D4">.</span><span style="color: #DCDCAA">Binding</span><span style="color: #D4D4D4">(</span><span style="color: #CE9178">"fill"</span><span style="color: #D4D4D4">, </span><span style="color: #CE9178">"color"</span><span style="color: #D4D4D4">)),</span> <span style="color: #D4D4D4"> </span><span style="color: #DCDCAA">$</span><span style="color: #D4D4D4">(</span><span style="color: #9CDCFE">go</span><span style="color: #D4D4D4">.</span><span style="color: #9CDCFE">TextBlock</span><span style="color: #D4D4D4">,</span> <span style="color: #D4D4D4"> { </span><span style="color: #9CDCFE">name:</span><span style="color: #D4D4D4"> </span><span style="color: #CE9178">"TB"</span><span style="color: #D4D4D4">, </span><span style="color: #9CDCFE">margin:</span><span style="color: #D4D4D4"> </span><span style="color: #B5CEA8">3</span><span style="color: #D4D4D4"> },</span> <span style="color: #D4D4D4"> </span><span style="color: #569CD6">new</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">go</span><span style="color: #D4D4D4">.</span><span style="color: #DCDCAA">Binding</span><span style="color: #D4D4D4">(</span><span style="color: #CE9178">"text"</span><span style="color: #D4D4D4">, </span><span style="color: #CE9178">"key"</span><span style="color: #D4D4D4">)),</span> <span style="color: #D4D4D4"> { </span><span style="color: #6A9955">// second arg will be this GraphObject, which in this case is the Node itself:</span> <span style="color: #D4D4D4"> </span><span style="color: #DCDCAA">click</span><span style="color: #9CDCFE">:</span><span style="color: #D4D4D4"> </span><span style="color: #569CD6">function</span><span style="color: #D4D4D4">(</span><span style="color: #9CDCFE">e</span><span style="color: #D4D4D4">, </span><span style="color: #9CDCFE">node</span><span style="color: #D4D4D4">) {</span> <span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">window</span><span style="color: #D4D4D4">.</span><span style="color: #DCDCAA">open</span><span style="color: #D4D4D4">(</span><span style="color: #CE9178">"https://en.wikipedia.org/Wiki/"</span><span style="color: #D4D4D4"> + </span><span style="color: #9CDCFE">node</span><span style="color: #D4D4D4">.</span><span style="color: #9CDCFE">data</span><span style="color: #D4D4D4">.</span><span style="color: #9CDCFE">key</span><span style="color: #D4D4D4">);</span> <span style="color: #D4D4D4"> }</span> <span style="color: #D4D4D4"> });</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> </section> <section class="tsd-panel-group tsd-index-group"> <h2>Index</h2> <section class="tsd-panel tsd-index-panel"> <div class="tsd-index-content"> <section class="tsd-index-section "> <h3>Constructors</h3> <ul class="tsd-index-list"> <li class="tsd-kind-constructor tsd-parent-kind-class"><a href="GraphObject.html#constructor" class="tsd-kind-icon">constructor</a></li> </ul> </section> <section class="tsd-index-section "> <h3>Properties</h3> <ul class="tsd-index-list"> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#actionCancel" class="tsd-kind-icon">action<wbr>Cancel</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#actionDown" class="tsd-kind-icon">action<wbr>Down</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#actionMove" class="tsd-kind-icon">action<wbr>Move</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#actionUp" class="tsd-kind-icon">action<wbr>Up</a></li> <li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="GraphObject.html#actualBounds" class="tsd-kind-icon">actual<wbr>Bounds</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#alignment" class="tsd-kind-icon">alignment</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#alignmentFocus" class="tsd-kind-icon">alignment<wbr>Focus</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#angle" class="tsd-kind-icon">angle</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#areaBackground" class="tsd-kind-icon">area<wbr>Background</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#background" class="tsd-kind-icon">background</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#click" class="tsd-kind-icon">click</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#column" class="tsd-kind-icon">column</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#columnSpan" class="tsd-kind-icon">column<wbr>Span</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#contextClick" class="tsd-kind-icon">context<wbr>Click</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#contextMenu" class="tsd-kind-icon">context<wbr>Menu</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#cursor" class="tsd-kind-icon">cursor</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#desiredSize" class="tsd-kind-icon">desired<wbr>Size</a></li> <li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="GraphObject.html#diagram" class="tsd-kind-icon">diagram</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#doubleClick" class="tsd-kind-icon">double<wbr>Click</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#enabledChanged" class="tsd-kind-icon">enabled<wbr>Changed</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#fromEndSegmentLength" class="tsd-kind-icon">from<wbr>End<wbr>Segment<wbr>Length</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#fromLinkable" class="tsd-kind-icon">from<wbr>Linkable</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#fromLinkableDuplicates" class="tsd-kind-icon">from<wbr>Linkable<wbr>Duplicates</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#fromLinkableSelfNode" class="tsd-kind-icon">from<wbr>Linkable<wbr>Self<wbr>Node</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#fromMaxLinks" class="tsd-kind-icon">from<wbr>Max<wbr>Links</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#fromShortLength" class="tsd-kind-icon">from<wbr>Short<wbr>Length</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#fromSpot" class="tsd-kind-icon">from<wbr>Spot</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#height" class="tsd-kind-icon">height</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#isActionable" class="tsd-kind-icon">is<wbr>Actionable</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#isPanelMain" class="tsd-kind-icon">is<wbr>Panel<wbr>Main</a></li> <li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="GraphObject.html#layer" class="tsd-kind-icon">layer</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#margin" class="tsd-kind-icon">margin</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#maxSize" class="tsd-kind-icon">max<wbr>Size</a></li> <li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="GraphObject.html#measuredBounds" class="tsd-kind-icon">measured<wbr>Bounds</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#minSize" class="tsd-kind-icon">min<wbr>Size</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#mouseDragEnter" class="tsd-kind-icon">mouse<wbr>Drag<wbr>Enter</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#mouseDragLeave" class="tsd-kind-icon">mouse<wbr>Drag<wbr>Leave</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#mouseDrop" class="tsd-kind-icon">mouse<wbr>Drop</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#mouseEnter" class="tsd-kind-icon">mouse<wbr>Enter</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#mouseHold" class="tsd-kind-icon">mouse<wbr>Hold</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#mouseHover" class="tsd-kind-icon">mouse<wbr>Hover</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#mouseLeave" class="tsd-kind-icon">mouse<wbr>Leave</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#mouseOver" class="tsd-kind-icon">mouse<wbr>Over</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#name" class="tsd-kind-icon">name</a></li> <li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="GraphObject.html#naturalBounds" class="tsd-kind-icon">natural<wbr>Bounds</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#opacity" class="tsd-kind-icon">opacity</a></li> <li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="GraphObject.html#panel" class="tsd-kind-icon">panel</a></li> <li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="GraphObject.html#part" class="tsd-kind-icon">part</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#pickable" class="tsd-kind-icon">pickable</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#portId" class="tsd-kind-icon">port<wbr>Id</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#position" class="tsd-kind-icon">position</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#row" class="tsd-kind-icon">row</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#rowSpan" class="tsd-kind-icon">row<wbr>Span</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#scale" class="tsd-kind-icon">scale</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#segmentFraction" class="tsd-kind-icon">segment<wbr>Fraction</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#segmentIndex" class="tsd-kind-icon">segment<wbr>Index</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#segmentOffset" class="tsd-kind-icon">segment<wbr>Offset</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#segmentOrientation" class="tsd-kind-icon">segment<wbr>Orientation</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#shadowVisible" class="tsd-kind-icon">shadow<wbr>Visible</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#stretch" class="tsd-kind-icon">stretch</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#toEndSegmentLength" class="tsd-kind-icon">to<wbr>End<wbr>Segment<wbr>Length</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#toLinkable" class="tsd-kind-icon">to<wbr>Linkable</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#toLinkableDuplicates" class="tsd-kind-icon">to<wbr>Linkable<wbr>Duplicates</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#toLinkableSelfNode" class="tsd-kind-icon">to<wbr>Linkable<wbr>Self<wbr>Node</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#toMaxLinks" class="tsd-kind-icon">to<wbr>Max<wbr>Links</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#toShortLength" class="tsd-kind-icon">to<wbr>Short<wbr>Length</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#toSpot" class="tsd-kind-icon">to<wbr>Spot</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#toolTip" class="tsd-kind-icon">tool<wbr>Tip</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#visible" class="tsd-kind-icon">visible</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#width" class="tsd-kind-icon">width</a></li> </ul> </section> <section class="tsd-index-section "> <h3>Methods</h3> <ul class="tsd-index-list"> <li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphObject.html#bind" class="tsd-kind-icon">bind</a></li> <li class="tsd-kind-method tsd-parent-kind-class tsd-is-protected"><a href="GraphObject.html#cloneProtected" class="tsd-kind-icon">clone<wbr>Protected</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphObject.html#copy" class="tsd-kind-icon">copy</a></li> <li class="tsd-kind-method tsd-parent-kind-class tsd-is-static"><a href="GraphObject.html#static-defineBuilder" class="tsd-kind-icon">define<wbr>Builder</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphObject.html#getDocumentAngle" class="tsd-kind-icon">get<wbr>Document<wbr>Angle</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphObject.html#getDocumentBounds" class="tsd-kind-icon">get<wbr>Document<wbr>Bounds</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphObject.html#getDocumentPoint" class="tsd-kind-icon">get<wbr>Document<wbr>Point</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphObject.html#getDocumentScale" class="tsd-kind-icon">get<wbr>Document<wbr>Scale</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphObject.html#getLocalPoint" class="tsd-kind-icon">get<wbr>Local<wbr>Point</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphObject.html#isContainedBy" class="tsd-kind-icon">is<wbr>Contained<wbr>By</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphObject.html#isEnabledObject" class="tsd-kind-icon">is<wbr>Enabled<wbr>Object</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphObject.html#isVisibleObject" class="tsd-kind-icon">is<wbr>Visible<wbr>Object</a></li> <li class="tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter tsd-is-static"><a href="GraphObject.html#static-make" class="tsd-kind-icon">make</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphObject.html#setProperties" class="tsd-kind-icon">set<wbr>Properties</a></li> <li class="tsd-kind-method tsd-parent-kind-class tsd-is-static"><a href="GraphObject.html#static-takeBuilderArgument" class="tsd-kind-icon">take<wbr>Builder<wbr>Argument</a></li> </ul> </section> <section class="tsd-index-section "> <h3>Constants</h3> <ul class="tsd-index-list"> <li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="GraphObject.html#static-Default" class="tsd-kind-icon">Default</a></li> <li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="GraphObject.html#static-Fill" class="tsd-kind-icon">Fill</a></li> <li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="GraphObject.html#static-FlipBoth" class="tsd-kind-icon">Flip<wbr>Both</a></li> <li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="GraphObject.html#static-FlipHorizontal" class="tsd-kind-icon">Flip<wbr>Horizontal</a></li> <li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="GraphObject.html#static-FlipVertical" class="tsd-kind-icon">Flip<wbr>Vertical</a></li> <li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="GraphObject.html#static-Horizontal" class="tsd-kind-icon">Horizontal</a></li> <li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="GraphObject.html#static-None" class="tsd-kind-icon">None</a></li> <li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="GraphObject.html#static-Uniform" class="tsd-kind-icon">Uniform</a></li> <li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="GraphObject.html#static-UniformToFill" class="tsd-kind-icon">Uniform<wbr>ToFill</a></li> <li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="GraphObject.html#static-Vertical" class="tsd-kind-icon">Vertical</a></li> </ul> </section> </div> </section> </section> <section class="tsd-panel-group tsd-member-group "> <h2>Constructors</h2> <section class="tsd-panel tsd-member tsd-kind-constructor tsd-parent-kind-class"> <a name="constructor" class="tsd-anchor"></a> <h3> constructor </h3> <ul class="tsd-signatures tsd-kind-constructor tsd-parent-kind-class"> <li class="tsd-signature tsd-kind-icon">new <wbr>Graph<wbr>Object<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="GraphObject.html" class="tsd-signature-type" 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 name="actionCancel" class="tsd-anchor"></a> <h3> 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> </h3> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> <p>Gets or sets the function to execute when the <a href="ActionTool.html">ActionTool</a> is cancelled and this GraphObject's <a href="GraphObject.html#isActionable">isActionable</a> is set to true. This property is infrequently set. By default this property is null.</p> <p>This functional property is only set on objects such as buttons, knobs, or sliders that want to handle all events, in conjunction with <a href="ActionTool.html">ActionTool</a>, pre-empting the normal tool mechanisms.</p> <p>The <a href="ActionTool.html">ActionTool</a> does not conduct any transaction, so if this property has a value, the function will not be called within a transaction.</p> <dl class="tsd-comment-tags"> <dt>see</dt> <dd><p><a href="GraphObject.html#actionDown">actionDown</a>, <a href="GraphObject.html#actionMove">actionMove</a>, <a href="GraphObject.html#actionUp">actionUp</a></p> </dd> </dl> </div> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"> <a name="actionDown" class="tsd-anchor"></a> <h3> action<wbr>Down <span class="tsd-signature-symbol">: </span><span class="tsd-signature-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> </h3> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> <p>Gets or sets the function to execute on a mouse-down event when this GraphObject's <a href="GraphObject.html#isActionable">isActionable</a> is set to true. This property is infrequently set. By default this property is null.</p> <p>This functional property is only set on objects such as buttons, knobs, or sliders that want to handle all events, in conjunction with <a href="ActionTool.html">ActionTool</a>, pre-empting the normal tool mechanisms.</p> <p>The <a href="ActionTool.html">ActionTool</a> does not conduct any transaction, so if this property has a value, the function will not be called within a transaction.</p> <dl class="tsd-comment-tags"> <dt>see</dt> <dd><p><a href="GraphObject.html#actionMove">actionMove</a>, <a href="GraphObject.html#actionUp">actionUp</a>, <a href="GraphObject.html#actionCancel">actionCancel</a></p> </dd> </dl> </div> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"> <a name="actionMove" class="tsd-anchor"></a> <h3> action<wbr>Move <span class="tsd-signature-symbol">: </span><span class="tsd-signature-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> </h3> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> <p>Gets or sets the function to execute on a mouse-move event when this GraphObject's <a href="GraphObject.html#isActionable">isActionable</a> is set to true. This property is infrequently set. By default this property is null.</p> <p>This functional property is only set on objects such as buttons, knobs, or sliders that want to handle all events, in conjunction with <a href="ActionTool.html">ActionTool</a>, pre-empting the normal tool mechanisms.</p> <p>The <a href="ActionTool.html">ActionTool</a> does not conduct any transaction, so if this property has a value, the f