gojs

<!DOCTYPE html><html class="default"><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/style-tsd.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script async src="../assets/search.js" id="search-script"></script></head><body><script>document.body.classList.add(localStorage.getItem("tsd-theme") || "os")</script><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\n font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary" href="../../index.html"><h1 class="my-0 p-1 leading-none">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" id="contactBtn">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" id="buyBtn">Buy</a></li></ul></div></div><hr class="border-b border-gray-600 opacity-50 my-0 py-0"/></nav><div class="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-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget search no-caption">Search</label><input type="text" id="tsd-search-field"/></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> <input type="checkbox" id="tsd-filter-inherited"/><label class="tsd-widget" for="tsd-filter-inherited">Inherited</label></div></div><a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a></div></div></div></div></div><div class="tsd-page-title"><div class="w-full max-w-screen-xl mx-auto px-2"><div class="top-copyright">GoJS® Diagramming Components version 2.3.8 by <a href="https://www.nwoods.com/">Northwoods Software®</a></div><div><h1>Class Panel </h1></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. <div>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 -- this creates borders.</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. The second argument may also be an instance of <a href="PanelLayout.html">PanelLayout</a>, if you want to use a custom panel layout. <pre><code class="language-js">// Either: new go.Panel(go.Panel.Horizontal, ... // Or: new go.Panel("Horizontal", ... // Full example: p = new go.Panel("Horizontal", { width: 60, height: 60 }) // panel properties // elements in the panel: .add(new go.Shape("Rectangle", { stroke: "lime" })) .add(new go.TextBlock("Some Text")) </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">const diagram = new go.Diagram("myDiagramDiv", // Diagram options: { . . . grid: new go.Panel("Grid", { gridCellSize: new go.Size(40, 40) }) .add(new go.Shape("LineH", { stroke: "lightgray" })) .add(new go.Shape("LineV", { stroke: "lightgray" })), . . . }); </code></pre> Or to get a green bar effect: <pre><code class="language-js"> const diagram = new go.Diagram("myDiagramDiv", { . . . grid: new go.Panel("Grid", { gridCellSize: new go.Size(100, 100) }) .add(new go.Shape("BarH", { fill: "lightgreen", height: 50 })), . . . }); </code></pre> But Grid Panels can also be stand alone objects: <pre><code class="language-js">new go.Node("Grid", { gridCellSize: new go.Size(6, 6), width: 60, height: 60 }) .add(new go.Shape("LineH", { stroke: "gray" })) .add(new 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">new go.Part("Graduated") .add(new go.Shape({ geometryString: "M0 0 H400" })) .add(new go.Shape({ geometryString: "M0 0 V10" })) // offset to display below ticks .add(new 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>. Alternatively you can control the number and order of elements that are copies of an item template by setting or binding the <a href="Panel.html#itemArray">itemArray</a> property. This is discussed below. 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> 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></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"><a href="Panel.html#addColumnDefinition" class="tsd-kind-icon">addColumnDefinition</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Panel.html#addRowColumnDefinition" class="tsd-kind-icon">addRowColumnDefinition</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Panel.html#addRowDefinition" class="tsd-kind-icon">addRowDefinition</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"><a href="Panel.html#copyTemplate" class="tsd-kind-icon">copyTemplate</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><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></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-index-group tsd-is-inherited"><h2>Inherited Members</h2><section class="tsd-panel tsd-index-panel"><div class="tsd-index-content"><section class="tsd-index-section undefined"><h3>Properties</h3><ul class="tsd-index-list"><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#actionCancel" class="tsd-kind-icon">GraphObject.actionCancel</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#actionDown" class="tsd-kind-icon">GraphObject.actionDown</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#actionMove" class="tsd-kind-icon">GraphObject.actionMove</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#actionUp" class="tsd-kind-icon">GraphObject.actionUp</a></li><li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="GraphObject.html#actualBounds" class="tsd-kind-icon">GraphObject.actualBounds</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#alignment" class="tsd-kind-icon">GraphObject.alignment</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#alignmentFocus" class="tsd-kind-icon">GraphObject.alignmentFocus</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#angle" class="tsd-kind-icon">GraphObject.angle</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#background" class="tsd-kind-icon">GraphObject.background</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#click" class="tsd-kind-icon">GraphObject.click</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#column" class="tsd-kind-icon">GraphObject.column</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#columnSpan" class="tsd-kind-icon">GraphObject.columnSpan</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#contextClick" class="tsd-kind-icon">GraphObject.contextClick</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#contextMenu" class="tsd-kind-icon">GraphObject.contextMenu</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#cursor" class="tsd-kind-icon">GraphObject.cursor</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#desiredSize" class="tsd-kind-icon">GraphObject.desiredSize</a></li><li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="GraphObject.html#diagram" class="tsd-kind-icon">GraphObject.diagram</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#doubleClick" class="tsd-kind-icon">GraphObject.doubleClick</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#enabledChanged" class="tsd-kind-icon">GraphObject.enabledChanged</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#fromEndSegmentLength" class="tsd-kind-icon">GraphObject.fromEndSegmentLength</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#fromLinkable" class="tsd-kind-icon">GraphObject.fromLinkable</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#fromLinkableDuplicates" class="tsd-kind-icon">GraphObject.fromLinkableDuplicates</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#fromLinkableSelfNode" class="tsd-kind-icon">GraphObject.fromLinkableSelfNode</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#fromMaxLinks" class="tsd-kind-icon">GraphObject.fromMaxLinks</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#fromShortLength" class="tsd-kind-icon">GraphObject.fromShortLength</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#fromSpot" class="tsd-kind-icon">GraphObject.fromSpot</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#height" class="tsd-kind-icon">GraphObject.height</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#isActionable" class="tsd-kind-icon">GraphObject.isActionable</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#isPanelMain" class="tsd-kind-icon">GraphObject.isPanelMain</a></li><li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="GraphObject.html#layer" class="tsd-kind-icon">GraphObject.layer</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#margin" class="tsd-kind-icon">GraphObject.margin</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#maxSize" class="tsd-kind-icon">GraphObject.maxSize</a></li><li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="GraphObject.html#measuredBounds" class="tsd-kind-icon">GraphObject.measuredBounds</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#minSize" class="tsd-kind-icon">GraphObject.minSize</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#mouseDragEnter" class="tsd-kind-icon">GraphObject.mouseDragEnter</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#mouseDragLeave" class="tsd-kind-icon">GraphObject.mouseDragLeave</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#mouseDrop" class="tsd-kind-icon">GraphObject.mouseDrop</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#mouseEnter" class="tsd-kind-icon">GraphObject.mouseEnter</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#mouseHold" class="tsd-kind-icon">GraphObject.mouseHold</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#mouseHover" class="tsd-kind-icon">GraphObject.mouseHover</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#mouseLeave" class="tsd-kind-icon">GraphObject.mouseLeave</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#mouseOver" class="tsd-kind-icon">GraphObject.mouseOver</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#name" class="tsd-kind-icon">GraphObject.name</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#opacity" class="tsd-kind-icon">GraphObject.opacity</a></li><li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="GraphObject.html#panel" class="tsd-kind-icon">GraphObject.panel</a></li><li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="GraphObject.html#part" class="tsd-kind-icon">GraphObject.part</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#pickable" class="tsd-kind-icon">GraphObject.pickable</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#portId" class="tsd-kind-icon">GraphObject.portId</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#position" class="tsd-kind-icon">GraphObject.position</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#row" class="tsd-kind-icon">GraphObject.row</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#rowSpan" class="tsd-kind-icon">GraphObject.rowSpan</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#scale" class="tsd-kind-icon">GraphObject.scale</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#segmentFraction" class="tsd-kind-icon">GraphObject.segmentFraction</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#segmentIndex" class="tsd-kind-icon">GraphObject.segmentIndex</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#segmentOffset" class="tsd-kind-icon">GraphObject.segmentOffset</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#segmentOrientation" class="tsd-kind-icon">GraphObject.segmentOrientation</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#shadowVisible" class="tsd-kind-icon">GraphObject.shadowVisible</a></li