跳到主要内容

Editbar

您可以针对每个 Diagram 元素单独配置 Editbar 控件，也可以在考虑各种条件的情况下为一组元素进行配置。为此，请使用 Editbar 的 properties 配置。

如果您想为单个形状配置 Editbar 控件，需要在 properties 配置中指定相应的 形状类型，如下例所示：

const editor = new dhx.DiagramEditor("editor_container", {
    type: "default",
    view: {
        editbar: {
            properties: {
                rectangle: [ // 为 "pert" 形状配置 editbar 控件
                    { type: "arrange", $properties: { angle: { hidden: true } }},
                    // ... 其他 Editbar 控件配置
                ],
                // ... 其他形状配置
            }
        }
    }
});

如需配置一组元素，您需要在 properties 配置中使用以下服务属性：

为网格区域配置 Editbar​

$default 服务属性允许在未选中任何元素或选中多个元素时配置 Editbar 控件。

properties: {
    $default: [
        {
            type: "gridStep",
            readOnly: true,
            // ...
        }
    ]
}

相关复合控件： 网格步长、边框、排列

为形状配置 Editbar​

$shape 服务属性允许为所有形状（包括自定义形状）配置 Editbar 控件。

properties: {
    $shape: [
        {
            type: "position",
            $properties: {
                dx: { disabled: true },
                // ...
            },
            // ...
        }
    ]
}

相关复合控件： 边框、排列、位置、大小、文本对齐、文本样式

为分组元素配置 Editbar​

$group 服务属性允许为所有 group 类型的元素配置 Editbar 控件。

properties: {
    $group: [
        {
            type: "header",
            label: "Group header style",
            // ...
        }
    ]
}

相关复合控件： 边框、排列、表头、通用表头、表头位置、大小、文本对齐、文本样式

为泳道配置 Editbar​

$swimlane 服务属性允许为所有 swimlane 类型的元素配置 Editbar 控件。

properties: {
    $swimlane: [
        {
            type: "header",
            label: "Swimlane header style",
            // ...
        }
    ]
}

相关复合控件： 边框、排列、表头、通用表头、表头位置、大小、文本对齐、文本样式

为线条配置 Editbar​

$line 服务属性允许为所有 line 类型的元素配置 Editbar 控件。

properties: {
    $line: [
        {
            type: "lineShape",
            label: "Line connection type",
            // ...
        }
    ]
}

相关复合控件： 边框、线条形状、指针视图

为线条标题配置 Editbar​

$lineTitle 服务属性允许为所有 lineTitle 类型的元素配置 Editbar 控件。

properties: {
    $lineTitles: [
        {
            type: "textAlign",
            label: "Text align",
            // ...
        },
        // ...
    ]
}

相关复合控件： 文本对齐、文本样式

创建和配置自定义 Editbar 控件​

您可以使用 Editbar 视图的 controls 属性，基于基础控件和/或复合控件创建自定义控件。

警告

不建议使用默认控件类型的名称（参见基础控件和/或复合控件）作为自定义控件的名称。请为每个自定义控件使用唯一的名称，以避免出错！

创建自定义控件后，您需要通过 properties 属性将其应用到所需的 Diagram 元素上。

Need more help?Contact Support