Skip to main content

TreeLayoutView

TreeLayoutView is a component for interacting with a tree diagrams.

Learn more about the component in the learn section.

constructor​

constructor(options?: TreeLayoutView.Options);

The ui.TreeLayoutView constructor options parameter has following properties:

canInteract()​

canInteract?: (elementView: dia.ElementView, evt: dia.Event) => boolean;

[optional] A predicate, that returns true if the elementView, which the user interacts with, can be actually dragged. It defaults to return true;.

clone()​

clone?: (element: dia.Element) => dia.Element;

[optional] A function, that is applied on the element to create a clone for dragging. It defaults to return element.clone();.

layoutFunction()​

layoutFunction?: ((treeLayoutView: TreeLayoutView) => void) | null

[optional] Provides a custom callback function that runs instead of the default layout function to create more complex (e.g multi-step layout - first layout the embedded children using a grid layout and then invoke the tree layout for parents only) layouts. The first parameter of the callback is the current TreeLayoutView instance.

model​

Instance of layout.TreeLayout. See TreeLayout API for more details.

paper​

JointJS paper object.

paperConstructor​

[optional] The type of the paper. Defaults to dia.Paper. This is only useful if you use a different paper type for rendering your graphics. In case you inherit from dia.Paper to implement some specific rendering, you can just pass your constructor function to this parameter and use the paperOptions parameter to pass additional options to your special paper.

paperOptions​

[optional] Options object that will be passed to the internal paper used for rendering graphics.

previewAttrs​

[optional] An object with SVG attributes to be applied onto the preview element. The preview consists of 3 components - child, parent and link. e.g.

{
    child: { opacity: 0.5 },
    link: { opacity: 0.5 },
    parent: { rx: 20, ry: 20 }
}

reconnectElements()​

reconnectElements?: ((
    elements: dia.Element[],
    parent: dia.Element,
    siblingRank: number,
    direction: TreeLayout.Direction,
    treeLayoutView: TreeLayoutView
) => void) | null;

[optional] A function to override the default connection behavior (this includes connecting sources and reconnecting children).

translateElements()​

translateElements?: ((
    elements: dia.Element[],
    x: number,
    y: number,
    treeLayoutView: TreeLayoutView
) => void) | null;

[optional] A function to override the default translating behavior (this includes translating sources and disconnecting children).

useModelGeometry​

[optional] If set to true, the cells position and dimensions will be used as a basis for the TreeLayoutView wrapping rectangle position. By default, this is set to false which causes the TreeLayoutView wrapping rectangle position be based on the bounding box of the selected element views. Sometimes though, your shapes can have certain SVG sub elements that stick out of the view and you don't want these sub elements to affect the TreeLayoutView wrapping rectangle position. In this case, set the useModelGeometry to true.

validateConnection()​

validateConnection?: ((
    element: dia.Element,
    candidate: dia.Element,
    treeLayoutView: TreeLayoutView,
    details: ConnectionDetails
) => boolean) | null;

[optional] A predicate, that returns true if the element, which the user interacts with, can be reconnected to the candidateParent. It defaults to return true;. The details object contains additional information about the candidate connection, which is represented by ConnectionDetails type.

validatePosition()​

validatePosition?: ((
    element: dia.Element,
    x: number,
    y: number,
    treeLayoutView: TreeLayoutView
) => boolean) | null;

[optional] A predicate, that returns true if the element, which the user interacts with, can be placed (disconnected or translated) at the position x, y. It defaults to return true;.

Methods​

startDragging()​

treeLayoutView.startDragging(elements: Array<dia.Element>): void;

Initiates dragging of a single or multiple elements (dia.Element or an array of dia.Element). Useful when combined with the Selection component to drag & drop multiple nodes at once. This is a high-level method, which will start listening to pointermove and pointerup events and executes low-level dragstart, drag and dragend methods accordingly.

cancelDrag()​

treeLayoutView.cancelDrag(): void;

Stop the current drag operation.

canDrop()​

treeLayoutView.canDrop(): boolean;

Has the current drag operation valid drop target? i.e. an element can be reconnected or translated.

dragstart()​

treeLayoutView.dragstart(elements: Array<dia.Element>, x: number, y: number): void;

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

drag()​

treeLayoutView.drag(elements: Array<dia.Element>, x: number, y: number): void;

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

dragend()​

treeLayoutView.dragend(elements: Array<dia.Element>, x: number, y: number): void;

End the drag operation and reconnect/translate the source elements if there was a valid drop target.

enable()​

treeLayoutView.enable(): void;

Enable the view. The plugin starts listening to the paper and allows the user to reconnect the elements.

disable()​

treeLayoutView.disable(): void;

Disable the view. Prevent the user from reconnecting the elements

isDisabled()​

treeLayoutView.isDisabled(): boolean;

Return true if the view is disabled. Otherwise, return false. The TreeLayoutView is enabled by default.

Types​

ConnectionDetails​

validateConnection() details parameter type.

interface ConnectionDetails {
    level: number;
    direction: TreeLayout.Direction,
    siblingRank: number,
    siblings: Array<dia.Element>
}
PropertyDescription
levelThe distance of the element from the tree root.
directionThe direction of the connection (between the candidateParent and element).
siblingRankThe index of the element among its siblings.
siblingsAn array of sibling elements (children of candidateParent in a particular direction).

Options​

Constructor options parameter type.

export interface Options extends mvc.ViewOptions<TreeLayout> {
    previewAttrs?: { [key: string]: any };
    useModelGeometry?: boolean;
    clone?: (element: dia.Element) => dia.Element;
    canInteract?: (elementView: dia.ElementView, evt: dia.Event) => boolean;
    validateConnection?: ((
        element: dia.Element,
        candidate: dia.Element,
        treeLayoutView: TreeLayoutView,
        details: ConnectionDetails
    ) => boolean) | null;
    validatePosition?: ((
        element: dia.Element,
        x: number,
        y: number,
        treeLayoutView: TreeLayoutView
    ) => boolean) | null;
    reconnectElements?: ((
        elements: dia.Element[],
        parent: dia.Element,
        siblingRank: number,
        direction: TreeLayout.Direction,
        treeLayoutView: TreeLayoutView
    ) => void) | null;
    translateElements?: ((
        elements: dia.Element[],
        x: number,
        y: number,
        treeLayoutView: TreeLayoutView
    ) => void) | null;
    layoutFunction?: ((treeLayoutView: TreeLayoutView) => void) | null
    paperConstructor?: typeof dia.Paper;
    paperOptions?: dia.Paper.Options;
    [key: string]: any;
}

Stay in the know

Be where thousands of diagramming enthusiasts meet

Star us on GitHub