Class Panel

A Panel is a GraphObject that holds other GraphObjects as its elements. A Panel is responsible for sizing and positioning its elements. Every Panel has a #type and establishes its own coordinate system. The #type of a Panel determines how it will size and arrange its elements.

Hierarchy

Index

Constructor methods

Properties

Methods

Constructor methods

constructor(type?: EnumValue): Panel

Constructs an empty Panel of the given #type.

Parameters

  • type?: EnumValue optional

    If not supplied, the default Panel type is Panel#Position.

Returns

Panel

Properties

public static Auto: EnumValue

This value for #type resizes the main element to fit around the other elements; the main element is the first GraphObject with GraphObject#isPanelMain set to true, or else the first GraphObject if none have that property set to true.

public static Grid: EnumValue

This value for #type is used to draw regular patterns of lines.

public static Horizontal: EnumValue

This value for #type lays out the elements horizontally with their GraphObject#alignment property dictating their alignment on the Y-axis.

public static Link: EnumValue

This value for #type is used for Links and adornments that act as Links.

public static Position: EnumValue

The default #type arranges each element according to their GraphObject#position.

public static Spot: EnumValue

This value for #type arranges GraphObjects about a main element using the GraphObject#alignment and GraphObject#alignmentFocus properties; the main element is the first GraphObject with GraphObject#isPanelMain set to true, or else the first GraphObject if none have that property set to true.

public static Table: EnumValue

This value for #type arranges GraphObjects into rows and columns; set the GraphObject#row and GraphObject#column properties on each element.

public static TableColumn: EnumValue

Organizational Panel type that is only valid inside of a Table panel.

public static TableRow: EnumValue

Organizational Panel type that is only valid inside of a Table panel.

public static Vertical: EnumValue

This value for #type lays out the elements vertically with their GraphObject#alignment property dictating their alignment on the X-axis.

public static Viewbox: EnumValue

This value for #type rescales a single GraphObject to fit inside the panel depending on the element's GraphObject#stretch property.

public actionCancel: (e: go.InputEvent, obj: go.GraphObject) => void

Gets or sets the function to execute when the ActionTool is cancelled and this GraphObject's #isActionable is set to true.

public actionDown: (e: go.InputEvent, obj: go.GraphObject) => void

Gets or sets the function to execute on a mouse-down event when this GraphObject's #isActionable is set to true.

public actionMove: (e: go.InputEvent, obj: go.GraphObject) => void

Gets or sets the function to execute on a mouse-move event when this GraphObject's #isActionable is set to true.

public actionUp: (e: go.InputEvent, obj: go.GraphObject) => void

Gets or sets the function to execute on a mouse-up event when this GraphObject's #isActionable is set to true.

public actualBounds: Rect

Gets the bounds of this GraphObject in container coordinates.

public alignment: Spot

Gets or sets the alignment Spot of this GraphObject used in Panel layouts, to determine where in the area allocated by the panel this object should be placed.

public alignmentFocus: Spot

Gets or sets the spot on this GraphObject to be used as the alignment point in Spot and Fixed Panels.

public angle: number

Gets or sets the angle transform, in degrees, of this GraphObject.

public areaBackground: any

Gets or sets the areaBackground Brush (or CSS color string) of this GraphObject.

public background: any

Gets or sets the background Brush (or CSS color string) of this GraphObject, filling the rectangle of this object's local coordinate space.

public click: (e: go.InputEvent, obj: go.GraphObject) => void

Gets or sets the function to execute when the user single-primary-clicks on this object.

public column: number

Gets or sets the column of this GraphObject if it is in a Table Panel.

public columnCount: number

Gets the number of columns in this Panel if it is of #type Panel#Table.

public columnSizing: EnumValue

Gets or sets how this Panel's columns deal with extra space if the Panel is of #type Panel#Table.

public columnSpan: number

Gets or sets the number of columns spanned by this GraphObject if it is in a Table Panel.

public contextClick: (e: go.InputEvent, obj: go.GraphObject) => void

Gets or sets the function to execute when the user single-secondary-clicks on this object.

public contextMenu: Adornment

This Adornment is shown upon a context click on this object.

public cursor: string

Gets or sets the mouse cursor to use when the mouse is over this object with no mouse buttons pressed.

public data: Object

Gets or sets the optional model data to which this panel is data-bound.

public defaultAlignment: Spot

Gets or sets the default alignment spot of this Panel, used as the alignment for an element when its GraphObject#alignment value is Spot#Default.

public defaultColumnSeparatorDashArray: Array<any>

Gets or sets the default dash array for a particular column's separator.

public defaultColumnSeparatorStroke: any

Gets or sets the default Brush stroke (or CSS color string) for columns in a Table Panel provided a given column has a nonzero RowColumnDefinition#separatorStrokeWidth.

public defaultColumnSeparatorStrokeWidth: number

Gets or sets the default stroke width for a particular column's separator.

public defaultRowSeparatorDashArray: Array<any>

Gets or sets the default dash array for a particular row's separator.

public defaultRowSeparatorStroke: any

Gets or sets the default Brush stroke (or CSS color string) for rows in a Table Panel provided a given row has a nonzero RowColumnDefinition#separatorStrokeWidth.

public defaultRowSeparatorStrokeWidth: number

Gets or sets the default stroke width for a particular row's separator.

public defaultSeparatorPadding: any

Gets or sets the additional padding for a particular row or column, a Margin (or number for a uniform Margin).

public defaultStretch: EnumValue

Gets or sets the default stretch of this Panel, used as the stretch for an element when its GraphObject#stretch value is GraphObject#Default.

public desiredSize: Size

Gets or sets the desired size of this GraphObject in local coordinates.

public diagram: Diagram

Gets the Diagram that this GraphObject is in, if it is.

public doubleClick: (e: go.InputEvent, obj: go.GraphObject) => void

Gets or sets the function to execute when the user double-primary-clicks on this object.

public elements: Iterator

Gets an iterator over the collection of the GraphObjects that this panel manages.

public fromEndSegmentDirection: EnumValue

Gets or sets how the direction of the last segment of a link coming from this port is computed when the node is rotated.

public fromEndSegmentLength: number

Gets or sets the length of the last segment of a link coming from this port.

public fromLinkable: any

Gets or sets whether the user may draw Links from this port.

public fromLinkableDuplicates: boolean

Gets or sets whether the user may draw duplicate Links from this port.

public fromLinkableSelfNode: boolean

Gets or sets whether the user may draw Links that connect from this port's Node.

public fromMaxLinks: number

Gets or sets the maximum number of links that may come out of this port.

public fromShortLength: number

Gets or sets how far the end segment of a link coming from this port stops short of the actual port.

public fromSpot: Spot

Gets or sets where a link should connect from this port.

public gridCellSize: Size

Gets or sets the distance between lines in a #Grid panel.

public gridOrigin: Point

Gets or sets an origin point for the grid cells in a #Grid panel.

public height: number

Gets or sets the desired height of this GraphObject in local coordinates.

public isActionable: boolean

This property determines whether or not this GraphObject's events occur before all other events, including selection.

public isPanelMain: boolean

Gets or sets whether a GraphObject is the "main" object for some types of Panel.

public itemArray: Array<any>

Gets or sets a JavaScript Array of values or objects, each of which will be represented by a Panel as elements in this Panel.

public itemCategoryProperty: any

Gets or sets the name of the item data property that returns a string describing that data's category, or a function that takes an item data object and returns that string; the default value is the name 'category'.

public itemTemplate: Panel

Gets or sets the default Panel template used as the archetype for item data that are in #itemArray.

public itemTemplateMap: Map

Gets or sets a Map mapping template names to Panels.

public layer: Layer

Gets the GraphObject's containing Layer, if there is any.

public leftIndex: number

Gets or sets the first column that this Panel of #type Panel#Table displays.

public margin: any

Gets or sets the size of empty area around this GraphObject, as a Margin (or number for a uniform Margin), in the containing Panel coordinates.

public maxSize: Size

Gets or sets the maximum size of this GraphObject in container coordinates (either a Panel or the document).

public measuredBounds: Rect

Gets the measuredBounds of the GraphObject in container coordinates (either a Panel or the document).

public minSize: Size

Gets or sets the minimum size of this GraphObject in container coordinates (either a Panel or the document).

public mouseDragEnter: (e: go.InputEvent, obj: go.GraphObject, prev: go.GraphObject) => void

Gets or sets the function to execute when the user moves the mouse into this stationary object during a DraggingTool drag.

public mouseDragLeave: (e: go.InputEvent, obj: go.GraphObject, prev: go.GraphObject) => void

Gets or sets the function to execute when the user moves the mouse out of this stationary object during a DraggingTool drag.

public mouseDrop: (e: go.InputEvent, obj: go.GraphObject) => void

Gets or sets the function to execute when a user drops the selection on this object at the end of a DraggingTool drag.

public mouseEnter: (e: go.InputEvent, obj: go.GraphObject, prev: go.GraphObject) => void

Gets or sets the function to execute when the user moves the mouse into this object without holding down any buttons.

public mouseHold: (e: go.InputEvent, obj: go.GraphObject) => void

Gets or sets the function to execute when the user holds the mouse stationary in the background of the diagram while holding down a button over this object.

public mouseHover: (e: go.InputEvent, obj: go.GraphObject) => void

Gets or sets the function to execute when the user holds the mouse stationary in the background of the diagram without holding down any buttons over this object.

public mouseLeave: (e: go.InputEvent, obj: go.GraphObject, prev: go.GraphObject) => void

Gets or sets the function to execute when the user moves the mouse into this object without holding down any buttons.

public mouseOver: (e: go.InputEvent, obj: go.GraphObject) => void

Gets or sets the function to execute when the user moves the mouse over this object without holding down any buttons.

public name: string

Gets or sets the name for this object.

public naturalBounds: Rect

Gets the natural bounding rectangle of this GraphObject in local coordinates, before any transformation by #scale or #angle, and before any resizing due to #minSize or #maxSize or #stretch.

public opacity: number

Gets or sets the multiplicative opacity for this Panel and all children.

public padding: any

Gets or sets the space between this Panel's border and its content, as a Margin (or number for a uniform Margin), depending on the type of panel.

public panel: Panel

Gets the GraphObject's containing Panel, or null if this object is not in a Panel.

public part: Part

Gets the Part containing this object, if any.

public pickable: boolean

Gets or sets whether or not this GraphObject can be chosen by visual "find" methods such as Diagram#findObjectAt.

public portId: string

Gets or sets an identifier for an object acting as a port on a Node.

public position: Point

Gets or sets the position of this GraphObject in container coordinates (either a Panel or the document).

public row: number

Gets or sets the row of this GraphObject if it is in a Table Panel.

public rowCount: number

Gets the number of row in this Panel if it is of #type Panel#Table.

public rowSizing: EnumValue

Gets or sets how this Panel's rows deal with extra space if the Panel is of #type Panel#Table.

public rowSpan: number

Gets or sets the number of rows spanned by this GraphObject if it is in a Table Panel.

public scale: number

Gets or sets the scale transform of this GraphObject.

public segmentFraction: number

Gets or sets the fractional distance along a segment of a GraphObject that is in a Link.

public segmentIndex: number

Gets or sets the segment index of a GraphObject that is in a Link.

public segmentOffset: Point

Gets or sets the offset of a GraphObject that is in a Link from a point on a segment.

public segmentOrientation: EnumValue

Gets or sets the orientation of a GraphObject that is in a Link.

public stretch: EnumValue

Gets or sets the stretch of the GraphObject.

public toEndSegmentDirection: EnumValue

Gets or sets how the direction of the last segment of a link going to this port is computed when the node is rotated.

public toEndSegmentLength: number

Gets or sets the length of the last segment of a link going to this port.

public toLinkable: any

Gets or sets whether the user may draw Links to this port.

public toLinkableDuplicates: boolean

Gets or sets whether the user may draw duplicate Links to this port.

public toLinkableSelfNode: boolean

Gets or sets whether the user may draw Links that connect to this port's Node.

public toMaxLinks: number

Gets or sets the maximum number of links that may go into this port.

public toShortLength: number

Gets or sets how far the end segment of a link going to this port stops short of the actual port.

public toSpot: Spot

Gets or sets where a link should connect to this port.

public toolTip: Adornment

This Adornment is shown when the mouse hovers over this object.

public topIndex: number

Gets or sets the first row that this this Panel of #type Panel#Table displays.

public type: EnumValue

Gets or sets the type of the Panel.

public viewboxStretch: EnumValue

Gets or sets how a #Viewbox panel will resize its content.

public visible: boolean

Gets or sets whether a GraphObject is visible.

public width: number

Gets or sets the desired width of this GraphObject in local coordinates.

Methods

public add(element: GraphObject): any

Adds a GraphObject to the end of this Panel's list of elements, visually in front of all of the other elements.

Parameters

Returns

any

public bind(binding: Binding): any

Add a data-binding of a property on this GraphObject to a property on a data object.

Parameters

Returns

any

public copy(): Panel

Creates a deep copy of this Panel and returns it.

Returns

Panel

public elt(idx: number): GraphObject

Returns the GraphObject in this Panel's list of elements at the specified index.

Parameters

  • idx: number

    a zero-based index

Returns

GraphObject

public findColumnForLocalX(x: number): number

Returns the cell at a given x-coordinate in local coordinates.

Parameters

  • x: number

Returns

number

public findObject(name: string): GraphObject

Search the visual tree starting at this Panel for a GraphObject whose GraphObject#name is the given name.

Parameters

  • name: string

    The name to search for, using a case-sensitive string comparison.

Returns

GraphObject

public findRowForLocalY(y: number): number

Returns the row at a given y-coordinate in local coordinates.

Parameters

  • y: number

Returns

number

public getColumnDefinition(idx: number): RowColumnDefinition

Gets the RowColumnDefinition for a particular column in this Table Panel.

Parameters

  • idx: number

    the non-negative zero-based integer column index.

Returns

RowColumnDefinition

public getDocumentAngle(): number

Returns the effective angle that the object is drawn at, in document coordinates.

Returns

number

public getDocumentPoint(s: Spot, result?: Point): Point

Returns the Point in document coordinates for a given Spot in this object's bounds.

Parameters

  • s: Spot

    a real Spot describing a location relative to the GraphObject.

  • result?: Point optional

    an optional Point that is modified and returned.

Returns

Point

public getDocumentScale(): number

Returns the total scale that the object is drawn at, in document coordinates.

Returns

number

public getLocalPoint(p: Point, result?: Point): Point

Given a Point in document coordinates, returns a new Point in local coordinates.

Parameters

  • p: Point

    a Point in document coordinates.

  • result?: Point optional

    an optional Point that is modified and returned.

Returns

Point

public getRowDefinition(idx: number): RowColumnDefinition

Gets the RowColumnDefinition for a particular row in this Table Panel.

Parameters

  • idx: number

    the non-negative zero-based integer row index.

Returns

RowColumnDefinition

public insertAt(index: number, element: GraphObject): any

Adds a GraphObject to the Panel's list of elements at the specified index.

Parameters

Returns

any

public isContainedBy(panel: GraphObject): boolean

This predicate is true if this object is an element, perhaps indirectly, of the given panel.

Parameters

  • panel: GraphObject

    or if it is contained by another panel that is contained by the given panel, to any depth; false if the argument is null or is not a Panel.

Returns

boolean

public isVisibleObject(): boolean

This predicate is true if this object is #visible and each of its visual containing panels are also visible.

Returns

boolean

public rebuildItemElements(): any

Create and add new GraphObjects corresponding to and bound to the data in the #itemArray, after removing all existing elements from this Panel.

Returns

any

public remove(element: GraphObject): any

Removes a GraphObject from this Panel's list of elements.

Parameters

Returns

any

public removeAt(idx: number): any

Removes an GraphObject from this Panel's list of elements at the specified index.

Parameters

  • idx: number

Returns

any

public removeColumnDefinition(idx: number): any

Removes the RowColumnDefinition for a particular row in this Table Panel.

Parameters

  • idx: number

    the non-negative zero-based integer row index.

Returns

any

public removeRowDefinition(idx: number): any

Removes the RowColumnDefinition for a particular row in this Table Panel.

Parameters

  • idx: number

    the non-negative zero-based integer row index.

Returns

any

public updateTargetBindings(srcprop?: string): any

Re-evaluate all data bindings on this panel, in order to assign new property values to the GraphObjects in this visual tree based on this this object's #data property values.

Parameters

  • srcprop?: string optional

    An optional source data property name: when provided, only evaluates those Bindings that use that particular property; when not provided or when it is the empty string, all bindings are evaluated.

Returns

any