### Hierarchy

- PanelLayout
  - PanelLayoutFlow

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.

By default, GoJS has 12 Panel types, each corresponding to a PanelLayout subclass:

- `'Position', PanelLayoutPosition`
- `'Horizontal', PanelLayoutHorizontal`
- `'Vertical', PanelLayoutVertical`
- `'Spot', PanelLayoutSpot`
- `'Auto', PanelLayoutAuto`
- `'Table', PanelLayoutTable`
- `'Viewbox', PanelLayoutViewbox`
- `'TableRow', PanelLayoutTableRow`
- `'TableColumn', PanelLayoutTableColumn`
- `'Link', PanelLayoutLink`
- `'Grid', PanelLayoutGrid`
- `'Graduated', PanelLayoutGraduated`

These are included by default in builds of `go.js` and `go-debug.js`. When building from source, you can optionally exclude all of them except `Position`, `Vertical`, `Auto`, `Link`, and `Grid`. This is demonstrated in `minimalSource` and `maximalSource`, in the `/projects` folder.

Registering a new PanelLayout is done by calling the static function, Panel.definePanelLayout:

    Panel.definePanelLayout('Table', new PanelLayoutCustom());

Each PanelLayout must define a measure and arrange method. The measure method must call measureElement with each element of the Panel, which sets each element's GraphObject.measuredBounds. These bounds can be used to determine object layout. The arrange method must call arrangeElement 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.

There is an example PanelLayout in the PanelLayout sample. There is a Flow PanelLayout extension at PanelLayoutFlow, demonstrated at Flow PanelLayout sample.

since

  2.0

## Index

### Constructors

- constructor

### Properties

- name

### Methods

- arrange
- arrangeElement
- measure
- measureElement
- remeasureObject

## Constructors

### constructor

- new PanelLayout(): PanelLayout

- This class is abstract. Define your own subclass if you want to implement a custom panel layout.

  #### Returns PanelLayout

## Properties

### name : string

- Gets or sets the name of this instance of a particular panel layout.

## Methods

### Virtual arrange

- arrange(panel: Panel, elements: GraphObject[], union: Rect): void

- After measuring, a Panel must arrange each element, giving the elements a position and size in the Panel's coordinate system. This must call arrangeElement with each Panel element, which will set that element's GraphObject.actualBounds.

  For arranging some elements, it is useful to know the total unioned area of every element, which is given as the `union` argument. This Rect can be used to right-align or center-align, etc, elements within an area.

  For example, PanelLayoutHorizontal arranges each element sequentially, starting with an `x` value of `0`, and increasing it by each previous element's GraphObject.measuredBounds `width`. The horizontal Panel arranges each element with a `y` value determined by the `union` argument's `height` considering the GraphObject.alignment of the element, and the GraphObject's own `measuredBounds.height`.

  #### Parameters

  - ##### panel: Panel

    Panel which called this layout

  - ##### elements: GraphObject[]

    Array of Panel elements

  - ##### union: Rect

    rectangle, if properly constructed in measure, that contains the expected union bounds of every element in the Panel.

  #### Returns void

### Protected arrangeElement

- arrangeElement(obj: GraphObject, x: number, y: number, width: number, height: number, clipRect?: Rect): void

- Arranges the GraphObject onto its parent Panel. The passed-in numbers typically account for GraphObject.margin and other offsets. The `x` and `y` coordinates are where GraphObjects will be placed within the Panel's own coordinates (from the Panel's top-left corner). The `width` and `height` are the size it will take up within the Panel's coordinates.

  This sets the GraphObject.actualBounds of the `obj`.

  #### Parameters

  - ##### obj: GraphObject

    GraphObject to be arranged.

  - ##### x: number

    The final x value of actualBounds that the Panel computes for the GraphObject.

  - ##### y: number

    The final y value of actualBounds that the Panel computes for the GraphObject.

  - ##### width: number

    The final width value of actualBounds that the Panel computes for the GraphObject.

  - ##### height: number

    The final height value of actualBounds that the Panel computes for the GraphObject.

  - ##### Optional clipRect: Rect

    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.

  #### Returns void

### Virtual measure

- measure(panel: Panel, width: number, height: number, elements: GraphObject[], union: Rect, minw: number, minh: number): void

- Given the available size, measure the Panel and determine its expected drawing size.

  This must call measureElement with each Panel element, which will set the GraphObject.measuredBounds of those elements. Depending on how the Panel intends to lay out its elements, the programmer must construction the `union` by setting `union.width` and `union.height` of the supplied argument. For example PanelLayoutHorizontal measures its elements and sums their widths to set its `union.width`, and takes the maximum of their heights to set its `union.height`.

  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 GraphObject.desiredSize, GraphObject.minSize, and GraphObject.maxSize, before passing it to arrange.

  #### Parameters

  - ##### panel: Panel

    Panel which called this layout

  - ##### width: number

    expected width of the Panel, informed by any containing Panel and by the Panel's own GraphObject.desiredSize, GraphObject.minSize, and GraphObject.maxSize. Often Infinity.

  - ##### height: number

    expected height of the Panel.

  - ##### elements: GraphObject[]

    Array of Panel elements

  - ##### union: Rect

    rectangle to be modified to contain the expected union bounds of every element in the Panel, to be potentially used in arrange.

  - ##### minw: number

    expected minimum width of the Panel, informed by any containing Panel. Often zero.

  - ##### minh: number

    expected minimum height of the Panel.

  #### Returns void

### Protected measureElement

- measureElement(obj: GraphObject, width: number, height: number, minw: number, minh: number): void

- Given the available size, measure one element of the Panel and determine its expected drawing size. This sets the GraphObject.measuredBounds of the object, which can then be used to determine the arrangement of objects in the PanelLayout.

  #### Parameters

  - ##### obj: GraphObject

    Panel which called this layout

  - ##### width: number

    expected width of the GraphObject

  - ##### height: number

    expected height of the GraphObject

  - ##### minw: number

    minimum width of the GraphObject

  - ##### minh: number

    minimum height of the GraphObject

  #### Returns void

### remeasureObject

- remeasureObject(obj: GraphObject): void

- 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 before modifications are made. This prevents the elements from potentially remeasuring the entire visual tree, which would cause an infinite loop.

  Normally, panels do not modify the dimensions of their elements. In other words, a Panel would not normally set a property like GraphObject.desiredSize or TextBlock.text or Shape.geometry 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.

  Calling this method before changing a property preempts the remeasuring of any containing Panels, ensuring only the GraphObject and its own child elements will be remeasured.

  This is used in PanelLayout "Viewbox" on its one element. It modifies that element's GraphObject.scale and is certain that will not affect Panels up the visual tree.

  since

    2.2

  #### Parameters

  - ##### obj: GraphObject

    GraphObject to be invalidated.

  #### Returns void

Copyright © 1998-2021 by Northwoods Software Corporation.