autoplacement

描述

可选。一个用于配置形状自动布局的对象

信息

autoplacement 属性仅在 editor 的默认模式下有效，且仅适用于形状。如果使用群组或泳道，则该属性不起作用。

用法

autoplacement?: {
    mode?: "direct" | "edges", // 默认为 "direct"
    graphPadding?: number, // 默认为 200
    placeMode?: "orthogonal" | "radial", // 默认为 "orthogonal"
    itemPadding?: number, // 默认为 20
    levelPadding?: number // 默认为 20
};

参数

autoplacement 对象包含以下参数：

• mode - （可选）形状的连接模式，"direct"（默认）或 "edges"
• graphPadding - （可选）设置未连接图表之间的距离，默认为 200
• placeMode - （可选）设置形状的排列模式，"orthogonal"（默认）或 "radial"
• itemPadding - （可选）元素之间的最小间距（最小值为 1），默认为 20
• levelPadding - （可选）层级之间的最小间距（最小值为 1），默认为 20

默认配置

autoplacement: {
    mode: "direct",
    graphPadding: 200,
    placeMode: "orthogonal",
    itemPadding: 20,
    levelPadding: 20
}

示例

const editor = new dhx.DiagramEditor("editor_container", {
    autoplacement: {
        placeMode: "radial",
        mode: "direct",
        itemPadding: 10,
        levelPadding: 10,
        graphPadding: 100
    }
});

editor.parse(data);

形状连接模式

"direct" 模式

无箭头的连接线按"从中心到中心"对齐，呈直线和对角线状。

"edges" 模式

连接线按"从边到边"的方式对齐。

信息

若要为线条添加箭头，请在线条对象的配置中指定 forwardArrow: "filled" 或 backArrow: "filled"。

"edges" 模式下的连接线可以是：

• 直线（如果为线条对象设置 connectType: "straight" 属性）

• 或 90 度折线（如果为线条对象设置 connectType: "elbow" 属性）

形状排列模式

"orthogonal" 模式

形状沿垂直和水平线排列

• "orthogonal" 排列方式配合 "direct" 模式的连接线

• "orthogonal" 排列方式配合 "edges" 模式的连接线

"radial" 模式

形状围绕中心形状（即连接数最多的形状）排列在假想的圆周上

• "radial" 排列方式配合 "direct" 模式的连接线

• "radial" 排列方式配合 "edges" 模式的连接线

更新日志：

• itemPadding 和 levelPadding 参数在 v6.1.3 中新增
• placeMode 参数在 v5.0 中新增
• autoplacement 属性在 v3.0 中新增

相关示例： Diagram Editor。默认模式。径向自动布局算法