You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

2223 lines
136 KiB

<!doctype html>
<html class="default no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Panel | GoJS API</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../assets/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/css/main.css">
</head>
<body>
<header>
<!-- 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" target="api">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="tsd-page-header">
<div class="tsd-page-toolbar">
<div class="container-fluid plr15">
<div class="table-wrap">
<div class="table-cell" id="tsd-search" data-index="../assets/js/search.js" 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-page-title">
<div class="container-fluid plr15">
<div class="top-copyright">
<!--<b>GoJS</b>&reg; Diagramming Components<br/>version &lt;br/&gt;version 2.0.17 for TypeScript/HTML<br/>by <a href="https://www.nwoods.com/">Northwoods Software&reg;</a>-->
<b>GoJS</b>&reg; Diagramming Components<br/>version 2.0.17<br/>by <a href="https://www.nwoods.com/">Northwoods Software&reg;</a>
</div>
<div>
<h1>Class Panel</h1>
</div>
</div>
</div>
</div>
</header>
<div class="container-fluid container-main plr15">
<div class="row">
<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">GraphObject</a>
<ul class="tsd-hierarchy">
<li>
<span class="target">Panel</span>
<ul class="tsd-hierarchy">
<li>
<a href="Part.html" class="tsd-signature-type">Part</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</section>
<section class="tsd-panel tsd-comment">
<div class="tsd-comment tsd-typography">
<p>A Panel is a <a href="GraphObject.html">GraphObject</a> that holds other GraphObjects as its elements.
A Panel is responsible for sizing and positioning its elements.
The elements of a panel are drawn in the order in which they appear in the <a href="Panel.html#elements">elements</a> collection.</p>
<p>The <a href="Part.html">Part</a> class inherits from Panel; Part in turn is the base class of <a href="Node.html">Node</a> and <a href="Link.html">Link</a>.</p>
<p>Every Panel has a <a href="Panel.html#type">type</a> and establishes its own coordinate system. The type of a Panel
determines how it will size and arrange its elements:</p>
<ul>
<li><a href="Panel.html#static-Position">Panel.Position</a> is used to arrange elements based on their absolute positions within the Panel&#39;s local coordinate system.</li>
<li><a href="Panel.html#static-Vertical">Panel.Vertical</a> and <a href="Panel.html#static-Horizontal">Panel.Horizontal</a> are used to create linear &quot;stacks&quot; of elements.</li>
<li><a href="Panel.html#static-Auto">Panel.Auto</a> is used to size the main element to fit around other elements in the Panel.</li>
<li><a href="Panel.html#static-Spot">Panel.Spot</a> is used to arrange elements based on the <a href="Spot.html">Spot</a> properties <a href="GraphObject.html#alignment">GraphObject.alignment</a>
and <a href="GraphObject.html#alignmentFocus">GraphObject.alignmentFocus</a>, relative to a main element of the panel.
Spot panels can align relative to other elements by using <a href="Panel.html#alignmentFocusName">Panel.alignmentFocusName</a>.</li>
<li><a href="Panel.html#static-Table">Panel.Table</a> is used to arrange elements into rows and columns, typically employing the different
elements&#39; <a href="GraphObject.html#row">GraphObject.row</a>, <a href="GraphObject.html#rowSpan">GraphObject.rowSpan</a>, <a href="GraphObject.html#column">GraphObject.column</a>,
and <a href="GraphObject.html#columnSpan">GraphObject.columnSpan</a> properties. This Panel type also makes use of <a href="RowColumnDefinition.html">RowColumnDefinition</a>.</li>
<li><a href="Panel.html#static-TableRow">Panel.TableRow</a> and <a href="Panel.html#static-TableColumn">Panel.TableColumn</a> can only be used immediately within a <a href="Panel.html#static-Table">Panel.Table</a> Panel
to organize a collection of elements as a row or as a column in a table.</li>
<li><a href="Panel.html#static-Viewbox">Panel.Viewbox</a> is used to automatically resize a single element to fit inside the panel&#39;s available area.</li>
<li><a href="Panel.html#static-Grid">Panel.Grid</a> is not used to house typical elements, but is used only to draw regular patterns of lines.
The elements must be <a href="Shape.html">Shape</a>s used to describe the repeating lines.</li>
<li><a href="Panel.html#static-Link">Panel.Link</a> is only used by <a href="Link.html">Link</a> parts and Link Adornments.</li>
<li><a href="Panel.html#static-Graduated">Panel.Graduated</a> is used to draw regular tick marks and text along the main <a href="Shape.html">Shape</a> element.</li>
</ul>
<p>Using <a href="../../intro/buildingObjects.html">GraphObject.make</a>, the second argument can be used to declare the Panel type:</p>
<pre><code class="hljs js"><span class="hljs-comment">// Either:</span>
$(go.Panel, go.Panel.Horizontal, ...
<span class="hljs-comment">// Or:</span>
$(go.Panel, <span class="hljs-string">"Horizontal"</span>, ...
<span class="hljs-comment">// Full example:</span>
$(go.Panel, <span class="hljs-string">"Horizontal"</span>,
{ <span class="hljs-attr">width</span>: <span class="hljs-number">60</span>, <span class="hljs-attr">height</span>: <span class="hljs-number">60</span> }, <span class="hljs-comment">// panel properties</span>
<span class="hljs-comment">// elements in the panel:</span>
$(go.Shape, <span class="hljs-string">"Rectangle"</span>, { <span class="hljs-attr">stroke</span>: <span class="hljs-string">"lime"</span> }),
$(go.TextBlock, <span class="hljs-string">"Some Text"</span>)
) <span class="hljs-comment">// end of panel definition</span></code></pre>
<p class="boxread">
For an overview of most Panel types, please read the <a href="../../intro/panels.html">Introduction page on Panels</a>.
<p><a href="Panel.html#static-Vertical">Panel.Vertical</a> and <a href="Panel.html#static-Horizontal">Panel.Horizontal</a> panels are frequently used to position two or more GraphObjects
vertically above each other or horizontally next to each other. Use the <a href="GraphObject.html#alignment">GraphObject.alignment</a> or
<a href="GraphObject.html#stretch">GraphObject.stretch</a> properties on the individual elements to control their position and size.
Set <a href="Panel.html#isOpposite">isOpposite</a> to true if you want the elements arranged from right-to-left in Horizontal Panels
or from bottom-to-top in Vertical Panels.</p>
<p><a href="Panel.html#static-Spot">Panel.Spot</a> and <a href="Panel.html#static-Auto">Panel.Auto</a> panels have a &quot;main&quot; element, signified by the Panel&#39;s first element
with <a href="GraphObject.html#isPanelMain">GraphObject.isPanelMain</a> set to true. If there is no such element, it uses the first element as the &quot;main&quot; one.
Use the <a href="GraphObject.html#alignment">GraphObject.alignment</a> property to position elements with respect to the main element.
Use the <a href="GraphObject.html#alignmentFocus">GraphObject.alignmentFocus</a> property to further specify the position within Spot Panels.
&quot;Spot&quot; and &quot;Auto&quot; Panels should have two or more elements in them.</p>
<p>In <a href="Panel.html#static-Table">Panel.Table</a> panels you will want to set the <a href="GraphObject.html#row">GraphObject.row</a> and <a href="GraphObject.html#column">GraphObject.column</a>
properties on each element. The <a href="GraphObject.html#alignment">GraphObject.alignment</a> and <a href="GraphObject.html#stretch">GraphObject.stretch</a> properties are also
useful when an element&#39;s table cell is larger than that element.</p>
<p class="boxrun">Please read the <a href="../../intro/tablePanels.html">Introduction page on Table Panels</a>
for more examples and explanation.
<p><a href="Panel.html#static-TableRow">Panel.TableRow</a> and <a href="Panel.html#static-TableColumn">Panel.TableColumn</a> panels can only be used as elements within a <a href="Panel.html#static-Table">Panel.Table</a> Panel.
They are typically only used in item templates, e.g. for automatically creating rows in a Table Panel based on model data
provided in an <a href="Panel.html#itemArray">itemArray</a>. You will still need to specify properties on the individual elements within a TableRow
or TableColumn as if they were immediate elements of the containing Table panel.</p>
<p class="boxrun">For an example that uses TableRow Panels, see <a href="../../samples/records.html">Records sample</a>.
<p><a href="Panel.html#static-Grid">Panel.Grid</a> panels are often used for the Diagram&#39;s <a href="Diagram.html#grid">Diagram.grid</a>.</p>
<pre><code class="hljs js">$(go.Diagram, <span class="hljs-string">"myDiagramDiv"</span>,
{ . . .
grid: $(go.Panel, <span class="hljs-string">"Grid"</span>,
{ <span class="hljs-attr">gridCellSize</span>: <span class="hljs-keyword">new</span> go.Size(<span class="hljs-number">40</span>, <span class="hljs-number">40</span>) },
$(go.Shape, <span class="hljs-string">"LineH"</span>, { <span class="hljs-attr">stroke</span>: <span class="hljs-string">"lightgray"</span> }),
$(go.Shape, <span class="hljs-string">"LineV"</span>, { <span class="hljs-attr">stroke</span>: <span class="hljs-string">"lightgray"</span> })
),
. . .
});</code></pre>
<p>Or to get a green bar effect:</p>
<pre><code class="hljs js">$(go.Diagram, <span class="hljs-string">"myDiagramDiv"</span>,
{ . . .
grid: $(go.Panel, <span class="hljs-string">"Grid"</span>,
{ <span class="hljs-attr">gridCellSize</span>: <span class="hljs-keyword">new</span> go.Size(<span class="hljs-number">100</span>, <span class="hljs-number">100</span>) },
$(go.Shape, <span class="hljs-string">"BarH"</span>, { <span class="hljs-attr">fill</span>: <span class="hljs-string">"lightgreen"</span>, <span class="hljs-attr">height</span>: <span class="hljs-number">50</span> })
),
. . .
});</code></pre>
<p>But Grid Panels can also be stand alone objects:</p>
<pre><code class="hljs js">$(go.Node, go.Panel.Grid,
{ <span class="hljs-attr">gridCellSize</span>: <span class="hljs-keyword">new</span> go.Size(<span class="hljs-number">6</span>, <span class="hljs-number">6</span>), <span class="hljs-attr">width</span>: <span class="hljs-number">60</span>, <span class="hljs-attr">height</span>: <span class="hljs-number">60</span> },
$(go.Shape, <span class="hljs-string">"LineH"</span>, { <span class="hljs-attr">stroke</span>: <span class="hljs-string">"gray"</span> }),
$(go.Shape, <span class="hljs-string">"LineV"</span>, { <span class="hljs-attr">stroke</span>: <span class="hljs-string">"gray"</span> }))</code></pre>
<p>A Grid Panel&#39;s elements do not participate in object picking.</p>
<p class="boxrun">Please read the <a href="../../intro/grids.html">Introduction page on Grid Patterns</a>
for more examples and explanation.
<p><a href="Panel.html#static-Graduated">Panel.Graduated</a> panels, like Spot and Auto Panels have a &quot;main&quot; element. The other elements within a Graduated Panel
are used to define ticks and labels to draw along the main shape&#39;s path.</p>
<pre><code class="hljs js">$(go.Part, <span class="hljs-string">"Graduated"</span>,
$(go.Shape, { <span class="hljs-attr">geometryString</span>: <span class="hljs-string">"M0 0 H400"</span> }),
$(go.Shape, { <span class="hljs-attr">geometryString</span>: <span class="hljs-string">"M0 0 V10"</span> }),
<span class="hljs-comment">// offset to display below ticks</span>
$(go.TextBlock, { <span class="hljs-attr">segmentOffset</span>: <span class="hljs-keyword">new</span> go.Point(<span class="hljs-number">0</span>, <span class="hljs-number">12</span>) })
);</code></pre>
<p>Only the main shape of a Graduated Panel participates in object picking, but a <code>background</code>
can be set if the entire panel needs to be pickable.
You cannot set or bind the <a href="Panel.html#itemArray">Panel.itemArray</a> of a Graduated Panel.
Events on the tick Shapes and TextBlock labels of a Graduated Panel will be ignored.
Graduated Panel TextBlock labels cannot be edited.</p>
<p>Rotating the main shape will not rotate the ticks, just as rotating a Spot Panel&#39;s main element
won&#39;t rotate its children. Rotation should generally be done at the Panel level. Another similarity
to Spot Panels is that resizing of a Graduated Panel should generally be done on the main shape.</p>
<p class="boxrun">Please read the <a href="../../intro/graduatedPanels.html">Introduction page on Graduated Panels</a>
for more examples and explanation.
<h3>Changing and accessing elements of a Panel</h3>
<p>You can change the collection of <a href="Panel.html#elements">elements</a> by calling <a href="Panel.html#add">add</a>, <a href="Panel.html#insertAt">insertAt</a>, <a href="Panel.html#remove">remove</a>, or <a href="Panel.html#removeAt">removeAt</a>.
You can get direct access to a particular element by calling <a href="Panel.html#elt">elt</a>.</p>
<p>You can search the visual tree of a Panel for GraphObjects that given a <a href="GraphObject.html#name">GraphObject.name</a> using <a href="Panel.html#findObject">findObject</a>.</p>
<h3>Panel Size and Appearance</h3>
<p>Panels typically compute their own size based on their elements and Panel <a href="Panel.html#type">type</a>,
but can also be sized by setting <a href="GraphObject.html#desiredSize">GraphObject.desiredSize</a>, <a href="GraphObject.html#minSize">GraphObject.minSize</a>, and <a href="GraphObject.html#maxSize">GraphObject.maxSize</a>.
Setting an explicit size on a Panel may cause nested elements of that panel to size themselves differently,
especially in the cases of nested elements having a <a href="GraphObject.html#stretch">GraphObject.stretch</a> value or <a href="TextBlock.html">TextBlock</a>&#39;s having word wrap.</p>
<p>Panels have no visual components of their own unless a <a href="GraphObject.html#background">GraphObject.background</a> or <a href="GraphObject.html#areaBackground">GraphObject.areaBackground</a> is specified
or separators are specified either as defaults for the whole Table Panel or on individual <a href="RowColumnDefinition.html">RowColumnDefinition</a>s.
Panels can specify <a href="Panel.html#padding">padding</a>, to make the Panel larger including its background. Setting a padding
when the Panel is constrained in size will reduce the total area that it has to arrange its elements. Setting a <a href="GraphObject.html#margin">margin</a>
will not do this -- instead the Panel will expand in size.</p>
<p>In addition to the <a href="GraphObject.html">GraphObject</a> properties on elements that are only used by certain types of panels,
several Panel properties only apply to specific Panel types.</p>
<ul>
<li>Panels of <a href="Panel.html#type">type</a> <a href="Panel.html#static-Table">Panel.Table</a> use the <a href="Panel.html#rowCount">rowCount</a>, <a href="Panel.html#rowSizing">rowSizing</a>, <a href="Panel.html#columnCount">columnCount</a>,
<a href="Panel.html#columnSizing">columnSizing</a>, <a href="Panel.html#leftIndex">leftIndex</a>, <a href="Panel.html#topIndex">topIndex</a>, and all of the &quot;default&quot; separator properties.</li>
<li>Panels of <a href="Panel.html#type">type</a> <a href="Panel.html#static-TableRow">Panel.TableRow</a> and <a href="Panel.html#static-TableColumn">Panel.TableColumn</a> do not act like regular GraphObjects,
instead they are only to be used immediately within a <a href="Panel.html#static-Table">Panel.Table</a>. They are pass-through containers
that hold elements for their parent table, and ignore their own scale and angle.</li>
<li>Panels of <a href="Panel.html#type">type</a> <a href="Panel.html#static-Grid">Panel.Grid</a> use the <a href="Panel.html#gridCellSize">gridCellSize</a> and <a href="Panel.html#gridOrigin">gridOrigin</a> properties.</li>
<li>Panels of <a href="Panel.html#type">type</a> <a href="Panel.html#static-Viewbox">Panel.Viewbox</a> use the <a href="Panel.html#viewboxStretch">viewboxStretch</a> property.</li>
<li>Panels of <a href="Panel.html#type">type</a> <a href="Panel.html#static-Graduated">Panel.Graduated</a> use the <a href="Panel.html#graduatedMin">graduatedMin</a>, <a href="Panel.html#graduatedMax">graduatedMax</a>,
<a href="Panel.html#graduatedTickUnit">graduatedTickUnit</a>, and <a href="Panel.html#graduatedTickBase">graduatedTickBase</a> properties.</li>
</ul>
<p class="boxread">
For live examples of all Panel types, see the <a href="../../intro/panels.html">Introduction page on Panels.</a>
<h3>Data Binding</h3>
<p>Panels also provide fundamental support for data binding.
When a diagram gets a new model or when a diagram&#39;s model is augmented with additional data,
the diagram automatically creates a new Node or Link whose <a href="Panel.html#data">data</a> property refers to the corresponding
node data or link data object.</p>
<p class="boxread">
For more discussion of data binding, please read the <a href="../../intro/usingModels.html">Introduction page on Models</a>
and <a href="../../intro/dataBinding.html">Data Binding</a>.
<p>Panels provide support for automatically creating elements within the Panel based on items in a JavaScript Array.
This is achieved by setting or binding the <a href="Panel.html#itemArray">itemArray</a> property, which acts in a manner similar
to the <a href="Model.html#nodeDataArray">Model.nodeDataArray</a> property.
You can supply an <a href="Panel.html#itemTemplate">itemTemplate</a>, which must itself be a simple Panel, which is copied to create the element
in this container Panel corresponding to an item in the itemArray.
This property is analogous to the <a href="Diagram.html#nodeTemplate">Diagram.nodeTemplate</a> property, although for the diagram the
template must be a <a href="Node.html">Node</a>, <a href="Group.html">Group</a>, or simple <a href="Part.html">Part</a>.</p>
<p>Much like the <a href="Diagram.html#nodeTemplateMap">Diagram.nodeTemplateMap</a>, Panel&#39;s <a href="Panel.html#itemTemplateMap">itemTemplateMap</a> supports having multiple templates,
so that the actual structure of the element created for a data item can be chosen dynamically.
Just as the <a href="Model.html#nodeCategoryProperty">Model.nodeCategoryProperty</a> determines which template in the <a href="Diagram.html#nodeTemplateMap">Diagram.nodeTemplateMap</a>
is copied to create a <a href="Node.html">Node</a>, the <a href="Panel.html#itemCategoryProperty">itemCategoryProperty</a> names the data property whose value
chooses the Panel in the itemTemplateMap to copy for the item.</p>
<p>When binding the <a href="Panel.html#itemArray">itemArray</a> property, it is commonplace to set <a href="Model.html#copiesArrays">Model.copiesArrays</a> and
<a href="Model.html#copiesArrayObjects">Model.copiesArrayObjects</a> properties to true, so that when a node is copied, the item Array and its
contents are copied, not shared. Or more generally, to customize the model&#39;s copying processes, you
can supply a custom <a href="Model.html#copyNodeDataFunction">Model.copyNodeDataFunction</a>.</p>
<p class="boxread">
For more discussion and examples of item arrays, please read the <a href="../../intro/itemArrays.html">Introduction page on Item Arrays</a>.
</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="Panel.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="Panel.html#alignmentFocusName" class="tsd-kind-icon">alignment<wbr>Focus<wbr>Name</a></li>
<li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Panel.html#columnCount" class="tsd-kind-icon">column<wbr>Count</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Panel.html#columnSizing" class="tsd-kind-icon">column<wbr>Sizing</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Panel.html#data" class="tsd-kind-icon">data</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Panel.html#defaultAlignment" class="tsd-kind-icon">default<wbr>Alignment</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Panel.html#defaultColumnSeparatorDashArray" class="tsd-kind-icon">default<wbr>Column<wbr>Separator<wbr>Dash<wbr>Array</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Panel.html#defaultColumnSeparatorStroke" class="tsd-kind-icon">default<wbr>Column<wbr>Separator<wbr>Stroke</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Panel.html#defaultColumnSeparatorStrokeWidth" class="tsd-kind-icon">default<wbr>Column<wbr>Separator<wbr>Stroke<wbr>Width</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Panel.html#defaultRowSeparatorDashArray" class="tsd-kind-icon">default<wbr>Row<wbr>Separator<wbr>Dash<wbr>Array</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Panel.html#defaultRowSeparatorStroke" class="tsd-kind-icon">default<wbr>Row<wbr>Separator<wbr>Stroke</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Panel.html#defaultRowSeparatorStrokeWidth" class="tsd-kind-icon">default<wbr>Row<wbr>Separator<wbr>Stroke<wbr>Width</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Panel.html#defaultSeparatorPadding" class="tsd-kind-icon">default<wbr>Separator<wbr>Padding</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Panel.html#defaultStretch" class="tsd-kind-icon">default<wbr>Stretch</a></li>
<li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Panel.html#elements" class="tsd-kind-icon">elements</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Panel.html#graduatedMax" class="tsd-kind-icon">graduated<wbr>Max</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Panel.html#graduatedMin" class="tsd-kind-icon">graduated<wbr>Min</a></li>
<li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Panel.html#graduatedRange" class="tsd-kind-icon">graduated<wbr>Range</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Panel.html#graduatedTickBase" class="tsd-kind-icon">graduated<wbr>Tick<wbr>Base</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Panel.html#graduatedTickUnit" class="tsd-kind-icon">graduated<wbr>Tick<wbr>Unit</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Panel.html#gridCellSize" class="tsd-kind-icon">grid<wbr>Cell<wbr>Size</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Panel.html#gridOrigin" class="tsd-kind-icon">grid<wbr>Origin</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Panel.html#isClipping" class="tsd-kind-icon">is<wbr>Clipping</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Panel.html#isEnabled" class="tsd-kind-icon">is<wbr>Enabled</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Panel.html#isOpposite" class="tsd-kind-icon">is<wbr>Opposite</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Panel.html#itemArray" class="tsd-kind-icon">item<wbr>Array</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Panel.html#itemCategoryProperty" class="tsd-kind-icon">item<wbr>Category<wbr>Property</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Panel.html#itemIndex" class="tsd-kind-icon">item<wbr>Index</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Panel.html#itemTemplate" class="tsd-kind-icon">item<wbr>Template</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Panel.html#itemTemplateMap" class="tsd-kind-icon">item<wbr>Template<wbr>Map</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Panel.html#leftIndex" class="tsd-kind-icon">left<wbr>Index</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Panel.html#padding" class="tsd-kind-icon">padding</a></li>
<li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Panel.html#rowCount" class="tsd-kind-icon">row<wbr>Count</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Panel.html#rowSizing" class="tsd-kind-icon">row<wbr>Sizing</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Panel.html#topIndex" class="tsd-kind-icon">top<wbr>Index</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Panel.html#type" class="tsd-kind-icon">type</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Panel.html#viewboxStretch" class="tsd-kind-icon">viewbox<wbr>Stretch</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="Panel.html#add" class="tsd-kind-icon">add</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Panel.html#copy" class="tsd-kind-icon">copy</a></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-is-static"><a href="Panel.html#static-definePanelLayout" class="tsd-kind-icon">define<wbr>Panel<wbr>Layout</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Panel.html#elt" class="tsd-kind-icon">elt</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Panel.html#findColumnForLocalX" class="tsd-kind-icon">find<wbr>Column<wbr>For<wbr>LocalX</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Panel.html#findItemPanelForData" class="tsd-kind-icon">find<wbr>Item<wbr>Panel<wbr>For<wbr>Data</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Panel.html#findMainElement" class="tsd-kind-icon">find<wbr>Main<wbr>Element</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Panel.html#findObject" class="tsd-kind-icon">find<wbr>Object</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Panel.html#findRowForLocalY" class="tsd-kind-icon">find<wbr>Row<wbr>For<wbr>LocalY</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Panel.html#getColumnDefinition" class="tsd-kind-icon">get<wbr>Column<wbr>Definition</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Panel.html#getRowDefinition" class="tsd-kind-icon">get<wbr>Row<wbr>Definition</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Panel.html#graduatedPointForValue" class="tsd-kind-icon">graduated<wbr>Point<wbr>For<wbr>Value</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Panel.html#graduatedValueForPoint" class="tsd-kind-icon">graduated<wbr>Value<wbr>For<wbr>Point</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Panel.html#insertAt" class="tsd-kind-icon">insert<wbr>At</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Panel.html#rebuildItemElements" class="tsd-kind-icon">rebuild<wbr>Item<wbr>Elements</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Panel.html#remove" class="tsd-kind-icon">remove</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Panel.html#removeAt" class="tsd-kind-icon">remove<wbr>At</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Panel.html#removeColumnDefinition" class="tsd-kind-icon">remove<wbr>Column<wbr>Definition</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Panel.html#removeRowDefinition" class="tsd-kind-icon">remove<wbr>Row<wbr>Definition</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Panel.html#updateTargetBindings" class="tsd-kind-icon">update<wbr>Target<wbr>Bindings</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="Panel.html#static-Auto" class="tsd-kind-icon">Auto</a></li>
<li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Panel.html#static-Graduated" class="tsd-kind-icon">Graduated</a></li>
<li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Panel.html#static-Grid" class="tsd-kind-icon">Grid</a></li>
<li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Panel.html#static-Horizontal" class="tsd-kind-icon">Horizontal</a></li>
<li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Panel.html#static-Link" class="tsd-kind-icon">Link</a></li>
<li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Panel.html#static-Position" class="tsd-kind-icon">Position</a></li>
<li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Panel.html#static-Spot" class="tsd-kind-icon">Spot</a></li>
<li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Panel.html#static-Table" class="tsd-kind-icon">Table</a></li>
<li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Panel.html#static-TableColumn" class="tsd-kind-icon">Table<wbr>Column</a></li>
<li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Panel.html#static-TableRow" class="tsd-kind-icon">Table<wbr>Row</a></li>
<li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Panel.html#static-Vertical" class="tsd-kind-icon">Vertical</a></li>
<li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Panel.html#static-Viewbox" class="tsd-kind-icon">Viewbox</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>Panel<span class="tsd-signature-symbol">(</span>type<span class="tsd-signature-symbol">?: </span><a href="PanelLayout.html" class="tsd-signature-type">PanelLayout</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Panel.html" class="tsd-signature-type">Panel</a></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Constructs an empty Panel of the given <a href="Panel.html#type">type</a>. Default type is <a href="Panel.html#static-Position">Panel.Position</a>.
The panel type must be one of the enumerated values defined on the <a href="Panel.html">Panel</a> class, including:
<a href="Panel.html#static-Position">Panel.Position</a>, <a href="Panel.html#static-Vertical">Panel.Vertical</a>, <a href="Panel.html#static-Horizontal">Panel.Horizontal</a>, <a href="Panel.html#static-Table">Panel.Table</a>,
<a href="Panel.html#static-Auto">Panel.Auto</a>, <a href="Panel.html#static-Spot">Panel.Spot</a>, or <a href="Panel.html#static-Viewbox">Panel.Viewbox</a>.</p>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> type: <a href="PanelLayout.html" class="tsd-signature-type">PanelLayout</a></h5>
<div class="tsd-comment tsd-typography">
<p>If not supplied, the default Panel type is <a href="Panel.html#static-Position">Panel.Position</a>.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <a href="Panel.html" class="tsd-signature-type">Panel</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="alignmentFocusName" class="tsd-anchor"></a>
<h3>
alignment<wbr>Focus<wbr>Name
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>For Panels which are elements of Spot Panels: Gets or sets the name
of this Panel&#39;s element that should be used as the alignment object instead of this Panel.</p>
<p>This allows Spot Panels to align objects that are nested in the element tree of its own elements.</p>
<dl class="tsd-comment-tags">
<dt>since</dt>
<dd><p>1.7</p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-get-signature tsd-parent-kind-class">
<a name="columnCount" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagReadOnly">Read-only</span>
column<wbr>Count
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>For <a href="Panel.html#static-Table">Table</a> Panels: This read-only property returns the number of columns.
This value is only valid after the Panel has been measured.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="columnSizing" class="tsd-anchor"></a>
<h3>
column<wbr>Sizing
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>For <a href="Panel.html#static-Table">Table</a> Panels: Gets or sets how this Panel&#39;s columns deal with extra space.
Valid values are <a href="RowColumnDefinition.html#static-ProportionalExtra">RowColumnDefinition.ProportionalExtra</a> and <a href="RowColumnDefinition.html#static-None">RowColumnDefinition.None</a>.
The default is <a href="RowColumnDefinition.html#static-ProportionalExtra">RowColumnDefinition.ProportionalExtra</a>.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="RowColumnDefinition.html#sizing">RowColumnDefinition.sizing</a>, <a href="Panel.html#rowSizing">rowSizing</a></p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="data" class="tsd-anchor"></a>
<h3>
data
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the optional model data to which this panel is data-bound.
The data must be a JavaScript Object if this is a <a href="Part.html">Part</a>.
The data can be any JavaScript value if this is a <a href="Panel.html">Panel</a> created for
an item in an Array that was data-bound by the <a href="Panel.html#itemArray">itemArray</a> property.
The default value is null.</p>
<p>Setting it to a new value automatically calls <a href="Panel.html#updateTargetBindings">updateTargetBindings</a>
in order to assign new values to all of the data-bound GraphObject properties.</p>
<p>Once you set this property you cannot add, remove, or modify any data bindings
on any of the GraphObjects in the visual tree of this Panel, including on
this panel itself.</p>
<p>You should not modify this property on a <a href="Part.html">Part</a> that is created automatically
to represent model data, nor on a <a href="Panel.html">Panel</a> that is created automatically for a data item
in the containing Panel&#39;s <a href="Panel.html#itemArray">Panel.itemArray</a>.
Call <a href="Model.html#removeNodeData">Model.removeNodeData</a> and <a href="Model.html#addNodeData">Model.addNodeData</a> if you want to replace
this Part with another one, or call <a href="Model.html#removeArrayItem">Model.removeArrayItem</a> and <a href="Model.html#insertArrayItem">Model.insertArrayItem</a>
if you want to replace this Panel with another one.</p>
<p>Although you might not be able to replace this data value if this Part was created
automatically by the Diagram, you can still modify that data object&#39;s properties.
Call the appropriate Model method for changing properties that affect the structure of the diagram.
Call <a href="Model.html#setDataProperty">Model.setDataProperty</a> for changing other properties that may be the sources
of <a href="Binding.html">Binding</a>s on <a href="GraphObject.html">GraphObject</a> properties that are in the visual tree of this panel/part.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="defaultAlignment" class="tsd-anchor"></a>
<h3>
default<wbr>Alignment
<span class="tsd-signature-symbol">: </span><a href="Spot.html" class="tsd-signature-type">Spot</a> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the default alignment spot of this Panel, used as
the alignment for an element when its <a href="GraphObject.html#alignment">GraphObject.alignment</a> value is <a href="Spot.html#static-Default">Spot.Default</a>.
The default value is <a href="Spot.html#static-Default">Spot.Default</a>, which is interpreted by the Panel in whatever manner seems reasonable,
depending on the Panel type.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="defaultColumnSeparatorDashArray" class="tsd-anchor"></a>
<h3>
default<wbr>Column<wbr>Separator<wbr>Dash<wbr>Array
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Array</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>For <a href="Panel.html#static-Table">Table</a> Panels: Gets or sets the default dash array for a column&#39;s separator.
<a href="RowColumnDefinition.html#separatorStrokeWidth">RowColumnDefinition.separatorStrokeWidth</a> can override this default value.</p>
<p>Must be an array of positive numbers and zeroes,
or else null to indicate a solid line.</p>
<p>For example, the array [5, 10] would create dashes of 5 pixels and spaces of 10 pixels.</p>
<p>Setting an array with all zeroes will set the value to null.</p>
<p>Default is null.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="RowColumnDefinition.html#separatorDashArray">RowColumnDefinition.separatorDashArray</a>, <a href="Panel.html#defaultRowSeparatorDashArray">defaultRowSeparatorDashArray</a></p>
</dd>
<dt>since</dt>
<dd><p>1.2</p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="defaultColumnSeparatorStroke" class="tsd-anchor"></a>
<h3>
default<wbr>Column<wbr>Separator<wbr>Stroke
<span class="tsd-signature-symbol">: </span><a href="../index.html#BrushLike" class="tsd-signature-type">BrushLike</a> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>For <a href="Panel.html#static-Table">Table</a> Panels: Gets or sets the default stroke (color) for columns
provided a given column has a nonzero <a href="RowColumnDefinition.html#separatorStrokeWidth">RowColumnDefinition.separatorStrokeWidth</a>.
<a href="RowColumnDefinition.html#separatorDashArray">RowColumnDefinition.separatorDashArray</a> can override this default value.
The default value is null -- no line is drawn.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Panel.html#defaultColumnSeparatorStrokeWidth">defaultColumnSeparatorStrokeWidth</a>, <a href="Panel.html#defaultColumnSeparatorDashArray">defaultColumnSeparatorDashArray</a>, <a href="RowColumnDefinition.html#separatorStroke">RowColumnDefinition.separatorStroke</a>, <a href="Panel.html#defaultRowSeparatorStroke">defaultRowSeparatorStroke</a></p>
</dd>
<dt>since</dt>
<dd><p>1.2</p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="defaultColumnSeparatorStrokeWidth" class="tsd-anchor"></a>
<h3>
default<wbr>Column<wbr>Separator<wbr>Stroke<wbr>Width
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>For <a href="Panel.html#static-Table">Table</a> Panels: Gets or sets the default stroke width for a column&#39;s separator.
<a href="RowColumnDefinition.html#separatorStrokeWidth">RowColumnDefinition.separatorStrokeWidth</a> can override this default value.
The default value is 1. Any new value must be a real, non-negative number.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="RowColumnDefinition.html#separatorStrokeWidth">RowColumnDefinition.separatorStrokeWidth</a>, <a href="Panel.html#defaultRowSeparatorStrokeWidth">defaultRowSeparatorStrokeWidth</a></p>
</dd>
<dt>since</dt>
<dd><p>1.2</p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="defaultRowSeparatorDashArray" class="tsd-anchor"></a>
<h3>
default<wbr>Row<wbr>Separator<wbr>Dash<wbr>Array
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Array</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>For <a href="Panel.html#static-Table">Table</a> Panels: Gets or sets the default dash array for a row&#39;s separator.
<a href="RowColumnDefinition.html#separatorDashArray">RowColumnDefinition.separatorDashArray</a> can override this default value.</p>
<p>Must be an array of positive numbers and zeroes,
or else null to indicate a solid line.</p>
<p>For example, the array [5, 10] would create dashes of 5 pixels and spaces of 10 pixels.</p>
<p>Setting an array with all zeroes will set the value to null.</p>
<p>Default is null.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="RowColumnDefinition.html#separatorDashArray">RowColumnDefinition.separatorDashArray</a>, <a href="Panel.html#defaultColumnSeparatorDashArray">defaultColumnSeparatorDashArray</a></p>
</dd>
<dt>since</dt>
<dd><p>1.2</p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="defaultRowSeparatorStroke" class="tsd-anchor"></a>
<h3>
default<wbr>Row<wbr>Separator<wbr>Stroke
<span class="tsd-signature-symbol">: </span><a href="../index.html#BrushLike" class="tsd-signature-type">BrushLike</a> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>For <a href="Panel.html#static-Table">Table</a> Panels: Gets or sets the default stroke (color) for rows
provided a given row has a nonzero <a href="RowColumnDefinition.html#separatorStrokeWidth">RowColumnDefinition.separatorStrokeWidth</a>.
<a href="RowColumnDefinition.html#separatorStroke">RowColumnDefinition.separatorStroke</a> can override this default value.
The default value is null -- no line is drawn.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Panel.html#defaultRowSeparatorStrokeWidth">defaultRowSeparatorStrokeWidth</a>, <a href="Panel.html#defaultRowSeparatorDashArray">defaultRowSeparatorDashArray</a>, <a href="RowColumnDefinition.html#separatorStroke">RowColumnDefinition.separatorStroke</a>, <a href="Panel.html#defaultColumnSeparatorStroke">defaultColumnSeparatorStroke</a></p>
</dd>
<dt>since</dt>
<dd><p>1.2</p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="defaultRowSeparatorStrokeWidth" class="tsd-anchor"></a>
<h3>
default<wbr>Row<wbr>Separator<wbr>Stroke<wbr>Width
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>For <a href="Panel.html#static-Table">Table</a> Panels: Gets or sets the default stroke width for a row&#39;s separator.
<a href="RowColumnDefinition.html#separatorStrokeWidth">RowColumnDefinition.separatorStrokeWidth</a> can override this default value.
The default value is 1. Any new value must be a real, non-negative number.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="RowColumnDefinition.html#separatorStrokeWidth">RowColumnDefinition.separatorStrokeWidth</a>, <a href="Panel.html#defaultColumnSeparatorStrokeWidth">defaultColumnSeparatorStrokeWidth</a></p>
</dd>
<dt>since</dt>
<dd><p>1.2</p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="defaultSeparatorPadding" class="tsd-anchor"></a>
<h3>
default<wbr>Separator<wbr>Padding
<span class="tsd-signature-symbol">: </span><a href="../index.html#MarginLike" class="tsd-signature-type">MarginLike</a> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>For <a href="Panel.html#static-Table">Table</a> Panels: Gets or sets the additional padding for rows and columns.
Padding is applied both before and after a row or column&#39;s contents.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="RowColumnDefinition.html#separatorPadding">RowColumnDefinition.separatorPadding</a>, <a href="Panel.html#defaultColumnSeparatorStrokeWidth">defaultColumnSeparatorStrokeWidth</a>, <a href="Panel.html#defaultRowSeparatorStrokeWidth">defaultRowSeparatorStrokeWidth</a></p>
</dd>
<dt>since</dt>
<dd><p>1.2</p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="defaultStretch" class="tsd-anchor"></a>
<h3>
default<wbr>Stretch
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the default stretch of this Panel, used as
the stretch for an element when its <a href="GraphObject.html#stretch">GraphObject.stretch</a> value is <a href="GraphObject.html#static-Default">GraphObject.Default</a>.
The default value is <a href="GraphObject.html#static-Default">GraphObject.Default</a>, which typically resolves to <a href="GraphObject.html#static-None">GraphObject.None</a>.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-get-signature tsd-parent-kind-class">
<a name="elements" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagReadOnly">Read-only</span>
elements
<span class="tsd-signature-symbol">: </span><a href="Iterator.html" class="tsd-signature-type">Iterator</a><span class="tsd-signature-symbol">&lt;</span><a href="GraphObject.html" class="tsd-signature-type">GraphObject</a><span class="tsd-signature-symbol">&gt;</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>This read-only property returns an iterator over the collection of the <a href="GraphObject.html">GraphObject</a>s that this panel manages.</p>
<p>You can change the collection by calling <a href="Panel.html#add">add</a>, <a href="Panel.html#insertAt">insertAt</a>, <a href="Panel.html#remove">remove</a>, or <a href="Panel.html#removeAt">removeAt</a>.</p>
<p>You can also get direct access to individual elements by calling <a href="Panel.html#elt">elt</a>.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="graduatedMax" class="tsd-anchor"></a>
<h3>
graduated<wbr>Max
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>For <a href="Panel.html#static-Graduated">Graduated</a> Panels: Gets or sets the maximum value represented.
Must be greater than <a href="Panel.html#graduatedMin">graduatedMin</a>. The default is 100.</p>
<dl class="tsd-comment-tags">
<dt>since</dt>
<dd><p>1.7</p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="graduatedMin" class="tsd-anchor"></a>
<h3>
graduated<wbr>Min
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>For <a href="Panel.html#static-Graduated">Graduated</a> Panels: Gets or sets the minimum value represented.
Must be less than <a href="Panel.html#graduatedMax">graduatedMax</a>. The default is 0.</p>
<dl class="tsd-comment-tags">
<dt>since</dt>
<dd><p>1.7</p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-get-signature tsd-parent-kind-class">
<a name="graduatedRange" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagReadOnly">Read-only</span>
graduated<wbr>Range
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>For <a href="Panel.html#static-Graduated">Graduated</a> Panels: This read-only property returns the range of values represented by the Panel.</p>
<p>For example, a <a href="Panel.html#graduatedMin">graduatedMin</a> of 25 and <a href="Panel.html#graduatedMax">graduatedMax</a> of 75 would return 50.</p>
<dl class="tsd-comment-tags">
<dt>since</dt>
<dd><p>1.7</p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="graduatedTickBase" class="tsd-anchor"></a>
<h3>
graduated<wbr>Tick<wbr>Base
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>For <a href="Panel.html#static-Graduated">Graduated</a> Panels: Gets or sets the base value which is marked with a tick.
The default is 0.</p>
<dl class="tsd-comment-tags">
<dt>since</dt>
<dd><p>1.7</p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="graduatedTickUnit" class="tsd-anchor"></a>
<h3>
graduated<wbr>Tick<wbr>Unit
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>For <a href="Panel.html#static-Graduated">Graduated</a> Panels: Gets or sets the difference between two consecutive values marked by ticks.
Must be positive. The default is 10.</p>
<dl class="tsd-comment-tags">
<dt>since</dt>
<dd><p>1.7</p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="gridCellSize" class="tsd-anchor"></a>
<h3>
grid<wbr>Cell<wbr>Size
<span class="tsd-signature-symbol">: </span><a href="Size.html" class="tsd-signature-type">Size</a> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>For <a href="Panel.html#static-Grid">Grid</a> Panels: Gets or sets the distance between lines.
The units are in local coordinates.
The default is 10x10. Any new width or height must be a positive real number.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="gridOrigin" class="tsd-anchor"></a>
<h3>
grid<wbr>Origin
<span class="tsd-signature-symbol">: </span><a href="Point.html" class="tsd-signature-type">Point</a> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>For <a href="Panel.html#static-Grid">Grid</a> Panels: Gets or sets an origin point for the grid cells.
The units are in local coordinates.
The default is (0,0). Any new value must use real numbers.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="isClipping" class="tsd-anchor"></a>
<h3>
is<wbr>Clipping
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>For <a href="Spot.html">Spot</a> Panels: Gets or sets whether this Panel&#39;s main element clips instead of fills.
The main element will not paint its stroke, if it has any.
This assumes that the main element is a Shape.</p>
<p>When this property is <code>true</code>, the Spot panel will size itself to be the <em>intersection</em> of the main element bounds and
all other elements&#39; bounds, rather than the union of these bounds.</p>
<dl class="tsd-comment-tags">
<dt>since</dt>
<dd><p>1.7</p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="isEnabled" class="tsd-anchor"></a>
<h3>
is<wbr>Enabled
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets whether this Panel or any GraphObject inside the panel actually responds to user click events.
It may be used as a Binding target.
See how this property is used in <a href="../../extensions/Buttons.js">Buttons.js</a>.</p>
<p>This property does not have any effect on picking (&quot;hit-testing&quot;) -- that behavior is implemented
by the <a href="GraphObject.html#pickable">GraphObject.pickable</a> property.
When this property is false, non-click events may still occur on this panel or on objects within this panel.
This property is normally only used for Panels that are <a href="GraphObject.html#isActionable">GraphObject.isActionable</a>.</p>
<p>Call <a href="GraphObject.html#isEnabledObject">GraphObject.isEnabledObject</a> to decide whether a particular object can be clicked.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="GraphObject.html#isEnabledObject">GraphObject.isEnabledObject</a>, <a href="GraphObject.html#enabledChanged">GraphObject.enabledChanged</a>, <a href="GraphObject.html#isActionable">GraphObject.isActionable</a>, <a href="GraphObject.html#pickable">GraphObject.pickable</a></p>
</dd>
<dt>since</dt>
<dd><p>1.7</p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="isOpposite" class="tsd-anchor"></a>
<h3>
is<wbr>Opposite
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>For <a href="Panel.html#static-Horizontal">Horizontal</a> and <a href="Panel.html#static-Vertical">Vertical</a> Panels: gets or sets whether this Panel arranges its contents from the
typical side (left and top, respectively), or the opposite side (right and bottom, respectively).</p>
<p>The default value is false.</p>
<dl class="tsd-comment-tags">
<dt>since</dt>
<dd><p>1.7</p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="itemArray" class="tsd-anchor"></a>
<h3>
item<wbr>Array
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Array</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets a JavaScript Array of values or objects, each of which will be represented
by a <a href="Panel.html">Panel</a> as elements in this Panel.
Replacing this array results all of this panel&#39;s child objects being replaced with
a copy of the <a href="Panel.html">Panel</a> found in <a href="Panel.html#itemTemplateMap">itemTemplateMap</a> for each particular
item in the Array.</p>
<p>Because the software does not receive any notifications when an Array is modified,
any insertions or removals or replacements of data in the Array will not be noticed
unless you call <a href="Model.html#insertArrayItem">Model.insertArrayItem</a> or <a href="Model.html#removeArrayItem">Model.removeArrayItem</a>.
You may also reset this property to its current value (the modified Array) or
call <a href="Panel.html#updateTargetBindings">updateTargetBindings</a>, if there is a <a href="Binding.html">Binding</a> whose target is this property.</p>
<p>When binding this property, it is commonplace to set <a href="Model.html#copiesArrays">Model.copiesArrays</a> and
<a href="Model.html#copiesArrayObjects">Model.copiesArrayObjects</a> properties to true, so that when a node is copied,
the item Array and its contents are copied, not shared.
Or more generally, to customize the model&#39;s copying processes, you can supply a custom
<a href="Model.html#copyNodeDataFunction">Model.copyNodeDataFunction</a> and perhaps a <a href="GraphLinksModel.html#copyLinkDataFunction">GraphLinksModel.copyLinkDataFunction</a>.</p>
<p>Any JavaScript Object that is in this Array must only appear once in the array
and must not appear in any other <a href="Panel.html#itemArray">Panel.itemArray</a>s.
Use <a href="Panel.html#findItemPanelForData">findItemPanelForData</a> to find the data-bound Panel created for an Object in this panel&#39;s item Array.</p>
<p>Non-Object values in an item Array may appear multiple times.
An item Array may be shared by multiple Panels.</p>
<p>Item Arrays should not be used with Grid Panels or Graduated Panels as they may not have nested Panels.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="itemCategoryProperty" class="tsd-anchor"></a>
<h3>
item<wbr>Category<wbr>Property
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">a</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the name of the item data property that returns a string describing that data&#39;s category,
or a function that takes an item data object and returns that string;
the default value is the name &#39;category&#39;.
This is used to distinguish between different
kinds of items in the <a href="Panel.html#itemArray">itemArray</a>.</p>
<p>The name must not be null.
If the value is an empty string, the category is assumed to be an empty string,
the default category name, for all item data objects.
You must not change this property when the <a href="Panel.html#itemArray">itemArray</a> already has a value.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="itemIndex" class="tsd-anchor"></a>
<h3>
item<wbr>Index
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets the index of this Panel&#39;s data if it was created to represent an item in its containing Panel&#39;s <a href="Panel.html#itemArray">Panel.itemArray</a>.
The default value is NaN.</p>
<p>This is only set internally by code such as <a href="Panel.html#rebuildItemElements">rebuildItemElements</a> or <a href="Model.html#insertArrayItem">Model.insertArrayItem</a>
when building or shifting Panel representing items
in the Panel whose <a href="Panel.html#itemArray">Panel.itemArray</a> was set or bound to an Array of value.</p>
<p>This property can be used in data bindings within the item template to produce values
that depend on its position in the item Array.
For example:</p>
<pre><code class="hljs js"> $(go.Panel, <span class="hljs-comment">// the item Panel</span>
. . .,
<span class="hljs-keyword">new</span> go.Binding(<span class="hljs-string">"itemArray"</span>, <span class="hljs-string">"someProperty"</span>),
{
<span class="hljs-attr">itemTemplate</span>:
$(go.Panel,
<span class="hljs-comment">// set Panel.background to a color based on the Panel.itemIndex</span>
<span class="hljs-keyword">new</span> go.Binding(<span class="hljs-string">"background"</span>, <span class="hljs-string">"itemIndex"</span>,
<span class="hljs-comment">// using this conversion function</span>
<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">i</span>) </span>{ <span class="hljs-keyword">return</span> (i%<span class="hljs-number">2</span> === <span class="hljs-number">0</span>) ? <span class="hljs-string">"lightgreen"</span> : <span class="hljs-string">"lightyellow"</span>; })
<span class="hljs-comment">// bound to this Panel itself, not to the Panel.data item</span>
.ofObject(),
$(go.TextBlock, <span class="hljs-comment">// a trivial item template, just showing some text</span>
<span class="hljs-keyword">new</span> go.Binding(<span class="hljs-string">"text"</span>)) <span class="hljs-comment">// sets TextBlock.text = data.text</span>
)
}
)</code></pre>
<p>The main element of a Spot or Auto or Link Panel, or the first TableRow or TableColumn element of a Table Panel
whose <a href="GraphObject.html#isPanelMain">isPanelMain</a> property is true, will not have this property set to a number,
because it will not have been created by <a href="Panel.html#rebuildItemElements">rebuildItemElements</a>.</p>
<dl class="tsd-comment-tags">
<dt>since</dt>
<dd><p>1.4</p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="itemTemplate" class="tsd-anchor"></a>
<h3>
item<wbr>Template
<span class="tsd-signature-symbol">: </span><a href="Panel.html" class="tsd-signature-type">Panel</a> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the default <a href="Panel.html">Panel</a> template used as the archetype
for item data that are in <a href="Panel.html#itemArray">itemArray</a>.</p>
<p>Setting this property just modifies the <a href="Panel.html#itemTemplateMap">itemTemplateMap</a>
by replacing the entry named with the empty string.
Any new value must be a <a href="Panel.html">Panel</a> but not a <a href="Part.html">Part</a>.
By default this property is null.</p>
<p><a href="GraphObject.html#copy">GraphObject.copy</a> when copying a panel will share the <a href="Panel.html#itemTemplateMap">itemTemplateMap</a>
between the original panel and the copied panel.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="itemTemplateMap" class="tsd-anchor"></a>
<h3>
item<wbr>Template<wbr>Map
<span class="tsd-signature-symbol">: </span><a href="Map.html" class="tsd-signature-type">Map</a><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">, </span><a href="Panel.html" class="tsd-signature-type">Panel</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets a <a href="Map.html">Map</a> mapping template names to <a href="Panel.html">Panel</a>s.
One of these Panels is copied for each item data that is in the <a href="Panel.html#itemArray">itemArray</a>.
Replacing this map will automatically rebuild all of the elements in this Panel.</p>
<p>By default this property is null.
All values in the <a href="Map.html">Map</a> must be <a href="Panel.html">Panel</a>s but not <a href="Part.html">Part</a>s.</p>
<p>If you modify this <a href="Map.html">Map</a>, by replacing a <a href="Panel.html">Panel</a> or by adding or
removing a map entry, you need to explicitly call <a href="Panel.html#rebuildItemElements">rebuildItemElements</a> afterwards.</p>
<p><a href="GraphObject.html#copy">GraphObject.copy</a> when copying a panel will share the <a href="Panel.html#itemTemplateMap">itemTemplateMap</a>
between the original panel and the copied panel.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="leftIndex" class="tsd-anchor"></a>
<h3>
left<wbr>Index
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>For <a href="Panel.html#static-Table">Table</a> Panels: Gets or sets the first column that this Panel displays.
The default value is 0.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Panel.html#topIndex">topIndex</a></p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="padding" class="tsd-anchor"></a>
<h3>
padding
<span class="tsd-signature-symbol">: </span><a href="../index.html#MarginLike" class="tsd-signature-type">MarginLike</a> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the space between this Panel&#39;s border and its content.
Unlike <a href="GraphObject.html#margin">GraphObject.margin</a>, padding expands the area inside of the Panel&#39;s border.
If this Panel&#39;s size is unconstrained, this will increase the size of the panel.
If this Panel&#39;s size is constrained, this will decrease the total area
for the Panel elements to arrange themselves.</p>
<p>Unlike margin, increases in size due to padding are visually covered by the
<a href="GraphObject.html#background">GraphObject.background</a> and <a href="GraphObject.html#areaBackground">GraphObject.areaBackground</a>.</p>
<p>Padding cannot contain negative numbers.
The default value is a <a href="Margin.html">Margin</a> of zero.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="GraphObject.html#margin">GraphObject.margin</a></p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-get-signature tsd-parent-kind-class">
<a name="rowCount" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagReadOnly">Read-only</span>
row<wbr>Count
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>For <a href="Panel.html#static-Table">Table</a> Panels: This read-only property returns the number of rows.
This value is only valid after the Panel has been measured.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="rowSizing" class="tsd-anchor"></a>
<h3>
row<wbr>Sizing
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>For <a href="Panel.html#static-Table">Table</a> Panels: Gets or sets how this Panel&#39;s rows deal with extra space.
Valid values are <a href="RowColumnDefinition.html#static-ProportionalExtra">RowColumnDefinition.ProportionalExtra</a> and <a href="RowColumnDefinition.html#static-None">RowColumnDefinition.None</a>.
The default is <a href="RowColumnDefinition.html#static-ProportionalExtra">RowColumnDefinition.ProportionalExtra</a>.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="RowColumnDefinition.html#sizing">RowColumnDefinition.sizing</a></p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="topIndex" class="tsd-anchor"></a>
<h3>
top<wbr>Index
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>For <a href="Panel.html#static-Table">Table</a> Panels: Gets or sets the first row that this Panel displays.
The default value is 0.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Panel.html#leftIndex">leftIndex</a></p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="type" class="tsd-anchor"></a>
<h3>
type
<span class="tsd-signature-symbol">: </span><a href="PanelLayout.html" class="tsd-signature-type">PanelLayout</a> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the type of the Panel, which controls how the Panel&#39;s elements are measured and arranged.
The only accepted values are listed as constant properties of Panel, including:</p>
<ul>
<li><a href="Panel.html#static-Position">Panel.Position</a></li>
<li><a href="Panel.html#static-Vertical">Panel.Vertical</a></li>
<li><a href="Panel.html#static-Horizontal">Panel.Horizontal</a></li>
<li><a href="Panel.html#static-Auto">Panel.Auto</a></li>
<li><a href="Panel.html#static-Spot">Panel.Spot</a></li>
<li><a href="Panel.html#static-Table">Panel.Table</a></li>
<li><a href="Panel.html#static-Viewbox">Panel.Viewbox</a></li>
<li><a href="Panel.html#static-Link">Panel.Link</a> (see also <a href="Link.html">Link</a>s, which are all Panels of type Link)</li>
<li><a href="Panel.html#static-TableRow">Panel.TableRow</a></li>
<li><a href="Panel.html#static-TableColumn">Panel.TableColumn</a></li>
<li><a href="Panel.html#static-Grid">Panel.Grid</a></li>
<li><a href="Panel.html#static-Graduated">Panel.Graduated</a></li>
</ul>
<p>The default value is <a href="Panel.html#static-Position">Panel.Position</a>.</p>
<p>You must not modify this property once the Panel has been measured or the Panel has been added to another Panel.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="viewboxStretch" class="tsd-anchor"></a>
<h3>
viewbox<wbr>Stretch
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>For <a href="Panel.html#static-Viewbox">Viewbox</a> Panels: Gets or sets how the panel will resize its content.</p>
<p>Possible values are <a href="GraphObject.html#static-Uniform">GraphObject.Uniform</a> and <a href="GraphObject.html#static-UniformToFill">GraphObject.UniformToFill</a>.
The default is <a href="GraphObject.html#static-Uniform">GraphObject.Uniform</a>.</p>
</div>
</li>
</ul>
</section>
</section>
<section class="tsd-panel-group tsd-member-group ">
<h2>Methods</h2>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="add" class="tsd-anchor"></a>
<h3>
add
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">add<span class="tsd-signature-symbol">(</span>element<span class="tsd-signature-symbol">: </span><a href="GraphObject.html" class="tsd-signature-type">GraphObject</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Adds a GraphObject to the end of this Panel&#39;s list of elements, visually in front of all of the other elements.</p>
<p>If the element to be added is already in this Panel&#39;s list of elements,
the object is moved to the end of the list.
You cannot add a GraphObject to a Panel if that GraphObject is already in a different Panel.</p>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>element: <a href="GraphObject.html" class="tsd-signature-type">GraphObject</a></h5>
<div class="tsd-comment tsd-typography">
<p>A GraphObject.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="copy" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagOverride">Override</span>
copy
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">copy<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">this</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Creates a deep copy of this Panel and returns it.</p>
</div>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">this</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-static">
<a name="static-definePanelLayout" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagStatic">Static</span>
define<wbr>Panel<wbr>Layout
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-static">
<li class="tsd-signature tsd-kind-icon">define<wbr>Panel<wbr>Layout<span class="tsd-signature-symbol">(</span>layoutName<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span>, layout<span class="tsd-signature-symbol">: </span><a href="PanelLayout.html" class="tsd-signature-type">PanelLayout</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Register a PanelLayout. This is called when making new Panel types.
See the <a href="../../samples/panelLayout.html">PanelLayout sample</a> for an example.</p>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>layoutName: <span class="tsd-signature-type">string</span></h5>
<div class="tsd-comment tsd-typography">
<p>Panel name</p>
</div>
</li>
<li>
<h5>layout: <a href="PanelLayout.html" class="tsd-signature-type">PanelLayout</a></h5>
<div class="tsd-comment tsd-typography">
<p>instance of the PanelLayout</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="elt" class="tsd-anchor"></a>
<h3>
elt
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">elt<span class="tsd-signature-symbol">(</span>idx<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="GraphObject.html" class="tsd-signature-type">GraphObject</a></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Returns the GraphObject in this Panel&#39;s list of elements at the specified index.</p>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>idx: <span class="tsd-signature-type">number</span></h5>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <a href="GraphObject.html" class="tsd-signature-type">GraphObject</a></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="findColumnForLocalX" class="tsd-anchor"></a>
<h3>
find<wbr>Column<wbr>For<wbr>LocalX
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">find<wbr>Column<wbr>For<wbr>LocalX<span class="tsd-signature-symbol">(</span>x<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>For <a href="Panel.html#static-Table">Table</a> Panels: Returns the cell at a given x-coordinate in local coordinates.
Call <a href="GraphObject.html#getLocalPoint">GraphObject.getLocalPoint</a> to convert a Point in document coordinates into
a Point in local coordinates.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Panel.html#findRowForLocalY">findRowForLocalY</a></p>
</dd>
<dt>since</dt>
<dd><p>1.2</p>
</dd>
</dl>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>x: <span class="tsd-signature-type">number</span></h5>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">number</span></h4>
<p>a zero-based integer</p>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="findItemPanelForData" class="tsd-anchor"></a>
<h3>
find<wbr>Item<wbr>Panel<wbr>For<wbr>Data
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">find<wbr>Item<wbr>Panel<wbr>For<wbr>Data<span class="tsd-signature-symbol">(</span>data<span class="tsd-signature-symbol">: </span><a href="ObjectData.html" class="tsd-signature-type">ObjectData</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Panel.html" class="tsd-signature-type">Panel</a><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Return the <a href="Panel.html">Panel</a> that was made for a particular data object in this panel&#39;s <a href="Panel.html#itemArray">itemArray</a>.
If this returns a Panel, its <a href="Panel.html#data">data</a> property will be the argument data object,
and its containing <a href="GraphObject.html#panel">GraphObject.panel</a> will be this panel.</p>
<dl class="tsd-comment-tags">
<dt>since</dt>
<dd><p>1.6</p>
</dd>
</dl>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>data: <a href="ObjectData.html" class="tsd-signature-type">ObjectData</a></h5>
<div class="tsd-comment tsd-typography">
<p>must be an Object, not a string or a number or a boolean or a function</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns
<a href="Panel.html" class="tsd-signature-type">Panel</a>
<span class="tsd-signature-symbol"> | </span>
<span class="tsd-signature-type">null</span>
</h4>
<p>or null if not found</p>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="findMainElement" class="tsd-anchor"></a>
<h3>
find<wbr>Main<wbr>Element
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">find<wbr>Main<wbr>Element<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">GraphObject</a><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Return an immediate child element whose <a href="GraphObject.html#isPanelMain">GraphObject.isPanelMain</a> is true,
or else just return the first child element.</p>
<dl class="tsd-comment-tags">
<dt>since</dt>
<dd><p>1.5</p>
</dd>
</dl>
</div>
<h4 class="tsd-returns-title">Returns
<a href="GraphObject.html" class="tsd-signature-type">GraphObject</a>
<span class="tsd-signature-symbol"> | </span>
<span class="tsd-signature-type">null</span>
</h4>
<p>this may return null if there are no child elements</p>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="findObject" class="tsd-anchor"></a>
<h3>
find<wbr>Object
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">find<wbr>Object<span class="tsd-signature-symbol">(</span>name<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="GraphObject.html" class="tsd-signature-type">GraphObject</a><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Search the visual tree starting at this Panel for a GraphObject
whose <a href="GraphObject.html#name">GraphObject.name</a> is the given name.</p>
<p>This does not recurse into the elements inside a Panel that holds elements for an <a href="Panel.html#itemArray">itemArray</a>.</p>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>name: <span class="tsd-signature-type">string</span></h5>
<div class="tsd-comment tsd-typography">
<p>The name to search for, using a case-sensitive string comparison.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns
<a href="GraphObject.html" class="tsd-signature-type">GraphObject</a>
<span class="tsd-signature-symbol"> | </span>
<span class="tsd-signature-type">null</span>
</h4>
<p>If no such named object can be found, this returns null.</p>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="findRowForLocalY" class="tsd-anchor"></a>
<h3>
find<wbr>Row<wbr>For<wbr>LocalY
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">find<wbr>Row<wbr>For<wbr>LocalY<span class="tsd-signature-symbol">(</span>y<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>For <a href="Panel.html#static-Table">Table</a> Panels: Returns the row at a given y-coordinate in local coordinates.
Call <a href="GraphObject.html#getLocalPoint">GraphObject.getLocalPoint</a> to convert a Point in document coordinates into
a Point in local coordinates.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Panel.html#findColumnForLocalX">findColumnForLocalX</a></p>
</dd>
<dt>since</dt>
<dd><p>1.2</p>
</dd>
</dl>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>y: <span class="tsd-signature-type">number</span></h5>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">number</span></h4>
<p>a zero-based integer</p>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="getColumnDefinition" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagVirtual">Virtual</span>
get<wbr>Column<wbr>Definition
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">get<wbr>Column<wbr>Definition<span class="tsd-signature-symbol">(</span>idx<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="RowColumnDefinition.html" class="tsd-signature-type">RowColumnDefinition</a></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>For <a href="Panel.html#static-Table">Table</a> Panels: Gets the <a href="RowColumnDefinition.html">RowColumnDefinition</a> for a particular column.
If you ask for the definition of a column at or beyond the <a href="Panel.html#columnCount">columnCount</a>,
it will automatically create one and return it.</p>
<p>If this Panel is not a Table Panel, this method returns null.</p>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>idx: <span class="tsd-signature-type">number</span></h5>
<div class="tsd-comment tsd-typography">
<p>the non-negative zero-based integer column index.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <a href="RowColumnDefinition.html" class="tsd-signature-type">RowColumnDefinition</a></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="getRowDefinition" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagVirtual">Virtual</span>
get<wbr>Row<wbr>Definition
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">get<wbr>Row<wbr>Definition<span class="tsd-signature-symbol">(</span>idx<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="RowColumnDefinition.html" class="tsd-signature-type">RowColumnDefinition</a></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>For <a href="Panel.html#static-Table">Table</a> Panels: Gets the <a href="RowColumnDefinition.html">RowColumnDefinition</a> for a particular row.
If you ask for the definition of a row at or beyond the <a href="Panel.html#rowCount">rowCount</a>,
it will automatically create one and return it.</p>
<p>If this Panel is not a Table Panel, this method returns null.</p>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>idx: <span class="tsd-signature-type">number</span></h5>
<div class="tsd-comment tsd-typography">
<p>the non-negative zero-based integer row index.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <a href="RowColumnDefinition.html" class="tsd-signature-type">RowColumnDefinition</a></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="graduatedPointForValue" class="tsd-anchor"></a>
<h3>
graduated<wbr>Point<wbr>For<wbr>Value
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">graduated<wbr>Point<wbr>For<wbr>Value<span class="tsd-signature-symbol">(</span>val<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>, result<span class="tsd-signature-symbol">?: </span><a href="Point.html" class="tsd-signature-type">Point</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Point.html" class="tsd-signature-type">Point</a></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>For <a href="Panel.html#static-Graduated">Graduated</a> Panels: Returns the point that corresponds with a value, in the panel&#39;s coordinates.</p>
<p>If the value provided is not within the <a href="Panel.html#graduatedMin">graduatedMin</a> and <a href="Panel.html#graduatedMax">graduatedMax</a>,
it will be constrained to within those values.</p>
<p>If this Panel is not a Graduated Panel, this method returns Point(NaN, NaN).</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Panel.html#graduatedValueForPoint">graduatedValueForPoint</a></p>
</dd>
<dt>since</dt>
<dd><p>1.7</p>
</dd>
</dl>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>val: <span class="tsd-signature-type">number</span></h5>
<div class="tsd-comment tsd-typography">
<p>a value between <a href="Panel.html#graduatedMin">graduatedMin</a> and <a href="Panel.html#graduatedMax">graduatedMax</a></p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> result: <a href="Point.html" class="tsd-signature-type">Point</a></h5>
<div class="tsd-comment tsd-typography">
<p>an optional Point that is modified and returned</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <a href="Point.html" class="tsd-signature-type">Point</a></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="graduatedValueForPoint" class="tsd-anchor"></a>
<h3>
graduated<wbr>Value<wbr>For<wbr>Point
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">graduated<wbr>Value<wbr>For<wbr>Point<span class="tsd-signature-symbol">(</span>pt<span class="tsd-signature-symbol">: </span><a href="Point.html" class="tsd-signature-type">Point</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>For <a href="Panel.html#static-Graduated">Graduated</a> Panels: Returns the value that corresponds with the given Point.
The Point must be in the panel&#39;s coordinates.
The value returned will be in the Graduated Panel&#39;s range.</p>
<p>If this Panel is not a Graduated Panel, this method returns NaN.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Panel.html#graduatedPointForValue">graduatedPointForValue</a></p>
</dd>
<dt>since</dt>
<dd><p>1.7</p>
</dd>
</dl>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>pt: <a href="Point.html" class="tsd-signature-type">Point</a></h5>
<div class="tsd-comment tsd-typography">
<p>a Point in the Graduated Panel&#39;s coordinates</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">number</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="insertAt" class="tsd-anchor"></a>
<h3>
insert<wbr>At
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">insert<wbr>At<span class="tsd-signature-symbol">(</span>index<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>, element<span class="tsd-signature-symbol">: </span><a href="GraphObject.html" class="tsd-signature-type">GraphObject</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Adds a GraphObject to the Panel&#39;s list of elements at the specified index.</p>
<p>If the element to be added is already in this Panel&#39;s list of elements,
the object is moved to the specified index.
You cannot add a GraphObject to a Panel that if that GraphObject is already in a different Panel.</p>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>index: <span class="tsd-signature-type">number</span></h5>
</li>
<li>
<h5>element: <a href="GraphObject.html" class="tsd-signature-type">GraphObject</a></h5>
<div class="tsd-comment tsd-typography">
<p>A GraphObject.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="rebuildItemElements" class="tsd-anchor"></a>
<h3>
rebuild<wbr>Item<wbr>Elements
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">rebuild<wbr>Item<wbr>Elements<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Create and add new GraphObjects corresponding to and bound to the data in the <a href="Panel.html#itemArray">itemArray</a>,
after removing all existing elements from this Panel.
This method is automatically called when replacing the <a href="Panel.html#itemArray">itemArray</a> value,
or when changing the value of <a href="Panel.html#itemTemplate">itemTemplate</a> or <a href="Panel.html#itemTemplateMap">itemTemplateMap</a>.</p>
<p>This uses <a href="Panel.html#itemCategoryProperty">itemCategoryProperty</a> to determine the category for an item data.
That string is used to look up a template in <a href="Panel.html#itemTemplateMap">itemTemplateMap</a>.
The resulting template (which is also a Panel) is copied, added to this panel,
and its <a href="Panel.html#itemIndex">itemIndex</a> is set to its index in that Array.
That new child Panel is then data-bound to that Array item by setting its <a href="Panel.html#data">data</a>.</p>
<p>If <a href="Panel.html#itemArray">itemArray</a> is null, this method just removes all elements from this panel.
Actually, if this Panel <a href="Panel.html#type">type</a> is &quot;Spot&quot;, &quot;Auto&quot;, or &quot;Link&quot;, the very first element
is always kept by this method.
Also, if this Panel type is &quot;Table&quot;, and if the first element is a &quot;TableRow&quot; or &quot;TableColumn&quot; Panel
whose <a href="GraphObject.html#isPanelMain">isPanelMain</a> property is set to true, that first element will be kept too.
That is useful for defining literal TableRow headers in Table panels, when the header information
is not kept as the first item in the itemArray.</p>
<p>It is wasteful to call this method after making some model data changes.
It is better to call <a href="Model.html#setDataProperty">Model.setDataProperty</a>, <a href="Model.html#addArrayItem">Model.addArrayItem</a>,
<a href="Model.html#insertArrayItem">Model.insertArrayItem</a>, or <a href="Model.html#removeArrayItem">Model.removeArrayItem</a>, or other model methods.
Not only do those methods update efficiently, they also preserve unbound state and support undo/redo.</p>
</div>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="remove" class="tsd-anchor"></a>
<h3>
remove
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">remove<span class="tsd-signature-symbol">(</span>element<span class="tsd-signature-symbol">: </span><a href="GraphObject.html" class="tsd-signature-type">GraphObject</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Removes a GraphObject from this Panel&#39;s list of elements.</p>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>element: <a href="GraphObject.html" class="tsd-signature-type">GraphObject</a></h5>
<div class="tsd-comment tsd-typography">
<p>A GraphObject.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="removeAt" class="tsd-anchor"></a>
<h3>
remove<wbr>At
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">remove<wbr>At<span class="tsd-signature-symbol">(</span>idx<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Removes an GraphObject from this Panel&#39;s list of elements at the specified index.</p>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>idx: <span class="tsd-signature-type">number</span></h5>
<div class="tsd-comment tsd-typography">
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="removeColumnDefinition" class="tsd-anchor"></a>
<h3>
remove<wbr>Column<wbr>Definition
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">remove<wbr>Column<wbr>Definition<span class="tsd-signature-symbol">(</span>idx<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>For <a href="Panel.html#static-Table">Table</a> Panels: Removes the <a href="RowColumnDefinition.html">RowColumnDefinition</a> for a particular row.</p>
<p>If this Panel is not a Table Panel, this method does nothing.</p>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>idx: <span class="tsd-signature-type">number</span></h5>
<div class="tsd-comment tsd-typography">
<p>the non-negative zero-based integer row index.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="removeRowDefinition" class="tsd-anchor"></a>
<h3>
remove<wbr>Row<wbr>Definition
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">remove<wbr>Row<wbr>Definition<span class="tsd-signature-symbol">(</span>idx<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>For <a href="Panel.html#static-Table">Table</a> Panels: Removes the <a href="RowColumnDefinition.html">RowColumnDefinition</a> for a particular row.</p>
<p>If this Panel is not a Table Panel, this method does nothing.</p>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>idx: <span class="tsd-signature-type">number</span></h5>
<div class="tsd-comment tsd-typography">
<p>the non-negative zero-based integer row index.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="updateTargetBindings" class="tsd-anchor"></a>
<h3>
update<wbr>Target<wbr>Bindings
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">update<wbr>Target<wbr>Bindings<span class="tsd-signature-symbol">(</span>srcprop<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Re-evaluate all data bindings on this panel,
in order to assign new property values to the <a href="GraphObject.html">GraphObject</a>s in this visual tree
based on this object&#39;s <a href="Panel.html#data">data</a> property values.</p>
<p>It is better to call <a href="Model.html#setDataProperty">Model.setDataProperty</a> to modify data properties,
because that will both record changes for undo/redo and will update all bindings
that may depend on that property.</p>
<p>This method does nothing if <a href="Panel.html#data">data</a> is null.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Model.html#updateTargetBindings">Model.updateTargetBindings</a></p>
</dd>
</dl>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> srcprop: <span class="tsd-signature-type">string</span></h5>
<div class="tsd-comment tsd-typography">
<p>An optional source data property name:
when provided, only evaluates those <a href="Binding.html">Binding</a>s that use that particular property;
when not provided or when it is the empty string, all bindings are evaluated.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
</section>
<section class="tsd-panel-group tsd-member-group ">
<h2>Constants</h2>
<section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a name="static-Auto" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagStatic">Static</span>
Auto
<span class="tsd-signature-symbol">: </span><a href="PanelLayout.html" class="tsd-signature-type">PanelLayout</a> </h3>
<div class="tsd-comment tsd-typography">
<p>This value for <a href="Panel.html#type">type</a> resizes the main element to fit around the other elements;
the main element is the first GraphObject with <a href="GraphObject.html#isPanelMain">GraphObject.isPanelMain</a> set to true,
or else the first GraphObject if none have that property set to true.</p>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a name="static-Graduated" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagStatic">Static</span>
Graduated
<span class="tsd-signature-symbol">: </span><a href="PanelLayout.html" class="tsd-signature-type">PanelLayout</a> </h3>
<div class="tsd-comment tsd-typography">
<p>This value for <a href="Panel.html#type">type</a> is used to draw regular tick marks and labels along some shape.
The main element is the first GraphObject with <a href="GraphObject.html#isPanelMain">GraphObject.isPanelMain</a> set to true,
or else the first GraphObject if none have that property set to true.</p>
<dl class="tsd-comment-tags">
<dt>since</dt>
<dd><p>1.7</p>
</dd>
</dl>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a name="static-Grid" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagStatic">Static</span>
Grid
<span class="tsd-signature-symbol">: </span><a href="PanelLayout.html" class="tsd-signature-type">PanelLayout</a> </h3>
<div class="tsd-comment tsd-typography">
<p>This value for <a href="Panel.html#type">type</a> is used to draw regular patterns of lines.</p>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a name="static-Horizontal" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagStatic">Static</span> <span class="tsd-flag ts-flagOverride">Override</span>
Horizontal
<span class="tsd-signature-symbol">: </span><a href="PanelLayout.html" class="tsd-signature-type">PanelLayout</a> </h3>
<div class="tsd-comment tsd-typography">
<p>This value for <a href="Panel.html#type">type</a> lays out the elements horizontally with
their <a href="GraphObject.html#alignment">GraphObject.alignment</a> property dictating their alignment on the Y-axis.</p>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a name="static-Link" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagStatic">Static</span>
Link
<span class="tsd-signature-symbol">: </span><a href="PanelLayout.html" class="tsd-signature-type">PanelLayout</a> </h3>
<div class="tsd-comment tsd-typography">
<p>This value for <a href="Panel.html#type">type</a> is used for <a href="Link.html">Link</a>s and adornments that act as <a href="Link.html">Link</a>s.</p>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a name="static-Position" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagStatic">Static</span>
Position
<span class="tsd-signature-symbol">: </span><a href="PanelLayout.html" class="tsd-signature-type">PanelLayout</a> </h3>
<div class="tsd-comment tsd-typography">
<p>The default <a href="Panel.html#type">type</a>, arranges each element according to their <a href="GraphObject.html#position">GraphObject.position</a>.</p>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a name="static-Spot" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagStatic">Static</span>
Spot
<span class="tsd-signature-symbol">: </span><a href="PanelLayout.html" class="tsd-signature-type">PanelLayout</a> </h3>
<div class="tsd-comment tsd-typography">
<p>This value for <a href="Panel.html#type">type</a> arranges GraphObjects about a main element using the
<a href="GraphObject.html#alignment">GraphObject.alignment</a> and <a href="GraphObject.html#alignmentFocus">GraphObject.alignmentFocus</a> properties;
the main element is the first GraphObject with <a href="GraphObject.html#isPanelMain">GraphObject.isPanelMain</a> set to true,
or else the first GraphObject if none have that property set to true.</p>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a name="static-Table" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagStatic">Static</span>
Table
<span class="tsd-signature-symbol">: </span><a href="PanelLayout.html" class="tsd-signature-type">PanelLayout</a> </h3>
<div class="tsd-comment tsd-typography">
<p>This value for <a href="Panel.html#type">type</a> arranges GraphObjects into rows and columns;
set the <a href="GraphObject.html#row">GraphObject.row</a> and <a href="GraphObject.html#column">GraphObject.column</a> properties on each element.</p>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a name="static-TableColumn" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagStatic">Static</span>
Table<wbr>Column
<span class="tsd-signature-symbol">: </span><a href="PanelLayout.html" class="tsd-signature-type">PanelLayout</a> </h3>
<div class="tsd-comment tsd-typography">
<p>Organizational Panel type that is only valid inside of a Table panel;
This Panel ignores its angle and scale, and does not have a meaningful size on its own,
it is only an organizational container for other elements of a Panel.</p>
<dl class="tsd-comment-tags">
<dt>since</dt>
<dd><p>1.1</p>
</dd>
</dl>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a name="static-TableRow" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagStatic">Static</span>
Table<wbr>Row
<span class="tsd-signature-symbol">: </span><a href="PanelLayout.html" class="tsd-signature-type">PanelLayout</a> </h3>
<div class="tsd-comment tsd-typography">
<p>Organizational Panel type that is only valid inside of a Table panel;
This Panel ignores its angle and scale, and does not have a meaningful size on its own,
it is only an organizational container for other elements of a Panel.</p>
<dl class="tsd-comment-tags">
<dt>since</dt>
<dd><p>1.1</p>
</dd>
</dl>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a name="static-Vertical" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagStatic">Static</span> <span class="tsd-flag ts-flagOverride">Override</span>
Vertical
<span class="tsd-signature-symbol">: </span><a href="PanelLayout.html" class="tsd-signature-type">PanelLayout</a> </h3>
<div class="tsd-comment tsd-typography">
<p>This value for <a href="Panel.html#type">type</a> lays out the elements vertically with
their <a href="GraphObject.html#alignment">GraphObject.alignment</a> property dictating their alignment on the X-axis.</p>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a name="static-Viewbox" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagStatic">Static</span>
Viewbox
<span class="tsd-signature-symbol">: </span><a href="PanelLayout.html" class="tsd-signature-type">PanelLayout</a> </h3>
<div class="tsd-comment tsd-typography">
<p>This value for <a href="Panel.html#type">type</a> rescales a single GraphObject to fit inside the panel
depending on the element&#39;s <a href="GraphObject.html#stretch">GraphObject.stretch</a> property.</p>
</div>
</section>
</section>
</div>
<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
<nav class="tsd-navigation primary">
<ul>
<li class="globals ">
<a href="../index.html"><em>GoJS <wbr>Class <wbr>Index</em></a>
</li>
</ul>
</nav>
<nav class="tsd-navigation secondary menu-sticky">
<ul class="before-current">
</ul>
<ul class="current">
<li class="current tsd-kind-class">
<a href="Panel.html" class="tsd-kind-icon">Panel</a>
<ul>
<li class=" tsd-kind-constructor tsd-parent-kind-class">
<a href="Panel.html#constructor" class="tsd-kind-icon">constructor</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Panel.html#alignmentFocusName" class="tsd-kind-icon">alignment<wbr>Focus<wbr>Name</a>
</li>
<li class=" tsd-kind-get-signature tsd-parent-kind-class">
<a href="Panel.html#columnCount" class="tsd-kind-icon">column<wbr>Count</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Panel.html#columnSizing" class="tsd-kind-icon">column<wbr>Sizing</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Panel.html#data" class="tsd-kind-icon">data</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Panel.html#defaultAlignment" class="tsd-kind-icon">default<wbr>Alignment</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Panel.html#defaultColumnSeparatorDashArray" class="tsd-kind-icon">default<wbr>Column<wbr>Separator<wbr>Dash<wbr>Array</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Panel.html#defaultColumnSeparatorStroke" class="tsd-kind-icon">default<wbr>Column<wbr>Separator<wbr>Stroke</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Panel.html#defaultColumnSeparatorStrokeWidth" class="tsd-kind-icon">default<wbr>Column<wbr>Separator<wbr>Stroke<wbr>Width</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Panel.html#defaultRowSeparatorDashArray" class="tsd-kind-icon">default<wbr>Row<wbr>Separator<wbr>Dash<wbr>Array</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Panel.html#defaultRowSeparatorStroke" class="tsd-kind-icon">default<wbr>Row<wbr>Separator<wbr>Stroke</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Panel.html#defaultRowSeparatorStrokeWidth" class="tsd-kind-icon">default<wbr>Row<wbr>Separator<wbr>Stroke<wbr>Width</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Panel.html#defaultSeparatorPadding" class="tsd-kind-icon">default<wbr>Separator<wbr>Padding</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Panel.html#defaultStretch" class="tsd-kind-icon">default<wbr>Stretch</a>
</li>
<li class=" tsd-kind-get-signature tsd-parent-kind-class">
<a href="Panel.html#elements" class="tsd-kind-icon">elements</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Panel.html#graduatedMax" class="tsd-kind-icon">graduated<wbr>Max</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Panel.html#graduatedMin" class="tsd-kind-icon">graduated<wbr>Min</a>
</li>
<li class=" tsd-kind-get-signature tsd-parent-kind-class">
<a href="Panel.html#graduatedRange" class="tsd-kind-icon">graduated<wbr>Range</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Panel.html#graduatedTickBase" class="tsd-kind-icon">graduated<wbr>Tick<wbr>Base</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Panel.html#graduatedTickUnit" class="tsd-kind-icon">graduated<wbr>Tick<wbr>Unit</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Panel.html#gridCellSize" class="tsd-kind-icon">grid<wbr>Cell<wbr>Size</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Panel.html#gridOrigin" class="tsd-kind-icon">grid<wbr>Origin</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Panel.html#isClipping" class="tsd-kind-icon">is<wbr>Clipping</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Panel.html#isEnabled" class="tsd-kind-icon">is<wbr>Enabled</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Panel.html#isOpposite" class="tsd-kind-icon">is<wbr>Opposite</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Panel.html#itemArray" class="tsd-kind-icon">item<wbr>Array</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Panel.html#itemCategoryProperty" class="tsd-kind-icon">item<wbr>Category<wbr>Property</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Panel.html#itemIndex" class="tsd-kind-icon">item<wbr>Index</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Panel.html#itemTemplate" class="tsd-kind-icon">item<wbr>Template</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Panel.html#itemTemplateMap" class="tsd-kind-icon">item<wbr>Template<wbr>Map</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Panel.html#leftIndex" class="tsd-kind-icon">left<wbr>Index</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Panel.html#padding" class="tsd-kind-icon">padding</a>
</li>
<li class=" tsd-kind-get-signature tsd-parent-kind-class">
<a href="Panel.html#rowCount" class="tsd-kind-icon">row<wbr>Count</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Panel.html#rowSizing" class="tsd-kind-icon">row<wbr>Sizing</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Panel.html#topIndex" class="tsd-kind-icon">top<wbr>Index</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Panel.html#type" class="tsd-kind-icon">type</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Panel.html#viewboxStretch" class="tsd-kind-icon">viewbox<wbr>Stretch</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Panel.html#add" class="tsd-kind-icon">add</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Panel.html#copy" class="tsd-kind-icon">copy</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class tsd-is-static">
<a href="Panel.html#static-definePanelLayout" class="tsd-kind-icon">define<wbr>Panel<wbr>Layout</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Panel.html#elt" class="tsd-kind-icon">elt</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Panel.html#findColumnForLocalX" class="tsd-kind-icon">find<wbr>Column<wbr>For<wbr>LocalX</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Panel.html#findItemPanelForData" class="tsd-kind-icon">find<wbr>Item<wbr>Panel<wbr>For<wbr>Data</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Panel.html#findMainElement" class="tsd-kind-icon">find<wbr>Main<wbr>Element</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Panel.html#findObject" class="tsd-kind-icon">find<wbr>Object</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Panel.html#findRowForLocalY" class="tsd-kind-icon">find<wbr>Row<wbr>For<wbr>LocalY</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Panel.html#getColumnDefinition" class="tsd-kind-icon">get<wbr>Column<wbr>Definition</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Panel.html#getRowDefinition" class="tsd-kind-icon">get<wbr>Row<wbr>Definition</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Panel.html#graduatedPointForValue" class="tsd-kind-icon">graduated<wbr>Point<wbr>For<wbr>Value</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Panel.html#graduatedValueForPoint" class="tsd-kind-icon">graduated<wbr>Value<wbr>For<wbr>Point</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Panel.html#insertAt" class="tsd-kind-icon">insert<wbr>At</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Panel.html#rebuildItemElements" class="tsd-kind-icon">rebuild<wbr>Item<wbr>Elements</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Panel.html#remove" class="tsd-kind-icon">remove</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Panel.html#removeAt" class="tsd-kind-icon">remove<wbr>At</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Panel.html#removeColumnDefinition" class="tsd-kind-icon">remove<wbr>Column<wbr>Definition</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Panel.html#removeRowDefinition" class="tsd-kind-icon">remove<wbr>Row<wbr>Definition</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="Panel.html#updateTargetBindings" class="tsd-kind-icon">update<wbr>Target<wbr>Bindings</a>
</li>
<li class=" tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a href="Panel.html#static-Auto" class="tsd-kind-icon">Auto</a>
</li>
<li class=" tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a href="Panel.html#static-Graduated" class="tsd-kind-icon">Graduated</a>
</li>
<li class=" tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a href="Panel.html#static-Grid" class="tsd-kind-icon">Grid</a>
</li>
<li class=" tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a href="Panel.html#static-Horizontal" class="tsd-kind-icon">Horizontal</a>
</li>
<li class=" tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a href="Panel.html#static-Link" class="tsd-kind-icon">Link</a>
</li>
<li class=" tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a href="Panel.html#static-Position" class="tsd-kind-icon">Position</a>
</li>
<li class=" tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a href="Panel.html#static-Spot" class="tsd-kind-icon">Spot</a>
</li>
<li class=" tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a href="Panel.html#static-Table" class="tsd-kind-icon">Table</a>
</li>
<li class=" tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a href="Panel.html#static-TableColumn" class="tsd-kind-icon">Table<wbr>Column</a>
</li>
<li class=" tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a href="Panel.html#static-TableRow" class="tsd-kind-icon">Table<wbr>Row</a>
</li>
<li class=" tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a href="Panel.html#static-Vertical" class="tsd-kind-icon">Vertical</a>
</li>
<li class=" tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a href="Panel.html#static-Viewbox" class="tsd-kind-icon">Viewbox</a>
</li>
</ul>
</li>
</ul>
<ul class="after-current">
</ul>
</nav>
</div>
</div>
</div>
<div class="container-fluid bottom-copyright plr15">
Copyright &copy; 1998-2019 by Northwoods Software Corporation.
</div>
<div class="overlay"></div>
<script src="../assets/js/main.js"></script>
<script src="../../assets/js/api.js"></script>
<script src="../../assets/js/bootstrap.min.js"></script>
<script>if (location.protocol == 'file:') document.write('<script src="../assets/js/search.js"><' + '/script>');</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-1506307-5', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>