企业官网建设流程全解析

LogicFlow 静默模式（Silent Mode）完全指南：画布只读化配置原理与实战

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

LogicFlow 的静默模式（Silent Mode）是内置的"画布只读"开关，一条配置即可让整个流程图从"可编辑"切换为"只读展示"：节点与边不可移动、文本不可编辑、锚点全部隐藏。本文以 silent-mode.en.md 为核心，结合packages/core中 EditConfigModel.ts 的源码实现，系统讲解静默模式的配置项、等效配置集合、动态切换方法以及底层工作原理，帮助你按业务需求自由组合出精细化的编辑权限控制。

一、认识编辑配置体系：静默模式的上层架构

在深入静默模式之前，先理解它所在的上层体系——编辑配置（EditConfig）。LogicFlow 提供了非常庞大的配置项来控制流程图如何被编辑，这些配置统一定义在EditConfigModel中，类型为IEditConfigType，全部字段可见于 EditConfigModel.ts。

每个 LogicFlow 实例内部都持有一个editConfigModel（位于 GraphModel.ts），它负责：

• 在初始化时合并用户传入的配置（构造函数new EditConfigModel(options)）；
• 在运行时通过updateEditConfig增量合并新配置（GraphModel.ts）；
• 通过getConfig()输出当前全部配置快照。

配置字段分为四大类：

完整的字段定义与说明，可参考 graphModel → editConfigModel 与 IEditConfigType 类型定义。

二、初始化时配置编辑行为

LogicFlow 支持在初始化时传入大量配置参数，流程图编辑相关的配置同样可以在初始化阶段一次传入：

const lf = new LogicFlow({ stopZoomGraph: true, // 禁止缩放 stopScrollGraph: true, // 禁止鼠标滚动移动画布 });

初始化传入的配置会经EditConfigModel的构造函数与默认值合并（assign(this, this.computeConfig(config))，见 EditConfigModel.ts），此后可以通过实例方法随时修改。

三、运行时动态更新编辑配置

编辑配置是"活"的，不需要重建画布即可随时切换。调用实例方法updateEditConfig传入部分配置即可增量生效：

lf.updateEditConfig({ stopZoomGraph: false, stopScrollGraph: false, })

从源码看，LogicFlow.updateEditConfig（LogicFlow.tsx）在合并配置之外还做了三件联动事情：

1. 若传入stopMoveGraph，同步更新画布的平移范围限制（transformModel.updateTranslateLimits）；
2. 若切换静默模式，同步禁用/启用键盘快捷键；
3. 若snapGrid状态变化，同步调整网格尺寸（开启时恢复网格大小，关闭时回退为 1px）。

配置更新后还会触发EDIT_CONFIG_CHANGED事件，方便外部监听配置变化。与之配套的读取方法为lf.getEditConfig()（LogicFlow.tsx），返回当前完整配置快照；更详细的 API 签名可参考 edit-config.en.md。

四、静默模式：一条配置实现"只读画布"

4.1 什么是静默模式

静默模式（Silent Mode）可以简单理解为画布的**"只读"模式**。开启后：

• 节点和边不能被移动；
• 文本不能修改；
• 节点上不显示锚点。

4.2 一句话开启

const lf = new LogicFlow({ isSilentMode: true, });

就这么简单——一个isSilentMode: true即可让画布进入只读展示状态。

重要提示：静默模式只是 LogicFlow 内置编辑控制的"快捷键"（a shortcut），本质是一组编辑配置的集合。如果内置组合的效果不满足需求，你可以通过修改编辑配置属性来精细调整，而不是必须使用静默模式。

4.3 静默模式到底等价于什么

根据官方文档，isSilentMode: true等价于同时设置如下配置：

const SilentConfig = { stopZoomGraph: false, stopScrollGraph: false, stopMoveGraph: false, adjustEdge: false, adjustEdgeStartAndEnd: false, adjustNodePosition: false, hideAnchors: true, nodeSelectedOutline: true, nodeTextEdit: false, edgeTextEdit: false, nodeTextDraggable: false, edgeTextDraggable: false, }; const lf = new LogicFlow({ ...SilentConfig });

注意两个细节：

1. 静默模式并不禁止缩放与画布拖动——stopZoomGraph、stopScrollGraph、stopMoveGraph均为false，即用户仍可以缩放画布、滚动平移查看，只是不能改动元素。这是"只读查看"而非"完全锁死"的设计。
2. 文本禁用的是"编辑"而非"显示"——nodeTextEdit、edgeTextEdit为false，节点与边的文本内容仍然正常展示，只是不可修改。

4.4 源码中的真实实现：比文档更完整

对照源码 EditConfigModel.ts，silentModeConfig的真实集合比文档示例多出两项，是文档未展示但实际生效的补充配置：

const silentModeConfig = { // SilentMode 下允许用户操作画布 stopZoomGraph: false, stopScrollGraph: false, stopMoveGraph: false, // 节点 & 边相关配置 adjustEdge: false, adjustEdgeStartAndEnd: false, adjustNodePosition: false, hideAnchors: true, allowRotate: false, // ← 源码额外项：禁止节点旋转 allowResize: false, // ← 源码额外项：禁止节点缩放 nodeSelectedOutline: true, // 文本相关配置 textEdit: false, nodeTextEdit: false, edgeTextEdit: false, textDraggable: false, nodeTextDraggable: false, edgeTextDraggable: false, }

可以看到，静默模式在源码中还强制关闭了节点旋转（allowRotate）与节点缩放（allowResize），确保只读状态下连旋转/缩放的调整控制点都不会出现。若要验证或读取当前生效配置，可在开启后调用：

console.log(lf.getEditConfig());

4.5 静默模式下锚点与对齐线行为

• 锚点：hideAnchors: true隐藏所有节点的锚点，因此无法发起新的连线，也无法拖拽已有边的端点。
• 对齐线（snapline）：对齐线本身在编辑模式下默认开启，但由于静默模式下节点不可移动，对齐线也就自然不参与工作。相关说明见 canvas.en.md 的 Snaplines 小节。

五、静默模式的底层原理：暂存与恢复机制

EditConfigModel.computeConfig（EditConfigModel.ts）实现了静默模式的核心逻辑，关键点有两个：

5.1 开启时暂存原配置，关闭时完整恢复

if (isSilentMode === false) { assign(conf, this.stagedConfig) // false 表示从静默模式恢复 } if (isSilentMode === true && isSilentMode !== this.isSilentMode) { this.stagedConfig = pick(this, allKeys) // 暂存开启前的所有配置 assign(conf, silentConfig) // 应用静默配置集合 }

• 开启（isSilentMode === true且当前不是静默态）：先用pick(this, allKeys)把当前所有配置项暂存到stagedConfig，再覆盖为silentModeConfig集合；
• 关闭（isSilentMode === false）：直接把暂存的stagedConfig合并回去，恢复开启前的完整编辑状态。

5.2 防重复开启的边界处理

源码对"重复调用isSilentMode: true"做了防御：只有isSilentMode !== this.isSilentMode时才重新暂存并应用。这是为了避免重复设置导致stagedConfig被错误覆盖为"已经修改过的配置"，从而破坏恢复语义（对应 issue #1180 的修复）。因此放心地在任意时机重复调用开启/关闭，不会产生配置污染。

5.3 静默模式切换时的快捷键联动

LogicFlow.updateEditConfig中还有一行关键联动（LogicFlow.tsx）：

config?.isSilentMode ? this.keyboard.disable() : this.keyboard.enable(true)

切换静默模式的同时会禁用/恢复键盘快捷键（如删除、复制粘贴等），进一步保证只读模式下不会通过快捷键意外改动画布。这也是测试用例所验证的行为之一：logicflow.test.ts中的 "not silent mode" 用例确认了非静默模式下快捷键正常初始化注册（见 logicflow.test.ts）。

六、实战组合：静默模式的精细变体

由于静默模式本质是配置集合，你可以先开启它再覆盖个别项，实现"大部分只读 + 特定可操作"的混合模式。

6.1 只读 + 允许缩放

const lf = new LogicFlow({ isSilentMode: true, }); // 静默模式默认 stopZoomGraph 为 false，本已允许缩放； // 若想在普通模式下也"只读但可缩放"，可等价拆开写： lf.updateEditConfig({ adjustNodePosition: false, adjustEdge: false, hideAnchors: true, nodeTextEdit: false, edgeTextEdit: false, });

6.2 只读 + 允许选中查看

静默模式仍保留nodeSelectedOutline: true，节点被选中时依然显示外框，便于"演示模式"下高亮讲解某个节点。

6.3 全锁死（含禁止缩放/平移）

若需要比静默模式更严格的"完全锁死"画布，可在静默模式基础上追加：

lf.updateEditConfig({ stopZoomGraph: true, // 禁止滚轮缩放 stopScrollGraph: true, // 禁止滚动平移 stopMoveGraph: true, // 禁止拖动画布 });

6.4 运行时动态切换只读 / 可编辑

// 进入只读 lf.updateEditConfig({ isSilentMode: true }); // 退出只读，恢复此前的编辑配置 lf.updateEditConfig({ isSilentMode: false });

由于暂存恢复机制的存在，退出静默模式后画布会精确回到开启前的编辑能力。

七、使用场景与小结

静默模式最典型的应用场景包括：

• 流程预览 / 只读报表：把编排好的流程图以只读形态嵌入详情页，禁止误操作；
• 审批流回显：展示已提交的流程定义，同时允许用户缩放平移查看细节；
• 多角色权限控制：普通用户只读、管理员可编辑——通过isSilentMode动态切换即可实现；
• 演示 / 大屏展示：nodeSelectedOutline: true配合选中高亮，实现可讲解的展示模式。

核心结论回顾：

1. 静默模式 = 一组编辑配置的快捷集合，isSilentMode: true一键开启；
2. 真实实现（源码）比文档示例多禁用allowRotate、allowResize；
3. 静默模式不禁止缩放与画布平移，只锁定元素编辑；
4. 底层通过stagedConfig暂存/恢复机制保证开关可逆，且重复开启不会污染状态；
5. 切换静默模式时键盘快捷键自动禁用/恢复，配合stopZoomGraph等可组合出完全锁死模式。

相关代码入口：EditConfigModel.ts、LogicFlow.tsx、GraphModel.ts；相关文档：edit-config.en.md、graphModel.en.md。

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