gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
165 lines (163 loc) • 34.1 kB
HTML
<html class="default"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>PanelLayout | 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"><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> <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"><b>GoJS</b>® Diagramming Components<br/>version 2.3.8<br/>by <a href="https://www.nwoods.com/">Northwoods Software®</a></div><div><h1>Class PanelLayout <span class="tsd-flag ts-flagAbstract">Abstract</span> </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><span class="target">PanelLayout</span><ul class="tsd-hierarchy"><li><a href="PanelLayoutFlow.html" class="tsd-signature-type" data-tsd-kind="Class">PanelLayoutFlow</a></li></ul></li></ul></section><section class="tsd-panel tsd-comment"><div class="tsd-comment tsd-typography">
<p>This is the abstract base class for all Panel Layouts, which inform the possible Panel types.
It is possible to create your own Panel type by creating a subclass of PanelLayout,
though this is not common and not recommended for beginners.</p>
<div><p>By default, GoJS has 12 Panel types, each corresponding to a PanelLayout subclass:</p>
<ul>
<li>'Position', <code>PanelLayoutPosition</code></li>
<li>'Horizontal', <code>PanelLayoutHorizontal</code></li>
<li>'Vertical', <code>PanelLayoutVertical</code></li>
<li>'Spot', <code>PanelLayoutSpot</code></li>
<li>'Auto', <code>PanelLayoutAuto</code></li>
<li>'Table', <code>PanelLayoutTable</code></li>
<li>'Viewbox', <code>PanelLayoutViewbox</code></li>
<li>'TableRow', <code>PanelLayoutTableRow</code></li>
<li>'TableColumn', <code>PanelLayoutTableColumn</code></li>
<li>'Link', <code>PanelLayoutLink</code></li>
<li>'Grid', <code>PanelLayoutGrid</code></li>
<li>'Graduated', <code>PanelLayoutGraduated</code></li>
</ul>
<p>None of these predefined panel layout classes have their own documentation pages.</p>
<p>These panel layouts are included by default in builds of <code>go.js</code> and <code>go-module.js</code> and their respective debug versions.
When building from source, you can optionally exclude all of them except <code>Position</code>,
<code>Vertical</code>, <code>Auto</code>, <code>Link</code>, and <code>Grid</code>.
This is demonstrated in <code>minimalSource</code> and <code>maximalSource</code>, in the <code>/projects</code> folder.</p>
<p>Registering a new PanelLayout is done by calling the static function, <a href="Panel.html#static-definePanelLayout">Panel.definePanelLayout</a>:</p>
<pre><code class="language-js"><span class="hl-4">Panel</span><span class="hl-2">.</span><span class="hl-5">definePanelLayout</span><span class="hl-2">(</span><span class="hl-6">'Table'</span><span class="hl-2">, </span><span class="hl-1">new</span><span class="hl-2"> </span><span class="hl-5">PanelLayoutCustom</span><span class="hl-2">());</span>
</code></pre>
<p>Each PanelLayout must define a <a href="PanelLayout.html#measure">measure</a> and <a href="PanelLayout.html#arrange">arrange</a> method.
The measure method must call <a href="PanelLayout.html#measureElement">measureElement</a> with each element of the Panel,
which sets each element's <a href="GraphObject.html#measuredBounds">GraphObject.measuredBounds</a>. These bounds can be used to determine object layout.
The arrange method must call <a href="PanelLayout.html#arrangeElement">arrangeElement</a> with each element of the Panel to position the objects relative to the Panel.
Remember that each Panel defines its own coordinate system, which is used for sizing and positioning of the panel's elements.</p>
<p>An instance of a PanelLayout is shared by all copies of a Panel that uses it.</p>
<p>There is an example PanelLayout in the <a href="../../samples/panelLayout.html">PanelLayout sample</a>.
There is a Flow PanelLayout extension at <a href="PanelLayoutFlow.html">PanelLayoutFlow</a>, demonstrated at
<a href="../../extensionsJSM/PanelLayoutFlow.html">Flow PanelLayout sample</a>.</p>
</div><dl class="tsd-comment-tags"><dt class="">since</dt><dd><p>2.0</p>
</dd></dl></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="PanelLayout.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="PanelLayout.html#name" class="tsd-kind-icon">name</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="PanelLayout.html#arrange" class="tsd-kind-icon">arrange</a></li><li class="tsd-kind-method tsd-parent-kind-class tsd-is-protected"><a href="PanelLayout.html#arrangeElement" class="tsd-kind-icon">arrange<wbr/>Element</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="PanelLayout.html#measure" class="tsd-kind-icon">measure</a></li><li class="tsd-kind-method tsd-parent-kind-class tsd-is-protected"><a href="PanelLayout.html#measureElement" class="tsd-kind-icon">measure<wbr/>Element</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="PanelLayout.html#remeasureObject" class="tsd-kind-icon">remeasure<wbr/>Object</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 id="constructor" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> constructor<a href="#constructor" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-signatures tsd-kind-constructor tsd-parent-kind-class"><li class="tsd-signature tsd-kind-icon">new <wbr/>Panel<wbr/>Layout<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="PanelLayout.html" class="tsd-signature-type" data-tsd-kind="Class">PanelLayout</a></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>This class is abstract. Define your own subclass if you want to implement a custom panel layout.</p>
</div><h4 class="tsd-returns-title">Returns <a href="PanelLayout.html" class="tsd-signature-type" data-tsd-kind="Class">PanelLayout</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 id="name" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> name<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><a href="#name" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Gets or sets the name of this instance of a particular panel layout.</p>
</div></li></ul></section></section><section class="tsd-panel-group tsd-member-group "><h2>Methods</h2><section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="arrange" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="tsd-flag ts-flagVirtual">Virtual</span> arrange<a href="#arrange" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class"><li class="tsd-signature tsd-kind-icon">arrange<span class="tsd-signature-symbol">(</span>panel<span class="tsd-signature-symbol">: </span><a href="Panel.html" class="tsd-signature-type" data-tsd-kind="Class">Panel</a>, elements<span class="tsd-signature-symbol">: </span><a href="GraphObject.html" class="tsd-signature-type" data-tsd-kind="Class">GraphObject</a><span class="tsd-signature-symbol">[]</span>, union<span class="tsd-signature-symbol">: </span><a href="Rect.html" class="tsd-signature-type" data-tsd-kind="Class">Rect</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>After measuring, a Panel must arrange each element, giving the elements a position and size in the Panel's coordinate system.
This must call <a href="PanelLayout.html#arrangeElement">arrangeElement</a> with each Panel element, which will set that element's <a href="GraphObject.html#actualBounds">GraphObject.actualBounds</a>.</p>
<div><p>For arranging some elements, it is useful to know the total unioned area of every element, which is given as the <code>union</code> argument.
This Rect can be used to right-align or center-align, etc, elements within an area.</p>
<p>For example, PanelLayoutHorizontal arranges each element sequentially, starting with an <code>x</code> value of <code>0</code>,
and increasing it by each previous element's <a href="GraphObject.html#measuredBounds">GraphObject.measuredBounds</a> <code>width</code>.
The horizontal Panel arranges each element with a <code>y</code> value determined by the <code>union</code> argument's <code>height</code>
considering the <a href="GraphObject.html#alignment">GraphObject.alignment</a> of the element, and the GraphObject's own <code>measuredBounds.height</code>.</p>
</div></div><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5>panel: <a href="Panel.html" class="tsd-signature-type" data-tsd-kind="Class">Panel</a></h5><div class="tsd-comment tsd-typography">
<p>Panel which called this layout</p>
</div></li><li><h5>elements: <a href="GraphObject.html" class="tsd-signature-type" data-tsd-kind="Class">GraphObject</a><span class="tsd-signature-symbol">[]</span></h5><div class="tsd-comment tsd-typography">
<p>Array of Panel elements</p>
</div></li><li><h5>union: <a href="Rect.html" class="tsd-signature-type" data-tsd-kind="Class">Rect</a></h5><div class="tsd-comment tsd-typography">
<p>rectangle, if properly constructed in <a href="PanelLayout.html#measure">measure</a>, that contains the expected union bounds of every element in the Panel.</p>
</div></li></ul><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4></li></ul></section><section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-protected"><a id="arrangeElement" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="tsd-flag ts-flagProtected">Protected</span> arrange<wbr/>Element<a href="#arrangeElement" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-protected"><li class="tsd-signature tsd-kind-icon">arrange<wbr/>Element<span class="tsd-signature-symbol">(</span>obj<span class="tsd-signature-symbol">: </span><a href="GraphObject.html" class="tsd-signature-type" data-tsd-kind="Class">GraphObject</a>, x<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>, y<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>, width<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>, height<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>, clipRect<span class="tsd-signature-symbol">?: </span><a href="Rect.html" class="tsd-signature-type" data-tsd-kind="Class">Rect</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Arranges the GraphObject onto its parent Panel.
The passed-in numbers typically account for <a href="GraphObject.html#margin">GraphObject.margin</a> and other offsets.
The <code>x</code> and <code>y</code> coordinates are where GraphObjects will be placed within the Panel's own coordinates
(from the Panel's top-left corner). The <code>width</code> and <code>height</code> are the size it will take up within the Panel's coordinates.</p>
<div><p>This sets the <a href="GraphObject.html#actualBounds">GraphObject.actualBounds</a> of the <code>obj</code>.</p>
</div></div><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5>obj: <a href="GraphObject.html" class="tsd-signature-type" data-tsd-kind="Class">GraphObject</a></h5><div class="tsd-comment tsd-typography">
<p>GraphObject to be arranged.</p>
</div></li><li><h5>x: <span class="tsd-signature-type">number</span></h5><div class="tsd-comment tsd-typography">
<p>The final x value of actualBounds that the Panel computes for the GraphObject.</p>
</div></li><li><h5>y: <span class="tsd-signature-type">number</span></h5><div class="tsd-comment tsd-typography">
<p>The final y value of actualBounds that the Panel computes for the GraphObject.</p>
</div></li><li><h5>width: <span class="tsd-signature-type">number</span></h5><div class="tsd-comment tsd-typography">
<p>The final width value of actualBounds that the Panel computes for the GraphObject.</p>
</div></li><li><h5>height: <span class="tsd-signature-type">number</span></h5><div class="tsd-comment tsd-typography">
<p>The final height value of actualBounds that the Panel computes for the GraphObject.</p>
</div></li><li><h5><span class="tsd-flag ts-flagOptional">Optional</span> clipRect: <a href="Rect.html" class="tsd-signature-type" data-tsd-kind="Class">Rect</a></h5><div class="tsd-comment tsd-typography">
<p>an optional area to constrain this actualBounds to when picking and drawing.
By default, this is only used with Table Panel elements, which are clipped to their cell sizes.</p>
</div></li></ul><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4></li></ul></section><section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="measure" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="tsd-flag ts-flagVirtual">Virtual</span> measure<a href="#measure" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class"><li class="tsd-signature tsd-kind-icon">measure<span class="tsd-signature-symbol">(</span>panel<span class="tsd-signature-symbol">: </span><a href="Panel.html" class="tsd-signature-type" data-tsd-kind="Class">Panel</a>, width<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>, height<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>, elements<span class="tsd-signature-symbol">: </span><a href="GraphObject.html" class="tsd-signature-type" data-tsd-kind="Class">GraphObject</a><span class="tsd-signature-symbol">[]</span>, union<span class="tsd-signature-symbol">: </span><a href="Rect.html" class="tsd-signature-type" data-tsd-kind="Class">Rect</a>, minw<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>, minh<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Given the available size, measure the Panel and
determine its expected drawing size.</p>
<div><p>This must call <a href="PanelLayout.html#measureElement">measureElement</a> with each Panel element, which will set the
<a href="GraphObject.html#measuredBounds">GraphObject.measuredBounds</a> of those elements. Depending on how the Panel intends to lay out its elements,
the programmer must construction the <code>union</code> by setting <code>union.width</code> and <code>union.height</code> of the supplied argument.
For example PanelLayoutHorizontal measures its elements and sums their widths to set its <code>union.width</code>,
and takes the maximum of their heights to set its <code>union.height</code>.</p>
<p>This union must reflect the measured size of the Panel. After measure is called, the Panel class will modify this union Rect,
constraining its size by the Panel's <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>,
before passing it to <a href="PanelLayout.html#arrange">arrange</a>.</p>
</div></div><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5>panel: <a href="Panel.html" class="tsd-signature-type" data-tsd-kind="Class">Panel</a></h5><div class="tsd-comment tsd-typography">
<p>Panel which called this layout</p>
</div></li><li><h5>width: <span class="tsd-signature-type">number</span></h5><div class="tsd-comment tsd-typography">
<p>expected width of the Panel, informed by any containing Panel and by the Panel's own
<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>.
Often Infinity.</p>
</div></li><li><h5>height: <span class="tsd-signature-type">number</span></h5><div class="tsd-comment tsd-typography">
<p>expected height of the Panel.</p>
</div></li><li><h5>elements: <a href="GraphObject.html" class="tsd-signature-type" data-tsd-kind="Class">GraphObject</a><span class="tsd-signature-symbol">[]</span></h5><div class="tsd-comment tsd-typography">
<p>Array of Panel elements</p>
</div></li><li><h5>union: <a href="Rect.html" class="tsd-signature-type" data-tsd-kind="Class">Rect</a></h5><div class="tsd-comment tsd-typography">
<p>rectangle to be modified to contain the expected union bounds of every element in the Panel,
to be potentially used in <a href="PanelLayout.html#arrange">arrange</a>.</p>
</div></li><li><h5>minw: <span class="tsd-signature-type">number</span></h5><div class="tsd-comment tsd-typography">
<p>expected minimum width of the Panel, informed by any containing Panel. Often zero.</p>
</div></li><li><h5>minh: <span class="tsd-signature-type">number</span></h5><div class="tsd-comment tsd-typography">
<p>expected minimum height of the Panel.</p>
</div></li></ul><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4></li></ul></section><section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-protected"><a id="measureElement" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="tsd-flag ts-flagProtected">Protected</span> measure<wbr/>Element<a href="#measureElement" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-protected"><li class="tsd-signature tsd-kind-icon">measure<wbr/>Element<span class="tsd-signature-symbol">(</span>obj<span class="tsd-signature-symbol">: </span><a href="GraphObject.html" class="tsd-signature-type" data-tsd-kind="Class">GraphObject</a>, width<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>, height<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>, minw<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>, minh<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Given the available size, measure one element of the Panel and
determine its expected drawing size. This sets the <a href="GraphObject.html#measuredBounds">GraphObject.measuredBounds</a> of the object,
which can then be used to determine the arrangement of objects in the PanelLayout.</p>
</div><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5>obj: <a href="GraphObject.html" class="tsd-signature-type" data-tsd-kind="Class">GraphObject</a></h5><div class="tsd-comment tsd-typography">
<p>Panel which called this layout</p>
</div></li><li><h5>width: <span class="tsd-signature-type">number</span></h5><div class="tsd-comment tsd-typography">
<p>expected width of the GraphObject</p>
</div></li><li><h5>height: <span class="tsd-signature-type">number</span></h5><div class="tsd-comment tsd-typography">
<p>expected height of the GraphObject</p>
</div></li><li><h5>minw: <span class="tsd-signature-type">number</span></h5><div class="tsd-comment tsd-typography">
<p>minimum width of the GraphObject</p>
</div></li><li><h5>minh: <span class="tsd-signature-type">number</span></h5><div class="tsd-comment tsd-typography">
<p>minimum height of the GraphObject</p>
</div></li></ul><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4></li></ul></section><section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="remeasureObject" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> remeasure<wbr/>Object<a href="#remeasureObject" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class"><li class="tsd-signature tsd-kind-icon">remeasure<wbr/>Object<span class="tsd-signature-symbol">(</span>obj<span class="tsd-signature-symbol">: </span><a href="GraphObject.html" class="tsd-signature-type" data-tsd-kind="Class">GraphObject</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Uncommon: Force a given GraphObject to remeasure in the near future.
If a PanelLayout is not just measuring elements, but must also modify some of its elements,
this must be called on those elements <em>before</em> modifications are made.
This prevents the elements from potentially remeasuring
the entire visual tree, which would cause an infinite loop.</p>
<div><p>Normally, panels do not modify the dimensions of their elements. In other words, a Panel
would not normally set a property like <a href="GraphObject.html#desiredSize">GraphObject.desiredSize</a> or <a href="TextBlock.html#text">TextBlock.text</a>
or <a href="Shape.html#geometry">Shape.geometry</a> on any of its elements. Some custom panels may wish to do this,
especially if the programmer knows it will not affect the size of any containing Panel.</p>
<p>Calling this method before changing a property preempts the remeasuring of any <em>containing</em> Panels,
ensuring only the GraphObject and its own child elements will be remeasured.</p>
<p>This is used in <a href="PanelLayout.html">PanelLayout</a> "Viewbox" on its one element.
It modifies that element's <a href="GraphObject.html#scale">GraphObject.scale</a> and is certain that will not
affect Panels up the visual tree.</p>
</div><dl class="tsd-comment-tags"><dt class="">since</dt><dd><p>2.2</p>
</dd></dl></div><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5>obj: <a href="GraphObject.html" class="tsd-signature-type" data-tsd-kind="Class">GraphObject</a></h5><div class="tsd-comment tsd-typography">
<p>GraphObject to be invalidated.</p>
</div></li></ul><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4></li></ul></section></section></div><div class="col-4 col-menu menu-sticky-wrap menu-highlight"><nav class="tsd-navigation primary"><ul><li class=""><a href="../index.html">GoJS Class Index</a></li></ul></nav><nav class="tsd-navigation secondary menu-sticky"><ul><li class="current tsd-kind-class"><a href="PanelLayout.html" class="tsd-kind-icon">Panel<wbr/>Layout</a><ul><li class="tsd-kind-constructor tsd-parent-kind-class"><a href="PanelLayout.html#constructor" class="tsd-kind-icon">constructor</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="PanelLayout.html#name" class="tsd-kind-icon">name</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="PanelLayout.html#arrange" class="tsd-kind-icon">arrange</a></li><li class="tsd-kind-method tsd-parent-kind-class tsd-is-protected"><a href="PanelLayout.html#arrangeElement" class="tsd-kind-icon">arrange<wbr/>Element</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="PanelLayout.html#measure" class="tsd-kind-icon">measure</a></li><li class="tsd-kind-method tsd-parent-kind-class tsd-is-protected"><a href="PanelLayout.html#measureElement" class="tsd-kind-icon">measure<wbr/>Element</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="PanelLayout.html#remeasureObject" class="tsd-kind-icon">remeasure<wbr/>Object</a></li></ul></li></ul></nav></div></div></div><div class="tsd w-full max-w-screen-xl mx-auto px-2"><div class="bottom-copyright">Copyright © 1998-2022 by Northwoods Software Corporation.</div></div><footer class=""><div class="tsd w-full max-w-screen-xl mx-auto px-2"><h2>Settings</h2><p class="mb-4">Theme <select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></p></div></footer><div class="overlay"></div><script src="../assets/main.js"></script><script async src="https://www.googletagmanager.com/gtag/js?id=UA-1506307-5"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date()); gtag('config', 'UA-1506307-5');
var getOutboundLink = function(url, label) {
gtag('event', 'click', {
'event_category': 'outbound',
'event_label': label,
'transport_type': 'beacon'
});
}
// topnav
var topButton = document.getElementById("topnavButton");
var topnavList = document.getElementById("topnavList");
topButton.addEventListener("click", function() {
this.classList.toggle("active");
topnavList.classList.toggle("hidden");
document.getElementById("topnavOpen").classList.toggle("hidden");
document.getElementById("topnavClosed").classList.toggle("hidden");
});
document.getElementById("contactBtn").addEventListener("click", function() {
getOutboundLink('https://www.nwoods.com/contact.html', 'contact');
});
document.getElementById("buyBtn").addEventListener("click", function() {
getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');
});
</script></body></html>