@meshmakers / octo-process-diagrams
用于在OctoMesh平台应用程序中进行流程图设计和符号编辑的Angular库。
注意： 这个图书馆需要一个 Angular的剑道UI 许可证。
部分 @meshmakers 包的生态系统。
功能
- 流程设计人员 -基于可视化svg的流程图编辑器（HMI）
- 符号编辑器 创建和管理可重用的符号定义
- 符号库 -用版本控制组织库中的符号
- 原始的系统 -矩形，椭圆，直线，折线，多边形，路径，文本，图像
- SVG进口 -通过工具栏按钮，拖放或剪贴板粘贴导入SVG文件
- Dockview布局 -灵活，可重新安排的面板系统
- 动画 -支持数据绑定的SVG动画
- 公开属性 -将符号属性绑定到运行时数据（数字，字符串，布尔值）
- 表达式求值 - - - - - -
expr-eval-fork基于表达式的数据绑定 - 分组 - Figma/ illustrator风格的原语和符号临时分组
- 撤销/重做 -键盘快捷键的完整历史记录
安装
npm install @meshmakers/octo-process-diagrams
构建
# From frontend-libraries root
npm run build:octo-process-diagrams
体系结构
octo-process-diagrams/
├── src/
│ ├── public-api.ts # Public API exports
│ └── lib/
│ ├── process-widget.models.ts # Core data models
│ ├── primitives/
│ │ ├── models/ # Primitive data models
│ │ │ ├── primitive.models.ts # Base interfaces (PrimitiveBase, PrimitiveStyle)
│ │ │ ├── rectangle.model.ts
│ │ │ ├── ellipse.model.ts
│ │ │ ├── line.model.ts
│ │ │ ├── polygon.model.ts
│ │ │ ├── path.model.ts
│ │ │ ├── text.model.ts
│ │ │ ├── image.model.ts
│ │ │ ├── group.model.ts
│ │ │ ├── symbol.model.ts
│ │ │ ├── animation.models.ts
│ │ │ ├── transform-property.models.ts
│ │ │ └── style-class.model.ts
│ │ ├── renderers/ # SVG rendering per type
│ │ │ ├── primitive-renderer.interface.ts
│ │ │ ├── rectangle.renderer.ts
│ │ │ ├── ellipse.renderer.ts
│ │ │ ├── line.renderer.ts
│ │ │ ├── polygon.renderer.ts
│ │ │ ├── path.renderer.ts
│ │ │ ├── text.renderer.ts
│ │ │ ├── image.renderer.ts
│ │ │ ├── symbol.renderer.ts
│ │ │ └── animation.renderer.ts
│ │ └── primitive-renderer.registry.ts
│ ├── designer/
│ │ ├── process-designer.component.ts # Main editor component
│ │ ├── process-designer.component.html
│ │ ├── process-designer.component.scss
│ │ ├── element-palette.component.ts # Draggable element palette
│ │ ├── property-inspector.component.ts # Properties panel
│ │ ├── symbol-library-panel.component.ts
│ │ ├── context-menu.component.ts
│ │ ├── path-editor.component.ts
│ │ ├── animation-editor.component.ts
│ │ ├── simulation-panel.component.ts
│ │ ├── transform-property-editor.component.ts
│ │ ├── binding-editor-dialog.component.ts
│ │ ├── dockview/ # Flexible layout system
│ │ │ └── dockview.component.ts
│ │ ├── panels/ # Dockview panel wrappers
│ │ │ ├── elements-panel.component.ts
│ │ │ ├── symbols-panel.component.ts
│ │ │ ├── properties-panel.component.ts
│ │ │ ├── transform-panel.component.ts
│ │ │ ├── animations-panel.component.ts
│ │ │ ├── simulation-panel.component.ts
│ │ │ └── settings-panel.component.ts
│ │ └── services/ # Designer services
│ │ ├── designer-state.service.ts
│ │ ├── designer-selection.service.ts
│ │ ├── designer-clipboard.service.ts
│ │ ├── designer-history.service.ts
│ │ ├── designer-creation.service.ts
│ │ ├── designer-keyboard.service.ts
│ │ ├── designer-rendering.service.ts
│ │ ├── designer-primitive.service.ts
│ │ ├── designer-bounds.service.ts
│ │ ├── designer-alignment.service.ts
│ │ ├── designer-alignment-guide.service.ts
│ │ ├── designer-coordinate.service.ts
│ │ ├── designer-drag.service.ts
│ │ ├── designer-resize.service.ts
│ │ ├── designer-grouping.service.ts
│ │ ├── designer-deletion.service.ts
│ │ ├── designer-zorder.service.ts
│ │ ├── designer-diagram.service.ts
│ │ ├── designer-context-menu.service.ts
│ │ ├── designer-layout.service.ts
│ │ ├── geometry-util.service.ts
│ │ ├── path-editor.service.ts
│ │ └── primitive-handlers/ # Per-type move/resize/bounds
│ │ ├── primitive-handler.interface.ts
│ │ ├── rectangle.handler.ts
│ │ ├── ellipse.handler.ts
│ │ ├── line.handler.ts
│ │ ├── polyline.handler.ts
│ │ ├── path.handler.ts
│ │ ├── text.handler.ts
│ │ └── default.handler.ts
│ ├── admin/
│ │ ├── symbol-library-admin.component.ts # Symbol library management
│ │ └── symbol-editor.component.ts # Symbol editor
│ ├── pages/ # Routable page components
│ │ ├── symbol-library-list/
│ │ ├── symbol-library-detail/
│ │ ├── symbol-editor-page/
│ │ ├── process-diagram-list/
│ │ └── data-sources/ # List view data source directives
│ ├── services/
│ │ ├── svg-import.service.ts # SVG file import
│ │ ├── symbol-library.service.ts # Symbol library CRUD
│ │ ├── process-diagram-data.service.ts # Diagram persistence
│ │ └── expression-evaluator.service.ts # Expression evaluation for bindings
│ ├── graphQL/ # Auto-generated GraphQL services
│ ├── styles/
│ │ └── _dockview-theme.scss # Optional Deep Sea dockview theme mixin
│ └── docs/
│ └── SVG-IMPORT.md # SVG import documentation
主要出口
组件
| 组件 | 描述 |
|---|---|
ProcessDesignerComponent | 流程图的主要可视化编辑器 |
ElementPaletteComponent | 原始形状的可拖动调色板 |
PropertyInspectorComponent | 所选项目的属性面板 |
SymbolLibraryPanelComponent | 符号库浏览器面板 |
SymbolLibraryAdminComponent | 符号库管理UI |
SymbolEditorComponent | 符号定义编辑器 |
DockviewComponent | 柔性面板布局系统 |
PathEditorComponent | SVG路径编辑 |
TransformPropertyEditorComponent | 转换属性编辑 |
BindingEditorDialogComponent | 数据绑定配置对话框 |
SimulationPanelComponent | 模拟值测试 |
页面组件（用于在消费应用中路由）
| 组件 | 描述 |
|---|---|
SymbolLibraryListComponent | 符号库列表 |
SymbolLibraryDetailComponent | 库中的符号 |
SymbolEditorPageComponent | 符号编辑器与保存/取消 |
ProcessDiagramListComponent | 流程图列表 |
服务
| 服务 | 描述 |
|---|---|
SymbolLibraryService | 符号库CRUD操作 |
SvgImportService | SVG文件的导入和转换 |
ProcessDiagramDataService | 图的持久性 |
ExpressionEvaluatorService | 数据绑定的表达式求值 |
DesignerLayoutService | Dockview布局持久化 |
DesignerSelectionService | 选择状态管理 |
DesignerHistoryService | 撤销/重做功能 |
DesignerClipboardService | 复制/粘贴操作 |
PathEditorService | 路径命令解析和操作 |
样式
这个库使用 中性默认颜色 通过CSS自定义属性。宿主应用程序应该覆盖这些变量以匹配它们的主题。
Canvas CSS变量
mm-process-designer,
mm-symbol-editor {
--designer-canvas-color: #fafafa; // Canvas background
--designer-grid-color: #e0e0e0; // Grid lines
}
Dockview CSS变量
mm-process-designer,
mm-symbol-editor {
--dv-background-color: <your-bg>;
--dv-pane-background-color: <your-pane>;
--dv-activegroup-visiblepanel-tab-background-color: <your-active-tab>;
--dv-activegroup-visiblepanel-tab-color: <your-accent>;
// ... see PROCESS-DESIGNER.md for full list
}
一个可选的令牌驱动主题混合可用（Deep Sea, ab# 5526）：
@use '@meshmakers/octo-process-diagrams/styles/dockview-theme' as dockview;
@include dockview.dockview-theme();
前 styles/dockview-lcars-theme 别名(lcars-theme())在AB#5526中被删除。
依赖关系
- 角21 具有独立的组件和信号
- 剑道UI Angular 21 （按钮，输入，下拉菜单，对话框，列表视图）
- 阿波罗角 对于GraphQL
- dockview-angular 灵活的面板布局
- expr-eval-fork 对于表达式求值
详细的文档
- 流程设计器开发人员文档 -完整的架构，服务，原语，dockview，检查列表
- SVG导入文档 - SVG导入服务，元素映射，转换
文件和测试标准
- 所有开发人员文档必须用英语编写
- 每次代码更改都必须包含更新的文档 -更新自述文件。医学博士,克劳德。在添加、修改或删除功能时使用
- 必须执行单元测试和集成测试 每次代码更改之后
- 必须更新现有的测试 当被测试代码的行为发生变化时
- 必须添加新的测试 当实现新的特性、组件或服务时
- 永远不要提交测试失败的代码