LogicFlow 编辑配置完全指南：updateEditConfig 与 getEditConfig 实例 API 深度解析

LogicFlow 编辑配置完全指南updateEditConfig 与 getEditConfig 实例 API 深度解析【免费下载链接】LogicFlowA flow chart editing framework focus on business customization. 专注于业务自定义的流程图编辑框架支持实现脑图、ER图、UML、工作流等各种图编辑场景。项目地址: https://gitcode.com/GitHub_Trending/lo/LogicFlow导读本文围绕 LogicFlow 实例的编辑配置Edit Configuration读写 API 展开聚焦 updateEditConfig 与 getEditConfig 两个核心方法并结合底层 EditConfigModel 的源码实现逐一讲解画布、节点、边、文本等全部编辑控制项。读完本文你将掌握如何通过配置动态控制画布的缩放、平移、静默模式、节点/边的调整能力、文本编辑与拖拽、多选按键等行为以及如何组合运用这些配置打造不同角色的编辑体验浏览者、编辑者、演示者。一、编辑配置 API 概览LogicFlow 实例提供了两个与编辑配置直接相关的方法它们是控制画布交互行为的统一入口方法签名作用updateEditConfigupdateEditConfig(config: PartialIEditConfigType): void将传入的配置片段部分合并到当前生效的编辑配置中getEditConfiggetEditConfig(): IEditConfigType返回当前实例完整生效的编辑配置两者的类型统一由IEditConfigType约束该类型定义于 EditConfigModel.ts 源码中文档化的字段表格见 IEditConfigType编辑控制配置。在实例层面这两个方法是对graphModel.editConfigModel的薄封装lf.updateEditConfig(config)内部调用editConfigModel.updateEditConfig(config)随后根据配置变化联动处理平移范围限制、快捷键启用状态、网格对齐状态并派发editConfig:changed事件lf.getEditConfig()内部调用editConfigModel.getConfig()返回当前所有配置键的完整快照。二、基础用法读取与更新2.1 更新编辑配置updateEditConfig接收PartialIEditConfigType即只传需要变更的字段其余字段保持现状。这是该方法与整体覆盖最大的区别——适合在运行期根据用户角色、页面状态动态切换能力。// 禁止画布缩放其余配置不变 lf.updateEditConfig({ stopZoomGraph: true, });多个字段可以一次合并提交lf.updateEditConfig({ adjustNodePosition: false, hideAnchors: true, adjustEdge: false, });从源码看该合并逻辑位于 EditConfigModel.computeConfig它会对配置做一系列衍生合并详见第四节再通过assign合并到模型上并以 mobxaction包裹保证响应式更新。2.2 获取当前编辑配置const config lf.getEditConfig(); console.log(config.isSilentMode, config.adjustNodePosition, config.snapGrid);返回的是pick(this, allKeys)的完整字段快照见 getConfig 实现包含IEditConfigType定义的全部键便于排查当前交互能力。三、配置项全解析IEditConfigTypeIEditConfigType的全部字段可归纳为五组下表为每个字段的类型、默认值与含义默认值来源于 EditConfigModel 的类属性初始化3.1 画布相关字段类型默认值说明isSilentModebooleanfalse静默模式只读模式开启后节点/边不可移动、文本不可编辑、锚点隐藏stopZoomGraphbooleanfalse禁止缩放画布stopScrollGraphbooleanfalse禁止鼠标滚轮平移画布stopMoveGraphboolean \| vertical \| horizontal \| [number, number, number, number]false禁止/约束拖动画布。true完全禁止vertical禁止垂直拖动horizontal禁止水平拖动[minX, minY, maxX, maxY]限定画布可拖动范围snapGridbooleanfalse开启网格对齐isPinchingbooleanfalse是否为双指捏合状态内部使用标识捏合时暂停框选等交互3.2 节点相关字段类型默认值说明adjustNodePositionbooleantrue允许拖动节点hideAnchorsbooleanfalse隐藏节点所有锚点allowRotatebooleanfalse允许节点旋转旋转控制点的显隐allowResizebooleanfalse允许节点缩放缩放调整点的显隐autoExpandbooleanfalse元素超出画布边界时是否自动扩展画布hoverOutlinebooleantrue节点悬浮时是否显示外框nodeSelectedOutlinebooleantrue节点被选中时是否显示 outline3.3 边相关字段类型默认值说明adjustEdgebooleantrue允许调整边adjustEdgeMiddlebooleanfalse允许调整边的中间点adjustEdgeStartAndEndbooleanfalse允许调整边起点和终点总开关adjustEdgeStartbooleanfalse允许调整边起点adjustEdgeEndbooleanfalse允许调整边终点edgeSelectedOutlinebooleantrue边被选中时是否显示 outline注意源码中adjustEdgeStart/adjustEdgeEnd通常由adjustEdgeStartAndEnd联动设置见 computeConfig传入布尔值时会同步覆盖首尾两端。3.4 文本相关字段类型默认值说明textEditbooleantrue允许文本编辑全局nodeTextEditbooleantrue允许节点文本编辑edgeTextEditbooleantrue允许边文本编辑textDraggablebooleanfalse允许文本拖拽全局含 Text 与 LabelnodeTextDraggablebooleanfalse允许节点文本拖拽edgeTextDraggablebooleanfalse允许边文本拖拽3.5 文本模式与多选2.0.0 新增字段类型默认值说明multipleSelectKeystring多选按键支持metaCmd、shift、alt。不支持ctrl因为 ctrl 会触发 contextmenutextModeTextModetext全局文本模式nodeTextModeTextModetext节点文本模式edgeTextModeTextModetext边文本模式nodeTextMultiplebooleanfalse是否支持多节点文本edgeTextMultiplebooleanfalse是否支持多边文本nodeTextVerticalbooleanfalse节点文本是否垂直展示edgeTextVerticalbooleanfalse边文本是否垂直展示TextMode枚举定义在 constant/index.ts取值为text与label即元素文本类型可为普通 Text 或启用 Label 能力。四、源码级原理合并、静默模式与联动4.1 computeConfig 的衍生合并updateEditConfig的核心并不只是简单赋值而是经过 computeConfig 的处理它包含几条值得注意的联动规则全局文本开关联动传入textEdit时会同时覆盖nodeTextEdit与edgeTextEdit源码全局文本拖拽联动传入textDraggable时会同时覆盖nodeTextDraggable与edgeTextDraggable源码全局文本模式联动传入textMode时会同时覆盖nodeTextMode与edgeTextMode源码边端点开关联动传入布尔类型的adjustEdgeStartAndEnd时会同时覆盖adjustEdgeStart与adjustEdgeEnd源码。这也解释了为什么getEditConfig()拿到的字段可能比你传入的更丰富——全局开关与细分开关始终被同步为一致状态。4.2 静默模式isSilentMode的暂存与恢复computeConfig中有一套配置暂存机制对应 silentModeConfig当isSilentMode从false变为true时先用pick(this, allKeys)暂存当前全部配置到stagedConfig再套用静默模式配置允许画布缩放/滚动/拖动stopZoomGraph、stopScrollGraph、stopMoveGraph均为false禁止调整边、禁止拖动节点、隐藏锚点、禁止旋转与缩放adjustEdge、adjustNodePosition、hideAnchors、allowRotate、allowResize等禁止一切文本编辑与拖拽。当isSilentMode重新变为false时会从stagedConfig恢复进入静默模式前的全部配置源码。实现上还有一个细节通过config.isSilentMode ! this.isSilentMode阻止了对true的重复赋值避免多次调用导致暂存配置被污染对应 issue #1180 的修复见 源码注释。在实例层面静默模式切换还会联动快捷键状态LogicFlow.tsx 中进入静默模式时调用this.keyboard.disable()退出时调用this.keyboard.enable(true)。4.3 实例层的额外联动除了editConfigModel本身lf.updateEditConfig在 LogicFlow.tsx 中还会做三件额外的事平移范围当传入stopMoveGraph时调用transformModel.updateTranslateLimits(config.stopMoveGraph)同步更新画布平移限制网格对齐当snapGrid发生变化时调用graphModel.updateGridSize在网格尺寸与实际尺寸间切换源码事件广播每次更新后派发editConfig:changed事件EventType.EDIT_CONFIG_CHANGED见 constant/index.ts载荷为editConfigModel.getConfig()的最新完整配置。// 监听编辑配置变化可用于联动外部 UI 状态 lf.on(editConfig:changed, ({ data }) { console.log(编辑配置已更新, data); });4.4 editConfigModel 运行时访问getEditConfig/updateEditConfig只是实例快捷方法运行时也可以通过lf.graphModel.editConfigModel直接访问模型字段含义与IEditConfigType完全一致见 graphModel → editConfigModel。该模型是 GraphModel 上被 mobx 观测的属性配置变更会直接驱动相关交互视图的响应式更新GraphModel.ts 初始化。五、实战组合典型交互场景配置5.1 只读展示浏览者视角lf.updateEditConfig({ isSilentMode: true, });一行即完成只读化节点、边不可移动编辑锚点隐藏快捷键被禁用。退出时传false即可完整恢复。5.2 画布固定 节点可拖动演示者视角lf.updateEditConfig({ stopZoomGraph: true, stopScrollGraph: true, stopMoveGraph: true, hideAnchors: true, adjustEdge: false, adjustEdgeStartAndEnd: false, });保留adjustNodePosition: true观众可以拖动节点梳理流程但不会误缩放、误改连线。5.3 仅允许选中与查看lf.updateEditConfig({ adjustNodePosition: false, adjustEdge: false, textEdit: false, hideAnchors: true, });关闭所有可编辑能力但保留选中 outlinenodeSelectedOutline/edgeSelectedOutline默认即为true适合审批/预览场景。5.4 精细编辑开发者视角lf.updateEditConfig({ adjustEdge: true, adjustEdgeMiddle: true, adjustEdgeStartAndEnd: true, adjustNodePosition: true, textEdit: true, textDraggable: true, allowRotate: true, allowResize: true, multipleSelectKey: shift, snapGrid: true, });注意adjustEdgeStartAndEnd与adjustEdgeMiddle是折线编辑的独立开关配合multipleSelectKey: shift不支持ctrl可实现多选后批量操作。5.5 初始化与运行时配置的对应关系编辑配置既可以在实例创建时通过构造选项设置如isSilentMode、stopZoomGraph、stopMoveGraph、textEdit、allowRotate、allowResize等见 Options.Common 类型定义也可以在运行期用updateEditConfig动态调整。两者最终都会汇聚到同一个EditConfigModel构造时通过new EditConfigModel(options)初始化见 GraphModel.ts因此运行期的更新会无缝叠加在初始化配置之上。// 初始化时即进入只读模式 const lf new LogicFlow({ container: document.querySelector(#container), isSilentMode: true, }); // 运行期局部放开允许查看锚点但仍不可移动 lf.updateEditConfig({ hideAnchors: false });六、与编辑配置相关的源码阅读路线若想深入验证本文所述行为可按以下路径继续阅读实例 API 封装LogicFlow.tsx——updateEditConfig/getEditConfig的完整实现与事件广播配置模型与默认值EditConfigModel.ts——IEditConfigType字段定义、全部默认值、静默模式暂存与computeConfig合并逻辑类型字典MainTypes.en.md——IEditConfigType的文档化字段表格运行时模型graphModel.en.md——editConfigModel的方法与使用说明构造选项options.ts——初始化时可用的编辑相关配置项及默认值如textEdit: true、snapline: true事件枚举constant/index.ts——editConfig:changed事件定义。总结lf.updateEditConfig与lf.getEditConfig是 LogicFlow 控制画布交互能力的统一入口前者支持按字段部分合并并自动处理全局开关的联动、静默模式的暂存恢复、平移/网格/快捷键的同步以及editConfig:changed事件广播后者返回完整配置快照便于排查与状态同步。结合本文的配置表格与实战组合你可以为不同用户角色快速构建差异化的编辑体验。【免费下载链接】LogicFlowA flow chart editing framework focus on business customization. 专注于业务自定义的流程图编辑框架支持实现脑图、ER图、UML、工作流等各种图编辑场景。项目地址: https://gitcode.com/GitHub_Trending/lo/LogicFlow创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考