Class: Panel

Constructor

new Panel(textopt)

Panel constructor. Creates an instance of Panel UI component.

Parameters:

Name	Type	Attributes	Description
`text`	string	<optional>	Text associated with this Panel. It will be used, for example, for a tab name when this panel is added to Tabs component.

Classes

Panel

Members

(readonly) shapes :array.<Shape>

Returns an array of shapes added to the panel.

Type:

array.<Shape>

Methods

addShape(shape, indexopt) → {Panel}

Adds a Shape to be drawn on the panel.

Parameters:

Name	Type	Attributes	Description
`shape`	Shape		Shape object to draw on this panel
`index`	number	<optional>	Set only if you want to insert the Shape at a specific index

Returns:

Returns this instance of the Panel.

Type:: Panel

indexOfShape(shape) → {number}

Gets an index of a specified Shape object.

Parameters:

Name	Type	Description
`shape`	Shape	Shape object in question

Returns:

Returns an index of the shape or -1 if the shape is not found.

Type:: number

onShapeEvents(callbackopt, removeopt) → {Array.<function()>|ComboBox}

Registers, unregisters and gets a list of handler functions for Shape events (such as when mouse enters, leaves, mouse button clicks, etc.).

Parameters:

Name	Type	Attributes	Description
`callback`	function	<optional>	Event handler function that receives event Object as an argument. Check example below for event Object format.
`remove`	boolean	<optional>	Set to `true` to unregister the handler function.

Returns:

Returns an array of registered handler functions if arguments are omitted, otherwise returns this component instance.

Type:: Array.<function()> | ComboBox

Example

let handler = function(e){console.log(e);}
mainForm.panel_1 = new Panel().addTo(mainForm).onPopupEvents(handler);

// event Object format:
const e = {
  target: object,        // The Panel component that triggered the event.
  type: string,          // Possible values: `click`, `mousedown`, `mouseup`, `mouseenter`, `mouseleave`.
  x: number,             // X position relative to target.
  y: number,             // Y position relative to target.
  shapeIndex: number,    // Index of the shape that triggered the event.
  dragging: boolean,     // `true` if mouse is down while moving, otherwise false.
  alt: boolean,          // `true` if Alt key was pressed on keyboard when event was emitted.
  shift: boolean,        // `true` if Shift key was pressed on keyboard when event was emitted.
  ctrl: boolean,         // `true` if Control key was pressed on keyboard when event was emitted.
  modifiers: string,     // Modifiers used when the event was emitted
  modifiersText: string  // Description of used modifiers
};

removeShape(index_or_shape) → {Shape|boolean}

Removes a specified Shape, then the removed Shape is returned.

Parameters:

Name	Type	Description
`index_or_shape`	number \| Shape	Shape or index of the Shape to be removed.

Returns:

Returns removed Shape, or false in case when index is invalid or out of bounds.

Type:: Shape | boolean

shape(i) → {Shape}

Gets a Shape at specified index or undefined, if index is out of bounds.

Parameters:

Name	Type	Description
`i`	number	Index of the shape you want to get

Returns:

Returns a shape at specified index

Type:: Shape