gojs

<!DOCTYPE html><html class="default"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>Shape | GoJS API</title><meta name="description" content="Documentation for GoJS API"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../../assets/css/style.css"/><link rel="stylesheet" href="../assets/style-tsd.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script async src="../assets/search.js" id="search-script"></script></head><body><script>document.body.classList.add(localStorage.getItem("tsd-theme") || "os")</script><header><nav id="navTop" class="w-full z-30 top-0 text-white bg-nwoods-primary"><div class="w-full container max-w-screen-lg mx-auto flex flex-wrap sm:flex-nowrap items-center justify-between mt-0 py-2"><div class="md:pl-4"><a class="text-white hover:text-white no-underline hover:no-underline\n font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary" href="../../index.html"><h1 class="my-0 p-1 leading-none">GoJS</h1></a></div><button id="topnavButton" class="rounded-lg sm:hidden focus:outline-none focus:ring" aria-label="Navigation"><svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6"><path id="topnavOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path><path id="topnavClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></button><div id="topnavList" class="hidden sm:block items-center w-auto mt-0 text-white p-0 z-20"><ul class="list-reset list-none font-semibold flex justify-end flex-wrap sm:flex-nowrap items-center px-0 pb-0"><li class="p-1 sm:p-0"><a class="topnav-link" href="../../learn/index.html">Learn</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="../../samples/index.html">Samples</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="../../intro/index.html">Intro</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="../../api/index.html">API</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/products/register.html">Register</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="../../download.html">Download</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="https://forum.nwoods.com/c/gojs/11">Forum</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/contact.html" target="_blank" rel="noopener" id="contactBtn">Contact</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/sales/index.html" target="_blank" rel="noopener" id="buyBtn">Buy</a></li></ul></div></div><hr class="border-b border-gray-600 opacity-50 my-0 py-0"/></nav><div class="tsd-page-header"><div class="tsd-page-toolbar"><div class="w-full max-w-screen-xl mx-auto px-2"><div class="table-wrap"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget search no-caption">Search</label><input type="text" id="tsd-search-field"/></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">GoJS API</a></div><div class="table-cell" id="tsd-widgets"><div id="tsd-filter"><a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a><div class="tsd-filter-group"><div class="tsd-select" id="tsd-filter-visibility"><span class="tsd-select-label">All</span><ul class="tsd-select-list"><li data-value="public">Public</li><li data-value="protected">Public/Protected</li><li data-value="private" class="selected">All</li></ul></div> <input type="checkbox" id="tsd-filter-inherited"/><label class="tsd-widget" for="tsd-filter-inherited">Inherited</label></div></div><a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a></div></div></div></div></div><div class="tsd-page-title"><div class="w-full max-w-screen-xl mx-auto px-2"><div class="top-copyright"><b>GoJS</b>® Diagramming Components<br/>version 2.3.8<br/>by <a href="https://www.nwoods.com/">Northwoods Software®</a></div><div><h1>Class Shape </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><a href="GraphObject.html" class="tsd-signature-type" data-tsd-kind="Class">GraphObject</a><ul class="tsd-hierarchy"><li><span class="target">Shape</span></li></ul></li></ul></section><section class="tsd-panel tsd-comment"><div class="tsd-comment tsd-typography"> <p>A Shape is a <a href="GraphObject.html">GraphObject</a> that shows a geometric figure. The <a href="Geometry.html">Geometry</a> determines what is drawn; the properties <a href="Shape.html#fill">fill</a> and <a href="Shape.html#stroke">stroke</a> (and other stroke properties) determine how it is drawn.</p> <div><p>There are generally two types of shapes: Those that use a custom <a href="Geometry.html">Geometry</a> by setting <a href="Shape.html#geometry">Shape.geometry</a>, and those that receive an automatically generated Geometry using the value of <a href="Shape.html#figure">figure</a>, <a href="Shape.html#toArrow">toArrow</a>, or <a href="Shape.html#fromArrow">fromArrow</a>. An explicitly set Geometry always supersedes the figure and arrowhead properties.</p> <p>Some created Shapes:</p> <pre><code class="language-js"><span class="hl-0">// A shape with the figure set to RoundedRectangle:</span><br/><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">Shape</span><span class="hl-2">({ </span><span class="hl-4">figure:</span><span class="hl-2"> </span><span class="hl-6">"RoundedRectangle"</span><span class="hl-2">, </span><span class="hl-4">fill:</span><span class="hl-2"> </span><span class="hl-6">"lightgreen"</span><span class="hl-2"> })</span><br/><span class="hl-0">// Alternatively:</span><br/><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">Shape</span><span class="hl-2">(</span><span class="hl-6">"RoundedRectangle"</span><span class="hl-2"> { </span><span class="hl-4">fill:</span><span class="hl-2"> </span><span class="hl-6">"lightgreen"</span><span class="hl-2"> })</span><br/><br/><span class="hl-0">// A shape with a custom geometry:</span><br/><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">Shape</span><span class="hl-2">(</span><br/><span class="hl-2"> { </span><span class="hl-4">geometry:</span><span class="hl-2"> </span><span class="hl-4">go</span><span class="hl-2">.</span><span class="hl-4">Geometry</span><span class="hl-2">.</span><span class="hl-5">parse</span><span class="hl-2">(</span><span class="hl-6">"M120 0 L80 80 0 50z"</span><span class="hl-2">) })</span><br/><br/><span class="hl-0">// A shape with a custom geometry, using geometryString:</span><br/><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">Shape</span><span class="hl-2">(</span><br/><span class="hl-2"> { </span><span class="hl-4">geometryString:</span><span class="hl-2"> </span><span class="hl-6">"F M120 0 L80 80 0 50z"</span><span class="hl-2">,</span><br/><span class="hl-2"> </span><span class="hl-4">fill:</span><span class="hl-2"> </span><span class="hl-6">"lightgreen"</span><span class="hl-2"> })</span><br/><br/><span class="hl-0">// A common link template, using two shapes,</span><br/><span class="hl-0">// the first for the link path and the second for the arrowhead</span><br/><span class="hl-0">// The first shape in a link is special, its geometry is set by the Link's routing,</span><br/><span class="hl-0">// so it does not need a geometry or figure set manually</span><br/><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-1">new</span><span class="hl-2"> </span><span class="hl-4">go</span><span class="hl-2">.</span><span class="hl-5">Link</span><span class="hl-2">()</span><br/><span class="hl-2"> .</span><span class="hl-5">add</span><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">Shape</span><span class="hl-2">(</span><br/><span class="hl-2"> { </span><span class="hl-4">strokeWidth:</span><span class="hl-2"> </span><span class="hl-7">2</span><span class="hl-2">, </span><span class="hl-4">stroke:</span><span class="hl-2"> </span><span class="hl-6">'gray'</span><span class="hl-2"> }))</span><br/><span class="hl-2"> .</span><span class="hl-5">add</span><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">Shape</span><span class="hl-2">(</span><br/><span class="hl-2"> { </span><span class="hl-4">toArrow:</span><span class="hl-2"> </span><span class="hl-6">"Standard"</span><span class="hl-2">, </span><span class="hl-4">fill:</span><span class="hl-2"> </span><span class="hl-6">'gray'</span><span class="hl-2">, </span><span class="hl-4">stroke:</span><span class="hl-2"> </span><span class="hl-1">null</span><span class="hl-2"> }))</span> </code></pre> <p class="box"> You can see more custom geometry examples and read about geometryString on the <a href="../../intro/geometry.html">Geometry Path Strings Introduction page.</a> <p>When automatically generating a Shape <a href="Geometry.html">Geometry</a>, the value of <a href="Shape.html#toArrow">toArrow</a> takes precedence, then <a href="Shape.html#fromArrow">fromArrow</a>, then <a href="Shape.html#figure">figure</a>. If the value of <a href="Shape.html#toArrow">toArrow</a> or <a href="Shape.html#fromArrow">fromArrow</a> is "None" then it is ignored, and the "None" value of <a href="Shape.html#figure">figure</a> is identical to "Rectangle".</p> <p>All of the predefined figures are shown in the <a href="../../samples/shapes.html">Shapes sample</a>. You can define your own named figures by calling the static function <a href="Shape.html#static-defineFigureGenerator">Shape.defineFigureGenerator</a>. Get a <a href="Map.html">Map</a> of named figures by calling the static function <a href="Shape.html#static-getFigureGenerators">Shape.getFigureGenerators</a>.</p> <p>All of the predefined arrowheads are shown in the <a href="../../samples/arrowheads.html">Arrowheads sample</a>. You can define your own named arrowheads by calling the static function <a href="Shape.html#static-defineArrowheadGeometry">Shape.defineArrowheadGeometry</a>. Get a <a href="Map.html">Map</a> of named arrowheads by calling the static function <a href="Shape.html#static-getArrowheadGeometries">Shape.getArrowheadGeometries</a>.</p> <p>You can see a copy of all of the built-in arrowhead definitions in this file: <a href="../../extensions/Arrowheads.js">Arrowheads.js</a>.</p> <p>The Shape properties <a href="Shape.html#parameter1">parameter1</a>, and <a href="Shape.html#parameter2">parameter2</a> determine details of the construction of some <a href="Shape.html#figure">figure</a> geometries. Specifically, they often set the <a href="Shape.html#spot1">spot1</a>, <a href="Shape.html#spot2">spot2</a> for the Shape. These spots determine the "inner area" of an Auto panel when a Shape is the main object. See the <a href="../../intro/panels.html">Auto Panels section of the Panels Introduction page</a> for more details.</p> <p>Shapes use their geometric bounds when determining hit testing, but use rectangular bounds when participating in (panel) layouts.</p> </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 tsd-is-overwrite"><a href="Shape.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="Shape.html#figure" class="tsd-kind-icon">figure</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Shape.html#fill" class="tsd-kind-icon">fill</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Shape.html#fromArrow" class="tsd-kind-icon">from<wbr/>Arrow</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Shape.html#geometry" class="tsd-kind-icon">geometry</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Shape.html#geometryStretch" class="tsd-kind-icon">geometry<wbr/>Stretch</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Shape.html#geometryString" class="tsd-kind-icon">geometry<wbr/>String</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Shape.html#graduatedEnd" class="tsd-kind-icon">graduated<wbr/>End</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Shape.html#graduatedSkip" class="tsd-kind-icon">graduated<wbr/>Skip</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Shape.html#graduatedStart" class="tsd-kind-icon">graduated<wbr/>Start</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Shape.html#interval" class="tsd-kind-icon">interval</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Shape.html#isGeometryPositioned" class="tsd-kind-icon">is<wbr/>Geometry<wbr/>Positioned</a></li><li class="tsd-kind-get-signature tsd-parent-kind-class tsd-is-overwrite"><a href="Shape.html#naturalBounds" class="tsd-kind-icon">natural<wbr/>Bounds</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Shape.html#parameter1" class="tsd-kind-icon">parameter1</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Shape.html#parameter2" class="tsd-kind-icon">parameter2</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Shape.html#pathPattern" class="tsd-kind-icon">path<wbr/>Pattern</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Shape.html#spot1" class="tsd-kind-icon">spot1</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Shape.html#spot2" class="tsd-kind-icon">spot2</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Shape.html#stroke" class="tsd-kind-icon">stroke</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Shape.html#strokeCap" class="tsd-kind-icon">stroke<wbr/>Cap</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Shape.html#strokeDashArray" class="tsd-kind-icon">stroke<wbr/>Dash<wbr/>Array</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Shape.html#strokeDashOffset" class="tsd-kind-icon">stroke<wbr/>Dash<wbr/>Offset</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Shape.html#strokeJoin" class="tsd-kind-icon">stroke<wbr/>Join</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Shape.html#strokeMiterLimit" class="tsd-kind-icon">stroke<wbr/>Miter<wbr/>Limit</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Shape.html#strokeWidth" class="tsd-kind-icon">stroke<wbr/>Width</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Shape.html#toArrow" class="tsd-kind-icon">to<wbr/>Arrow</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 tsd-is-static"><a href="Shape.html#static-defineArrowheadGeometry" class="tsd-kind-icon">define<wbr/>Arrowhead<wbr/>Geometry</a></li><li class="tsd-kind-method tsd-parent-kind-class tsd-is-static"><a href="Shape.html#static-defineFigureGenerator" class="tsd-kind-icon">define<wbr/>Figure<wbr/>Generator</a></li><li class="tsd-kind-method tsd-parent-kind-class tsd-is-static"><a href="Shape.html#static-getArrowheadGeometries" class="tsd-kind-icon">get<wbr/>Arrowhead<wbr/>Geometries</a></li><li class="tsd-kind-method tsd-parent-kind-class tsd-is-static"><a href="Shape.html#static-getFigureGenerators" class="tsd-kind-icon">get<wbr/>Figure<wbr/>Generators</a></li></ul></section></div></section></section><section class="tsd-panel-group tsd-index-group tsd-is-inherited"><h2>Inherited Members</h2><section class="tsd-panel tsd-index-panel"><div class="tsd-index-content"><section class="tsd-index-section undefined"><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">Graph<wbr/>Object.action<wbr/>Cancel</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#actionDown" class="tsd-kind-icon">Graph<wbr/>Object.action<wbr/>Down</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#actionMove" class="tsd-kind-icon">Graph<wbr/>Object.action<wbr/>Move</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#actionUp" class="tsd-kind-icon">Graph<wbr/>Object.action<wbr/>Up</a></li><li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="GraphObject.html#actualBounds" class="tsd-kind-icon">Graph<wbr/>Object.actual<wbr/>Bounds</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#alignment" class="tsd-kind-icon">Graph<wbr/>Object.alignment</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#alignmentFocus" class="tsd-kind-icon">Graph<wbr/>Object.alignment<wbr/>Focus</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#angle" class="tsd-kind-icon">Graph<wbr/>Object.angle</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#background" class="tsd-kind-icon">Graph<wbr/>Object.background</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#click" class="tsd-kind-icon">Graph<wbr/>Object.click</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#column" class="tsd-kind-icon">Graph<wbr/>Object.column</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#columnSpan" class="tsd-kind-icon">Graph<wbr/>Object.column<wbr/>Span</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#contextClick" class="tsd-kind-icon">Graph<wbr/>Object.context<wbr/>Click</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#contextMenu" class="tsd-kind-icon">Graph<wbr/>Object.context<wbr/>Menu</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#cursor" class="tsd-kind-icon">Graph<wbr/>Object.cursor</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#desiredSize" class="tsd-kind-icon">Graph<wbr/>Object.desired<wbr/>Size</a></li><li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="GraphObject.html#diagram" class="tsd-kind-icon">Graph<wbr/>Object.diagram</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#doubleClick" class="tsd-kind-icon">Graph<wbr/>Object.double<wbr/>Click</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#enabledChanged" class="tsd-kind-icon">Graph<wbr/>Object.enabled<wbr/>Changed</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#fromEndSegmentLength" class="tsd-kind-icon">Graph<wbr/>Object.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">Graph<wbr/>Object.from<wbr/>Linkable</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#fromLinkableDuplicates" class="tsd-kind-icon">Graph<wbr/>Object.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">Graph<wbr/>Object.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">Graph<wbr/>Object.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">Graph<wbr/>Object.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">Graph<wbr/>Object.from<wbr/>Spot</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#height" class="tsd-kind-icon">Graph<wbr/>Object.height</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#isActionable" class="tsd-kind-icon">Graph<wbr/>Object.is<wbr/>Actionable</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#isPanelMain" class="tsd-kind-icon">Graph<wbr/>Object.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">Graph<wbr/>Object.layer</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#margin" class="tsd-kind-icon">Graph<wbr/>Object.margin</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#maxSize" class="tsd-kind-icon">Graph<wbr/>Object.max<wbr/>Size</a></li><li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="GraphObject.html#measuredBounds" class="tsd-kind-icon">Graph<wbr/>Object.measured<wbr/>Bounds</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#minSize" class="tsd-kind-icon">Graph<wbr/>Object.min<wbr/>Size</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#mouseDragEnter" class="tsd-kind-icon">Graph<wbr/>Object.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">Graph<wbr/>Object.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">Graph<wbr/>Object.mouse<wbr/>Drop</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#mouseEnter" class="tsd-kind-icon">Graph<wbr/>Object.mouse<wbr/>Enter</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#mouseHold" class="tsd-kind-icon">Graph<wbr/>Object.mouse<wbr/>Hold</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#mouseHover" class="tsd-kind-icon">Graph<wbr/>Object.mouse<wbr/>Hover</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#mouseLeave" class="tsd-kind-icon">Graph<wbr/>Object.mouse<wbr/>Leave</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#mouseOver" class="tsd-kind-icon">Graph<wbr/>Object.mouse<wbr/>Over</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#name" class="tsd-kind-icon">Graph<wbr/>Object.name</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#opacity" class="tsd-kind-icon">Graph<wbr/>Object.opacity</a></li><li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="GraphObject.html#panel" class="tsd-kind-icon">Graph<wbr/>Object.panel</a></li><li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="GraphObject.html#part" class="tsd-kind-icon">Graph<wbr/>Object.part</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#pickable" class="tsd-kind-icon">Graph<wbr/>Object.pickable</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#portId" class="tsd-kind-icon">Graph<wbr/>Object.port<wbr/>Id</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#position" class="tsd-kind-icon">Graph<wbr/>Object.position</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#row" class="tsd-kind-icon">Graph<wbr/>Object.row</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#rowSpan" class="tsd-kind-icon">Graph<wbr/>Object.row<wbr/>Span</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#scale" class="tsd-kind-icon">Graph<wbr/>Object.scale</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#segmentFraction" class="tsd-kind-icon">Graph<wbr/>Object.segment<wbr/>Fraction</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#segmentIndex" class="tsd-kind-icon">Graph<wbr/>Object.segment<wbr/>Index</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#segmentOffset" class="tsd-kind-icon">Graph<wbr/>Object.segment<wbr/>Offset</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#segmentOrientation" class="tsd-kind-icon">Graph<wbr/>Object.segment<wbr/>Orientation</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#shadowVisible" class="tsd-kind-icon">Graph<wbr/>Object.shadow<wbr/>Visible</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#stretch" class="tsd-kind-icon">Graph<wbr/>Object.stretch</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#toEndSegmentLength" class="tsd-kind-icon">Graph<wbr/>Object.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">Graph<wbr/>Object.to<wbr/>Linkable</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#toLinkableDuplicates" class="tsd-kind-icon">Graph<wbr/>Object.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">Graph<wbr/>Object.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">Graph<wbr/>Object.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">Graph<wbr/>Object.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">Graph<wbr/>Object.to<wbr/>Spot</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#toolTip" class="tsd-kind-icon">Graph<wbr/>Object.tool<wbr/>Tip</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#visible" class="tsd-kind-icon">Graph<wbr/>Object.visible</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#width" class="tsd-kind-icon">Graph<wbr/>Object.width</a></li></ul></section><section class="tsd-index-section undefined"><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">Graph<wbr/>Object.apply</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphObject.html#attach" class="tsd-kind-icon">Graph<wbr/>Object.attach</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphObject.html#bind" class="tsd-kind-icon">Graph<wbr/>Object.bind</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphObject.html#copy" class="tsd-kind-icon">Graph<wbr/>Object.copy</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphObject.html#findBindingPanel" class="tsd-kind-icon">Graph<wbr/>Object.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">Graph<wbr/>Object.get<wbr/>Document<wbr/>Angle</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphObject.html#getDocumentScale" class="tsd-kind-icon">Graph<wbr/>Object.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">Graph<wbr/>Object.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">Graph<wbr/>Object.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">Graph<wbr/>Object.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">Graph<wbr/>Object.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">Graph<wbr/>Object.set</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphObject.html#setProperties" class="tsd-kind-icon">Graph<wbr/>Object.set<wbr/>Properties</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphObject.html#trigger" class="tsd-kind-icon">Graph<wbr/>Object.trigger</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 tsd-is-overwrite"><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 tsd-is-overwrite"><li class="tsd-signature tsd-kind-icon">new <wbr/>Shape<span class="tsd-signature-symbol">(</span>figure<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">string</span>, init<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="Shape.html" class="tsd-signature-type" data-tsd-kind="Class">Shape</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Shape.html" class="tsd-signature-type" data-tsd-kind="Class">Shape</a></li><li class="tsd-signature tsd-kind-icon">new <wbr/>Shape<span class="tsd-signature-symbol">(</span>init<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="Shape.html" class="tsd-signature-type" data-tsd-kind="Class">Shape</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Shape.html" class="tsd-signature-type" data-tsd-kind="Class">Shape</a></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography"> <p>A newly constructed <a href="Shape.html">Shape</a> has a default <a href="Shape.html#figure">figure</a> of "None", which constructs a rectangular geometry, and is filled and stroked with a black brush.</p> <div><p>Common usage:</p> <pre><code class="language-js"><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">Shape</span><span class="hl-2">(</span><span class="hl-6">"RoundedRectangle"</span><span class="hl-2">, {</span><br/><span class="hl-2"> </span><span class="hl-4">strokeWidth:</span><span class="hl-2"> </span><span class="hl-7">2</span><span class="hl-2">,</span><br/><span class="hl-2"> </span><span class="hl-4">stroke:</span><span class="hl-2"> </span><span class="hl-6">"red"</span><span class="hl-2">,</span><br/><span class="hl-2"> </span><span class="hl-4">fill:</span><span class="hl-2"> </span><span class="hl-6">"yellow"</span><br/><span class="hl-2">})</span> </code></pre> <p>Or when using a custom <a href="Shape.html#geometryString">geometryString</a> instead of a <a href="Shape.html#figure">figure</a>:</p> <pre><code class="language-js"><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">Shape</span><span class="hl-2">({</span><br/><span class="hl-2"> </span><span class="hl-4">fill:</span><span class="hl-2"> </span><span class="hl-6">"red"</span><span class="hl-2">,</span><br/><span class="hl-2"> </span><span class="hl-4">stroke:</span><span class="hl-2"> </span><span class="hl-1">null</span><span class="hl-2">,</span><br/><span class="hl-2"> </span><span class="hl-4">width:</span><span class="hl-2"> </span><span class="hl-7">100</span><span class="hl-2">,</span><br/><span class="hl-2"> </span><span class="hl-4">height:</span><span class="hl-2"> </span><span class="hl-7">100</span><span class="hl-2">,</span><br/><span class="hl-2"> </span><span class="hl-0">// This SVG-style path creates a thick "+" figure:</span><br/><span class="hl-2"> </span><span class="hl-4">geometryString:</span><span class="hl-2"> </span><span class="hl-6">"F M2 1 h1 v1 h1 v1 h-1 v1 h-1 v-1 h-1 v-1 h1 z"</span><br/><span class="hl-2">})</span> </code></pre> <p>Also common is to set some or all of the Shape properties dynamically, in the Node data, by way of bindings:</p> <pre><code class="language-js"><span class="hl-0">// A Node used as the node template, holding a single shape</span><br/><span class="hl-0">// The shape has many bindings</span><br/><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-1">new</span><span class="hl-2"> </span><span class="hl-4">go</span><span class="hl-2">.</span><span class="hl-5">Node</span><span class="hl-2">(</span><span class="hl-6">"Horizontal"</span><span class="hl-2">)</span><br/><span class="hl-2"> .</span><span class="hl-5">add</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">Shape</span><span class="hl-2">()</span><br/><span class="hl-2"> .</span><span class="hl-5">bind</span><span class="hl-2">(</span><span class="hl-6">"width"</span><span class="hl-2">)</span><br/><span class="hl-2"> .</span><span class="hl-5">bind</span><span class="hl-2">(</span><span class="hl-6">"height"</span><span class="hl-2">)</span><br/><span class="hl-2"> .</span><span class="hl-5">bind</span><span class="hl-2">(</span><span class="hl-6">"fill"</span><span class="hl-2">, </span><span class="hl-6">"color"</span><span class="hl-2">) </span><span class="hl-0">// binds the data.color to shape.fill</span><br/><span class="hl-2"> .</span><span class="hl-5">bind</span><span class="hl-2">(</span><span class="hl-6">"figure"</span><span class="hl-2">));</span><br/><br/><span class="hl-0">// It could be used with model data like this:</span><br/><span class="hl-4">myDiagram</span><span class="hl-2">.</span><span class="hl-4">model</span><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">GraphLinksModel</span><span class="hl-2">(</span><br/><span class="hl-2"> [</span><br/><span class="hl-2"> { </span><span class="hl-4">key:</span><span class="hl-2"> </span><span class="hl-6">"1"</span><span class="hl-2">, </span><span class="hl-4">width:</span><span class="hl-2"> </span><span class="hl-7">150</span><span class="hl-2">, </span><span class="hl-4">height:</span><span class="hl-2"> </span><span class="hl-7">150</span><span class="hl-2">, </span><span class="hl-4">color:</span><span class="hl-2"> </span><span class="hl-6">"red"</span><span class="hl-2">, </span><span class="hl-4">figure:</span><span class="hl-2"> </span><span class="hl-6">"Triangle"</span><span class="hl-2"> },</span><br/><span class="hl-2"> { </span><span class="hl-4">key:</span><span class="hl-2"> </span><span class="hl-6">"2"</span><span class="hl-2">, </span><span class="hl-4">width:</span><span class="hl-2"> </span><span class="hl-7">24</span><span class="hl-2">, </span><span class="hl-4">height:</span><span class="hl-2"> </span><span class="hl-7">24</span><span class="hl-2">, </span><span class="hl-4">color:</span><span class="hl-2"> </span><span class="hl-6">"blue"</span><span class="hl-2">, </span><span class="hl-4">figure:</span><span class="hl-2"> </span><span class="hl-6">"Roundedrectangle"</span><span class="hl-2"> }</span><br/><span class="hl-2"> ]);</span> </code></pre> </div></div><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5><span class="tsd-flag ts-flagOptional">Optional</span> figure: <span class="tsd-signature-type">string</span></h5><div class="tsd-comment tsd-typography"> <p>The shape's figure, a predefined geometry. If no geometry is set then shapes will use the default figure of "None", a rectangle. Common values are "Rectangle", "Ellipse", "RoundedRectangle".</p> </div></li><li><h5><span class="tsd-flag ts-flagOptional">Optional</span> init: <span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="Shape.html" class="tsd-signature-type" data-tsd-kind="Class">Shape</a><span class="tsd-signature-symbol">></span></h5><div class="tsd-comment tsd-typography"> <p>Optional initialization properties.</p> </div></li></ul><h4 class="tsd-returns-title">Returns <a href="Shape.html" class="tsd-signature-type" data-tsd-kind="Class">Shape</a></h4></li><li class="tsd-description"><div class="tsd-comment tsd-typography"> <p>A newly constructed <a href="Shape.html">Shape</a> has a default <a href="Shape.html#figure">figure</a> of "None", which constructs a rectangular geometry, and is filled and stroked with a black brush.</p> </div><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5><span class="tsd-flag ts-flagOptional">Optional</span> init: <span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="Shape.html" class="tsd-signature-type" data-tsd-kind="Class">Shape</a><span class="tsd-signature-symbol">></span></h5><div class="tsd-comment tsd-typography"> <p>Optional initialization properties.</p> </div></li></ul><h4 class="tsd-returns-title">Returns <a href="Shape.html" class="tsd-signature-type" data-tsd-kind="Class">Shape</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="figure" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> figure<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><a href="#figure" 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 figure name, used to construct a <a href="Geometry.html">Geometry</a>. The value must be a string. The default value is "None".</p> <div><p>The name can be any case but will always be canonicalized when set. For instance, setting "roundedrectangle" will set the value of figure to "RoundedRectangle". All of the predefined figures are shown in the <a href="../../samples/shapes.html">Shapes sample</a>.</p> <p>At most one of the following three properties may be set to a non-"None" value at the same time on the same shape: <a href="Shape.html#figure">figure</a>, <a href="Shape.html#toArrow">toArrow</a>, <a href="Shape.html#fromArrow">fromArrow</a>.</p> <p>You can define your own named figures by calling the static function <a href="Shape.html#static-defineFigureGenerator">Shape.defineFigureGenerator</a>.</p> </div></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="fill" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> fill<span class="tsd-signature-symbol">: </span><a href="../index.html#BrushLike" class="tsd-signature-type" data-tsd-kind="Type alias">BrushLike</a><a href="#fill" 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 <a href="Brush.html">Brush</a> or string that describes how the geometry is filled when drawn.</p> <div><p>The default value is "black", causing the shape to be filled with solid black. Any valid CSS string can specify a solid color, and the <a href="Brush.html">Brush</a> class can be used to specify a gradient or pattern. A null fill will mean no fill is drawn and the filled portion of the Shape will not be pickable. A "transparent" fill is useful when wanting to allow a shape to be pickable without obscuring any other objects behind it. More information about the syntax of CSS color strings is available at: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color">CSS colors (mozilla.org)</a>.</p> <p>The geometry is filled before the <a href="Shape.html#stroke">stroke</a> is drawn.</p> </div></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="fromArrow" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> from<wbr/>Arrow<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><a href="#fromArrow" 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 name of the kind of arrowhead that this shape should take when this shape is an element of a <a href="Link.html">Link</a>. Value must be a string. For bi-directional links the arrowhead name often starts with "Backward...".</p> <div><p>The default is "None", which means that this Shape is not an arrowhead, causing it to be the default Shape, a large filled Rectangle. If you want to have an arrowhead Shape but sometimes not show an arrowhead, you can set or bind the <a href="GraphObject.html#visible">GraphObject.visible</a> property, or you can set or bind this "toArrow" property to be the empty string. The arrowhead named "", an empty string, will display as nothing.</p> <p>The name can be any case but will always be canonicalized when set. For instance, setting "opentriangle" will set the value of the arrowhead to "OpenTriangle". All of the predefined arrowheads are shown in the <a href="../../samples/arrowheads.html">Arrowheads sample</a>.</p> <p>Setting this property may also set the <a href="GraphObject.html#segmentIndex">GraphObject.segmentIndex</a>, <a href="GraphObject.html#segmentOrientation">GraphObject.segmentOrientation</a>, and <a href="GraphObject.html#alignmentFocus">GraphObject.alignmentFocus</a> properties. This shape should be an element of a <a href="Link.html">Link</a>.</p> <p>At most one of the following three properties may be set to a non-"None" value at the same time on the same shape: <a href="Shape.html#figure">figure</a>, <a href="Shape.html#toArrow">toArrow</a>, <a href="Shape.html#fromArrow">fromArrow</a>.</p> <p>You can define your own named arrowheads by calling the static function <a href="Shape.html#static-defineArrowheadGeometry">Shape.defineArrowheadGeometry</a>.</p> <p>You can see a copy of all of the built-in arrowhead definitions in this file: <a href="../../extensions/Arrowheads.js">Arrowheads.js</a>.</p> </div></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="geometry" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> geometry<span class="tsd-signature-symbol">: </span><a href="Geometry.html" class="tsd-signature-type" data-tsd-kind="Class">Geometry</a><a href="#geometry" 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 Shape's <a href="Geometry.html">Geometry</a> that defines the Shape's figure. Setting a geometry is not necessary if a <a href="Shape.html#figure">figure</a> is specified, as that will construct a geometry instead.</p> <div><p>Setting this geometry property will freeze the supplied Geometry.</p> <p>Setting this geometry property always overrides any set figure. The default value is null.</p> </div><dl class="tsd-comment-tags"><dt class="">see</dt><dd><p><a href="Shape.html#geometryString">geometryString</a></p> </dd></dl></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="geometryStretch" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> geometry<wbr/>Stretch<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span><a href="#geometryStretch" 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 how the shape's geometry is proportionally created given its computed size. Possible values are <a href="GraphObject.html#static-None">GraphObject.None</a>, <a href="GraphObject.html#static-Fill">GraphObject.Fill</a>, <a href="GraphObject.html#static-Uniform">GraphObject.Uniform</a>, and <a href="GraphObject.html#static-Default">GraphObject.Default</a>. The default is <a href="GraphObject.html#static-Default">GraphObject.Default</a>, which resolves to <a href="GraphObject.html#static-Fill">GraphObject.Fill</a> for most figures, though some regular figures such as "Circle" and "Square" default to <a href="GraphObject.html#static-Uniform">GraphObject.Uniform</a>.</p> </div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="geometryString" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> geometry<wbr/>String<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><a href="#geometryString" 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="curr