gojs

<!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>  <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> </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>® Diagramming Components<br/>version 2.0.0-beta8<br/>by <a href="https://www.nwoods.com/">Northwoods Software®</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="Panel.html#static-Link">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'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 "stacks" 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="Panel.html#static-Spot">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' <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'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="Panel.html#static-Link">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="lang-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><p class="boxread"> For an overview of most Panel types, please read the <a href="../../intro/panels.html">Introduction page on Panels</a>.</p> <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 "main" element, signified by the Panel'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 "main" 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. "Spot" and "Auto" 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's table cell is larger than that element.</p> <p><p class="boxrun">Please read the <a href="../../intro/tablePanels.html">Introduction page on Table Panels</a> for more examples and explanation.</p> <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><p class="boxrun">For an example that uses TableRow Panels, see <a href="../../samples/records.html">Records sample</a>.</p> <p><a href="Panel.html#static-Grid">Panel.Grid</a> panels are often used for the Diagram's <a href="Diagram.html#grid">Diagram.grid</a>.</p> <pre><code class="lang-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="lang-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="lang-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's elements do not participate in object picking.</p> <p><p class="boxrun">Please read the <a href="../../intro/grids.html">Introduction page on Grid Patterns</a> for more examples and explanation.</p> <p><a href="Panel.html#static-Graduated">Panel.Graduated</a> panels, like Spot and Auto Panels have a "main" element. The other elements within a Graduated Panel are used to define ticks and labels to draw along the main shape's path.</p> <pre><code class="lang-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's main element won'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><p class="boxrun">Please read the <a href="../../intro/graduatedPanels.html">Introduction page on Graduated Panels</a> for more examples and explanation.</p> <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>'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.</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 "default" 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><p class="boxread"> For live examples of all Panel types, see the <a href="../../intro/panels.html">Introduction page on Panels.</a></p> <h3>Data Binding</h3> <p>Panels also provide fundamental support for data binding. When a diagram gets a new model or when a diagram'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><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> <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'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's copying processes, you can supply a custom <a href="Model.html#copyNodeDataFunction">Model.copyNodeDataFunction</a>.</p> <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>.</p> </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-get-signature tsd-parent-kind-class tsd-is-static"><a href="Panel.html#static-Auto" class="tsd-kind-icon">Auto</a></li> <li class="tsd-kind-get-signature tsd-parent-kind-class tsd-is-static"><a href="Panel.html#static-Graduated" class="tsd-kind-icon">Graduated</a></li> <li class="tsd-kind-get-signature tsd-parent-kind-class tsd-is-static"><a href="Panel.html#static-Grid" class="tsd-kind-icon">Grid</a></li> <li class="tsd-kind-get-signature tsd-parent-kind-class tsd-is-static"><a href="Panel.html#static-Horizontal" class="tsd-kind-icon">Horizontal</a></li> <li class="tsd-kind-get-signature tsd-parent-kind-class tsd-is-static"><a href="Panel.html#static-Link" class="tsd-kind-icon">Link</a></li> <li class="tsd-kind-get-signature tsd-parent-kind-class tsd-is-static"><a href="Panel.html#static-Position" class="tsd-kind-icon">Position</a></li> <li class="tsd-kind-get-signature tsd-parent-kind-class tsd-is-static"><a href="Panel.html#static-Spot" class="tsd-kind-icon">Spot</a></li> <li class="tsd-kind-get-signature tsd-parent-kind-class tsd-is-static"><a href="Panel.html#static-Table" class="tsd-kind-icon">Table</a></li> <li class="tsd-kind-get-signature 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-get-signature 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-get-signature tsd-parent-kind-class tsd-is-static"><a href="Panel.html#static-Vertical" class="tsd-kind-icon">Vertical</a></li> <li class="tsd-kind-get-signature tsd-parent-kind-class tsd-is-static"><a href="Panel.html#static-Viewbox" class="tsd-kind-icon">Viewbox</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> </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> </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-get-signature tsd-parent-kind-class tsd-is-static"> <a name="static-Auto" class="tsd-anchor"></a> <h3> <span class="tsd-flag ts-flagStatic">Static</span> <span class="tsd-flag ts-flagReadOnly">Read-only</span> Auto <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>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> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-get-signature tsd-parent-kind-class tsd-is-static"> <a name="static-Graduated" class="tsd-anchor"></a> <h3> <span class="tsd-flag ts-flagStatic">Static</span> <span class="tsd-flag ts-flagReadOnly">Read-only</span> Graduated <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>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> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-get-signature tsd-parent-kind-class tsd-is-static"> <a name="static-Grid" class="tsd-anchor"></a> <h3> <span class="tsd-flag ts-flagStatic">Static</span> <span class="tsd-flag ts-flagReadOnly">Read-only</span> Grid <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>This value for <a href="Panel.html#type">type</a> is used to draw regular patterns of lines.</p> </div> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-get-signature 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-flagReadOnly">Read-only</span> Horizontal <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>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> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-get-signature tsd-parent-kind-class tsd-is-static"> <a name="static-Link" class="tsd-anchor"></a> <h3> <span class="tsd-flag ts-flagStatic">Static</span> <span class="tsd-flag ts-flagReadOnly">Read-only</span> Link <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>This value for <a href="Panel.html#type">type</a> is used for <a href="Panel.html#static-Link">Link</a>s and adornments that act as <a href="Panel.html#static-Link">Link</a>s.</p> </div> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-get-signature tsd-parent-kind-class tsd-is-static"> <a name="static-Position" class="tsd-anchor"></a> <h3> <span class="tsd-flag ts-flagStatic">Static</span> <span class="tsd-flag ts-flagReadOnly">Read-only</span> Position <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>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> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-get-signature tsd-parent-kind-class tsd-is-static"> <a name="static-Spot" class="tsd-anchor"></a> <h3> <span class="tsd-flag ts-flagStatic">Static</span> <span class="tsd-flag ts-flagReadOnly">Read-only</span> Spot <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>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> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-get-signature tsd-parent-kind-class tsd-is-static"> <a name="static-Table" class="tsd-anchor"></a> <h3> <span class="tsd-flag ts-flagStatic">Static</span> <span class="tsd-flag ts-flagReadOnly">Read-only</span> Table <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>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> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-get-signature tsd-parent-kind-class tsd-is-static"> <a name="static-TableColumn" class="tsd-anchor"></a> <h3> <span class="tsd-flag ts-flagStatic">Static</span> <span class="tsd-flag ts-flagReadOnly">Read-only</span> Table<wbr>Column <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>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> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-get-signature tsd-parent-kind-class tsd-is-static"> <a name="static-TableRow" class="tsd-anchor"></a> <h3> <span class="tsd-flag ts-flagStatic">Static</span> <span class="tsd-flag ts-flagReadOnly">Read-only</span> Table<wbr>Row <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>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> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-get-signature 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-flagReadOnly">Read-only</span> Vertical <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>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> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-get-signature tsd-parent-kind-class tsd-is-static"> <a name="static-Viewbox" class="tsd-anchor"></a> <h3> <span class="tsd-flag ts-flagStatic">Static</span> <span class="tsd-flag ts-flagReadOnly">Read-only</span> Viewbox <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>This value for <a href="Panel.html#type">type</a> rescales a single GraphObject to fit inside the panel depending on the element's <a href="GraphObject.html#stretch">GraphObject.stretch</a> property.</p> </div> </li> </ul> </section> <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, this gets or sets the name of this Panel'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>This read-only property returns the number of columns in this Panel if it is of <a href="Panel.html#type">type</a> <a href="Panel.html#static-Table">Panel.Table</a>. 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>Gets or sets how this Panel's columns deal with extra space if the Panel is of <a href="Panel.html#type">type</a> <a href="Panel.html#static-Table">Panel.Table</a>. 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>