markgojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
1,529 lines (529 loc) • 87.1 kB
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>GoJS® Shape Class</title>
<script src="../../assets/js/jquery.min.js"></script>
<script src="../../assets/js/bootstrap.min.js"></script>
<script src="../../assets/js/highlight.js"></script>
<script src="../../assets/js/api.js"></script>
<script src="../../assets/js/fuse.min.js"></script>
<link href="../../assets/css/bootstrap.min.css" rel="stylesheet" >
<!-- custom CSS after bootstrap -->
<link href="../../assets/css/main.css" rel="stylesheet" type="text/css"/>
<link href="../../assets/css/api.css" rel="stylesheet" type="text/css"/>
<!--<link rel="stylesheet" href="../../assets/css/api.css" type="text/css" media="all" />-->
<link rel="stylesheet" href="../../assets/css/highlight.css" type="text/css" media="all" />
</head>
<body>
<!-- non-fixed navbar -->
<nav id="non-fixed-nav" class="navbar navbar-inverse navbar-top">
<div class="container-fluid">
<div class="navbar-header">
<div class="navheader-container">
<div class="navheader-collapse" data-toggle="collapse" data-target="#navbar">
<a id="toplogo" class="navbar-brand" href="../../index.html">GoJS</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="../../index.html">Home</a></li>
<li><a href="../../learn/index.html">Learn</a></li>
<li><a href="../../samples/index.html">Samples</a></li>
<li><a href="../../intro/index.html">Intro</a></li>
<li><a href="../../api/index.html">API</a></li>
<li><a href="https://www.nwoods.com/components/evalform.htm">Register</a></li>
<li><a href="../../download.html">Download</a></li>
<li><a href="https://forum.nwoods.com/c/gojs">Forum</a></li>
<li><a href="https://www.nwoods.com/contact.html" onclick="ga('send','event','Outbound Link','click','contact');">Contact</a></li>
<li class="buy"><a href="https://www.nwoods.com/sales/index.html" onclick="ga('send','event','Outbound Link','click','buy');">Buy</a></li>
<li class="activate"><a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container-fluid">
<!-- ============================== classes index ============================ -->
<div id="navindex" class="col-md-2">
<!-- begin publish.classesIndex -->
<!-- <div><a href="../index.html">GoJS Class Index</a></div> -->
<div class="sidebar-nav">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<div class="navheader-container">
<div class="navheader-collapse" data-toggle="collapse" data-target="#DiagramNavbar">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#DiagramNavbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<span class="navbar-brand">Diagram Classes</span>
</div>
</div>
<div id="DiagramNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="classList nav navbar-nav">
<li><a href="../symbols/Adornment.html" class="linkConstructor">Adornment</a></li>
<li><a href="../symbols/AnimationManager.html" class="linkConstructor">AnimationManager</a></li>
<li><a href="../symbols/CommandHandler.html" class="linkConstructor">CommandHandler</a></li>
<li><a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a></li>
<li><a href="../symbols/DiagramEvent.html" class="linkConstructor">DiagramEvent</a></li>
<li><a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a></li>
<li><a href="../symbols/Group.html" class="linkConstructor">Group</a></li>
<li><a href="../symbols/InputEvent.html" class="linkConstructor">InputEvent</a></li>
<li><a href="../symbols/Layer.html" class="linkConstructor">Layer</a></li>
<li><a href="../symbols/Link.html" class="linkConstructor">Link</a></li>
<li><a href="../symbols/Node.html" class="linkConstructor">Node</a></li>
<li><a href="../symbols/Overview.html" class="linkConstructor">Overview</a></li>
<li><a href="../symbols/Palette.html" class="linkConstructor">Palette</a></li>
<li><a href="../symbols/Panel.html" class="linkConstructor">Panel</a></li>
<li><a href="../symbols/Part.html" class="linkConstructor">Part</a></li>
<li><a href="../symbols/Picture.html" class="linkConstructor">Picture</a></li>
<li><a href="../symbols/Placeholder.html" class="linkConstructor">Placeholder</a></li>
<li><a href="../symbols/RowColumnDefinition.html" class="linkConstructor">RowColumnDefinition</a></li>
<li><a href="../symbols/Shape.html" class="linkConstructor">Shape</a></li>
<li><a href="../symbols/TextBlock.html" class="linkConstructor">TextBlock</a></li>
</ul>
</div>
</div>
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<div class="navheader-container">
<div class="navheader-collapse" data-toggle="collapse" data-target="#GeometryNavbar">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#GeometryNavbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<span class="navbar-brand">Geometry Classes</span>
</div>
</div>
<div id="GeometryNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="classList nav navbar-nav">
<li><a href="../symbols/Brush.html" class="linkConstructor">Brush</a></li>
<li><a href="../symbols/Geometry.html" class="linkConstructor">Geometry</a></li>
<li><a href="../symbols/Margin.html" class="linkConstructor">Margin</a></li>
<li><a href="../symbols/PathFigure.html" class="linkConstructor">PathFigure</a></li>
<li><a href="../symbols/PathSegment.html" class="linkConstructor">PathSegment</a></li>
<li><a href="../symbols/Point.html" class="linkConstructor">Point</a></li>
<li><a href="../symbols/Rect.html" class="linkConstructor">Rect</a></li>
<li><a href="../symbols/Size.html" class="linkConstructor">Size</a></li>
<li><a href="../symbols/Spot.html" class="linkConstructor">Spot</a></li>
</ul>
</div>
</div>
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<div class="navheader-container">
<div class="navheader-collapse" data-toggle="collapse" data-target="#ModelNavbar">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ModelNavbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<span class="navbar-brand">Model Classes</span>
</div>
</div>
<div id="ModelNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="classList nav navbar-nav">
<li><a href="../symbols/Binding.html" class="linkConstructor">Binding</a></li>
<li><a href="../symbols/ChangedEvent.html" class="linkConstructor">ChangedEvent</a></li>
<li><a href="../symbols/GraphLinksModel.html" class="linkConstructor">GraphLinksModel</a></li>
<li><a href="../symbols/Model.html" class="linkConstructor">Model</a></li>
<li><a href="../symbols/Transaction.html" class="linkConstructor">Transaction</a></li>
<li><a href="../symbols/TreeModel.html" class="linkConstructor">TreeModel</a></li>
<li><a href="../symbols/UndoManager.html" class="linkConstructor">UndoManager</a></li>
</ul>
</div>
</div>
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<div class="navheader-container">
<div class="navheader-collapse" data-toggle="collapse" data-target="#LayoutNavbar">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#LayoutNavbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<span class="navbar-brand">Layout Classes</span>
</div>
</div>
<div id="LayoutNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="classList nav navbar-nav">
<li><a href="../symbols/CircularLayout.html" class="linkConstructor">CircularLayout</a></li>
<li><a href="../symbols/ForceDirectedLayout.html" class="linkConstructor">ForceDirectedLayout</a></li>
<li><a href="../symbols/GridLayout.html" class="linkConstructor">GridLayout</a></li>
<li><a href="../symbols/LayeredDigraphLayout.html" class="linkConstructor">LayeredDigraphLayout</a></li>
<li><a href="../symbols/Layout.html" class="linkConstructor">Layout</a></li>
<li><a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a></li>
<li><a href="../symbols/TreeLayout.html" class="linkConstructor">TreeLayout</a></li>
</ul>
</div>
</div>
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<div class="navheader-container">
<div class="navheader-collapse" data-toggle="collapse" data-target="#ToolNavbar">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ToolNavbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<span class="navbar-brand">Tool Classes</span>
</div>
</div>
<div id="ToolNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="classList nav navbar-nav">
<li><a href="../symbols/ActionTool.html" class="linkConstructor">ActionTool</a></li>
<li><a href="../symbols/ClickCreatingTool.html" class="linkConstructor">ClickCreatingTool</a></li>
<li><a href="../symbols/ClickSelectingTool.html" class="linkConstructor">ClickSelectingTool</a></li>
<li><a href="../symbols/ContextMenuTool.html" class="linkConstructor">ContextMenuTool</a></li>
<li><a href="../symbols/DraggingTool.html" class="linkConstructor">DraggingTool</a></li>
<li><a href="../symbols/DragSelectingTool.html" class="linkConstructor">DragSelectingTool</a></li>
<li><a href="../symbols/HTMLInfo.html" class="linkConstructor">HTMLInfo</a></li>
<li><a href="../symbols/LinkingBaseTool.html" class="linkConstructor">LinkingBaseTool</a></li>
<li><a href="../symbols/LinkingTool.html" class="linkConstructor">LinkingTool</a></li>
<li><a href="../symbols/LinkReshapingTool.html" class="linkConstructor">LinkReshapingTool</a></li>
<li><a href="../symbols/PanningTool.html" class="linkConstructor">PanningTool</a></li>
<li><a href="../symbols/RelinkingTool.html" class="linkConstructor">RelinkingTool</a></li>
<li><a href="../symbols/ResizingTool.html" class="linkConstructor">ResizingTool</a></li>
<li><a href="../symbols/RotatingTool.html" class="linkConstructor">RotatingTool</a></li>
<li><a href="../symbols/TextEditingTool.html" class="linkConstructor">TextEditingTool</a></li>
<li><a href="../symbols/Tool.html" class="linkConstructor">Tool</a></li>
<li><a href="../symbols/ToolManager.html" class="linkConstructor">ToolManager</a></li>
</ul>
</div>
</div>
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<div class="navheader-container">
<div class="navheader-collapse" data-toggle="collapse" data-target="#CollectionNavbar">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#CollectionNavbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<span class="navbar-brand">Collection Classes</span>
</div>
</div>
<div id="CollectionNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="classList nav navbar-nav">
<li><a href="../symbols/Iterable.html" class="linkConstructor">Iterable</a></li>
<li><a href="../symbols/Iterator.html" class="linkConstructor">Iterator</a></li>
<li><a href="../symbols/List.html" class="linkConstructor">List</a></li>
<li><a href="../symbols/Map.html" class="linkConstructor">Map</a></li>
<li><a href="../symbols/Set.html" class="linkConstructor">Set</a></li>
</ul>
</div>
</div>
</div> <!-- /class="sidebar-nav -->
<!-- end publish.classesIndex -->
</div>
<div id="contentBody" class="col-md-10">
<div class="searchsumm">
<div class="table-wrap">
<div class="table-cell" id="apisearch" data-base="../">
<div class="title">Search API</div>
<div class="field">
<label for="search-field" class="search-icon"></label>
<input id="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>
</div>
<div class="table-cell" id="apisumm">
<input type="checkbox" id="showsumms" />
<label class="apisumms" for="showsumms">Show Summaries</label>
</div>
</div>
</div>
<!-- ============================== header ================================= -->
<div id="header" class="fineprint">
<b>GoJS</b>® Diagramming Components<br/>version 1.8.36 for JavaScript/HTML<br/>by <a href="https://www.nwoods.com/">Northwoods Software®</a>
</div>
<!-- ============================== class title ============================ -->
<h2 class="classTitle">
Class Shape
</h2>
<!-- ============================== class summary ========================== -->
<p class="classsummary">
<span class="extends"> Extends
<a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>.</span>
A Shape is a <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a> that shows a geometric figure.
The <a href="../symbols/Geometry.html" class="linkConstructor">Geometry</a> determines what is drawn;
the properties <a href="../symbols/Shape.html#fill" class="linkProperty">fill</a> and <a href="../symbols/Shape.html#stroke" class="linkProperty">stroke</a>
(and other stroke properties) determine how it is drawn.
<p>
There are generally two types of shapes: Those that use a custom <a href="../symbols/Geometry.html" class="linkConstructor">Geometry</a> by setting
<a href="../symbols/Shape.html#geometry" class="linkProperty">Shape.geometry</a>, and those that receive an automatically generated Geometry using the value of
<a href="../symbols/Shape.html#figure" class="linkProperty">figure</a>, <a href="../symbols/Shape.html#toArrow" class="linkProperty">toArrow</a>, or <a href="../symbols/Shape.html#fromArrow" class="linkProperty">fromArrow</a>. An explicitly set Geometry always supersedes
the figure and arrowhead properties.
<p>
Some created Shapes:
<pre>var $ = go.GraphObject.make; // for conciseness in defining GraphObjects
// A shape with the figure set to RoundedRectangle:
$(go.Shape, { figure: "RoundedRectangle", fill: "lightgreen" })
// Alternatively:
$(go.Shape, "RoundedRectangle", { fill: "lightgreen" })
// A shape with a custom geometry, using geometryString:
$(go.Shape,
{ geometry: go.Geometry.parse("M120 0 L80 80 0 50z") })
// A shape with a custom geometry, using geometryString:
$(go.Shape,
{ geometryString: "F M120 0 L80 80 0 50z",
fill: "lightgreen" })
// A common link template, using two shapes,
// the first for the link path and the second for the arrowhead
myDiagram.linkTemplate =
$(go.Link,
// The first shape in a link is special, its geometry is set by the Link's routing,
// so it does not need a geometry or figure set manually
$(go.Shape,
{ strokeWidth: 2, stroke: 'gray' }),
$(go.Shape,
{ toArrow: "Standard", fill: 'gray', stroke: null })
);</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="../symbols/Geometry.html" class="linkConstructor">Geometry</a>, the value of <a href="../symbols/Shape.html#toArrow" class="linkProperty">toArrow</a> takes precedence,
then <a href="../symbols/Shape.html#fromArrow" class="linkProperty">fromArrow</a>, then <a href="../symbols/Shape.html#figure" class="linkProperty">figure</a>. If the value of <a href="../symbols/Shape.html#toArrow" class="linkProperty">toArrow</a> or <a href="../symbols/Shape.html#fromArrow" class="linkProperty">fromArrow</a> is "None"
then it is ignored, and the "None" value of <a href="../symbols/Shape.html#figure" class="linkProperty">figure</a> is identical to "Rectangle".
<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="../symbols/Shape.html#.defineFigureGenerator" class="linkStatic">Shape.defineFigureGenerator</a>.
Get a <a href="../symbols/Map.html" class="linkConstructor">Map</a> of named figures by calling the static function <a href="../symbols/Shape.html#.getFigureGenerators" class="linkStatic">Shape.getFigureGenerators</a>.
<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="../symbols/Shape.html#.defineArrowheadGeometry" class="linkStatic">Shape.defineArrowheadGeometry</a>.
Get a <a href="../symbols/Map.html" class="linkConstructor">Map</a> of named arrowheads by calling the static function <a href="../symbols/Shape.html#.getArrowheadGeometries" class="linkStatic">Shape.getArrowheadGeometries</a>.
<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>
The Shape properties <a href="../symbols/Shape.html#parameter1" class="linkProperty">parameter1</a>, and <a href="../symbols/Shape.html#parameter2" class="linkProperty">parameter2</a> determine details of the
construction of some <a href="../symbols/Shape.html#figure" class="linkProperty">figure</a> geometries.
Specifically, they often set the <a href="../symbols/Shape.html#spot1" class="linkProperty">spot1</a>, <a href="../symbols/Shape.html#spot2" class="linkProperty">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>
Shapes use their geometric bounds when determining hit testing,
but use rectangular bounds when participating in (panel) layouts.
</p>
<!-- ============================== constructor summary ==================== -->
<h2 id="constructor" class="summaryCaption"> Constructor <span class="nodetails"> Summary</span><span class="details"> Details</span></h2>
<div class="table-responsive">
<table class="summaryTable table table-bordered table-condensed" summary="A summary of the constructor documented in the class Shape.">
<thead>
<tr>
<th scope="col" class="name">Name</th>
<th scope="col" class="description">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name" >
<div class="name">
Shape()
</div>
</td>
<td class="description">
<div class="description">
<!--newp--><p><p>A newly constructed <a href="../symbols/Shape.html" class="linkConstructor">Shape</a> has a default <a href="../symbols/Shape.html#figure" class="linkProperty">figure</a> of "None",
which constructs a rectangular geometry, and is filled and stroked with a black brush.
</div>
</td>
</tr>
</tbody>
</table>
</div><!-- class="table-responsive">-->
<!-- ============================== properties summary ===================== -->
<h2 class="summaryCaption">Properties<span class="nodetails"> Summary</span><span class="details"> Details</span></h2>
<div class="table-responsive">
<table class="summaryTable table table-bordered table-condensed" summary="A summary of the properties documented in the class Shape.">
<thead>
<tr>
<th scope="col" class="name">Name, Value Type</th>
<th scope="col" class="description">Description</th>
</tr>
</thead>
<tbody>
<tr id="figure" >
<td class="name">
<div class="name">
figure
</div>
<div class="attributes">
<span class="light">{string}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>Gets or sets the figure name, used to construct a <a href="../symbols/Geometry.html" class="linkConstructor">Geometry</a>.<span class="nodetails" id="xpropfigure"><a class="morelink" onclick="hst('propfigure')">More...</a></span> <span class="details" id="propfigure">
The value must be a string. The default value is "None".
</span><div class="details" id="dpropfigure"><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>
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="../symbols/Shape.html#figure" class="linkProperty">figure</a>, <a href="../symbols/Shape.html#toArrow" class="linkProperty">toArrow</a>, <a href="../symbols/Shape.html#fromArrow" class="linkProperty">fromArrow</a>.
<p>
You can define your own named figures by calling the static function <a href="../symbols/Shape.html#.defineFigureGenerator" class="linkStatic">Shape.defineFigureGenerator</a>.</div>
</div>
</td>
</tr>
<tr id="fill" >
<td class="name">
<div class="name">
fill
</div>
<div class="attributes">
<span class="light">{string|<a href="../symbols/Brush.html" class="linkConstructor">Brush</a>}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>Gets or sets the <a href="../symbols/Brush.html" class="linkConstructor">Brush</a> or string that describes how the geometry is filled when drawn.<span class="nodetails" id="xpropfill"><a class="morelink" onclick="hst('propfill')">More...</a></span> <span class="details" id="propfill">
</span><div class="details" id="dpropfill"><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="../symbols/Brush.html" class="linkConstructor">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>
The geometry is filled before the <a href="../symbols/Shape.html#stroke" class="linkProperty">stroke</a> is drawn.</div>
</div>
</td>
</tr>
<tr id="fromArrow" >
<td class="name">
<div class="name">
fromArrow
</div>
<div class="attributes">
<span class="light">{string}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<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="../symbols/Link.html" class="linkConstructor">Link</a>.<span class="nodetails" id="xpropfromArrow"><a class="morelink" onclick="hst('propfromArrow')">More...</a></span> <span class="details" id="propfromArrow">
Value must be a string.
For bi-directional links the arrowhead name often starts with "Backward...".
</span><div class="details" id="dpropfromArrow"><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="../symbols/GraphObject.html#visible" class="linkProperty">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>
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>
Setting this property may also set the <a href="../symbols/GraphObject.html#segmentIndex" class="linkProperty">GraphObject.segmentIndex</a>,
<a href="../symbols/GraphObject.html#segmentOrientation" class="linkProperty">GraphObject.segmentOrientation</a>, and <a href="../symbols/GraphObject.html#alignmentFocus" class="linkProperty">GraphObject.alignmentFocus</a> properties.
This shape should be an element of a <a href="../symbols/Link.html" class="linkConstructor">Link</a>.
<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="../symbols/Shape.html#figure" class="linkProperty">figure</a>, <a href="../symbols/Shape.html#toArrow" class="linkProperty">toArrow</a>, <a href="../symbols/Shape.html#fromArrow" class="linkProperty">fromArrow</a>.
<p>
You can define your own named arrowheads by calling the static function <a href="../symbols/Shape.html#.defineArrowheadGeometry" class="linkStatic">Shape.defineArrowheadGeometry</a>.
<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>.</div>
</div>
</td>
</tr>
<tr id="geometry" >
<td class="name">
<div class="name">
geometry
</div>
<div class="attributes">
<span class="light">{<a href="../symbols/Geometry.html" class="linkConstructor">Geometry</a>}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>Gets or sets the Shape's <a href="../symbols/Geometry.html" class="linkConstructor">Geometry</a> that defines the Shape's figure.<span class="nodetails" id="xpropgeometry"><a class="morelink" onclick="hst('propgeometry')">More...</a></span> <span class="details" id="propgeometry">
Setting a geometry is not necessary if a <a href="../symbols/Shape.html#figure" class="linkProperty">figure</a> is specified,
as that will construct a geometry instead.
</span><div class="details" id="dpropgeometry"><p>
Setting this geometry property will freeze the supplied Geometry.
<p>
Setting this geometry property always overrides any set figure.
The default value is null.</div>
<div class="seealso">See also:
<ul class="seealsolist">
<li><a href="../symbols/Shape.html#geometryString" class="linkProperty">geometryString</a></li>
</ul>
</div>
</div>
</td>
</tr>
<tr id="geometryStretch" >
<td class="name">
<div class="name">
geometryStretch
</div>
<div class="attributes">
<span class="light">{EnumValue}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>Gets or sets how the shape's geometry is proportionally created given its computed size.<span class="nodetails" id="xpropgeometryStretch"><a class="morelink" onclick="hst('propgeometryStretch')">More...</a></span> <span class="details" id="propgeometryStretch">
Possible values are <a href="../symbols/GraphObject.html#None" class="linkConstant">GraphObject.None</a>, <a href="../symbols/GraphObject.html#Fill" class="linkConstant">GraphObject.Fill</a>, <a href="../symbols/GraphObject.html#Uniform" class="linkConstant">GraphObject.Uniform</a>, and <a href="../symbols/GraphObject.html#Default" class="linkConstant">GraphObject.Default</a>.
The default is <a href="../symbols/GraphObject.html#Default" class="linkConstant">GraphObject.Default</a>, which resolves to <a href="../symbols/GraphObject.html#Fill" class="linkConstant">GraphObject.Fill</a> for most figures, though
some regular figures such as "Circle" and "Square" default to <a href="../symbols/GraphObject.html#Uniform" class="linkConstant">GraphObject.Uniform</a>.</span>
</div>
</td>
</tr>
<tr id="geometryString" >
<td class="name">
<div class="name">
geometryString
</div>
<div class="attributes">
<span class="light">{string}</span>
<span class="since" title="since">1.1</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>When set, creates a <a href="../symbols/Geometry.html" class="linkConstructor">Geometry</a> and normalizes it from a given path string,
then sets the <a href="../symbols/Shape.html#geometry" class="linkProperty">geometry</a> property on this Shape and
set the <a href="../symbols/GraphObject.html#position" class="linkProperty">GraphObject.position</a> to the amount computed by normalization.<span class="nodetails" id="xpropgeometryString"><a class="morelink" onclick="hst('propgeometryString')">More...</a></span> <span class="details" id="propgeometryString">
The property getter simply returns the toString value of the <a href="../symbols/Shape.html#geometry" class="linkProperty">geometry</a>,
or the empty string if there is no Geometry value.
</span><div class="details" id="dpropgeometryString"><p>
See the <a href="../../intro/geometry.html">Geometry Path Strings Introduction page</a> for examples.</div>
</div>
</td>
</tr>
<tr id="graduatedEnd" >
<td class="name">
<div class="name">
graduatedEnd
</div>
<div class="attributes">
<span class="light">{number}</span>
<span class="since" title="since">1.7</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>Gets or sets the fractional distance along the main shape of a "Graduated" <a href="../symbols/Panel.html" class="linkConstructor">Panel</a> at which this kind of tick should end.<span class="nodetails" id="xpropgraduatedEnd"><a class="morelink" onclick="hst('propgraduatedEnd')">More...</a></span> <span class="details" id="propgraduatedEnd">
The default is 1. Any new value should range from 0 to 1.</span>
</div>
</td>
</tr>
<tr id="graduatedStart" >
<td class="name">
<div class="name">
graduatedStart
</div>
<div class="attributes">
<span class="light">{number}</span>
<span class="since" title="since">1.7</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>Gets or sets the fractional distance along the main shape of a "Graduated" <a href="../symbols/Panel.html" class="linkConstructor">Panel</a> at which this kind of tick should start.<span class="nodetails" id="xpropgraduatedStart"><a class="morelink" onclick="hst('propgraduatedStart')">More...</a></span> <span class="details" id="propgraduatedStart">
The default is 0. Any new value should range from 0 to 1.</span>
</div>
</td>
</tr>
<tr id="interval" >
<td class="name">
<div class="name">
interval
</div>
<div class="attributes">
<span class="light">{number}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>Gets or sets how frequently this shape should be drawn within a "Grid" or "Graduated" <a href="../symbols/Panel.html" class="linkConstructor">Panel</a>,
in multiples of the <a href="../symbols/Panel.html#gridCellSize" class="linkProperty">Panel.gridCellSize</a> or <a href="../symbols/Panel.html#graduatedTickUnit" class="linkProperty">Panel.graduatedTickUnit</a>.<span class="nodetails" id="xpropinterval"><a class="morelink" onclick="hst('propinterval')">More...</a></span> <span class="details" id="propinterval">
The default is 1. Any new value must be a positive integer.</span>
</div>
</td>
</tr>
<tr id="isGeometryPositioned" >
<td class="name">
<div class="name">
isGeometryPositioned
</div>
<div class="attributes">
<span class="light">{boolean}</span>
<span class="since" title="since">1.1</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>Gets or sets the whether the <a href="../symbols/GraphObject.html#position" class="linkProperty">GraphObject.position</a> of this shape denotes
the top-left corner of this shape in panel coordinates or the origin of this geometry's coordinate system.<span class="nodetails" id="xpropisGeometryPositioned"><a class="morelink" onclick="hst('propisGeometryPositioned')">More...</a></span> <span class="details" id="propisGeometryPositioned">
Basically, this determines whether the <a href="../symbols/Shape.html#strokeWidth" class="linkProperty">strokeWidth</a> affects the rendered location.
A true value allows multiple shapes to be positioned precisely in a "Position" Panel independent of the stroke width.
The default is false.</span>
</div>
</td>
</tr>
<tr id="naturalBounds" >
<td class="name">
<div class="name">
naturalBounds
</div>
<div class="attributes">
<span class="light">{<a href="../symbols/Rect.html" class="linkConstructor">Rect</a>}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>This read-only property returns the natural bounds of this Shape as determined by its <a href="../symbols/Shape.html#geometry" class="linkProperty">geometry</a>'s bounds.<span class="nodetails" id="xpropnaturalBounds"><a class="morelink" onclick="hst('propnaturalBounds')">More...</a></span> <span class="details" id="propnaturalBounds">
The bounds will always include the (0,0) point.
If there is no geometry available, it returns a <a href="../symbols/Rect.html" class="linkConstructor">Rect</a> with the <a href="../symbols/GraphObject.html#desiredSize" class="linkProperty">desiredSize</a>,
which may have NaN values for the width and height.</span>
</div>
</td>
</tr>
<tr id="parameter1" >
<td class="name">
<div class="name">
parameter1
</div>
<div class="attributes">
<span class="light">{number}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>Gets or sets a property for parameterizing the construction of a <a href="../symbols/Geometry.html" class="linkConstructor">Geometry</a> from a figure.<span class="nodetails" id="xpropparameter1"><a class="morelink" onclick="hst('propparameter1')">More...</a></span> <span class="details" id="propparameter1">
The meaning of this property depends on the particular figure.
The value must be a number; the default value is NaN.</span>
</div>
</td>
</tr>
<tr id="parameter2" >
<td class="name">
<div class="name">
parameter2
</div>
<div class="attributes">
<span class="light">{number}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>Gets or sets a property for parameterizing the construction of a <a href="../symbols/Geometry.html" class="linkConstructor">Geometry</a> from a figure.<span class="nodetails" id="xpropparameter2"><a class="morelink" onclick="hst('propparameter2')">More...</a></span> <span class="details" id="propparameter2">
The meaning of this property depends on the particular figure.
The value must be a number; the default value is NaN.</span>
</div>
</td>
</tr>
<tr id="pathPattern" >