ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

LogicFlow @logicflow/core 核心包演进全解析:从 0.1.0 到 2.2.4 的能力图谱与源码佐证

LogicFlow @logicflow/core 核心包演进全解析:从 0.1.0 到 2.2.4 的能力图谱与源码佐证 LogicFlow logicflow/core 核心包演进全解析从 0.1.0 到 2.2.4 的能力图谱与源码佐证【免费下载链接】LogicFlowA flow chart editing framework focus on business customization. 专注于业务自定义的流程图编辑框架支持实现脑图、ER图、UML、工作流等各种图编辑场景。项目地址: https://gitcode.com/GitHub_Trending/lo/LogicFlow本文以 LogicFlow 核心包 packages/core/CHANGELOG.md 的完整版本记录为脉络系统梳理logicflow/core从 2020 年底首个版本到 2.2.4 的核心能力演进、关键 API 变更与缺陷修复。读者可通过本文快速建立对 LogicFlow 核心包功能边界、事件系统、网格与吸附机制、文本/锚点/缩放/分组等模块的实现认知并对照源码packages/core/src与测试packages/core/tests深入理解每一项能力的落地位置。版本时间线与总体演化方向logicflow/core的版本演进大致可划分为四个阶段0.x 阶段2020.12 – 2021 上半年奠定引擎雏形完成初始化、注册机制、基础事件、锚点与文本编辑、小地图、框选等首批能力1.0 – 1.2 阶段2021 末 – 20241.0 正式版发布重构自定义锚点写法补齐 HTML 节点、节点旋转、拖拽范围、边调整等能力并持续修复移动端与 SSR 兼容问题2.0 阶段2021.12 起的 2.0.0-alpha 系列项目结构大重构切换 pnpm 包管理将 Resize 能力内置进 coreLabel 文本模式落地group插件升级为dynamic-group同时重命名了工具与内部 API2.1/2.2 阶段当前新增边层级优先堆叠、Shift 等比缩放、移动端适配、锚点高级配置并在 2.2.4 修复了网格吸附与gridSize的同步问题同时开始在包内加入面向 AI/LLM 的友好文档。当前仓库根目录使用 pnpm-workspace.yaml 与 lerna.json 管理多包发布core 包的 CHANGELOG 即由 changesets 自动生成参见 2.0.0 条目中 add changesets to generate CHANGELOG。网格、对齐与gridSize同步2.2.4 及以后最新补丁 2.2.4 修复了一个直接影响画布吸附行为的缺陷当snapGrid: true时gridSize未随grid简写形式布尔值、数字同步。修复后gridSize始终与Grid.getGridOptions()解析出的grid.size保持一致。配置简写形式与解析规则Grid.getGridOptions接收number | boolean | GridOptions三种入参其解析逻辑位于 packages/core/src/view/overlay/Grid.tsx#L309-L318传入数字等价于{ size: options }即网格间距传入布尔值等价于{ visible: options }即网格是否可见传入对象支持size间距、visible可见性、typedot点状 /mesh交叉线、config.color/config.thickness颜色与线宽/点大小以及majorBold行为配置等字段。在 packages/core/src/model/GraphModel.ts#L181-L190 的构造函数中graphModel会先按主题模式取得初始网格配置gridModeMap再合并用户传入的grid值当options.snapGrid为真时this.gridSize this.grid.size || 1从而保证吸附步长始终来自解析后的grid.size。测试佐证packages/core/tests/model/grid-options.test.ts 为这一修复提供了直接验证// grid: number snapGrid: true - gridSize 等于该数字 const lf createLf({ grid: 20, snapGrid: true }) expect(lf.graphModel.gridSize).toBe(20) // grid: true snapGrid: true - gridSize 等于默认网格尺寸 10 const lf2 createLf({ grid: true, snapGrid: true }) expect(lf2.graphModel.gridSize).toBe(10) // grid: object snapGrid: true - gridSize 取 grid.size const lf3 createLf({ grid: { size: 30 }, snapGrid: true }) expect(lf3.graphModel.gridSize).toBe(30) // grid: number snapGrid: false - 不开启吸附gridSize 保持 1 const lf4 createLf({ grid: 20, snapGrid: false }) expect(lf4.graphModel.gridSize).toBe(1)回顾历史网格相关问题一直是被反复打磨的痛点2.0.8 修复过初始化画布时因节点吸附网格导致节点与边错位#19542.0.7 修复过 2.x 与 1.x 网格线宽表现不一致的问题2.0.7 还支持了动态修改 Grid 配置对应graphModel中的updateGrid与grid相关 setter见 GraphModel.ts#L1548-L1587。事件系统全量事件枚举与关键事件演进事件是 LogicFlow 扩展与业务接入的主要通道。core 包将事件名集中定义在 packages/core/src/constant/index.ts 的EventType枚举中按节点、边、锚点、调整点、画布空白区、框选、文本、Label、历史与画布等维度组织节点事件node:add、node:delete、node:click、node:dbclick、node:dnd-add、node:dnd-drag、node:dragstart、node:drag、node:drop、node:rotate、node:resize、node:focus/node:blur以及 properties 变化事件node:properties-change、node:properties-delete边事件edge:add、edge:delete、edge:click、edge:dbclick、edge:focus/edge:blur、edge:adjust、edge:exchange-node锚点事件anchor:click、anchor:mousedown、anchor:dragstart、anchor:drag、anchor:drop、anchor:dragend画布空白区事件blank:mousedown、blank:dragstart、blank:drag、blank:mousemove、blank:canvas-mousemove、blank:click、blank:contextmenu等框选事件selection:mousedown至selection:contextmenu一系列文本与 Label 事件text:update、text:add、label:add、label:update、label:delete、label:batch-add等其他history:change、graph:transform、graph:rendered、graph:updated、editConfig:changed、connection:not-allowed。CHANGELOG 中可以追踪到多个事件的关键节点2.1.0新增blank:mousemove事件外发并新增isDragging参数用于区分鼠标是拖拽移动还是普通移动对应 constant/index.ts#L1012.0.12新增锚点ANCHOR_CLICK/ANCHOR_MOUSEDOWN事件用于自定义锚点方法在 packages/core/src/view/Anchor.tsx#L415-L422 中可看到锚点点击与按下时的事件派发实现2.0.8增加节点和边的focus/blur事件上报#19172.0.7将properties:change类型定义修正为node:properties-change1.1.16 / 0.2.x增加了fitView的横向与纵向偏移独立设置、选中元素lf-node-select/lf-edge-selectclassName、graph:rendered事件1.1.0-alpha.40.7.1-alpha.0增加 overlap 递增模式下数据中保存zIndex对应OverlapMode枚举STATIC/DEFAULT/INCREASE/EDGE_TOP见 constant/index.ts#L162-L167。2.0 大重构monorepo、打包与命名规范2.0.0 是 core 包历史上最大的一次结构性变更CHANGELOG 中记录了完整的重构清单包管理与构建使用 pnpm 作为包管理工具配置 husky pre-commit新增 changesets 自动生成 CHANGELOGrollup 打包配置更新并增加 umd 使用 demo引入lodash-es依赖解决引入项目的报错问题目录规范将大驼峰命名的文件统一改为小写 短横线如DefaultAnimation.ts - defaultAnimation.ts、history/History.ts - history/index.tsBPMN、Control等文件夹改为小写类型使用小驼峰、.tsx使用大驼峰示例工程重构新增 examples/feature-examples 汇总官方 demoexamples/engine-browser-examples 用于在 vite 环境下调试包功能examples/next-app 用于测试 SSR 下window is not defined问题examples/vue3-app 测试 vue-node-registryexamples/vue3-memory-leak 定位内存泄漏并推动destroy方法的完善core 与 extension 解耦core 包从preact切换到preact/compat解决 SVG 属性问题补充GraphData类型区别于GraphConfigData优化GraphModel.getAreaElement的 bug。这段历史解释了当前仓库的目录结构与命名习惯也是阅读源码时理解文件命名小写短横线目录、.tsx大驼峰的背景。节点旋转、等比缩放、Resize 与文本Resize 能力内置与 Control 组件2.0.0 将节点 Resize 功能从扩展内置进 core新增 Control 组件在BaseNodeModel中增加resize方法circle/diamond/ellipse/polygon 等节点均获得 resize 能力。实现细节包括调整大小时以graphModel.gridSize作为拖拽步长new StepDrag的 step 参数保证与网格对齐通过多边形 points 置原点并基于设定的 width/height 缩放解决形状与边框定位异常问题2.0.0 将相关变量名从anchor改为control2.0.5 修复了 rotate 正常模式 resize 的相关问题#1428并修复外部调用handleResize()未传 anchor 坐标时不触发recalcRotatedResizeInfo的问题。旋转与 Shift 等比缩放1.2.14core 支持节点旋转2.0.0 将allowRotation重命名为allowRotate并计划增加allowResize保持命名一致2.1.0支持Shift 节点等比缩放同时修复了关闭网格吸附后点击节点难以选中的问题2.0.11修复节点旋转后锚点无法接线#1871、旋转节点多选后移动位置异常#1794等问题1.1.8-alpha.0新增节点 resize 的maxwidth/maxheight约束。文本模式Text 与 Label2.0.0 是 Label 文本模式的关键版本新增Label文本模式支持配置多文本和修改文本朝向graphModel.textMode用于标识当前文本模式并提供updateTextMode切换 API。相关实现可参考 packages/core/src/model/BaseNodeModel.ts 与 packages/core/src/model/GraphModel.ts。该版本还重构了editConfigModel.ts将文本编辑配置的优先级梳理为全局 textEdit → 分类 nodeTextEdit / edgeTextEdit → 元素本身 editable。Label 支持textOverflowMode为ellipsis | wrap | clip | nowrap | default并支持labelWidth全局/个性化配置同步节点的zIndex到 Label 上。文本背景text background、自动换行nodeText auto wrap0.6.8与溢出省略时悬停显示全文1.2.0-next.2等能力也逐步补齐。边类型、调整、折线与自定义路径CHANGELOG 记录了边能力的大量演进边类型core 内置 line / polyline / bezier 三种边见 constant/index.ts 中ModelType的LINE_EDGE/POLYLINE_EDGE/BEZIER_EDGE路径与交点2.0.8 为 line 和 polyline 增加getPath方法#19292.1.3 修复自定义折线路径场景下终点未落在锚点导致的 NaN 报错#21212.0.7 修复 polyline 与多边形节点交点不正确的问题1.2.9 修复矩形折线首点方向计算#817调整起终点2.0.0 新增adjustEdgeStart/adjustEdgeEnd单独控制起始/结束点调整0.7.3 支持调整边 startPoint / endPointBezier1.2.11 改善贝塞尔曲线箭头外观#9511.2.5 提供带轻微偏折的贝塞尔终点 marker1.1.15 支持边动画edge animation渐进连线与插入节点2.0.8 新增渐进连线能力0.3.6 增加insert-node-in-polyline折线插入节点能力extension 包 packages/extension/src/insert-node-in-polyline边数据2.0.10 导出边数据默认带上连接锚点的 ID#19912.0.0 支持边传入自定义样式、调整折线pointsList的修改方法。分组从 group 到 dynamic-group1.1.0-alpha 系列group 插件获得 fold折叠与 resize缩放能力新增 group hook2.0.0group插件升级为dynamic-group完成isCollapsed初始化与groupAddable状态即时更新将 ResizeControl 范围从 30 调整为 15避免遮挡 Group 折叠按钮并开发了节点缩放/旋转时同步缩放/旋转组内子元素的功能相关实现见 packages/extension/src/dynamic-group 及配套测试 packages/extension/test/dynamic-group2.0.6优化分组缩放时子元素是否缩放的逻辑并为动态分组 resize 增加控制子元素是否同时缩放的参数close #1826当前仓库 docs 目录下还沉淀了分组架构的系列设计文档如 docs/superpowers/specs/2026-06-23-layout-group-aware-design.md、docs/superpowers/specs/2026-07-03-dynamic-group-multi-select-sensor-design.md可作为理解 dynamic-group 当前设计的延伸阅读。锚点从自定义写法重构到指定锚点连接0.6.12支持设置锚点 id1.0.0-alpha 系列重构自定义锚点写法1.1.9-alpha.0新增getAnchorShape允许重写锚点形状1.1.7-alpha.0优化靠近画布边界时的锚点连线拖拽行为2.2.0-alpha.1锚点功能优化支持用户指定连接锚点支持配置是否必须连到锚点上才能触发连线2.2.0-alpha.7移除了anchorProximityValidate配置项1.2.23增加获取锚点关联边的能力2.0.12新增ANCHOR_CLICK/ANCHOR_MOUSEDOWN事件在 packages/core/src/view/Anchor.tsx 中实现。移动端、性能、内存与生命周期2.2.0-alpha.0支持移动端适配2.0.16修正静态方法调用逻辑解决destroy报错2.0.10完善destroy方法并增加性能测试 demo同时修复clearData之后仍持有节点引用导致的内存溢出#19932.0.11销毁时调用所有插件的destroy方法1.2.19修复静默模式切换后快捷键与拖拽状态不更新#1491、stopMoveGraph置 false 后画布仍无法移动的问题1.1.26修正BaseEdgeModel构造函数属性初始化顺序2.0.3将isIe调整为方法解决 SSR 项目window is not defined#15241.2.24修复 nuxt 使用报错。AI 友好文档与开发流程2.2.1 – 2.2.32.2.1 至 2.2.3 三个版本围绕面向 AI/LLM 的可检索文档展开为 core 包 README 加入 AI coding intro并在 core 包中引入 AI friendly docs。仓库根目录 scripts/copy-ai-docs.js 即承担 AI 文档的复制流程而 docs/superpowers/specs/2026-04-27-ai-docs-integration-design.md 记录了 AI 文档集成的设计思路。版本迁移与兼容性提示2.0.0 Breaking ChangepluginOptions只传入插件对应的 options 数据此前是全量传入API 重命名resizeFunction - throttleResize、outcomingEdgeList - outgoingEdgeList以及getAnchorOutcomingEdge - outgoing#1449、allowRotation - allowRotate、formateAnchorConnectValidateData - formatAnchorConnectValidateData、setHoverON - setHoverOn、setHoverOFF - setHoverOff、fakerNode - fakeNode、lf.select - lf.selectElementById类型修正properties:change - node:properties-changestrokeDasharray类型由数组改为字符串EditConfigMode拼写修正行为变化复制粘贴后克隆节点文本位置会吸附到网格对应 1.2.28 修复 #1545测试见 packages/core/tests/bugs/1545-spec.test.ts静默模式下点击节点/边不再修改层级2.0.10fix #1588。小结一份可当作能力索引的演进档案logicflow/core的 CHANGELOG 不仅是发布流水账更是一份浓缩的能力索引事件枚举、网格吸附规则、锚点事件、Label 文本模式、内置 Resize、dynamic-group 分组、destroy 生命周期等核心机制都能在 packages/core/src 中找到对应实现并由 packages/core/tests与 extension 的test目录提供回归保障。阅读本文件时建议结合EventType枚举packages/core/src/constant/index.ts、GraphModelpackages/core/src/model/GraphModel.ts与Grid实现packages/core/src/view/overlay/Grid.tsx交叉验证即可快速定位任意历史变更在当前代码库中的落点。【免费下载链接】LogicFlowA flow chart editing framework focus on business customization. 专注于业务自定义的流程图编辑框架支持实现脑图、ER图、UML、工作流等各种图编辑场景。项目地址: https://gitcode.com/GitHub_Trending/lo/LogicFlow创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表