LogicFlow 主题定制完全指南：从初始化配置到内置/自定义主题模式

LogicFlow 主题定制完全指南从初始化配置到内置/自定义主题模式【免费下载链接】LogicFlowA flow chart editing framework focus on business customization. 专注于业务自定义的流程图编辑框架支持实现脑图、ER图、UML、工作流等各种图编辑场景。项目地址: https://gitcode.com/GitHub_Trending/lo/LogicFlowLogicFlow 是一套专注于业务自定义的流程图编辑框架主题Theme是其统一管理画布视觉表现的核心机制通过一份样式配置即可覆盖节点、边、文本、锚点、箭头、对齐线以及背景和网格等全部元素。本篇指南以官方基础教程中的主题章节为骨架结合核心包的源码实现系统讲解主题配置的类别、三种应用方式、内置主题模式、自定义主题模式注册以及元素样式与背景/网格各自的优先级规则帮助你从会改样式进阶到能设计一套完整可复用的主题体系。主题配置项一张配置覆盖整张画布主题配置按元素类别划分为以下几组实践中可以按需只配置其中任意部分未配置的项会沿用对应主题模式或内置基础样式基础主题baseNode所有节点通用样式、baseEdge所有边通用样式是所有具体节点/边类型的兜底样式入口。节点主题rect、circle、diamond、ellipse、polygon、html等分别对应矩形、圆形、菱形、椭圆、多边形和 HTML 节点的样式。边主题line直线、polyline折线、bezier贝塞尔曲线其中曲线边还可扩展adjustLine与adjustAnchor调整边的控制手柄样式。文本主题text文本节点、nodeText节点文案、edgeText边文案支持color、fontSize、lineHeight、textAnchor、overflowMode、background等字段。其他元素anchor锚点支持r与hover、arrow箭头支持offset、verticalLength、startArrowType、endArrowType等、snapline对齐线、outline选中外框、edgeAdjust连线端点调整手柄等。画布配置background背景颜色或背景图片与grid网格尺寸、类型、颜色等。全部参数类型与取值可进一步查阅主题 API和Theme 类型说明。主题配置的两种基础方式方式一初始化时通过style参数配置创建LogicFlow实例时在配置对象中传入style字段即可设置默认主题同时可搭配themeMode指定基础主题模式const config { container: document.querySelector(#container), width: 1000, height: 800, style: { // 设置默认主题样式 rect: { fill: #FFFFFF, strokeWidth: 2 }, // 矩形样式 circle: { r: 15, fill: #1E90FF }, // 圆形样式 nodeText: { fontSize: 14, color: #333333 }, // 节点文本样式 edgeText: { fontSize: 12, color: #666666 }, // 边文本样式 anchor: { stroke: #999999, fill: #FFFFFF }, // 锚点样式 }, themeMode: radius, // 初始化设置圆角主题 } const lf new LogicFlow(config)在核心包 options.ts 中style的类型被声明为PartialLogicFlow.Theme即主题增量配置themeMode为LogicFlow.ThemeMode两者都位于Options.Common配置接口中。需要说明的是Options.defaults里background与grid的默认值都是false即默认不显示背景与网格主题仅在显式配置后生效。方式二实例创建后通过setTheme动态更新实例创建后随时可以调用setTheme(style, themeMode?)动态更新主题传入的样式会与当前主题做深度合并merge因此只传需要修改的字段即可// 动态配置主题 lf.setTheme({ rect: { fill: #FFFFFF, stroke: #1890FF }, // 矩形样式 circle: { r: 15, fill: #1890FF }, // 圆形样式 nodeText: { fontSize: 14, color: #333333 }, // 节点文本样式 edgeText: { fontSize: 12, color: #666666 }, // 边文本样式 anchor: { r: 4, fill: #FFFFFF, stroke: #1890FF }, // 锚点样式 }, radius)setTheme在 LogicFlow.tsx 上只是转发器真正逻辑在 GraphModel.setTheme它先处理themeMode对应的背景与网格映射再处理style中的background/grid最后调用updateTheme即setupTheme合并出最终主题并同时把自定义样式累计到customStyles供后续再次setTheme时叠加。与之配套的getTheme()方法LogicFlow.tsx返回当前画布完整生效的主题对象返回结果中已附带background与grid。典型的读改写用法是先getTheme()取出当前配置修改其中部分字段后再setTheme()写回。内置主题模式2.0.14 新增从 2.0.14 起LogicFlow 内置了四种主题模式通过themeMode即可快速套用整套预设样式主题模式说明背景色default默认主题浅色#FBFCFEdark暗黑主题#33353Acolorful彩色主题#fefeffradius圆角主题继承 default 背景说明源码常量 theme.ts 中themeModeMap实际注册了default、colorful、dark、retro四个模式retro即复古风格背景为纯白教程示例中的radius是另外注册的圆角风格模式同时LogicFlow.tsx的类型注释也列出了radius | dark | colorful | default。无论使用哪种其机制一致——模式名对应一份预设的Theme对象。应用内置主题模式// 初始化时设置主题模式 const lf new LogicFlow({ // ... 其他配置 themeMode: radius, // 设置圆角主题 }) // 动态切换主题模式 lf.setTheme({}, dark) // 应用暗黑主题 lf.setTheme({}, colorful) // 应用彩色主题 // 应用主题模式并自定义部分样式 lf.setTheme({ rect: { fill: #AECBFA }, circle: { fill: #C9DAF8 } }, radius)从实现上看主题模式的价值在于一键换肤setupTheme在 util/theme.ts 中先cloneDeep(themeModeMap[themeMode])得到模式预设再用 lodash 的merge与用户自定义样式深度合并因此切换themeMode可以整体替换视觉风格而传入的style增量永远叠加在模式之上。此外每个主题模式还配套了背景映射backgroundModeMap与网格映射gridModeMap见 theme.ts 中的darkBackground/darkGrid/colorfulGrid/defaultGrid等常量——这就是切换主题时背景与网格也会联动变化的原因。自定义主题模式2.0.14 新增如果内置主题不够用可以通过addThemeMode注册自己的主题模式。它既可作为实例方法使用也可作为静态方法LogicFlow.addThemeMode在创建实例前全局注册// 注册自定义主题模式 LogicFlow.addThemeMode(customTheme, { baseNode: { fill: #EFF5FF, stroke: #4B83FF }, rect: { radius: 8 }, circle: { r: 25 }, nodeText: { fontSize: 16, color: #4B83FF }, edgeText: { fontSize: 14, background: { fill: #EEF7FE } }, arrow: { offset: 6, verticalLength: 3 }, }) // 应用自定义主题 lf.setTheme({}, customTheme)addThemeMode的实现位于 util/theme.ts注册名会写入themeModeMap同时会把style.background缺省用defaultBackground写入backgroundModeMap、把style.grid缺省用defaultGrid写入gridModeMap。注册后即可通过setTheme({}, customTheme)切换。配套还提供了removeThemeMode(themeMode)删除某个已注册模式静态方法与setTheme系列一样暴露在 LogicFlow.tsx 上clearThemeMode()把内置模式全部重置为空对象。需要留意的是addThemeMode注册时若模式名已存在会console.warn并直接返回避免覆盖内置或其他已注册模式。主题样式优先级理解优先级是避免改了没生效的关键。主题应用分为两类规则。节点、边、文本等元素样式优先级从低到高内置基础样式defaultTheme即 theme.ts 顶部导出的默认对象应用的主题模式样式通过初始化themeMode或setTheme的第二个参数设置的模式预设自定义样式通过构造函数style参数或setTheme的第一个参数传入的增量配置。由于底层使用merge深度合并三级样式是逐层叠加的baseNode提供兜底主题模式覆盖大部分外观用户style再精准微调个别字段。这也解释了为何 theme.ts 中defaultTheme的outline初始stroke为transparent矩形默认不显示调整边框以及anchor.hover等嵌套对象在用户只传fill时仍能保留完整 hover 状态。背景和网格样式优先级背景background与网格grid拥有独立的更新机制分两个阶段初始化阶段优先级从低到高构造函数style参数中的background与grid配置构造函数中直接参数background与grid设置的值覆盖 style 中的配置。这一点在 GraphModel 构造函数 中有对应实现先用themeMode对应的gridModeMap/backgroundModeMap初始化默认值再合并直接传入的grid/background参数最后把结果写回this.theme.grid与this.theme.background。运行时阶段优先级从低到高当前配置初始化后的background与grid配置主题模式配置调用setTheme(style, themeMode)时themeMode对应的背景/网格会覆盖当前配置见backgroundModeMap[themeMode]、gridModeMap[themeMode]的应用自定义配置setTheme(style, themeMode)中style参数里的background与grid会覆盖主题模式配置见 GraphModel.ts 的updateBackgroundOptions/updateGridOptions调用。// 示例背景和网格的优先级应用 // 初始化时直接参数 style 参数 const lf new LogicFlow({ style: { background: { color: #f0f0f0 }, // 优先级较低 grid: { size: 15 } // 优先级较低 }, background: { color: #f5f5f5 }, // 最终生效覆盖 style 中的配置 grid: { size: 20 }, // 最终生效覆盖 style 中的配置 }) // 运行时style 参数 themeMode 参数 当前配置 lf.setTheme({ background: { color: #ffffff }, // 最终生效的背景配置 grid: { size: 10, visible: true }, // 最终生效的网格配置 }, dark) // dark 主题模式的背景和网格配置会被 style 参数覆盖注意背景/网格优先级与元素样式优先级并不完全相同元素样式在初始化阶段只有模式预设 style两层而背景/网格在初始化阶段是style → 直接参数两层、运行时阶段才是当前 → themeMode → style三层。实战用主题体系做一套可切换的换肤方案综合以上机制推荐的生产实践是把主题能力组合起来形成换肤方案全局注册自定义主题模式在创建画布前用LogicFlow.addThemeMode注册公司品牌色主题、暗色主题等多套模式初始化时指定默认模式new LogicFlow({ themeMode: customTheme })运行时一键切换通过lf.setTheme({}, dark)完成暗色/亮色切换并配合backgroundModeMap/gridModeMap的联动自动更新画布背景与网格局部微调切换后如需临时调整如高亮某个矩形可再lf.setTheme({ rect: { fill: #FFE58F } })叠加自定义样式读取现状用lf.getTheme()获取当前完整主题供二次编辑或导出配置。另外要注意实例方法setTheme/getTheme只能作用于当前画布实例而LogicFlow.addThemeMode是类级静态注册多个实例共享同一份模式定义若项目中存在多个画布并需要各自独立的主题建议通过各自实例的setTheme(style)传样式增量而不要互相覆盖全局模式。更完整的类型字段如ArrowTheme中solid/hollow/diamond/circle/none五种箭头、EdgeAnimation的动画参数、节点文本overflowMode、边文本hover等可查阅Theme 类型文档在线可运行的完整示例代码可在 sites/docs/src/tutorial/basic/instance/theme 目录下找到对应组件实现结合本指南的参数说明即可直接套用与改造。【免费下载链接】LogicFlowA flow chart editing framework focus on business customization. 专注于业务自定义的流程图编辑框架支持实现脑图、ER图、UML、工作流等各种图编辑场景。项目地址: https://gitcode.com/GitHub_Trending/lo/LogicFlow创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考