LogicFlow 实例注册 API 全解析register 与 batchRegister 实现自定义节点与边【免费下载链接】LogicFlowA flow chart editing framework focus on business customization. 专注于业务自定义的流程图编辑框架支持实现脑图、ER图、UML、工作流等各种图编辑场景。项目地址: https://gitcode.com/GitHub_Trending/lo/LogicFlow本文以 LogicFlow 官方 API 文档《注册》为骨架深入讲解 LogicFlow 实例方法register与batchRegister的完整用法从签名、参数类型、核心示例到二者内部实现原理viewMap / modelMap 注册表、observer包装、内置元素默认注册逐一拆解。读完本文你将掌握在 LogicFlow 中注册自定义节点/边的两种方式并能结合源码理解注册失败时的报错链路从容应对找不到 XX 对应的节点这类常见问题。概述注册机制在 LogicFlow 中的位置LogicFlow 是一个专注于业务自定义的流程图编辑框架见 README.md支持脑图、ER 图、UML、工作流等多种图编辑场景。它的扩展能力建立在注册Register机制之上任何自定义节点、自定义边都必须先通过注册告诉实例这个 type 长什么样view以及这个 type 有哪些数据行为model之后才能在图数据中被引用、渲染和交互。本页 API 文档位于 register.zh.md隶属于LogicFlow 实例分组order: 2是官方 API 文档中关于实例级注册方法的唯一入口。它覆盖两个核心方法方法作用签名register注册单个自定义节点或边register(config: RegisterConfig): voidbatchRegister批量注册多个自定义节点或边batchRegister(configList: RegisterConfig[]): void插件Extension的全局注册不在实例方法范畴内而是通过 LogicFlow.use 完成本文不展开。register注册单个自定义节点或边register用于向当前 LogicFlow 实例注册一个自定义节点或边是使用频率最高的扩展入口。签名与参数register(config: RegisterConfig): void参数类型RegisterConfig的完整定义见类型文档 MainTypes.zh.md。它包含以下属性属性名类型描述typestring指定要注册的图元素类型必填。它是后续addNode、addEdge、render时引用该元素的唯一标识。viewComponentTypeany { isObserved?: boolean }与图元素关联的视图组件React 组件。可包含可选布尔值isObserved指示该组件是否已被观察mobx 响应式。modelGraphElementCtor定义图元素的模型构造函数必填。应为BaseNodeModelCtor节点模型或BaseEdgeModelCtor边模型见 LogicFlow.tsx。isObserverViewboolean (可选)指示视图是否为观察者视图。设为true表示视图会响应模型变化默认行为设为false可跳过observer包装。官方示例自定义矩形节点文档给出的标准示例是继承内置RectNode/RectNodeModel实现一个圆角矩形节点import { RectNode, RectNodeModel } from logicflow/core; class CustomRectNode extends RectNode {} class CustomRectModel extends RectNodeModel { setAttributes() { this.width 200; this.height 80; this.radius 50; } } lf.register({ type: custom-rect, view: CustomRectNode, model: CustomRectModel, });拆解这段代码viewCustomRectNode继承自RectNode不重写任何渲染逻辑直接复用内置矩形的 SVG 渲染。modelCustomRectModel继承自RectNodeModel在setAttributes()生命周期钩子中重定义尺寸与圆角宽 200、高 80、圆角半径 50。setAttributes在模型初始化时被调用是自定义节点最常见的覆写入口。typecustom-rect是自定义的标识之后通过lf.addNode({ type: custom-rect, x: 100, y: 100 })即可实例化该节点。注册边的方式完全一致只需将view/model换成边对应的基类如PolylineEdge/PolylineEdgeModel并把type设为边类型。官方示例批量注册多个元素当需要一次性注册多个自定义元素时使用batchRegisterlf.batchRegister([ { type: user, view: UserNode, model: UserModel, }, { type: user1, view: UserNode1, model: UserModel1, }, ]);它接受RegisterConfig[]数组内部逐项执行与register相同的注册逻辑适用于一次引入、注册一整套业务元素的场景。源码解读register 到底做了什么只看用法难免知其然不知其所以然。下面结合 packages/core/src/LogicFlow.tsx 的实现说明注册的内部链路。注册的两种重载方式register在源码中有两个重载LogicFlow.tsxregister(element: RegisterConfig): void register( type: string, fn: RegisterElementFunc, isObserverView?: boolean, ): void方式一推荐传入RegisterConfig对象即文档示例的写法。方式二传入type与一个RegisterElementFunc函数。源码注释明确标注该方式不推荐极个别在自定义的时候需要用到 lf 的情况下可以用这种方式因为大多数场景可以直接在 view 中通过this.props获取graphModel或在 model 中通过this.graphModel获取方法LogicFlow.tsx。方式二的函数签名来自类型文档中的RegisterElementFunc与RegisterParam见 MainTypes.zh.mdexport type RegisterElementFunc (params: RegisterParam) RegisterElement export type RegisterParam { h: typeof h; // hyperscript 函数用于创建虚拟 DOM [key: string]: unknown; // 其它由框架注入的基类RectNode、RectNodeModel 等与用户自定义属性 }执行方式二时源码会构造一个registerParam对象把内置的BaseNode、BaseEdgeModel、RectNode、RectNodeModel、PolylineEdge、BezierEdgeModel、h以及当前type全部注入LogicFlow.tsx随后从函数返回值中解构出view与model完成注册。registerElement注册的核心实现无论哪种方式最终都会收敛到registerElementLogicFlow.tsxprivate registerElement(config: RegisterConfig) { let ViewComp config.view if (config.isObserverView ! false !ViewComp.isObserved) { ViewComp.isObserved true ViewComp observer(ViewComp) } this.setView(config.type, ViewComp) this.graphModel.setModel(config.type, config.model) }关键点observer 包装只要isObserverView不为false且视图尚未被包装isObserved为假就会用 mobx 的observer()把视图组件包一层使其响应模型变化。这就是为什么文档中view类型上带有isObserved?: boolean标记。视图注册表 viewMapsetView把type → ViewComp存入this.viewMapMap供渲染层按类型查找视图。模型注册表 modelMapthis.graphModel.setModel(type, config.model)把type → ModelClass存入GraphModel的modelMap见 GraphModel.ts供数据层按类型实例化模型。内置元素的默认注册实际上实例初始化时就已经通过batchRegister注册了一批内置元素。defaultRegister中定义并注册了 11 个默认类型LogicFlow.tsx节点rect、circle、polygon、text、ellipse、diamond、html边line、polyline、bezierprivate defaultRegister() { const defaultElements: RegisterConfig[] [ { type: rect, view: _View.RectNode, model: _Model.RectNodeModel }, { type: circle, view: _View.CircleNode, model: _Model.CircleNodeModel }, // ... polyline / bezier 等 ] this.batchRegister(defaultElements) }这解释了为什么直接使用type: rect无需任何注册——它早已随实例初始化注册完毕。同时这也是batchRegister的第一个真实使用者可见批量注册本就是框架内部的常规操作。注册与消费一次完整的闭环注册不是终点注册表最终服务于数据渲染。在 GraphModel.ts 中getModel(type)负责从modelMap按类型取出模型构造函数getModel(type: string) { return this.modelMap.get(type) }渲染数据转换为模型时会先查注册表查不到即抛出错误。例如节点转换GraphModel.tsconst Model this.getModel(node.type) as BaseNodeModelCtor if (!Model) { throw new Error( 找不到${node.type}对应的节点请确认是否已注册此类型节点。, ) }边转换同理GraphModel.tsconst Model this.getModel(type) as BaseEdgeModelCtor if (!Model) { throw new Error(找不到${type}对应的边。) }这两处正是新手最常遇到报错的根源图数据中出现了未注册的 type。排查方法很直接——检查register/batchRegister是否覆盖了数据中的所有type。由此可以得到一个清晰的注册消费闭环lf.register({ type, view, model }) │ ▼ viewMaptype → 视图组件 ──► 渲染阶段getView(type) 渲染 modelMaptype → 模型类 ──► 数据阶段getModel(type) 实例化模型 │ type 未注册则抛出 找不到 XX 对应的节点/边实践建议与注意事项结合文档与源码总结以下实战要点type 全局唯一type既是注册表键也是图数据中的引用标识。重复注册同名 type 会覆盖之前的注册跨实例注册互不影响注册表挂在具体实例的 viewMap / modelMap 上。优先对象式注册register(config)的写法清晰直观是推荐用法函数式重载仅在确需访问lf场景才使用源码注释明确标注不推荐。默认 isObserverView 为 true若自定义视图内部自行处理了响应式例如使用外部状态可通过isObserverView: false跳过 observer 包装以省去无谓渲染开销。依赖内置基类自定义节点/边应继承logicflow/core导出的基类RectNode、PolylineEdge、对应 Model 等而不是从零实现这样能复用渲染、选中、连线等成熟能力。批处理用 batchRegister元素较多时用batchRegister一次注册语义更清晰框架自身的内置注册也是这么做的。排查找不到报错遇到找不到${type}对应的节点/边优先核对该 type 是否已注册注册的 type 字符串是否与图数据中的 type 完全一致注意大小写与空格关联文档索引本文依据的 API 文档register.zh.md参数类型定义MainTypes.zh.md含RegisterConfig、RegisterElementFunc、RegisterParam、BaseNodeModelCtor、BaseEdgeModelCtor核心实现LogicFlow.tsxregister/registerElement/batchRegister/defaultRegister、GraphModel.tsgetModel/setModel插件注册方式use.zh.md更多实战注册示例可参考教程目录中的扩展类文档如 group.zh.md、dynamic-group.zh.md以及 examples/feature-examples/src/components/nodes 下的自定义节点示例源码。【免费下载链接】LogicFlowA flow chart editing framework focus on business customization. 专注于业务自定义的流程图编辑框架支持实现脑图、ER图、UML、工作流等各种图编辑场景。项目地址: https://gitcode.com/GitHub_Trending/lo/LogicFlow创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 LogicFlow 实例注册 API 全解析：register 与 batchRegister 实现自定义节点与边
LogicFlow 实例注册 API 全解析register 与 batchRegister 实现自定义节点与边【免费下载链接】LogicFlowA flow chart editing framework focus on business customization. 专注于业务自定义的流程图编辑框架支持实现脑图、ER图、UML、工作流等各种图编辑场景。项目地址: https://gitcode.com/GitHub_Trending/lo/LogicFlow本文以 LogicFlow 官方 API 文档《注册》为骨架深入讲解 LogicFlow 实例方法register与batchRegister的完整用法从签名、参数类型、核心示例到二者内部实现原理viewMap / modelMap 注册表、observer包装、内置元素默认注册逐一拆解。读完本文你将掌握在 LogicFlow 中注册自定义节点/边的两种方式并能结合源码理解注册失败时的报错链路从容应对找不到 XX 对应的节点这类常见问题。概述注册机制在 LogicFlow 中的位置LogicFlow 是一个专注于业务自定义的流程图编辑框架见 README.md支持脑图、ER 图、UML、工作流等多种图编辑场景。它的扩展能力建立在注册Register机制之上任何自定义节点、自定义边都必须先通过注册告诉实例这个 type 长什么样view以及这个 type 有哪些数据行为model之后才能在图数据中被引用、渲染和交互。本页 API 文档位于 register.zh.md隶属于LogicFlow 实例分组order: 2是官方 API 文档中关于实例级注册方法的唯一入口。它覆盖两个核心方法方法作用签名register注册单个自定义节点或边register(config: RegisterConfig): voidbatchRegister批量注册多个自定义节点或边batchRegister(configList: RegisterConfig[]): void插件Extension的全局注册不在实例方法范畴内而是通过 LogicFlow.use 完成本文不展开。register注册单个自定义节点或边register用于向当前 LogicFlow 实例注册一个自定义节点或边是使用频率最高的扩展入口。签名与参数register(config: RegisterConfig): void参数类型RegisterConfig的完整定义见类型文档 MainTypes.zh.md。它包含以下属性属性名类型描述typestring指定要注册的图元素类型必填。它是后续addNode、addEdge、render时引用该元素的唯一标识。viewComponentTypeany { isObserved?: boolean }与图元素关联的视图组件React 组件。可包含可选布尔值isObserved指示该组件是否已被观察mobx 响应式。modelGraphElementCtor定义图元素的模型构造函数必填。应为BaseNodeModelCtor节点模型或BaseEdgeModelCtor边模型见 LogicFlow.tsx。isObserverViewboolean (可选)指示视图是否为观察者视图。设为true表示视图会响应模型变化默认行为设为false可跳过observer包装。官方示例自定义矩形节点文档给出的标准示例是继承内置RectNode/RectNodeModel实现一个圆角矩形节点import { RectNode, RectNodeModel } from logicflow/core; class CustomRectNode extends RectNode {} class CustomRectModel extends RectNodeModel { setAttributes() { this.width 200; this.height 80; this.radius 50; } } lf.register({ type: custom-rect, view: CustomRectNode, model: CustomRectModel, });拆解这段代码viewCustomRectNode继承自RectNode不重写任何渲染逻辑直接复用内置矩形的 SVG 渲染。modelCustomRectModel继承自RectNodeModel在setAttributes()生命周期钩子中重定义尺寸与圆角宽 200、高 80、圆角半径 50。setAttributes在模型初始化时被调用是自定义节点最常见的覆写入口。typecustom-rect是自定义的标识之后通过lf.addNode({ type: custom-rect, x: 100, y: 100 })即可实例化该节点。注册边的方式完全一致只需将view/model换成边对应的基类如PolylineEdge/PolylineEdgeModel并把type设为边类型。官方示例批量注册多个元素当需要一次性注册多个自定义元素时使用batchRegisterlf.batchRegister([ { type: user, view: UserNode, model: UserModel, }, { type: user1, view: UserNode1, model: UserModel1, }, ]);它接受RegisterConfig[]数组内部逐项执行与register相同的注册逻辑适用于一次引入、注册一整套业务元素的场景。源码解读register 到底做了什么只看用法难免知其然不知其所以然。下面结合 packages/core/src/LogicFlow.tsx 的实现说明注册的内部链路。注册的两种重载方式register在源码中有两个重载LogicFlow.tsxregister(element: RegisterConfig): void register( type: string, fn: RegisterElementFunc, isObserverView?: boolean, ): void方式一推荐传入RegisterConfig对象即文档示例的写法。方式二传入type与一个RegisterElementFunc函数。源码注释明确标注该方式不推荐极个别在自定义的时候需要用到 lf 的情况下可以用这种方式因为大多数场景可以直接在 view 中通过this.props获取graphModel或在 model 中通过this.graphModel获取方法LogicFlow.tsx。方式二的函数签名来自类型文档中的RegisterElementFunc与RegisterParam见 MainTypes.zh.mdexport type RegisterElementFunc (params: RegisterParam) RegisterElement export type RegisterParam { h: typeof h; // hyperscript 函数用于创建虚拟 DOM [key: string]: unknown; // 其它由框架注入的基类RectNode、RectNodeModel 等与用户自定义属性 }执行方式二时源码会构造一个registerParam对象把内置的BaseNode、BaseEdgeModel、RectNode、RectNodeModel、PolylineEdge、BezierEdgeModel、h以及当前type全部注入LogicFlow.tsx随后从函数返回值中解构出view与model完成注册。registerElement注册的核心实现无论哪种方式最终都会收敛到registerElementLogicFlow.tsxprivate registerElement(config: RegisterConfig) { let ViewComp config.view if (config.isObserverView ! false !ViewComp.isObserved) { ViewComp.isObserved true ViewComp observer(ViewComp) } this.setView(config.type, ViewComp) this.graphModel.setModel(config.type, config.model) }关键点observer 包装只要isObserverView不为false且视图尚未被包装isObserved为假就会用 mobx 的observer()把视图组件包一层使其响应模型变化。这就是为什么文档中view类型上带有isObserved?: boolean标记。视图注册表 viewMapsetView把type → ViewComp存入this.viewMapMap供渲染层按类型查找视图。模型注册表 modelMapthis.graphModel.setModel(type, config.model)把type → ModelClass存入GraphModel的modelMap见 GraphModel.ts供数据层按类型实例化模型。内置元素的默认注册实际上实例初始化时就已经通过batchRegister注册了一批内置元素。defaultRegister中定义并注册了 11 个默认类型LogicFlow.tsx节点rect、circle、polygon、text、ellipse、diamond、html边line、polyline、bezierprivate defaultRegister() { const defaultElements: RegisterConfig[] [ { type: rect, view: _View.RectNode, model: _Model.RectNodeModel }, { type: circle, view: _View.CircleNode, model: _Model.CircleNodeModel }, // ... polyline / bezier 等 ] this.batchRegister(defaultElements) }这解释了为什么直接使用type: rect无需任何注册——它早已随实例初始化注册完毕。同时这也是batchRegister的第一个真实使用者可见批量注册本就是框架内部的常规操作。注册与消费一次完整的闭环注册不是终点注册表最终服务于数据渲染。在 GraphModel.ts 中getModel(type)负责从modelMap按类型取出模型构造函数getModel(type: string) { return this.modelMap.get(type) }渲染数据转换为模型时会先查注册表查不到即抛出错误。例如节点转换GraphModel.tsconst Model this.getModel(node.type) as BaseNodeModelCtor if (!Model) { throw new Error( 找不到${node.type}对应的节点请确认是否已注册此类型节点。, ) }边转换同理GraphModel.tsconst Model this.getModel(type) as BaseEdgeModelCtor if (!Model) { throw new Error(找不到${type}对应的边。) }这两处正是新手最常遇到报错的根源图数据中出现了未注册的 type。排查方法很直接——检查register/batchRegister是否覆盖了数据中的所有type。由此可以得到一个清晰的注册消费闭环lf.register({ type, view, model }) │ ▼ viewMaptype → 视图组件 ──► 渲染阶段getView(type) 渲染 modelMaptype → 模型类 ──► 数据阶段getModel(type) 实例化模型 │ type 未注册则抛出 找不到 XX 对应的节点/边实践建议与注意事项结合文档与源码总结以下实战要点type 全局唯一type既是注册表键也是图数据中的引用标识。重复注册同名 type 会覆盖之前的注册跨实例注册互不影响注册表挂在具体实例的 viewMap / modelMap 上。优先对象式注册register(config)的写法清晰直观是推荐用法函数式重载仅在确需访问lf场景才使用源码注释明确标注不推荐。默认 isObserverView 为 true若自定义视图内部自行处理了响应式例如使用外部状态可通过isObserverView: false跳过 observer 包装以省去无谓渲染开销。依赖内置基类自定义节点/边应继承logicflow/core导出的基类RectNode、PolylineEdge、对应 Model 等而不是从零实现这样能复用渲染、选中、连线等成熟能力。批处理用 batchRegister元素较多时用batchRegister一次注册语义更清晰框架自身的内置注册也是这么做的。排查找不到报错遇到找不到${type}对应的节点/边优先核对该 type 是否已注册注册的 type 字符串是否与图数据中的 type 完全一致注意大小写与空格关联文档索引本文依据的 API 文档register.zh.md参数类型定义MainTypes.zh.md含RegisterConfig、RegisterElementFunc、RegisterParam、BaseNodeModelCtor、BaseEdgeModelCtor核心实现LogicFlow.tsxregister/registerElement/batchRegister/defaultRegister、GraphModel.tsgetModel/setModel插件注册方式use.zh.md更多实战注册示例可参考教程目录中的扩展类文档如 group.zh.md、dynamic-group.zh.md以及 examples/feature-examples/src/components/nodes 下的自定义节点示例源码。【免费下载链接】LogicFlowA flow chart editing framework focus on business customization. 专注于业务自定义的流程图编辑框架支持实现脑图、ER图、UML、工作流等各种图编辑场景。项目地址: https://gitcode.com/GitHub_Trending/lo/LogicFlow创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考