GraphView

Since 2.2.1

GraphView is a pannable, zoomable canvas for displaying node graphs or any arbitrary 2D content. Children are placed on a contentRoot element that can be translated and scaled. The view renders a repeating grid background and supports:

Pan — click and drag (left-button on the view background, or middle-button anywhere).
Zoom — mouse wheel, clamped to [min-scale, max-scale].
Fit — helpers to centre and scale the view to fit all children or a given bounding box.

Everything documented on UIElement (layout, styles, events, data bindings, etc.) applies here too.

Usage

JavaKotlinKubeJS

var graph = new GraphView();
graph.graphViewStyle(style -> style
    .allowZoom(true)
    .allowPan(true)
    .minScale(0.2f)
    .maxScale(5f)
);

var node = new UIElement();
graph.addContentChild(node);
parent.addChild(graph);

// Fit the view after adding children:
graph.fitToChildren(20f, 0.1f);

graphView({
    graphViewStyle = {
        allowZoom(true)
        minScale(0.2f)
        maxScale(5f)
    }
}) {
    content(myNodeElement)
}

let graph = new GraphView();
graph.graphViewStyle(style => {
    style.allowZoom(true);
    style.minScale(0.2);
});
graph.addContentChild(myNode);
parent.addChild(graph);

Internal Structure

Field	CSS class	Description
`contentRoot`	`.__graph-view_content-root__`	Absolutely-positioned element that holds all user-added children and receives the pan/zoom transform.

GraphView Style

allow-zoom

Whether scrolling the mouse wheel changes the zoom level.

Default: true

JavaLSS

graph.graphViewStyle(style -> style.allowZoom(false));

graph-view {
    allow-zoom: false;
}

allow-pan

Whether clicking and dragging pans the view.

Default: true

JavaLSS

graph.graphViewStyle(style -> style.allowPan(false));

graph-view {
    allow-pan: false;
}

min-scale / max-scale

Zoom level bounds.

Defaults: 0.1 / 10

JavaLSS

graph.graphViewStyle(style -> style.minScale(0.25f).maxScale(4f));

graph-view {
    min-scale: 0.25;
    max-scale: 4;
}

grid-background

Texture tiled across the background. The default is a built-in grid sprite with REPEAT wrap mode.

Default: ldlib2:textures/gui/grid_bg.png (repeat)

JavaLSS

graph.graphViewStyle(style -> style.gridTexture(myGridTexture));

graph-view {
    grid-background: sprite("mymod:textures/gui/grid.png");
}

grid-size

Size (in world-space units) of each grid cell.

Default: 64

JavaLSS

graph.graphViewStyle(style -> style.gridSize(32f));

graph-view {
    grid-size: 32;
}

Fields

Name	Type	Access	Description
`contentRoot`	`UIElement`	`public final`	The transformed canvas holding all content.
`graphViewStyle`	`GraphViewStyle`	`private` (getter)	Current style.
`offsetX`	`float`	`getter/setter`	Current horizontal world-space offset.
`offsetY`	`float`	`getter/setter`	Current vertical world-space offset.
`scale`	`float`	`private` (getter)	Current zoom level.

Methods

Method	Returns	Description
`addContentChild(UIElement)`	`GraphView`	Adds a child to `contentRoot`.
`removeContentChild(UIElement)`	`GraphView`	Removes a child from `contentRoot`.
`clearAllContentChildren()`	`GraphView`	Removes all children from `contentRoot`.
`graphViewStyle(Consumer<GraphViewStyle>)`	`GraphView`	Configures style fluently.
`contentRoot(Consumer<UIElement>)`	`UIElement`	Configures `contentRoot`.
`fitToChildren(float padding, float minScaleBound)`	`void`	Adjusts offset and scale to fit all visible children, with the given padding and minimum scale.
`fit(float minX, float minY, float maxX, float maxY, float minScaleBound)`	`void`	Adjusts offset and scale to fit the given bounding box.