LogicFlow 1.1 版本升级指南：插件规范、MiniMap 迁移与全量特性详解-酒店常州论坛

LogicFlow 1.1 版本升级指南：插件规范、MiniMap 迁移与全量特性详解

【免费下载链接】LogicFlowA flow chart editing framework focus on business customization. 专注于业务自定义的流程图编辑框架，支持实现脑图、ER图、UML、工作流等各种图编辑场景。项目地址: https://gitcode.com/GitHub_Trending/lo/LogicFlow

本文以 LogicFlow 官方《1.0 升级到 1.1》升级文档为主体，结合仓库源码（packages/core、packages/extension）展开，系统讲解从 1.0 升级到 1.1 时必须关注的 Breaking Changes、插件 class 化规范、MiniMap API 迁移方式，并逐版本梳理 1.1.x 系列在节点、边、分组、锚点、画布交互、插件生态上的核心新特性与问题修复，帮助你快速评估升级影响并平滑迁移。

升级前必须知道的 Breaking Changes

LogicFlow 1.1 版本相对 1.0 有两项不兼容变更，升级前需要先对业务代码进行适配。

插件统一改为 class 实现，方法统一挂载到`lf.extension`

1.1 版本对插件体系进行了规范：所有插件必须使用 class 的方式实现。插件内部定义的方法，统一通过lf.extension.插件名称.插件方法的形式调用，例如小地图的显示与隐藏需要写成lf.extension.miniMap.show()与lf.extension.miniMap.hide()。

原来的lf.插件方法这种直接调用方式在 1.1 中仍然可用，但官方明确说明后续版本将废弃，因此升级时建议逐步迁移到新的调用方式。

从源码实现看，这一规范对应的正是核心包中插件的安装与挂载逻辑：

packages/core/src/LogicFlow.tsx 中维护了static extensions: Map<string, ExtensionConfig>与实例属性extension: Record<string, Extension | ExtensionDefinition>，插件实例被统一挂载到lf.extension上；
packages/core/src/LogicFlow.tsx 的installPlugin逻辑会优先判断扩展是否为“含pluginName与install的普通对象形式”；若插件是 class（ExtensionConstructor），则会new ExtensionCtor(...)创建实例，并执行render与挂载操作；
同时 packages/core/src/LogicFlow.tsx 提供了destroy生命周期钩子，class 插件可通过实现destroy方法在销毁时清理资源。

仓库中所有官方插件均已遵循 class 规范，例如：

小地图：packages/extension/src/components/mini-map/index.ts 声明static pluginName = 'miniMap'；
控制条：packages/extension/src/components/control/index.ts 声明static pluginName = 'control'；
右键菜单：packages/extension/src/components/menu/index.ts 声明static pluginName = 'menu'；
拖拽面板：packages/extension/src/components/dnd-panel/index.ts 声明static pluginName = 'dndPanel'；
分组：packages/extension/src/materials/group/index.ts 声明static pluginName = 'group'。

升级时，自定义插件只需保证pluginName静态属性与 class 形式即可被installPlugin正确实例化。

MiniMap API 不兼容更新

MiniMap（小地图）的 API 发生了不兼容变更，迁移对照如下：

1.0 写法	1.1 写法
`MiniMap.show()`	`lf.extension.miniMap.show()`
`MiniMap.hide()`	`lf.extension.miniMap.hide()`

1.1 中调用lf.extension.miniMap会拿到 miniMap 插件实例，其内置能力可查看 packages/extension/src/components/mini-map/index.ts 中的MiniMapOption类型定义，支持width/height（小地图画布宽高）、showEdge（是否渲染边）、isShowHeader（是否显示标题栏）、isShowCloseIcon（是否显示关闭按钮）、headerTitle（标题文本）以及leftPosition/rightPosition/topPosition/bottomPosition四边距定位参数（其中leftPosition优先级高于rightPosition，topPosition优先级高于bottomPosition）。

1.1 系列逐版本特性详解

1.1 系列从 1.1.30 一路迭代到 1.1.8 及以下，累计了大量新特性与修复。以下按版本梳理关键能力，并尽量给出对应的源码依据。

1.1.30：选中置顶策略调整与分组数据增强

设置选中元素 zIndex 为 9999，而不是始终保持最顶部：1.1.30 之前，选中元素会被直接置顶到最顶层；此后改为将选中元素的zIndex设置为 9999，既保证了视觉上的突出，也避免了永久打乱元素层级关系。这与nodeModel.autoToFront属性（见 1.1.8 以下版本说明）共同构成了完整的置顶策略。
group 节点默认导出的数据增加isGroup: true属性：导出图数据时，分组节点会自动带上isGroup: true，便于下游系统识别分组节点类型。
修复折线调整为一条直线后继续调整导致连线错乱、删除分组节点时同步删除其子节点、分组嵌套时拖入节点归属错误（#803）以及分组选中时未置于其他分组之前（#820）等问题。

1.1.29：带弧度折线插件 CurvedEdge

新增插件CurvedEdge：提供带弧度的折线（曲线折线）。对应源码位于 packages/extension/src/materials/curved-edge/index.ts，其内部通过getCurvedEdgePath(points, radius)根据折线路径点与圆角半径radius计算带弧度的路径，并基于核心包的PolylineEdge/PolylineEdgeModel派生出CurvedEdge/CurvedEdgeModel。接入方式与普通插件一致，将CurvedEdge注册为边类型或作为插件引入即可。
getAnchorLineStyle增加参数anchorInfo（#766，getAnchorStyle(_anchorInfo?)与getAnchorLineStyle(_anchorInfo?)均接收anchorInfo参数用于样式自定义。
修复在edge:add事件中通过changeEdgeId修改 Id 后箭头不显示的问题（#788）。

1.1.28：锚点显示控制、删除属性 API 与 anchor:dragend 事件

节点缩放更流畅。
nodeModel新增isShowAnchor属性：控制是否显示锚点，对应 packages/core/src/model/node/BaseNodeModel.ts 的@observable isShowAnchor = false以及setIsShowAnchor(flag)方法（packages/core/src/model/node/BaseNodeModel.ts）。
新增anchor:dragend事件：在拖拽创建连线未成功时触发（#759），可与anchor:drop（连线成功时触发）配合实现完整的连线交互状态判断。
新增单独删除节点或边某个属性的 API：lf.deleteProperty(id, key)与model.deleteProperty(key)。核心实现见 packages/core/src/LogicFlow.tsx（lf.deleteProperty委托给graphModel.getElement(id)?.deleteProperty(key)），以及节点与边模型的@action deleteProperty实现：packages/core/src/model/node/BaseNodeModel.ts 与 packages/core/src/model/edge/BaseEdgeModel.ts。
修复只读模式下仍可拖拽调整节点大小（#778）、画布缩放后节点放大缩小体验差（#773）等问题。

1.1.27：自定义箭头与 addNode 网格对齐

增加自定义箭头功能（#755）。
addNode方法添加的节点默认会放到 grid 上（#756），保证编程式添加节点与画布网格对齐。
修复画布添加 group 节点报错（#757）、自定义快捷键为字母时被编辑文本触发（#760）、HTML 节点 click 事件在非置顶节点中首次点击无效（#767）等问题。

1.1.26：edgeGenerator 自定义连边规则

新增edgeGenerator初始化选项，可自定义连边规则（#739：

export type EdgeGeneratorType = ( sourceNode: LogicFlow.NodeData, targetNode: LogicFlow.NodeData, currentEdge?: Partial<LogicFlow.EdgeConfig>, ) => any

修正BaseEdgeModel构造函数属性初始化顺序（#740）。

1.1.25：分组添加控制`isAllowAppendIn`

分组新增isAllowAppendIn方法，用来控制节点是否允许被添加到分组中，为分组插件提供了“准入”钩子。
修复分组限制子节点拖出分组时拖动显示异常（#734）、分组嵌套时子分组内部节点无法跟随移动等问题。

1.1.24：ignoreHideElement 与 virtual 元素

getAreaElement增加参数ignoreHideElement：支持在框选/获取区域元素时忽略隐藏的节点。
baseNodeModel与baseEdgeModel增加参数virtual：导出图数据时会忽略virtual为true的元素。核心模型中可见 packages/core/src/model/node/BaseNodeModel.ts 的readonly virtual: boolean = false。该能力适用于生成临时辅助节点/边而不希望污染导出数据的场景。
修复框选分组节点移动时子节点连线混乱的 bug（#702）。

1.1.21：autoExpand 自动扩充画布

新增初始化参数autoExpand：控制节点拖动靠近画布边缘时是否自动扩充画布。该参数在 1.1.8 中已有“移动节点到画布边缘自动扩展画布大小”的交互优化，1.1.21 将其正式作为可配置的初始化参数开放，可在初始化LogicFlow时通过autoExpand: true/false开关。
修复弹框中不传宽高节点无法拖动、ES Module 打包强制声明不使用 tree shaking（#671）等问题。

1.1.20：路径高亮与开发模式非压缩版本

新增节点相关联路径高亮模式（#642）：可将某节点关联的整条链路高亮展示，适用于上下游链路追踪场景。
新增开发模式使用非压缩版本（#644）：方便开发调试时查看原始报错堆栈。

1.1.19：自定义首尾箭头

连线新增自定义首尾箭头功能（#638），配合 1.1.27 的自定义箭头能力，可对边的起点与终点箭头分别定制。

1.1.16：anchor:drop 语义收敛与 batchRegister

anchor:drop只在创建连线成功时才触发：用于区分手动创建的连线与自动创建的连线（edge:add）。若连线未创建成功，走的是 1.1.28 新增的anchor:dragend事件。
新增批量注册 APIlf.batchRegister。核心实现见 packages/core/src/LogicFlow.tsx，它接收RegisterConfig[]并批量注册节点/边，初始化时也通过batchRegister(defaultElements)注册内置元素。
修复小地图在画布移动时未实时更新的问题（#610）。

1.1.15：选中态 class、fitView 留白与默认边动画

边和节点在选中时增加 classlf-xx-selected：支持通过 CSS 自定义边/节点的选中样式。
fitViewAPI 增强：支持控制视图两边留白距离（#585（lf.fitView，1.1.8 引入）。
边增加默认动画效果（#606）。
修复边文本设置背景色后不支持 padding 的问题（#592）。

1.1.13：snapshot 插件 customCssRules 与 useGlobalRules

snapshot插件增加customCssRules属性和useGlobalRules属性：分别用于向导出图片注入自定义 CSS 规则，以及控制是否使用全局 CSS 规则，解决导出图片样式与画布不一致的问题。

1.1.12：setElementState 与 renderRawData

新增设置元素编辑/不可编辑状态 APIsetElementState：可通过graphModel.setElementStateById按 Id 设置元素状态。
新增 APIlf.renderRawData：直接渲染未经解析的原始图数据。
修复画布宽高传 0 时节点无法移动、连线偶尔不消失（#568）等问题。

1.1.9：边缘滚动与拖动相对位置优化

优化鼠标移动到画布边缘的滚动效果，支持持续滚动；拖动节点时鼠标不再强制吸附节点中心，而是保持相对位置，交互手感更自然。
修复分组内部子节点之间的连线在分组收起时未被隐藏的问题。

1.1.8：fitView、边缘自动滚动与 NodeResize 参数化

节点缩放插件支持设置放大缩小的最大最小值与灵敏度。
新增lf.fitView方法。
新增连线时鼠标移动到画布边缘画布自动滚动（#534），移动节点到画布边缘时自动扩展画布大小。
优化了节点不允许移出分组范围时，鼠标回到分组内部节点跟随出现的交互。
修复 group 插件多个分组一起折叠报错、内部元素阻止事件冒泡导致外部无法触发（#529、#338）、分组折叠后 history 回退显示错误（#537）等问题。

1.1.8 以下：基础 API 与模型能力沉淀

1.1.8 以下版本沉淀了一批至今仍在使用的基础 API 与模型属性：

新增lf.getModelById和lf.getDataById：分别按 Id 获取节点/边的模型实例与原始数据。
新增事件graph:rendered：图渲染完成时触发，适合在渲染后执行初始化逻辑。
nodeModel新增属性autoToFront：控制节点选中时是否自动置顶，默认为true。核心实现见 packages/core/src/model/node/BaseNodeModel.ts。
nodeModel与edgeModel新增属性visible：控制元素是否显示，默认为true（见 packages/core/src/model/node/BaseNodeModel.ts）。与virtual不同，visible只控制显示，不影响导出。
getAnchorStyle方法增加参数anchorInfo（v1.1.3）：用于对同一节点上的不同锚点显示差异化效果。
自定义锚点支持设置edgeAddable属性：控制是否可以在该锚点手动创建连线。
新增锚点事件anchor:dragstart和anchor:drop（v1.1.5）：用于连线过程中对可连接节点进行高亮处理。
NodeResize插件用法修改：不再全局设置矩形、圆形、多边形可缩放，改为按需引入自定义。

迁移与升级建议

结合上述 Breaking Changes 与 1.1 系列的演进，从 1.0 升级到 1.1 时可参考以下清单：

扫描插件调用方式：将MiniMap.show()/hide()等全局调用替换为lf.extension.miniMap.show()/hide()；自定义插件统一改造成pluginName+ class 形式，方法通过lf.extension.插件名.方法()访问，为后续废弃旧调用方式提前做准备。
关注分组与导出数据变化：1.1.30 起 group 节点导出会携带isGroup: true，virtual: true的元素将被排除在导出数据之外，如有下游数据解析逻辑需同步适配。
善用新 API 简化业务代码：元素属性删除用lf.deleteProperty(id, key)；批量注册用lf.batchRegister；画布自适应用lf.fitView；节点锚点显隐用nodeModel.setIsShowAnchor；连线规则自定义用初始化参数edgeGenerator；画布边缘自动扩充用autoExpand。
关注交互语义变化：anchor:drop只在连线成功时触发，未成功走anchor:dragend；选中置顶策略由“永久置顶”改为 zIndex 9999，自定义 zIndex 场景需留意层级计算。

以上特性对应的最新实现均可在仓库源码中进一步查阅：LogicFlow.tsx（插件安装与实例 API）、options.ts（初始化参数定义）、BaseNodeModel.ts 与 BaseEdgeModel.ts（模型属性与方法）、packages/extension/src（官方插件实现）。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

企业官网建设流程全解析