进程景观
过程地貌是一个可视化工具,提供 对相互关联的进程的分级视图,允许用户探索多个进程层面之间的关系和依赖关系. 此工具 自动 生成项目内所有 BPMN 图表的地貌视图,提供不需人工维护或更新的见解.
安装
说明: 安装指令即将到来.
构建和运行
# get all required dependencies
npm install
# run our sandbox testing environment (either command)
npm start
npm run dev
# run our test suites
npm run test
# run the full CI in one command
npm run all
使用量
要开始,请创建新的 ProcessLandscape 实例,可以将进程地貌图计划制成页面正文(或任何其他目标根).
const processLandscape = new ProcessLandscape({
root: document.body,
data: exampleLandscapeData,
});
要进行配置实验,看看我们的沙盒环境.
自定义
过程地貌高度定制. 这些配置通过与这些服务相关的服务和配置属性进行管理.
服务也可能被完全重新实施,但这需要深入了解代码库.
一些特别的 融合服务 完全没有在图书馆内执行,需要由执行图书馆按照预期的接口来定义.
如果您不确定如何使用服务与服务配置,可在读取器的结尾处提供带示例的段落.
融合服务
| 服务 | 作用 | 接口 |
|---|---|---|
linkHandler | 确定进程地平面节点的名称是否应该作为链接来渲染,并定义单击时的行为. | { hasLink(node), onClickLink(node) } |
见 SandboxNodeLinkHandler.js (和我们沙盒的其他整合实例)以更好地理解我们服务的界面,并遵循 详细的整合实例 学习如何构建您的整合模块.
用规则构建器自定义
"规则构建"(RuleBuilder)是一种灵活的方式,用于定义动态样式,调色器,以及进程地貌不同部分的行为.
与 RuleBuilder,可以在自定义规则的基础上,对特定元素(如节点,链接,或标签)进行声明性地应用样式和装饰.
示例规则
以下是一些规则的示例配置
import { RuleBuilder as Rule } from "@camunda/process-landscape";
const rules = [
Rule.forLandscape().apply({
horizontalNodeSpacing: 120,
verticalNodeSpacing: 100,
}),
Rule.forLabels().apply({
styles: {
fill: "black",
fontWeight: "bold",
},
}),
Rule.forMarkers().apply({
styles: {
scale: 0.5,
},
}),
Rule.forNodes().apply({
styles: {
strokeWidth: 1,
},
adorners: {
definitions: [
getAdornerInfo: () => ({
content: "draft",
position: "top-right",
styles: {
fontSize: "12px",
fill: "gray",
},
}),
],
},
}),
];
const processLandscape = new ProcessLandscape({
root: /* ... */,
data: /* ... */,
rules: rules
});
如何运作
- 规则声明:使用
RuleBuilder.for用于瞄准特定组件(景观、节点、链接、标签或标记)的方法. - 应用规则:每个规则定义了应当被应用于地貌元素的视觉,例如样式和/或装饰.
- 排序:规则按定义顺序"合并". 确保您稍后定义更具体的规则,否则规则将永远不适用.
其他模块的细节
- 特性/倡导者 - 为地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高
实例
整合模块实例
你可以提供 综合单元 以组合全部 融合服务 向进程环境提供。 这是你如何设置的, 举例来说 linkHandler 服务.
作为类执行服务
我们在这里定义一个自定义 linkHandler 根据其预期接口.
class ExampleLinkHandler {
hasLink(node) {
return node && node.businessObject.externalData?.link; // Example: check if the node has a "link" externalData property.
}
onClickLink(node) {
console.log("Link clicked:", node.name); // Example: log the node name when the link is clicked.
}
}
将您的服务装入模块
这里重要的是财产名称, 链接汉德勒 在这种情况下,匹配,因为它是 代码库将寻找.
const IntegrationModule = {
__init__: ["linkHandler"], // Initialize the linkHandler service.
linkHandler: ["type", ExampleLinkHandler],
};
向进程景观构建器提供集成模块
const processLandscape = new ProcessLandscape({
root: diagramContainerRef.current,
data: landscapeData, // Your process landscape data.
additionalModules: [IntegrationModule],
});
到了,你成功地 调整了过程的地貌 为工作 环境.
模块配置示例
假设我们想设置 myProperty 财产的财产 myService这一点可以简单地通过以下方式实现: ProcessLandscape 构造器如下:
const processLandscape = new ProcessLandscape({
root: document.body,
data: exampleLandscapeData,
myService: {
myProperty: "myValue", // Custom value for myProperty.
},
});
景观导航助手
过程地貌可以很容易地通过几个导航辅助器进行扩展,例如:
- 缩放级别控制
- 景观缩略图
喜欢 缩放 详细情况或 缩放 更广阔的画面? 这个功能是 框中可用的但您需要增加UI控制以释放它的魔法. 以下是应用程序中如何管理缩放级的简单例子:
const handleZoomIn = () => myDiagram.get("zoomScroll").stepZoom(1);
const handleZoomOut = () => myDiagram.get("zoomScroll").stepZoom(-1);
// Somewhere in your UI:
<button onClick={handleZoomIn}>Zoom In</button>
<button onClick={handleZoomOut}>Zoom Out</button>
迷失在元素之海? 集成一个迷你地图,所以你总是知道你在哪里! 🏴☠️
刚刚初始化你的地貌 minimapModule 使用此示例:
import "diagram-js-minimap/assets/diagram-js-minimap.css";
import minimapModule from "diagram-js-minimap";
const processLandscape = new ProcessLandscape({
root: diagramContainerRef.current,
data: landscapeData,
additionalModules: [minimapModule], // Add minimapModule here.
});
const toggleMinimap = () => processLandscape.get("minimap").toggle();
// Somewhere in your UI:
<button onClick={toggleMinimap}>Toggle Minimap</button>;
所有设置,你已经成功地集成 导航助手到你的地貌 永远不会再次迷路.
需要更多背景吗? 见 图表对话框组件 详细信息.