LogicFlow Constructor 配置完全指南从基础选项到插件、快捷键与主题的初始化实战【免费下载链接】LogicFlowA flow chart editing framework focus on business customization. 专注于业务自定义的流程图编辑框架支持实现脑图、ER图、UML、工作流等各种图编辑场景。项目地址: https://gitcode.com/GitHub_Trending/lo/LogicFlowLogicFlow 是一款专注于业务自定义的流程图编辑框架。其构造函数new LogicFlow(options)是每个应用接入画布的起点——所有画布尺寸、网格吸附、交互编辑权限、快捷键、主题与插件行为都在这一个配置对象中声明。本文以官方构造函数 API 文档为主体结合packages/core源码逐项解析每个配置参数的含义、默认值与底层作用并给出可直接运行的完整示例帮助你一次性配置出符合业务需求的图编辑应用。调用构造函数LogicFlow 的初始化非常简单从logicflow/core导入LogicFlow传入一个配置对象并new一个实例即可。import LogicFlow from logicflow/core const options: LogicFlow.Options { // 必填画布挂载的 DOM 容器 container: document.querySelector(#app)!, // ... 其余配置 } const lf new LogicFlow(options)其中container是唯一必填项。在 options.ts 的Options.get()中如果未传入有效容器会直接抛出异常Ensure the container of LogicFlow is specified and valid.从源码看constructor内部会经历如下初始化链路见 LogicFlow.tsxOptions.get(options)将用户配置与默认值合并创建内部容器lfContainer一个position: relative的 div挂载到用户传入的container上创建GraphModel画布数据模型、Tool工具栏、Dnd拖拽、History历史记录、Keyboard键盘等核心模块若snapline ! false初始化对齐线模型SnaplineModel非静默模式下注册默认快捷键与自定义快捷键defaultRegister()注册内置元素最后installPlugins()按需安装插件。需要特别留意的是初始化时会清空container的现有内容container.innerHTML 因此请使用一个空的挂载节点。另外源码注释提醒在 SSR 框架如 Next.js、Nuxt.js中使用时初始化阶段没有实际 DOM建议显式指定width和height。基础选项Basic options选项类型必填默认值说明containerHTMLElement是-画布挂载的 DOM 容器widthnumber否容器宽度画布宽度pxheightnumber否容器高度画布高度pxautoExpandboolean否false节点拖到画布边缘时是否自动扩展画布其中width/height若未指定内部容器会使用100%撑满父容器见initContainer实现LogicFlow.tsx。autoExpand常用于大图场景避免节点被拖出可视区域后无法交互。画布选项Canvas options选项类型必填默认值说明backgroundfalse \| BackgroundConfig否false背景层配置false表示不启用gridnumber / boolean / GridOptions否false网格配置snapGridboolean否false拖动元素时是否吸附到网格partialboolean否false大图场景下是否启用局部渲染animationboolean \| PartialAnimationConfig否-动画总开关与按元素类型开关overlapModeOverlapMode否-元素重叠时的层级策略snaplineboolean否true拖动节点时是否显示对齐线stopScrollGraphboolean否false是否禁用滚轮平移画布stopZoomGraphboolean否false是否禁用缩放stopMoveGraphboolean \| vertical \| horizontal \| [number, number, number, number]否false限制或禁用画布平移grid 与 snapGrid网格与吸附grid接受三种形态数字grid: 20表示网格间距为 20px布尔值grid: false关闭网格grid: true使用默认网格对象完整的GridOptions其字段定义见 MainTypes.en.md字段类型说明sizenumber可选网格单元间距visibleboolean可选网格线是否可见typedot \| mesh可选网格样式点阵或网格线config{ color?: string; thickness?: number }可选线条/点样式config.colorstring可选网格颜色config.thicknessnumber可选线宽或点的大小snapGrid: true会让节点、边在拖动结束时吸附到网格交叉点常用于需要严格对齐的场景如 BPMN 建模。默认网格大小常量DEFAULT_GRID_SIZE 10定义在 theme.ts。此外themeMode内置主题会联动切换默认网格与背景见下文主题一节各主题的gridModeMap也在同一文件中。animation动画开关AnimationConfig类型定义如下见 MainTypes.en.mdexport type AnimationConfig { node: boolean edge: boolean }node是否启用节点动画edge是否启用边动画如流动虚线效果。可以整体传入布尔值也可以传PartialAnimationConfig只打开某一种。边的动画样式通过主题中的edgeAnimation配置默认实现了 20s 循环流动的虚线动画见 theme.ts。stopMoveGraph画布平移的四种限制方式stopMoveGraph的取值比布尔更灵活true完全禁止平移画布vertical禁止垂直方向拖动horizontal禁止水平方向拖动[minX, minY, maxX, maxY]将画布平移限制在指定矩形范围内。该字段同时存在于构造选项与运行时编辑配置IEditConfigType中见 EditConfigModel.ts意味着你可以在实例创建后通过lf.updateEditConfig()动态调整。编辑控制Edit control选项类型必填默认值说明isSilentModeboolean否false只读/展示模式guardsGuardsConfig否-守卫回调beforeClone、beforeDelete等disabledToolsstring[]否-禁用的内置工具adjustEdgeboolean否true是否允许调整边adjustEdgeStartAndEndboolean否false是否允许拖动边端点adjustNodePositionboolean否true是否允许移动节点hideAnchorsboolean否false是否隐藏节点锚点outlineboolean否false节点是否显示外框选中框hoverOutlineboolean否true悬浮时是否显示外框nodeSelectedOutlineboolean否true节点选中时是否显示外框edgeSelectedOutlineboolean否true边选中时是否显示外框nodeTextEditboolean否true是否允许编辑节点文本edgeTextEditboolean否true是否允许编辑边文本textEditboolean否true文本编辑总开关nodeTextDraggableboolean否false是否允许拖动节点文本edgeTextDraggableboolean否false是否允许拖动边文本multipleSelectKeystring否-多选修饰键meta/shift/altidGeneratorfunction否-新建节点/边的自定义 id 生成器customTargetAnchorcustomTargetAnchorType否-连线时的自定义锚点选择规则edgeGeneratorEdgeGeneratorType否-连线时的边类型生成规则customTrajectoryfunction否-自定义锚点连线轨迹渲染isSilentMode演示/只读模式isSilentMode: true是展示型页面的首选节点和边不可移动、不可修改文本、不显示锚点见 options.ts 中的注释。从 LogicFlow.tsx 可以看到静默模式下还会跳过默认快捷键的注册从源头杜绝误操作。guards操作守卫权限控制GuardsConfig类型见 MainTypes.en.mdexport interface GuardsConfig { beforeClone?: (data: NodeData | GraphData) boolean beforeDelete?: (data: NodeData | EdgeData) boolean }beforeClone复制/克隆节点或图之前的拦截函数返回false阻止克隆beforeDelete删除节点或边之前的拦截函数返回false阻止删除。该守卫不仅作用于菜单操作也作用于快捷键。例如默认的复制快捷键cmd/ctrl c在触发时就会先调用guards.beforeClone只有返回true才继续见 shortcut.ts。这为哪些节点可以复制/删除提供了统一的权限入口。idGenerator自定义 id 生成idGenerator?: (type?: string) string当业务系统对 id 有格式要求如需要前缀、需要特定长度或与外部系统 id 对齐时可通过此函数接管新节点/新边的 id 生成。edgeGenerator按节点类型决定连线类型EdgeGeneratorType见 MainTypes.en.md用于在用户拖线建立连接时决定生成的边类型export type EdgeGeneratorType ( sourceNode: LogicFlow.NodeData, targetNode: LogicFlow.NodeData, currentEdge?: PartialLogicFlow.EdgeConfig ) any示例——源节点为rect时使用贝塞尔曲线否则回退到折线edgeGenerator: (sourceNode, targetNode, currentEdge) { if (sourceNode.type rect) return bezier if (currentEdge) return currentEdge.type return polyline },customTargetAnchor自定义目标锚点选择customTargetAnchorType见 MainTypes.en.md在连线松手时决定连接到目标节点的哪个锚点返回undefined则走默认逻辑连接到距离落点最近的锚点customTargetAnchor: (nodeModel) { const anchors nodeModel?.anchors || [] if (!anchors.length) return const left anchors.reduce((min, a) (a.x min.x ? a : min), anchors[0]) return { index: anchors.indexOf(left), anchor: left, } },上面的示例让连线无论落在节点何处都连接到最左侧锚点——适合固定出/入方向的业务约束。键盘Keyboard选项类型必填默认值说明keyboardKeyboardDef否-快捷键配置KeyboardDef结构见 MainTypes.en.md字段类型说明enabledboolean快捷键总开关shortcutsArray{ keys: string \| string[]; callback: Handler; action?: Action }可选自定义快捷键定义shortcuts.keysstring | string[]监听的按键组合shortcuts.callbackHandler触发时的处理函数shortcuts.actionAction可选DOM 键盘事件类型keypress/keydown/keyup当keyboard.enabled true时内置快捷键如下cmd c/ctrl c复制cmd v/ctrl v粘贴cmd z/ctrl z撤销cmd y/ctrl y重做backspace删除底层基于 Mousetrap所有按键绑定在 LogicFlow 容器上不影响页面其他区域。默认快捷键的具体行为定义在 shortcut.ts值得注意的细节复制时若graph.textEditElement存在正在编辑文本快捷键会失效避免与文本输入冲突粘贴会将选中元素整体偏移 40pxTRANSLATION_DISTANCE连续粘贴时不断递增偏移避免元素完全重叠自定义快捷键可以覆盖默认快捷键插件注册的快捷键优先级最高见 LogicFlow.tsx 的注释说明。配置示例keyboard: { enabled: true, shortcuts: [ { keys: ctrl s, callback: () { console.log(save triggered) }, action: keydown, }, ], },主题Theme选项类型必填默认值说明styleTheme否-节点、边、文本、锚点等元素的视觉主题themeModestring否-内置主题预设edgeTypeEdgeType否polyline从 UI 上新建连线时的默认边类型edgeType默认边类型EdgeType line | polyline | bezier | string见 MainTypes.en.mdline直线polyline折线默认bezier贝塞尔曲线string其他自定义类型themeMode内置主题预设文档列出default、dark、colorful、radius四种预设但以当前仓库源码为准themeModeMap实际提供的是以下四套见 theme.tsthemeMode说明default默认浅色主题colorful彩色主题矩形/圆形/椭圆/菱形/多边形各有专属配色dark深色主题适合暗色 UI 的产品retro复古黑白风格主题切换不仅改变元素样式还会联动背景色与网格样式backgroundModeMap、gridModeMap与主题定义在同一文件 theme.ts 中。同时可通过lf.setTheme()/lf.setThemeMode()在运行时切换主题。style细粒度主题定制Theme类型覆盖了全部图形元素的样式槽位详见 Theme.en.md包括节点类baseNode通用、rect、circle、diamond、ellipse、polygon边类baseEdge、line、polyline、bezier含adjustLine/adjustAnchor调节点样式文本类text、nodeText支持overflowModedefault/autoWrap/ellipsis、edgeText、inputText交互类anchor锚点含hover效果、anchorLine、snapline、outline、edgeOutline、rotateControl、resizeControl、edgeAdjust箭头类arrow支持solid/hollow/diamond/circle/none五种箭头类型以及offset、verticalLength、strokeLinecap等参数动画类edgeAnimation流动虚线动画。例如自定义矩形节点与箭头style: { rect: { fill: #72CBFF, stroke: #3ABDF9, radius: 8, }, arrow: { offset: 12, verticalLength: 6, endArrowType: solid, }, },CommonTheme中的任意字段可通过[key: string]: unknown扩展并透传到 SVG DOM 上见 Theme.en.md给自定义图形预留了充分空间。所有style都是部分配置未配置项自动回落到当前themeMode对应的内置主题。插件Plugins选项类型必填默认值说明disabledPluginsstring[]否-初始化时不加载的插件列表pluginsExtensionConstructor[]否-本实例专属插件优先级高于全局插件pluginsOptionsany否-传给插件的选项plugins是实例级插件列表会与全局注册的插件合并后一起安装。从installPlugins的实现看见 LogicFlow.tsxconst extensions [...this.plugins, ...extensionsAddByUse]即个性插件优先于全局插件。安装时以插件的pluginName为标识凡是出现在disabledPlugins中的插件都会被跳过。典型的插件配置示例以官方扩展包为例import LogicFlow from logicflow/core import { Control, DndPanel, Menu } from logicflow/extension const lf new LogicFlow({ container: document.querySelector(#app)!, plugins: [Control, DndPanel, Menu], pluginsOptions: { menu: { nodeMenu: [ { text: 自定义节点菜单, callback(node) { console.log(node.id) }, }, ], }, }, })pluginsOptions以插件名为 key向对应插件透传配置。逻辑流扩展包源码位于 packages/extension其中components目录下即 Control、DndPanel、Menu 等内置扩展的实现。历史记录History选项类型必填默认值说明historyboolean否true是否启用撤销/重做栈history: true时画布上的增删改操作会自动进入撤销/重做栈配合lf.undo()/lf.redo()以及cmd/ctrl z、cmd/ctrl y快捷键使用。对数据敏感或需要做快照管理的场景可以关闭该选项由业务层自行管理历史状态。完整示例一份生产可用的初始化配置将以上所有维度组合起来一份完整的初始化配置大致如下import LogicFlow from logicflow/core import { Control, DndPanel, Menu } from logicflow/extension const options: LogicFlow.Options { // 基础 container: document.querySelector(#app)!, width: 1200, height: 800, autoExpand: true, // 画布 background: { backgroundImage: url(./grid-bg.png), backgroundRepeat: repeat, }, grid: { size: 20, visible: true, type: dot, config: { color: #b7c2d9, thickness: 1 }, }, snapGrid: true, snapline: true, partial: false, animation: { node: false, edge: true }, stopScrollGraph: false, stopZoomGraph: false, stopMoveGraph: false, // 编辑控制 isSilentMode: false, adjustEdge: true, adjustEdgeStartAndEnd: true, adjustNodePosition: true, nodeTextEdit: true, edgeTextEdit: true, multipleSelectKey: shift, guards: { beforeClone: (data) { // 禁止克隆 id 为 root 的节点 if (Array.isArray((data as any).nodes)) { return !(data as any).nodes.some((n) n.id root) } return (data as any).id ! root }, }, edgeGenerator: (sourceNode) sourceNode.type rect ? bezier : polyline, // 键盘 keyboard: { enabled: true, shortcuts: [ { keys: ctrl s, callback: () saveDiagram() }, ], }, // 主题 themeMode: default, edgeType: polyline, style: { rect: { fill: #72CBFF, stroke: #3ABDF9, radius: 8 }, }, // 插件 plugins: [Control, DndPanel, Menu], pluginsOptions: { menu: { edgeMenu: [{ text: 删除, callback: (e) e.del() }] }, }, // 历史 history: true, } const lf new LogicFlow(options) lf.render({ nodes: [ { id: node-1, type: rect, x: 100, y: 100, text: 开始 }, ], edges: [], })运行时动态调整构造函数中的大部分配置并非一次定终身。许多交互相关的选项在运行时仍然可以通过实例方法动态调整lf.updateEditConfig({ ... })动态修改编辑配置isSilentMode、stopZoomGraph、adjustEdge、textEdit等对应的运行时类型IEditConfigType见 MainTypes.en.mdlf.setThemeMode(mode)/lf.setTheme(style)运行时切换主题lf.keyboard.on(...)/lf.keyboard.off(...)动态增删快捷键lf.undo()/lf.redo()程序化触发撤销与重做。小结LogicFlow 构造函数将画布能力收敛为六个维度的配置基础容器与尺寸→ 画布网格、吸附、动画、平移限制→ 编辑控制权限、守卫、连线规则→ 键盘内置自定义快捷键→ 主题预设细粒度样式→ 插件与历史。理解每个参数在 options.ts 中的默认值与合并逻辑Options.get与defaults就能在初始化时一次性把交互边界、数据约束与视觉风格声明清楚把更多的精力留给业务定制。进一步阅读构造函数配置类型定义packages/core/src/options.ts核心类型字典Common、GuardsConfig、EdgeType、GridOptions、KeyboardDef 等sites/docs/docs/api/type/MainTypes.en.md主题类型完整定义sites/docs/docs/api/type/Theme.en.md构造函数初始化流程packages/core/src/LogicFlow.tsx内置快捷键实现packages/core/src/keyboard/shortcut.ts内置主题与网格/背景联动packages/core/src/constant/theme.ts扩展包Control、DndPanel、Menu 等插件实现packages/extension【免费下载链接】LogicFlowA flow chart editing framework focus on business customization. 专注于业务自定义的流程图编辑框架支持实现脑图、ER图、UML、工作流等各种图编辑场景。项目地址: https://gitcode.com/GitHub_Trending/lo/LogicFlow创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考