create-gojs-kit
Version:
A CLI for downloading GoJS samples, extensions, and docs
166 lines (164 loc) • 37.2 kB
HTML
<html class="default" lang="en"><head><meta charSet="utf-8"/><link rel="stylesheet" href="../../assets/css/style.css"/><link rel="preconnect" href="https://rsms.me/"/><link rel="stylesheet" href="https://rsms.me/inter/inter.css"/><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/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><link rel="stylesheet" href="../assets/custom.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script><script type="text/javascript">// formerly in api.js
var hash = null;
function changeHash() {
var panels = document.getElementsByClassName("tsd-panel");
for (let i = 0; i < panels.length; i++) {
var p = panels[i];
p.classList.remove("targeted");
}
hash = window.location.hash.slice(1);
if (hash) {
var elt = document.getElementById(hash);
if (elt) elt.parentNode.classList.add("targeted");
}
}
document.addEventListener("DOMContentLoaded", changeHash);
window.addEventListener("hashchange", changeHash);</script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header><nav id="navTop" class="w-full h-[var(--topnav-h)] z-30 bg-[var(--color-background-secondary)] border-b border-b-[var(--color-accent)]"><div class="max-w-screen-xl mx-auto flex flex-wrap items-start justify-between px-4"><a class="!text-white bg-nwoods-primary font-bold !leading-[calc(var(--topnav-h)_-_1px)] my-0 px-2 text-4xl lg:text-5xl logo" href="../../index.html">GoJS</a><div class="relative"><button id="topnavButton" class="h-[calc(var(--topnav-h)_-_1px)] px-2 m-0 text-[var(--color-text)] bg-inherit shadow-none md:hidden hover:!bg-inherit hover:!text-nwoods-accent hover:!shadow-none" aria-label="Navigation"><svg class="h-7 w-7 block" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><div id="topnavList" class="hidden md:block"><div class="absolute right-0 z-30 flex flex-col items-end rounded border border-[var(--color-accent)] p-4 pl-12 shadow bg-[var(--color-background-secondary)] text-[var(--color-text)] font-semibold
md:flex-row md:space-x-4 md:items-start md:border-0 md:p-0 md:shadow-none md:!bg-inherit"><a href="../../learn/index.html">Learn</a><a href="../../samples/index.html">Samples</a><a href="../../intro/index.html">Intro</a><a class="active" href="../../api/index.html">API</a><a href="../../download.html">Download</a><a href="https://forum.nwoods.com/c/gojs/11" target="_blank" rel="noopener">Forum</a><a href="https://nwoods.com/contact.html" target="_blank" rel="noopener" id="contactBtn">Contact</a><a href="https://nwoods.com/sales/index.html" target="_blank" rel="noopener" id="buyBtn">Buy</a></div></div></div></div></nav><script>window.addEventListener("DOMContentLoaded", function () {
// topnav
var topButton = document.getElementById("topnavButton");
var topnavList = document.getElementById("topnavList");
if (topButton && topnavList) {
topButton.addEventListener("click", function (e) {
topnavList
.classList
.toggle("hidden");
e.stopPropagation();
});
document.addEventListener("click", function (e) {
// if the clicked element isn't the list, close the list
if (!topnavList.classList.contains("hidden") && !e.target.closest("#topnavList")) {
topButton.click();
}
});
// set active <a> element
// done via active tag below, always API
}
});</script><div class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><div id="tsd-search-help"><code class="!text-lg">/</code> to search</div><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></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"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><div class="flex w-full max-w-screen-xl mx-auto px-2 items-center justify-between"><div><ul class="tsd-breadcrumb"><li><a href="../index.html">GoJS API</a></li><li><a href="PanelLayout.html">PanelLayout</a></li></ul><h1 class="flex items-center">Class PanelLayout<code class="tsd-tag ts-flagAbstract">Abstract</code> </h1></div><div class="text-xs"><b>GoJS</b>® Diagramming Components<br/>version 3.1.0<br/>by <a href="https://nwoods.com/">Northwoods Software®</a></div></div></div><section class="tsd-panel tsd-hierarchy"><h4>Hierarchy (<a class="link" href="../hierarchy.html#PanelLayout">view full</a>)</h4><ul class="tsd-hierarchy"><li><span class="target">PanelLayout</span><ul class="tsd-hierarchy"><li><a href="PanelLayoutFlow.html" class="tsd-signature-type 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>
<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>.</p>
<p>Registering a new PanelLayout is done by calling the static function, <a href="Panel.html#definePanelLayout" class="tsd-kind-method">Panel.definePanelLayout</a>:</p>
<pre><code class="language-js"><span class="hl-4">PanelLayout</span><span class="hl-2">.</span><span class="hl-5">definePanelLayout</span><span class="hl-2">(</span><span class="hl-6">'Custom'</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><button>Copy</button></pre>
<p>Each PanelLayout must define a <a href="PanelLayout.html#measure" class="tsd-kind-method">measure</a> and <a href="PanelLayout.html#arrange" class="tsd-kind-method">arrange</a> method.
The measure method must call <a href="PanelLayout.html#measureElement" class="tsd-kind-method">measureElement</a> with each element of the Panel,
which sets each element's <a href="GraphObject.html#measuredBounds" class="tsd-kind-accessor">GraphObject.measuredBounds</a>. These bounds can be used to determine object layout.
The arrange method must call <a href="PanelLayout.html#arrangeElement" class="tsd-kind-method">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" class="tsd-kind-class">PanelLayoutFlow</a>, demonstrated at
<a href="../../extensionsJSM/PanelLayoutFlow.html">Flow PanelLayout sample</a>.</p>
</div><div class="tsd-comment-tags tsd-typography"><div class="flex items-center"><code class="tsd-tag">since</code><p>2.0</p>
</div></div></section><section class="tsd-panel-group tsd-index-group"><section class="tsd-panel tsd-index-panel"><details class="tsd-index-content tsd-index-accordion" open><summary class="tsd-accordion-summary tsd-index-summary"><h5 class="tsd-index-heading uppercase" role="button" aria-expanded="true" tabIndex="0"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-chevronSmall"></use></svg> Index</h5></summary><div class="tsd-accordion-details"><section class="tsd-index-section"><h3 class="tsd-index-heading">Constructors</h3><div class="tsd-index-list"><a href="PanelLayout.html#constructor" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-512"></use></svg><span>constructor</span></a>
</div></section><section class="tsd-index-section"><h3 class="tsd-index-heading">Accessors</h3><div class="tsd-index-list"><a href="PanelLayout.html#name" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>name</span></a>
</div></section><section class="tsd-index-section"><h3 class="tsd-index-heading">Methods</h3><div class="tsd-index-list"><a href="PanelLayout.html#arrange" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>arrange</span></a>
<a href="PanelLayout.html#arrangeElement" class="tsd-index-link tsd-is-protected"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>arrange<wbr/>Element</span></a>
<a href="PanelLayout.html#measure" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>measure</span></a>
<a href="PanelLayout.html#measureElement" class="tsd-index-link tsd-is-protected"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>measure<wbr/>Element</span></a>
<a href="PanelLayout.html#remeasureObject" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>remeasure<wbr/>Object</span></a>
</div></section></div></details></section></section><section class="tsd-panel-group tsd-member-group"><h2>Constructors</h2><section class="tsd-panel tsd-member"><a id="constructor" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>constructor</span><a href="#constructor" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-signature tsd-anchor-link"><a id="constructor.new_PanelLayout" class="tsd-anchor"></a><span class="tsd-kind-constructor-signature">new <wbr/>Panel<wbr/>Layout</span><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 tsd-kind-class">PanelLayout</a><a href="#constructor.new_PanelLayout" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><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 tsd-kind-class">PanelLayout</a></h4></li></ul></section></section><section class="tsd-panel-group tsd-member-group"><h2>Accessors</h2><section class="tsd-panel tsd-member"><a id="name" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>name</span><div class="membertype"><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span></div><a href="#name" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><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"><a id="arrange" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagVirtual">Virtual</code><span>arrange</span><a href="#arrange" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-signature tsd-anchor-link"><a id="arrange.arrange-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">arrange</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">panel</span><span class="tsd-signature-symbol">: </span><a href="Panel.html" class="tsd-signature-type tsd-kind-class">Panel</a>, <span class="tsd-kind-parameter">elements</span><span class="tsd-signature-symbol">: </span><a href="GraphObject.html" class="tsd-signature-type tsd-kind-class">GraphObject</a><span class="tsd-signature-symbol">[]</span>, <span class="tsd-kind-parameter">union</span><span class="tsd-signature-symbol">: </span><a href="Rect.html" class="tsd-signature-type tsd-kind-class">Rect</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><a href="#arrange.arrange-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><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" class="tsd-kind-method">arrangeElement</a> with each Panel element, which will set that element's <a href="GraphObject.html#actualBounds" class="tsd-kind-accessor">GraphObject.actualBounds</a>.</p>
<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" class="tsd-kind-accessor">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" class="tsd-kind-accessor">GraphObject.alignment</a> of the element, and the GraphObject's own <code>measuredBounds.height</code>.</p>
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><h5><span class="tsd-kind-parameter">panel</span>: <a href="Panel.html" class="tsd-signature-type tsd-kind-class">Panel</a></h5><div class="tsd-comment tsd-typography"><p>Panel which called this layout</p>
</div></li><li><h5><span class="tsd-kind-parameter">elements</span>: <a href="GraphObject.html" class="tsd-signature-type 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><span class="tsd-kind-parameter">union</span>: <a href="Rect.html" class="tsd-signature-type tsd-kind-class">Rect</a></h5><div class="tsd-comment tsd-typography"><p>rectangle, if properly constructed in <a href="PanelLayout.html#measure" class="tsd-kind-method">measure</a>, that contains the expected union bounds of every element in the Panel.</p>
</div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4></li></ul></section><section class="tsd-panel tsd-member tsd-is-protected"><a id="arrangeElement" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagProtected">Protected</code> <span>arrange<wbr/>Element</span><a href="#arrangeElement" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-protected"><li class="tsd-signature tsd-anchor-link"><a id="arrangeElement.arrangeElement-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">arrange<wbr/>Element</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">obj</span><span class="tsd-signature-symbol">: </span><a href="GraphObject.html" class="tsd-signature-type tsd-kind-class">GraphObject</a>, <span class="tsd-kind-parameter">x</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>, <span class="tsd-kind-parameter">y</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>, <span class="tsd-kind-parameter">width</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>, <span class="tsd-kind-parameter">height</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>, <span class="tsd-kind-parameter">clipRect</span><span class="tsd-signature-symbol">?: </span><a href="Rect.html" class="tsd-signature-type tsd-kind-class">Rect</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><a href="#arrangeElement.arrangeElement-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><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" class="tsd-kind-accessor">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>
<p>This sets the <a href="GraphObject.html#actualBounds" class="tsd-kind-accessor">GraphObject.actualBounds</a> of the <code>obj</code>.</p>
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><h5><span class="tsd-kind-parameter">obj</span>: <a href="GraphObject.html" class="tsd-signature-type tsd-kind-class">GraphObject</a></h5><div class="tsd-comment tsd-typography"><p>GraphObject to be arranged.</p>
</div></li><li><h5><span class="tsd-kind-parameter">x</span>: <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><span class="tsd-kind-parameter">y</span>: <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><span class="tsd-kind-parameter">width</span>: <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><span class="tsd-kind-parameter">height</span>: <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><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">clipRect</span>: <a href="Rect.html" class="tsd-signature-type 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></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4></li></ul></section><section class="tsd-panel tsd-member"><a id="measure" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagVirtual">Virtual</code><span>measure</span><a href="#measure" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-signature tsd-anchor-link"><a id="measure.measure-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">measure</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">panel</span><span class="tsd-signature-symbol">: </span><a href="Panel.html" class="tsd-signature-type tsd-kind-class">Panel</a>, <span class="tsd-kind-parameter">width</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>, <span class="tsd-kind-parameter">height</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>, <span class="tsd-kind-parameter">elements</span><span class="tsd-signature-symbol">: </span><a href="GraphObject.html" class="tsd-signature-type tsd-kind-class">GraphObject</a><span class="tsd-signature-symbol">[]</span>, <span class="tsd-kind-parameter">union</span><span class="tsd-signature-symbol">: </span><a href="Rect.html" class="tsd-signature-type tsd-kind-class">Rect</a>, <span class="tsd-kind-parameter">minw</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>, <span class="tsd-kind-parameter">minh</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><a href="#measure.measure-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><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>
<p>This must call <a href="PanelLayout.html#measureElement" class="tsd-kind-method">measureElement</a> with each Panel element, which will set the
<a href="GraphObject.html#measuredBounds" class="tsd-kind-accessor">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" class="tsd-kind-accessor">GraphObject.desiredSize</a>, <a href="GraphObject.html#minSize" class="tsd-kind-accessor">GraphObject.minSize</a>, and <a href="GraphObject.html#maxSize" class="tsd-kind-accessor">GraphObject.maxSize</a>,
before passing it to <a href="PanelLayout.html#arrange" class="tsd-kind-method">arrange</a>.</p>
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><h5><span class="tsd-kind-parameter">panel</span>: <a href="Panel.html" class="tsd-signature-type tsd-kind-class">Panel</a></h5><div class="tsd-comment tsd-typography"><p>Panel which called this layout</p>
</div></li><li><h5><span class="tsd-kind-parameter">width</span>: <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" class="tsd-kind-accessor">GraphObject.desiredSize</a>, <a href="GraphObject.html#minSize" class="tsd-kind-accessor">GraphObject.minSize</a>, and <a href="GraphObject.html#maxSize" class="tsd-kind-accessor">GraphObject.maxSize</a>.
Often Infinity.</p>
</div></li><li><h5><span class="tsd-kind-parameter">height</span>: <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><span class="tsd-kind-parameter">elements</span>: <a href="GraphObject.html" class="tsd-signature-type 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><span class="tsd-kind-parameter">union</span>: <a href="Rect.html" class="tsd-signature-type 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" class="tsd-kind-method">arrange</a>.</p>
</div></li><li><h5><span class="tsd-kind-parameter">minw</span>: <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><span class="tsd-kind-parameter">minh</span>: <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></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4></li></ul></section><section class="tsd-panel tsd-member tsd-is-protected"><a id="measureElement" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagProtected">Protected</code> <span>measure<wbr/>Element</span><a href="#measureElement" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-protected"><li class="tsd-signature tsd-anchor-link"><a id="measureElement.measureElement-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">measure<wbr/>Element</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">obj</span><span class="tsd-signature-symbol">: </span><a href="GraphObject.html" class="tsd-signature-type tsd-kind-class">GraphObject</a>, <span class="tsd-kind-parameter">width</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>, <span class="tsd-kind-parameter">height</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>, <span class="tsd-kind-parameter">minw</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>, <span class="tsd-kind-parameter">minh</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><a href="#measureElement.measureElement-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><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" class="tsd-kind-accessor">GraphObject.measuredBounds</a> of the object,
which can then be used to determine the arrangement of objects in the PanelLayout.</p>
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><h5><span class="tsd-kind-parameter">obj</span>: <a href="GraphObject.html" class="tsd-signature-type tsd-kind-class">GraphObject</a></h5><div class="tsd-comment tsd-typography"><p>Panel which called this layout</p>
</div></li><li><h5><span class="tsd-kind-parameter">width</span>: <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><span class="tsd-kind-parameter">height</span>: <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><span class="tsd-kind-parameter">minw</span>: <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><span class="tsd-kind-parameter">minh</span>: <span class="tsd-signature-type">number</span></h5><div class="tsd-comment tsd-typography"><p>minimum height of the GraphObject</p>
</div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4></li></ul></section><section class="tsd-panel tsd-member"><a id="remeasureObject" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>remeasure<wbr/>Object</span><a href="#remeasureObject" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-signature tsd-anchor-link"><a id="remeasureObject.remeasureObject-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">remeasure<wbr/>Object</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">obj</span><span class="tsd-signature-symbol">: </span><a href="GraphObject.html" class="tsd-signature-type tsd-kind-class">GraphObject</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><a href="#remeasureObject.remeasureObject-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><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>
<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" class="tsd-kind-accessor">GraphObject.desiredSize</a> or <a href="TextBlock.html#text" class="tsd-kind-accessor">TextBlock.text</a>
or <a href="Shape.html#geometry" class="tsd-kind-accessor">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" class="tsd-kind-class">PanelLayout</a> "Viewbox" on its one element.
It modifies that element's <a href="GraphObject.html#scale" class="tsd-kind-accessor">GraphObject.scale</a> and is certain that will not
affect Panels up the visual tree.</p>
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><h5><span class="tsd-kind-parameter">obj</span>: <a href="GraphObject.html" class="tsd-signature-type tsd-kind-class">GraphObject</a></h5><div class="tsd-comment tsd-typography"><p>GraphObject to be invalidated.</p>
</div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><div class="tsd-comment-tags tsd-typography"><div class="flex items-center"><code class="tsd-tag">since</code><p>2.2</p>
</div></div></li></ul></section></section></div><div class="col-sidebar"><div class="page-menu"><details open class="tsd-index-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>On This Page</h3></summary><div class="tsd-accordion-details"><ul><li><a href="#constructor"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-512"></use></svg><span>constructor</span></a></li><li><a href="#name"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>name</span></a></li><li><a href="#arrange"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>arrange</span></a></li><li><a href="#arrangeElement" class="tsd-is-protected"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>arrange<wbr/>Element</span></a></li><li><a href="#measure"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>measure</span></a></li><li><a href="#measureElement" class="tsd-is-protected"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>measure<wbr/>Element</span></a></li><li><a href="#remeasureObject"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>remeasure<wbr/>Object</span></a></li></ul></div></details><div class="tsd-navigation settings"><div class="tsd-theme-toggle"><h4 class="uppercase">Theme</h4><select id="tsd-theme"><option value="os">System</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></div><div class="site-menu"><nav class="tsd-navigation"><a href="../index.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1"></use></svg><span>GoJS API</span></a><ul class="tsd-small-nested-navigation" id="tsd-nav-container" data-base=".."><li>Loading...</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-2025 by Northwoods Software Corporation.</div></div><div class="overlay"></div><script async src="https://www.googletagmanager.com/gtag/js?id=G-S5QK8VSK84"></script><script>window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-S5QK8VSK84');
var getOutboundLink = function(url, label) {
gtag('event', 'click', {
'event_category': 'outbound',
'event_label': label,
'transport_type': 'beacon'
});
}
document.getElementById("contactBtn").addEventListener("click", function() {
getOutboundLink('https://nwoods.com/contact.html', 'contact');
});
document.getElementById("buyBtn").addEventListener("click", function() {
getOutboundLink('https://nwoods.com/sales/index.html', 'buy');
});</script></body></html>