LogicFlow 文本编辑 API 详解editText 与 updateText 的机制、用法与源码剖析【免费下载链接】LogicFlowA flow chart editing framework focus on business customization. 专注于业务自定义的流程图编辑框架支持实现脑图、ER图、UML、工作流等各种图编辑场景。项目地址: https://gitcode.com/GitHub_Trending/lo/LogicFlow导读在 LogicFlow 流程图编辑框架中节点与连线的文本如节点名称、连线标签既可以由用户直接在画布上编辑也可以通过实例方法以编程方式控制。本文基于 LogicFlow 官方 API 文档与核心源码系统讲解文本编辑的两个核心实例方法editText与updateText先给出可直接套用的签名、参数与示例再深入packages/core源码剖析其状态机切换、文本提交链路与相关事件帮助你精确控制文本编辑的进入与内容更新规避文本不可编辑时编辑框无法退出等典型陷阱。方法总览LogicFlow 实例LogicFlow类实例通常命名为lf提供两个与节点/边文本编辑直接相关的方法方法签名作用editTexteditText(id: string): void显示节点、连线文本编辑框进入编辑状态updateTextupdateText(id: string, value: string): void更新节点或边的文本内容两个方法均通过实例直接调用适用于任何已渲染进画布的节点或边元素。下面逐一展开。editText进入文本编辑状态签名与参数editText(id: string): void名称类型必传说明idstring是节点或边 ID。示例lf.editText(node_1); lf.editText(edge_1);调用后对应元素会显示文本编辑框并自动聚焦光标定位到文本末尾用户可直接输入内容。注意事项文本不可编辑时的状态清理官方文档明确强调当初始化lf实例时设置了文本不可编辑text.editable: false或全局关闭文本编辑LogicFlow 内部不会自动监听并取消元素编辑状态。此时需要自行监听相关事件并通过setElementState方法手动取消文本编辑状态。例如import { ElementState } from logicflow/core; lf.eventCenter.on(text:update, ({ data }) { // 自行判断是否允许编辑不允许时强制退出编辑态 const model lf.getNodeModelById(data.id) || lf.getEdgeModelById(data.id); model?.setElementState(ElementState.DEFAULT); });setElementState是元素 ModelBaseModel上的公开方法类型声明见 BaseModel.ts其签名含义为设置 Node | Edge 等 model 的状态ElementState.DEFAULT表示默认显示态。关于状态枚举的详细说明见下文源码原理剖析。updateText更新文本内容签名与参数updateText(id: string, value: string): void名称类型必传说明idstring是节点或边 ID。valuestring是更新后的文本值。示例lf.updateText(node_1, 审批通过); lf.updateText(edge_1, 是);与editText不同updateText不会进入编辑状态而是直接替换元素的文本内容并触发视图重绘适合在代码中同步数据、回显结果等场景。源码原理剖析editText与updateText在实例层只是薄封装真正的工作发生在GraphModel与元素 Model 层。理解这条调用链有助于你预判 API 行为。1. 实例层的薄封装在 LogicFlow.tsx 中两个方法直接委托给graphModeleditText(id: string): void { this.graphModel.editText(id) } updateText(id: string, value: string) { this.graphModel.updateText(id, value) }2. editText 的状态机本质ElementState.TEXT_EDITeditText的核心并非弹出一个输入框而是将元素状态切换为ElementState.TEXT_EDIT视图层据此渲染TextEditTool编辑框。调用链如下GraphModel.tsaction editText(id: string) { this.setElementStateById(id, ElementState.TEXT_EDIT) }状态枚举定义在 constant/index.tsexport enum ElementState { DEFAULT 1, // 默认显示 TEXT_EDIT, // 此元素正在进行文本编辑 SHOW_MENU, // 显示菜单废弃请使用菜单插件 ALLOW_CONNECT, // 此元素允许作为当前边的目标节点 NOT_ALLOW_CONNECT, // 此元素不允许作为当前边的目标节点 }setElementStateById在 GraphModel.ts 中实现其关键语义是互斥性遍历全部节点与边只把目标id对应的元素设置为指定状态其余元素一律重置为ElementState.DEFAULT从而保证整个画布同一时刻至多只有一个元素处于文本编辑状态action setElementStateById(id, state, additionStateData?) { this.nodes.forEach((node) { if (node.id id) { node.setElementState(state, additionStateData) } else { node.setElementState(ElementState.DEFAULT) } }) this.edges.forEach((edge) { if (edge.id id) { edge.setElementState(state, additionStateData) } else { edge.setElementState(ElementState.DEFAULT) } }) }当前正在编辑的元素由GraphModel的计算属性textEditElement暴露见 GraphModel.ts其实现是低频遍历节点与边查找state ElementState.TEXT_EDIT的元素。3. TextEditTool编辑框的渲染与提交链路当存在textEditElement时视图层渲染 TextEditTool.tsxtoolName text-edit-tool。该组件是一个contentEditable的 divclass 为lf-text-input其行为决定了文本编辑的交互细节自动聚焦与光标定位componentDidUpdate中对编辑框调用focus()并placeCaretAtEnd把光标放到文本末尾见 TextEditTool.tsx自动换行适配getDerivedStateFromProps根据主题theme.nodeText/theme.edgeText的overflowMode autoWrap与textWidth动态设置编辑框宽度、行高与内边距实现节点/边文案的自动换行编辑见 TextEditTool.tsx提交快捷键按下Alt Enter表示输入完成调用textEditElement.setElementState(ElementState.DEFAULT)退出编辑态见 TextEditTool.tsx内容暂存与事件onInput时把最新文本暂存到__prevText并会去掉文本末尾多余的换行符value.replace(/(\r\n)$|(\n)$/, )修复 issue #488见 TextEditTool.tsx在组件更新即编辑状态切换时若存在暂存文本则调用graphModel.updateText(id, text)提交并向事件中心派发EventType.TEXT_UPDATE见 TextEditTool.tsx。4. updateText 的查找与写入updateText在 GraphModel.ts 中的实现是在nodes与edges合并列表中按id查找元素命中后调用元素的updateTextaction updateText(id: string, value: string) { const element find( [...this.nodes, ...this.edges], (item) item.id id, ) element?.updateText(value) }元素层的updateText在节点与边上行为一致——保留原文本的位置、可编辑、可拖拽等配置仅替换value。节点实现见 BaseNodeModel.ts边实现见 BaseEdgeModel.tsaction updateText(value: string): void { this.text { ...toJS(this.text), value, } }注意若传入的id既不是节点也不是边调用会被静默忽略element为undefined不会抛错。5. 文本配置 TextConfigupdateText更新的是元素text字段中的value。text的完整结构为TextConfig定义于 LogicFlow.tsxexport type TextConfig { value: string x: number y: number editable?: boolean draggable?: boolean }value文本内容x/y文本在画布坐标系中的位置editable是否允许编辑为false时即对应前文注意中提到的不可编辑场景draggable文本是否可拖拽移动。从源码结构可以推断由于updateText基于toJS展开后再覆写value调用它不会破坏元素文本原有的坐标与可编辑/可拖拽属性适合在保持布局的前提下安全更新文案。相关事件监听文本编辑生命周期文本编辑过程中LogicFlow 会通过实例的eventCenter派发事件事件名定义在 constant/index.ts可用lf.on(text:update, callback)监听事件说明text:update文本更新用户提交编辑或调用updateText时触发data含id、text、typetext:focus文本获得焦点text:add新增文本text:clear文本清空示例——监听文本更新并联动业务数据lf.on(text:update, ({ data }) { console.log(文本更新, data.id, data.text); });这一事件也是前文文本不可编辑时清理编辑状态建议中自行监听的首选挂载点。常见应用场景与建议通过代码进入编辑态表单校验失败、流程补全等场景需要聚焦到特定元素的文本时可先调用lf.editText(id)配合text:update事件完成后续业务处理通过代码同步文本加载远端数据、撤销重做、批量改名等场景直接调用lf.updateText(id, value)无需用户介入处理不可编辑元素当全局或元素级配置了editable: false时若仍调用了editText请务必按官方提示自行监听事件并调用setElementState(ElementState.DEFAULT)清理状态避免编辑框残留文本内容与位置分离updateText只改内容不改位置若需要移动文本位置请通过TextConfig中的x/y或元素的moveText方法见 BaseNodeModel.ts 与 BaseEdgeModel.ts操作。小结editText与updateText分别对应文本编辑的进入编辑态与直接更新内容两条路径前者以ElementState.TEXT_EDIT状态机驱动视图渲染TextEditTool全程由用户交互完成提交后者则通过元素 Model 的updateText原子地替换value。掌握其底层调用链LogicFlow → GraphModel → BaseNodeModel/BaseEdgeModel与text:update事件即可在业务中精确、安全地控制文本编辑行为。本文基于当前仓库源码packages/core与 官方文本编辑 API 文档 编写文中涉及的实现细节均可通过 LogicFlow.tsx、GraphModel.ts、TextEditTool.tsx 等文件进一步查阅验证。【免费下载链接】LogicFlowA flow chart editing framework focus on business customization. 专注于业务自定义的流程图编辑框架支持实现脑图、ER图、UML、工作流等各种图编辑场景。项目地址: https://gitcode.com/GitHub_Trending/lo/LogicFlow创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
LogicFlow 文本编辑 API 详解：editText 与 updateText 的机制、用法与源码剖析
LogicFlow 文本编辑 API 详解editText 与 updateText 的机制、用法与源码剖析【免费下载链接】LogicFlowA flow chart editing framework focus on business customization. 专注于业务自定义的流程图编辑框架支持实现脑图、ER图、UML、工作流等各种图编辑场景。项目地址: https://gitcode.com/GitHub_Trending/lo/LogicFlow导读在 LogicFlow 流程图编辑框架中节点与连线的文本如节点名称、连线标签既可以由用户直接在画布上编辑也可以通过实例方法以编程方式控制。本文基于 LogicFlow 官方 API 文档与核心源码系统讲解文本编辑的两个核心实例方法editText与updateText先给出可直接套用的签名、参数与示例再深入packages/core源码剖析其状态机切换、文本提交链路与相关事件帮助你精确控制文本编辑的进入与内容更新规避文本不可编辑时编辑框无法退出等典型陷阱。方法总览LogicFlow 实例LogicFlow类实例通常命名为lf提供两个与节点/边文本编辑直接相关的方法方法签名作用editTexteditText(id: string): void显示节点、连线文本编辑框进入编辑状态updateTextupdateText(id: string, value: string): void更新节点或边的文本内容两个方法均通过实例直接调用适用于任何已渲染进画布的节点或边元素。下面逐一展开。editText进入文本编辑状态签名与参数editText(id: string): void名称类型必传说明idstring是节点或边 ID。示例lf.editText(node_1); lf.editText(edge_1);调用后对应元素会显示文本编辑框并自动聚焦光标定位到文本末尾用户可直接输入内容。注意事项文本不可编辑时的状态清理官方文档明确强调当初始化lf实例时设置了文本不可编辑text.editable: false或全局关闭文本编辑LogicFlow 内部不会自动监听并取消元素编辑状态。此时需要自行监听相关事件并通过setElementState方法手动取消文本编辑状态。例如import { ElementState } from logicflow/core; lf.eventCenter.on(text:update, ({ data }) { // 自行判断是否允许编辑不允许时强制退出编辑态 const model lf.getNodeModelById(data.id) || lf.getEdgeModelById(data.id); model?.setElementState(ElementState.DEFAULT); });setElementState是元素 ModelBaseModel上的公开方法类型声明见 BaseModel.ts其签名含义为设置 Node | Edge 等 model 的状态ElementState.DEFAULT表示默认显示态。关于状态枚举的详细说明见下文源码原理剖析。updateText更新文本内容签名与参数updateText(id: string, value: string): void名称类型必传说明idstring是节点或边 ID。valuestring是更新后的文本值。示例lf.updateText(node_1, 审批通过); lf.updateText(edge_1, 是);与editText不同updateText不会进入编辑状态而是直接替换元素的文本内容并触发视图重绘适合在代码中同步数据、回显结果等场景。源码原理剖析editText与updateText在实例层只是薄封装真正的工作发生在GraphModel与元素 Model 层。理解这条调用链有助于你预判 API 行为。1. 实例层的薄封装在 LogicFlow.tsx 中两个方法直接委托给graphModeleditText(id: string): void { this.graphModel.editText(id) } updateText(id: string, value: string) { this.graphModel.updateText(id, value) }2. editText 的状态机本质ElementState.TEXT_EDITeditText的核心并非弹出一个输入框而是将元素状态切换为ElementState.TEXT_EDIT视图层据此渲染TextEditTool编辑框。调用链如下GraphModel.tsaction editText(id: string) { this.setElementStateById(id, ElementState.TEXT_EDIT) }状态枚举定义在 constant/index.tsexport enum ElementState { DEFAULT 1, // 默认显示 TEXT_EDIT, // 此元素正在进行文本编辑 SHOW_MENU, // 显示菜单废弃请使用菜单插件 ALLOW_CONNECT, // 此元素允许作为当前边的目标节点 NOT_ALLOW_CONNECT, // 此元素不允许作为当前边的目标节点 }setElementStateById在 GraphModel.ts 中实现其关键语义是互斥性遍历全部节点与边只把目标id对应的元素设置为指定状态其余元素一律重置为ElementState.DEFAULT从而保证整个画布同一时刻至多只有一个元素处于文本编辑状态action setElementStateById(id, state, additionStateData?) { this.nodes.forEach((node) { if (node.id id) { node.setElementState(state, additionStateData) } else { node.setElementState(ElementState.DEFAULT) } }) this.edges.forEach((edge) { if (edge.id id) { edge.setElementState(state, additionStateData) } else { edge.setElementState(ElementState.DEFAULT) } }) }当前正在编辑的元素由GraphModel的计算属性textEditElement暴露见 GraphModel.ts其实现是低频遍历节点与边查找state ElementState.TEXT_EDIT的元素。3. TextEditTool编辑框的渲染与提交链路当存在textEditElement时视图层渲染 TextEditTool.tsxtoolName text-edit-tool。该组件是一个contentEditable的 divclass 为lf-text-input其行为决定了文本编辑的交互细节自动聚焦与光标定位componentDidUpdate中对编辑框调用focus()并placeCaretAtEnd把光标放到文本末尾见 TextEditTool.tsx自动换行适配getDerivedStateFromProps根据主题theme.nodeText/theme.edgeText的overflowMode autoWrap与textWidth动态设置编辑框宽度、行高与内边距实现节点/边文案的自动换行编辑见 TextEditTool.tsx提交快捷键按下Alt Enter表示输入完成调用textEditElement.setElementState(ElementState.DEFAULT)退出编辑态见 TextEditTool.tsx内容暂存与事件onInput时把最新文本暂存到__prevText并会去掉文本末尾多余的换行符value.replace(/(\r\n)$|(\n)$/, )修复 issue #488见 TextEditTool.tsx在组件更新即编辑状态切换时若存在暂存文本则调用graphModel.updateText(id, text)提交并向事件中心派发EventType.TEXT_UPDATE见 TextEditTool.tsx。4. updateText 的查找与写入updateText在 GraphModel.ts 中的实现是在nodes与edges合并列表中按id查找元素命中后调用元素的updateTextaction updateText(id: string, value: string) { const element find( [...this.nodes, ...this.edges], (item) item.id id, ) element?.updateText(value) }元素层的updateText在节点与边上行为一致——保留原文本的位置、可编辑、可拖拽等配置仅替换value。节点实现见 BaseNodeModel.ts边实现见 BaseEdgeModel.tsaction updateText(value: string): void { this.text { ...toJS(this.text), value, } }注意若传入的id既不是节点也不是边调用会被静默忽略element为undefined不会抛错。5. 文本配置 TextConfigupdateText更新的是元素text字段中的value。text的完整结构为TextConfig定义于 LogicFlow.tsxexport type TextConfig { value: string x: number y: number editable?: boolean draggable?: boolean }value文本内容x/y文本在画布坐标系中的位置editable是否允许编辑为false时即对应前文注意中提到的不可编辑场景draggable文本是否可拖拽移动。从源码结构可以推断由于updateText基于toJS展开后再覆写value调用它不会破坏元素文本原有的坐标与可编辑/可拖拽属性适合在保持布局的前提下安全更新文案。相关事件监听文本编辑生命周期文本编辑过程中LogicFlow 会通过实例的eventCenter派发事件事件名定义在 constant/index.ts可用lf.on(text:update, callback)监听事件说明text:update文本更新用户提交编辑或调用updateText时触发data含id、text、typetext:focus文本获得焦点text:add新增文本text:clear文本清空示例——监听文本更新并联动业务数据lf.on(text:update, ({ data }) { console.log(文本更新, data.id, data.text); });这一事件也是前文文本不可编辑时清理编辑状态建议中自行监听的首选挂载点。常见应用场景与建议通过代码进入编辑态表单校验失败、流程补全等场景需要聚焦到特定元素的文本时可先调用lf.editText(id)配合text:update事件完成后续业务处理通过代码同步文本加载远端数据、撤销重做、批量改名等场景直接调用lf.updateText(id, value)无需用户介入处理不可编辑元素当全局或元素级配置了editable: false时若仍调用了editText请务必按官方提示自行监听事件并调用setElementState(ElementState.DEFAULT)清理状态避免编辑框残留文本内容与位置分离updateText只改内容不改位置若需要移动文本位置请通过TextConfig中的x/y或元素的moveText方法见 BaseNodeModel.ts 与 BaseEdgeModel.ts操作。小结editText与updateText分别对应文本编辑的进入编辑态与直接更新内容两条路径前者以ElementState.TEXT_EDIT状态机驱动视图渲染TextEditTool全程由用户交互完成提交后者则通过元素 Model 的updateText原子地替换value。掌握其底层调用链LogicFlow → GraphModel → BaseNodeModel/BaseEdgeModel与text:update事件即可在业务中精确、安全地控制文本编辑行为。本文基于当前仓库源码packages/core与 官方文本编辑 API 文档 编写文中涉及的实现细节均可通过 LogicFlow.tsx、GraphModel.ts、TextEditTool.tsx 等文件进一步查阅验证。【免费下载链接】LogicFlowA flow chart editing framework focus on business customization. 专注于业务自定义的流程图编辑框架支持实现脑图、ER图、UML、工作流等各种图编辑场景。项目地址: https://gitcode.com/GitHub_Trending/lo/LogicFlow创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考