joint icon indicating copy to clipboard operation
joint copied to clipboard

(WIP) feat: add @joint/layout-msagl package

Open MartinKanera opened this issue 10 months ago • 0 comments

Description

The layout function arranges either an entire JointJS graph or a specified subset of cells using MSAGL. It converts the cells into MSAGL geometry and applies the Sugiyama layout algorithm with Rectilinear or SplineBundling edge routing.

Caveats

  • Elements containing embedded cells are treated as subgraphs. As a result, subgraphs are compressed to their minimal possible size, determined by the width and height of their child elements. This may cause parent elements to have dimensions different from their original size.
  • Layouting inside the subgraphs is set to TB - since any other settings seem to completely destroy the layout.

API

interface Options {
    layoutOptions?: {
        layerSeparation?: number,
        nodeSeparation?: number,
        layerDirection?: LayerDirectionEnum,
        gridSize?: number
    },
    edgeRoutingSettings?: {
        edgeRoutingMode?: EdgeRoutingMode
    },
    margins?: {
        left: number,
        right: number,
        top: number,
        bottom: number
    }
}
function layout(graphOrCells: dia.Graph | dia.Cell[], options?: Options): g.Rect {}

Label positioning for link relies on Link.attributes.labelSize as { width: number, height: number }. The subgraph's dimensions are expanded to account for the label size, which can be set accordingly at Element.attributes.labelSize as { width: number, height: number }.

MartinKanera avatar Mar 07 '25 16:03 MartinKanera