DirectedGraph

To use DirectedGraph you should import it from @joint/layout-directed-graph package. See more in the learn section.

DirectedGraph is an object which contains several functions.

Functions

fromGraphLib()

Convert the provided Graphlib graph object to a JointJS dia.Graph object.

The opt.importNode and opt.importEdge callbacks are provided with a Graphlib node/edge object, and are expected to return a corresponding JointJS element/link object.

DirectedGraph.fromGraphLib(glGraph: any, opt?: { [key: string]: any }): dia.Graph;

layout()

Rearrange graph or shapes into a layout, specified by layout options. The function returns a bounding box of the resulting graph.

DirectedGraph.layout(graph: dia.Graph | dia.Cell[], opt?: LayoutOptions): g.Rect;

Additionally, the layout engine takes into account some attributes on elements/links to fine tune the layout further. These are:

size	element	An object with width and height properties representing the size of the element.
minLen	link	The number of ranks to keep between the source and target of the link.
weight	link	The weight to assign edges. Higher weight edges are generally made shorter and straighter than lower weight edges.
labelPosition	link	Where to place the label relative to the edge. 'l' = left, 'c' = center (default), 'r' = right.
labelOffset	link	How many pixels to move the label away from the edge. Applies only when labelPosition is left or right.
labelSize	link	The width and height of the edge label in pixels. e.g. { width: 100, height: 50 }

toGraphLib()

Convert the provided JointJS dia.Graph object to a Graphlib graph object.

DirectedGraph.toGraphLib(graph: dia.Graph, opt?: { [key: string]: any }): any;

Types

Edge

Edge in the layout engine.

interface Edge {
    minLen?: number;
    weight?: number;
    labelpos?: 'l' | 'c' | 'r';
    labeloffset?: number;
    width?: number;
    height?: number;
}

LayoutOptions

Options for the layout() function:

interface LayoutOptions {
    align?: 'UR' | 'UL' | 'DR' | 'DL';
    rankDir?: 'TB' | 'BT' | 'LR' | 'RL';
    ranker?: 'network-simplex' | 'tight-tree' | 'longest-path';
    nodeSep?: number;
    edgeSep?: number;
    rankSep?: number;
    marginX?: number;
    marginY?: number;
    resizeClusters?: boolean;
    clusterPadding?: dia.Padding;
    setPosition?: (element: dia.Element, position: dia.BBox) => void;
    setVertices?: boolean | ((link: dia.Link, vertices: dia.Point[]) => void);
    setLabels?: boolean | ((link: dia.Link, position: dia.Point, points: dia.Point[]) => void);
    exportElement?: (element: dia.Element) => Node;
    exportLink?: (link: dia.Link) => Edge;
}

Options description:

nodeSep	a number of pixels representing the separation between adjacent nodes in the same rank
edgeSep	a number of pixels representing the separation between adjacent edges in the same rank
rankSep	a number of pixels representing the separation between ranks
rankDir	direction of the layout (one of "TB" (top-to-bottom) / "BT" (bottom-to-top) / "LR" (left-to-right) / "RL" (right-to-left))
marginX	number of pixels to use as a margin around the left and right of the graph.
marginY	number of pixels to use as a margin around the top and bottom of the graph.
ranker	Type of algorithm to assign a rank to each node in the input graph. Possible values: 'network-simplex' (default), 'tight-tree' or 'longest-path'.
resizeClusters	set to false if you don't want parent elements to stretch in order to fit all their embedded children. Default is true.
clusterPadding	A gap between the parent element and the boundary of its embedded children. It could be a number or an object e.g. { left: 10, right: 10, top: 30, bottom: 10 }. It defaults to 10.
setPosition(element, position)	a function that will be used to set the position of elements at the end of the layout. This is useful if you don't want to use the default element.set('position', position) but want to set the position in an animated fashion via transitions.
setVertices(link, vertices)	If set to true the layout will adjust the links by setting their vertices. It defaults to false. If the option is defined as a function it will be used to set the vertices of links at the end of the layout. This is useful if you don't want to use the default link.set('vertices', vertices) but want to set the vertices in an animated fashion via transitions.
setLabels(link, labelPosition, points)	If set to true the layout will adjust the labels by setting their position. It defaults to false. If the option is defined as a function it will be used to set the labels of links at the end of the layout. Note: Only the first label (link.label(0);) is positioned by the layout.
exportElement(element)	Convert element attributes into dagre node attributes. By default, it returns the element attributes mentioned in the description of the layout() function.
exportLink(link)	Convert link attributes into dagre edge attributes. By default, it returns the link attributes mentioned in the description of the layout() function.

Node

Node in the layout engine.

interface Node {
    width?: number;
    height?: number;
}