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.

DirectedGraph.fromGraphLib(glGraph: graphlib.Graph, opt?: FromGraphLibOptions): dia.Graph;

Custom opt.importNode and opt.importEdge callbacks need to be provided in order for this method to work as expected - to return a JointJS Graph matching the structure of the provided Graphlib graph (glGraph). The callbacks are provided with the following attributes:

nodeId / edgeObj	a Graphlib item ID representing a node or an edge
glGraph	the original Graphlib graph object
graph	the JointJS Graph object to be populated (the graph from fromGraphLibOptions)
opt	the options object provided to fromGraphLib()

You need to implement your own logic inside the two callbacks to support your use case.

layout()

Rearrange graph or an array of cells into a layered layout. The function returns a bounding box of the resulting graph.

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

Here is a table of all available layout options:

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.

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 }

Example of setting the minLen attribute on a link:

link.set('weight', 2);

toGraphLib()

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

DirectedGraph.toGraphLib(graph: dia.Graph, opt?: ToGraphLibOptions): graplib.Graph;

Types

Edge

Edge in the layout engine.

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

ExportOptions

Lists options related to exporting a graph.

interface ExportOptions {
    exportElement?: (element: dia.Element) => Node;
    exportLink?: (link: dia.Link) => Edge;
}

FromGraphLibOptions

Options for the fromGraphLib() function:

interface FromGraphLibOptions extends ImportOptions {
    graph?: dia.Graph;
    [key: string]: any;
}

ImportOptions

Lists options related to importing a graph.

interface ImportOptions {
    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);
}

LayoutOptions

Options for the layout() function:

interface LayoutOptions extends ImportOptions, ExportOptions {
    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;
}

Node

Node in the layout engine.

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

ToGraphLibOptions

Options for the toGraphLib() function:

interface ToGraphLibOptions extends ExportOptions {
    [key: string]: any;
}