StackLayoutView

StackLayoutView is a component for interacting with a stack layout diagram.

Learn more about the component in the learn section.

constructor

constructor(options: StackLayoutView.StackLayoutViewOptions);

The ui.StackLayoutView constructor options parameter has following properties:

canInteract()

(elementView: dia.ElementView, view: StackLayoutView) => boolean;

[optional] A predicate, that returns true if the elementView, which the user interacts with, can be dragged. By default, it returns true for elements with a defined stackIndex attribute.

layoutOptions

[optional] An object corresponding to layout.StackLayout options.

modifyInsertElementIndex()

(options: ModifyInsertElementIndexOptions, point: g.Point, view: StackLayoutView) => number;

[optional] A callback function to change the insert element index. The value of the insertElementIndex is derived from the pointer position and can be further modified using this callback. The callback is triggered before validation and can be used, for example, to find the nearest valid insert index. The options type is described here. The point is the current pointer coordinates.

paper

An instance of the paper object.

preview()

(options: PreviewCallbackOptions, view: StackLayoutView) => SVGElement;

[optional] A callback function to customize the preview element. It must return an SVGElement object. The preview's position will be set to the middle of the stackSize and to half of the stackElementGap automatically. The options type is described here.

validateMoving()

(options: ValidateCallbackOptions, view: StackLayoutView) => boolean;

[optional] A predicate, that returns true if the element, which the user interacts with, can be moved to another stack. It defaults to return true;. The options type is described here.

Methods

cancelDrag()

stackLayoutView.cancelDrag(): void;

Stop the current drag operation.

canDrop()

stackLayoutView.cancelDrag(): boolean;

Does the current drag operation have a valid drop target? i.e. an element can be moved to a new location.

drag()

stackLayoutView.drag(element: dia.Element, x: number, y: number): void;

Drag the source element and display preview of the drop location if any.

dragend()

stackLayoutView.dragend(element: dia.Element, x: number, y: number): void;

End the drag operation and move the source element to the target stack if there was a valid drop target.

dragstart()

stackLayoutView.dragstart(element: dia.Element, x: number, y: number): void;

Start a new drag operation with element set as its source.

StackLayoutModel

The model for the StackLayoutView. The options for the model are stack layout options.

Additionally, the model provides several methods, properties and events.

Properties

bbox

A bounding box around elements.

stackLayoutView.model.bbox: g.Rect;

elements

The array of elements to be laid out (elements with the stackIndex attribute defined).

stackLayoutView.model.elements: dia.Element[];

stacks

The array of stack objects.

stackLayoutView.model.stacks: StackLayout.Stack[];

Methods

getInsertElementIndexFromPoint()

stackLayoutView.model.getInsertElementIndexFromPoint(stack: StackLayout.Stack, point: g.PlainPoint): number;

Finds an insert index in the stack from the point.

getStackFromElement()

stackLayoutView.model.getStackFromElement(element: dia.Element): StackLayout.Stack

Finds a stack to which the element belongs.

getStackFromPoint()

stackLayoutView.model.getStackFromPoint(point: g.PlainPoint): StackLayout.Stack;

Finds a stack from the point.

insertElement()

stackLayoutView.model.insertElement(element: dia.Element, targetStackIndex: number, insertElementIndex: number, opt?: dia.Cell.Options): void;

Inserts the element in the targetStack at the specified index. It calls update() internally.

update()

stackLayoutView.model.update(): void;

Recalculates the layout manually. Useful when the elements in stacks are changed programmatically.

Events

update

Fires when the layout is updated.

Types

ModifyInsertElementIndexOptions

modifyInsertElementIndex callback options type.

interface ModifyInsertElementIndexOptions {
    sourceStack: StackLayout.Stack;
    sourceElement: dia.Element;
    targetStack: StackLayout.Stack;
    insertElementIndex: number;
}

sourceElement	object	The element being moved.
sourceStack	object	The source stack of the source element.
targetStack	object	The target stack.
insertElementIndex	number	The index in the target stack to which the element is moved.

PreviewCallbackOptions

preview callback options type.

interface PreviewCallbackOptions {
    sourceStack: StackLayout.Stack;
    sourceElement: dia.Element;
    targetStack: StackLayout.Stack;
    insertElementIndex: number;
    invalid: boolean;
}

sourceElement	The element being moved.
sourceStack	The source stack of the source element.
targetStack	The target stack.
insertElementIndex	The index in the target stack to which the element is moved.
invalid	Indicates if the current position is invalid (`validateMoving` returns `false`).