GraphView

GraphView 是一个可平移、可缩放的画布，用于显示节点图或任意 2D 内容。子元素被放置在 contentRoot 元素上，该元素可以进行平移和缩放变换。视图渲染重复的网格背景，并支持：

平移 — 点击并拖拽（在视图背景上使用左键，或在任意位置使用中键）。
缩放 — 鼠标滚轮，限制在 [min-scale, max-scale] 范围内。
适应 — 辅助方法，用于将视图居中并缩放以适应所有子元素或给定的边界框。

UIElement 上记录的所有内容（布局、样式、事件、数据绑定等）同样适用于此。

用法

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);

内部结构

字段	CSS 类	描述
`contentRoot`	`.__graph-view_content-root__`	绝对定位的元素，包含所有用户添加的子元素，并接收平移/缩放变换。

GraphView 样式

allow-zoom

是否允许滚动鼠标滚轮改变缩放级别。

默认值：true

JavaLSS

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

graph-view {
    allow-zoom: false;
}

allow-pan

是否允许点击并拖拽来平移视图。

默认值：true

JavaLSS

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

graph-view {
    allow-pan: false;
}

min-scale / max-scale

缩放级别的边界值。

默认值：0.1 / 10

JavaLSS

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

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

grid-background

在背景上平铺的纹理。默认是带有 REPEAT 环绕模式的内置网格精灵图。

默认值：ldlib2:textures/gui/grid_bg.png（重复）

JavaLSS

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

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

grid-size

每个网格单元的大小（以世界空间单位为单位）。

默认值：64

JavaLSS

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

graph-view {
    grid-size: 32;
}

字段

名称	类型	访问权限	描述
`contentRoot`	`UIElement`	`public final`	用于保存所有内容的变换画布。
`graphViewStyle`	`GraphViewStyle`	`private`（有 getter）	当前样式。
`offsetX`	`float`	`getter/setter`	当前水平世界空间偏移量。
`offsetY`	`float`	`getter/setter`	当前垂直世界空间偏移量。
`scale`	`float`	`private`（有 getter）	当前缩放级别。

方法

方法	返回值	描述
`addContentChild(UIElement)`	`GraphView`	向 `contentRoot` 添加子元素。
`removeContentChild(UIElement)`	`GraphView`	从 `contentRoot` 移除子元素。
`clearAllContentChildren()`	`GraphView`	移除 `contentRoot` 的所有子元素。
`graphViewStyle(Consumer<GraphViewStyle>)`	`GraphView`	以流式方式配置样式。
`contentRoot(Consumer<UIElement>)`	`UIElement`	配置 `contentRoot`。
`fitToChildren(float padding, float minScaleBound)`	`void`	调整偏移量和缩放比例以适应所有可见子元素，使用给定的内边距和最小缩放值。
`fit(float minX, float minY, float maxX, float maxY, float minScaleBound)`	`void`	调整偏移量和缩放比例以适应给定的边界框。