sgojs

<!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="Documentation for GoJS API"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="../../assets/css/style.css"> <link rel="stylesheet" href="../assets/css/main.css"> <script async src="../assets/js/search.js" id="search-script"></script> </head> <body> <header> <nav id="navTop" class="w-full z-30 top-0 text-white bg-nwoods-primary"> <div class="w-full container max-w-screen-lg mx-auto flex flex-wrap sm:flex-nowrap items-center justify-between mt-0 py-2"> <div class="md:pl-4"> <a class="text-white hover:text-white no-underline hover:no-underline font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary" href="../../index.html"> <h1 class="mb-0 p-1">GoJS</h1> </a> </div> <button id="topnavButton" class="rounded-lg sm:hidden focus:outline-none focus:ring" aria-label="Navigation"> <svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6"> <path id="topnavOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path> <path id="topnavClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg> </button> <div id="topnavList" class="hidden sm:block items-center w-auto mt-0 text-white p-0 z-20"> <ul class="list-reset list-none font-semibold flex justify-end flex-wrap sm:flex-nowrap items-center px-0 pb-0"> <li class="p-1 sm:p-0"><a class="topnav-link" href="../../learn/index.html">Learn</a></li> <li class="p-1 sm:p-0"><a class="topnav-link" href="../../samples/index.html">Samples</a></li> <li class="p-1 sm:p-0"><a class="topnav-link" href="../../intro/index.html">Intro</a></li> <li class="p-1 sm:p-0"><a class="topnav-link" href="../../api/index.html">API</a></li> <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/products/register.html">Register</a></li> <li class="p-1 sm:p-0"><a class="topnav-link" href="../../download.html">Download</a></li> <li class="p-1 sm:p-0"><a class="topnav-link" href="https://forum.nwoods.com/c/gojs/11">Forum</a></li> <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/contact.html" target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a></li> <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/sales/index.html" target="_blank"rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a></li> </ul> </div> </div> <hr class="border-b border-gray-600 opacity-50 my-0 py-0" /> </nav> <div class="tsd tsd-page-header"> <div class="tsd-page-toolbar"> <div class="w-full max-w-screen-xl mx-auto px-2"> <div class="table-wrap"> <div class="table-cell" id="tsd-search" data-index="../assets/js/search.json" 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"> All <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 tsd-page-title"> <div class="w-full max-w-screen-xl mx-auto px-2"> <div class="top-copyright"> GoJS® Diagramming Components version 2.1.47 by <a href="https://www.nwoods.com/">Northwoods Software®</a> </div> <div> <h1>Class Panel</h1> </div> </div> </div> </div> </header> <div class="tsd w-full max-w-screen-xl mx-auto pb-4"> <div class="row px-2 w-full"> <div class="col-8 col-content"> <section class="tsd-panel tsd-hierarchy"> <h3>Hierarchy</h3> <ul class="tsd-hierarchy"> <li> <a href="GraphObject.html" class="tsd-signature-type" data-tsd-kind="Class">GraphObject</a> <ul class="tsd-hierarchy"> <li> Panel <ul class="tsd-hierarchy"> <li> <a href="Part.html" class="tsd-signature-type" data-tsd-kind="Class">Part</a> </li> </ul> </li> </ul> </li> </ul> </section> <section class="tsd-panel tsd-comment"> <div class="tsd-comment tsd-typography"> 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. 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>. 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: <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> Using <a href="../../intro/buildingObjects.html">GraphObject.make</a>, the second argument can be used to declare the Panel type: <pre><code class="language-js">// Either: $(go.Panel, go.Panel.Horizontal, ... // Or: $(go.Panel, "Horizontal", ... // Full example: $(go.Panel, "Horizontal", { width: 60, height: 60 }, // panel properties // elements in the panel: $(go.Shape, "Rectangle", { stroke: "lime" }), $(go.TextBlock, "Some Text") ) // end of panel definition </code></pre> For an overview of most Panel types, please read the <a href="../../intro/panels.html">Introduction page on Panels</a>. <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. <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. 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. Please read the <a href="../../intro/tablePanels.html">Introduction page on Table Panels</a> for more examples and explanation. <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. For an example that uses TableRow Panels, see <a href="../../samples/records.html">Records sample</a>. <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>. <pre><code class="language-js">$(go.Diagram, "myDiagramDiv", { . . . grid: $(go.Panel, "Grid", { gridCellSize: new go.Size(40, 40) }, $(go.Shape, "LineH", { stroke: "lightgray" }), $(go.Shape, "LineV", { stroke: "lightgray" }) ), . . . }); </code></pre> Or to get a green bar effect: <pre><code class="language-js">$(go.Diagram, "myDiagramDiv", { . . . grid: $(go.Panel, "Grid", { gridCellSize: new go.Size(100, 100) }, $(go.Shape, "BarH", { fill: "lightgreen", height: 50 }) ), . . . }); </code></pre> But Grid Panels can also be stand alone objects: <pre><code class="language-js">$(go.Node, go.Panel.Grid, { gridCellSize: new go.Size(6, 6), width: 60, height: 60 }, $(go.Shape, "LineH", { stroke: "gray" }), $(go.Shape, "LineV", { stroke: "gray" })) </code></pre> A Grid Panel's elements do not participate in object picking. Please read the <a href="../../intro/grids.html">Introduction page on Grid Patterns</a> for more examples and explanation. <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. <pre><code class="language-js">$(go.Part, "Graduated", $(go.Shape, { geometryString: "M0 0 H400" }), $(go.Shape, { geometryString: "M0 0 V10" }), // offset to display below ticks $(go.TextBlock, { segmentOffset: new go.Point(0, 12) }) ); </code></pre> 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. 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. 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> 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>. 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>. <h3>Panel Size and Appearance</h3> 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. 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. 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. <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> For live examples of all Panel types, see the <a href="../../intro/panels.html">Introduction page on Panels.</a> <h3>Data Binding</h3> 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. 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>. 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>. 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. 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>. 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 tsd-is-overwrite"><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">alignmentFocusName</a></li> <li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Panel.html#columnCount" class="tsd-kind-icon">columnCount</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Panel.html#columnSizing" class="tsd-kind-icon">columnSizing</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">defaultAlignment</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Panel.html#defaultColumnSeparatorDashArray" class="tsd-kind-icon">defaultColumnSeparatorDashArray</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Panel.html#defaultColumnSeparatorStroke" class="tsd-kind-icon">defaultColumnSeparatorStroke</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Panel.html#defaultColumnSeparatorStrokeWidth" class="tsd-kind-icon">defaultColumnSeparatorStrokeWidth</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Panel.html#defaultRowSeparatorDashArray" class="tsd-kind-icon">defaultRowSeparatorDashArray</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Panel.html#defaultRowSeparatorStroke" class="tsd-kind-icon">defaultRowSeparatorStroke</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Panel.html#defaultRowSeparatorStrokeWidth" class="tsd-kind-icon">defaultRowSeparatorStrokeWidth</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Panel.html#defaultSeparatorPadding" class="tsd-kind-icon">defaultSeparatorPadding</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Panel.html#defaultStretch" class="tsd-kind-icon">defaultStretch</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">graduatedMax</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Panel.html#graduatedMin" class="tsd-kind-icon">graduatedMin</a></li> <li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Panel.html#graduatedRange" class="tsd-kind-icon">graduatedRange</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Panel.html#graduatedTickBase" class="tsd-kind-icon">graduatedTickBase</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Panel.html#graduatedTickUnit" class="tsd-kind-icon">graduatedTickUnit</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Panel.html#gridCellSize" class="tsd-kind-icon">gridCellSize</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Panel.html#gridOrigin" class="tsd-kind-icon">gridOrigin</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Panel.html#isClipping" class="tsd-kind-icon">isClipping</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Panel.html#isEnabled" class="tsd-kind-icon">isEnabled</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Panel.html#isOpposite" class="tsd-kind-icon">isOpposite</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Panel.html#itemArray" class="tsd-kind-icon">itemArray</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Panel.html#itemCategoryProperty" class="tsd-kind-icon">itemCategoryProperty</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Panel.html#itemIndex" class="tsd-kind-icon">itemIndex</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Panel.html#itemTemplate" class="tsd-kind-icon">itemTemplate</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Panel.html#itemTemplateMap" class="tsd-kind-icon">itemTemplateMap</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Panel.html#leftIndex" class="tsd-kind-icon">leftIndex</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">rowCount</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Panel.html#rowSizing" class="tsd-kind-icon">rowSizing</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Panel.html#topIndex" class="tsd-kind-icon">topIndex</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">viewboxStretch</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 tsd-is-overwrite"><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">definePanelLayout</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">findColumnForLocalX</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Panel.html#findItemPanelForData" class="tsd-kind-icon">findItemPanelForData</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Panel.html#findMainElement" class="tsd-kind-icon">findMainElement</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Panel.html#findObject" class="tsd-kind-icon">findObject</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Panel.html#findRowForLocalY" class="tsd-kind-icon">findRowForLocalY</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Panel.html#getColumnDefinition" class="tsd-kind-icon">getColumnDefinition</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Panel.html#getRowDefinition" class="tsd-kind-icon">getRowDefinition</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Panel.html#graduatedPointForValue" class="tsd-kind-icon">graduatedPointForValue</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Panel.html#graduatedValueForPoint" class="tsd-kind-icon">graduatedValueForPoint</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Panel.html#insertAt" class="tsd-kind-icon">insertAt</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Panel.html#rebuildItemElements" class="tsd-kind-icon">rebuildItemElements</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">removeAt</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Panel.html#removeColumnDefinition" class="tsd-kind-icon">removeColumnDefinition</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Panel.html#removeRowDefinition" class="tsd-kind-icon">removeRowDefinition</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Panel.html#updateTargetBindings" class="tsd-kind-icon">updateTargetBindings</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-overwrite 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">TableColumn</a></li> <li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Panel.html#static-TableRow" class="tsd-kind-icon">TableRow</a></li> <li class="tsd-kind-constant tsd-parent-kind-class tsd-is-overwrite 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 tsd-is-overwrite"> <a name="constructor" class="tsd-anchor"></a> <h3> constructor </h3> <ul class="tsd-signatures tsd-kind-constructor tsd-parent-kind-class tsd-is-overwrite"> <li class="tsd-signature tsd-kind-icon">new Panel(type?: <a href="PanelLayout.html" class="tsd-signature-type" data-tsd-kind="Class">PanelLayout</a>): <a href="Panel.html" class="tsd-signature-type" data-tsd-kind="Class">Panel</a></li> </ul> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> 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>. </div> <h4 class="tsd-parameters-title">Parameters</h4> <ul class="tsd-parameters"> <li> <h5>Optional type: <a href="PanelLayout.html" class="tsd-signature-type" data-tsd-kind="Class">PanelLayout</a></h5> <div class="tsd-comment tsd-typography"> If not supplied, the default Panel type is <a href="Panel.html#static-Position">Panel.Position</a>. </div> </li> </ul> <h4 class="tsd-returns-title">Returns <a href="Panel.html" class="tsd-signature-type" data-tsd-kind="Class">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> alignmentFocusName : string </h3> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> 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. This allows Spot Panels to align objects that are nested in the element tree of its own elements. <dl class="tsd-comment-tags"> <dt>since</dt> <dd>1.7 </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> Read-only columnCount : number </h3> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> 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. </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> columnSizing : EnumValue </h3> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> 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>. <dl class="tsd-comment-tags"> <dt>see</dt> <dd><a href="RowColumnDefinition.html#sizing">RowColumnDefinition.sizing</a>, <a href="Panel.html#rowSizing">rowSizing</a> </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 : any </h3> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> Gets or sets the optional model data to which this panel is data-bound. The dat