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.1.18<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="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'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="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' <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="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 "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 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'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'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 "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="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'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 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>'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 "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 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'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'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 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'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'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'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'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"><</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">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'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'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"><</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">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'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.separatorStrokeWi