Hi~ 大家好，我是小鑫同学，一位长期从事前端开发的编程爱好者，我将应用更为实用的案例输入更多的编程常识，同时我崇奉分享是成长的惟一捷径，在这里也心愿我的每一篇文章都能成为你技术落地的参考~

技术&代码分享

  • 我在 IT200 总结技术学习；
  • 我在 1024Code 在线编写代码；
  • 我在 掘金 分享技术文章；
  • 我在 Github 参加开源学习；

举荐几个好用的工具

  • var-conv 实用于VSCode IDE的代码变量名称疾速转换工具
  • generator-vite-plugin 疾速生成Vite插件模板我的项目
  • generator-babel-plugin 疾速生成Babel插件模板我的项目

进入正题

LogicFlow 是一款流程图编辑框架，提供了一系列流程图交互、编辑所必须的性能和灵便的节点自定义、插件等拓展机制。LogicFlow反对前端研发自定义开发各种逻辑编排场景，如流程图、ER图、BPMN流程等。在工作审批配置、机器人逻辑编排、无代码平台流程配置都有较好的利用。

这一节将解说疾速上手 LogicFlow 流程图编辑框架的更多配置选项，我的项目整体基于Vue3+Vite3+Ts4开发，为帮忙还为纯熟应用 Vue3 和 Typescript 语法的小伙伴提供便当，如果你曾经很纯熟在Vue3中的开发习惯，倡议间接拜访 LogicFlow 将获取残缺的入门指南。

1. 设置主题 Theme：

LF设置主题时提供了两种形式的实现，别离是在实例化LF对象时通过 style 选项进行配置，另一种形式是在实例化LF对象后应用内置的 lf.setTheme({}) 函数进行配置

设置主题的罕用属性列表（残缺的选项列表参见ThemeApi）：

属性名阐明
stroke属性定义了给定图形元素的外轮廓的色彩
stroke-dasharray属性可管制用来描边的点划线的图案范式
stroke-width属性指定了以后对象的轮廓的宽度
fill属性用来定义给定图形元素外部的色彩
fill-opacity属性指定了填色的不透明度或以后对象的内容物的不透明度
font-size属性定义文本字体大小
color属性定义文本色彩
  • 实例化LF时配置：
const styleConfig = {} // 主题配置项lf.value = new LogicFlow({  container: container.value,  grid: true,  // 实例化LF时配置主题  style: styleConfig,})
  • 实例化LF后配置：
const styleConfig = {} // 主题配置项lf.value.setTheme(styleConfig);

PS：节点的 width、height、r 等相似属性对立归类为形态属性，因其会对锚点地位、连线计算产生影响，顾不能通过主题进行设置，仅反对在自定义时调整。

2. 设置网格 Gird：

网格在LF中次要起到的作用是对节点的中心点和挪动时的定位，默认网格选项敞开，中心点和挪动的最小单位为1px，当开启网格选项后，渲染的中心点和挪动时的最小单位将调整为20px。在自定义节点的宽高时为了更好的与网格对齐，倡议设置为网格最小单位的整数倍。

const gridConfig = {  size: 20,  visible: true,  type: 'mesh',  config: {    color: '#ababab',    thickness: 1,  },}lf.value = new LogicFlow({  container: container.value,  grid: gridConfig,})

3. 设置对齐线 Snapline：

网格解决了一个节点的中心点和挪动时的定位对齐问题，那么多个节点的地位调整就须要用到对齐线辅助进行了，该snapline选项默认开启，对齐线的款式能够通过设置主题中的选项来自定义；

const styleConfig = {  snapline: {    stroke: '#1E90FF', // 对齐线色彩    strokeWidth: 1, // 对齐线宽度  },}lf.value.setTheme(styleConfig);

4. 设置背景 Background：

在后面的示例中始终是启用了Gird来充当着背景的角色，LF对象在实例化的时候同样能够通过选项来管制背景，默认是敞开的状态，批改的选项是background；

lf.value = new LogicFlow({  container: container.value,  // grid: true, // 敞开网格  background: {    backgroundImage: "url(../grid.svg)",    backgroundRepeat: "repeat"  }})

5. 设置键盘快捷键 Keyboard：

快捷键在流程图产品中也是比不可少的一块性能，能够大大不便使用者的体验，在LF中默认敞开了快捷键的应用，能够在实例化LF时通过启用enabled选项来反对；LF除内置的快捷键外也反对自定义来扩大快捷键的应用；

  • 内置快捷键
快捷键性能
cmd + c 或 ctrl + c复制节点
cmd + v 或 ctrl + v粘贴节点
cmd + z 或 ctrl + z撤销操作
cmd + y 或 ctrl + y回退操作
backspace删除操作
  • 启用快捷键
lf.value = new LogicFlow({  container: container.value,  keyboard: {    enabled: true  },})
  • 自定义快捷键：快捷键keys的定义规定同mousetrap；上面应用官网的示例来演示自义定删除节点的快捷键触发时减少二次确认的揭示；
lf.value = new LogicFlow({  container: container.value,  keyboard: {    enabled: true,    shortcuts: [      {        keys: ["backspace"],        callback: () => {          const r = window.confirm("确定要删除吗？");          if (r) {            const elements = lf.value!.getSelectElements(true);            lf.value?.clearSelectElements();            elements.edges.forEach((edge: EdgeConfig) => lf.value!.deleteEdge(edge.id || ''));            elements.nodes.forEach((node: NodeConfig) => lf.value!.deleteNode(node.id || ''));          }        }      }    ]  },})

6. 设置图编辑形式：

LF提供了更多不便管制图编辑形式的选项，同样是能够在实例化LF时通过选项初始化，也反对实例化LF后通过lf.updateEditConfig函数进行调整；

图编辑模式反对的选项列举（残缺的选项列表详见editConfigModelApi）：

属性名默认值阐明
isSilentModefalse是否为静默模式
stopZoomGraphfalse禁止缩放画布
stopScrollGraphfalse禁止鼠标滚动挪动画布
stopMoveGraphfalse禁止拖动画布
  • 如下启用了只读的静默模式、禁止缩放、禁止鼠标滚动挪动画布、禁止拖动画布：
lf.value = new LogicFlow({  container: container.value,  isSilentMode: true, // 静默模式  stopZoomGraph: true, // 禁止缩放  stopScrollGraph: true, // 禁止鼠标滚动挪动画布  stopMoveGraph: true, // 禁止拖动画布})
  • 通过lf.updateEditConfig更灵便的调整：
lf.value.updateEditConfig({    isSilentMode: false});

总结

这一节的内容就到此结束了，当初对主题、网格、对齐线、背景、快捷键和图编辑形式都理解了吗？这些选项并非是必须的，然而在须要的时候要晓得怎么配置，下一节开始要着手筹备插件局部的学习了，加油~

如果看完感觉有播种，欢送点赞、评论、分享反对一下。你的反对和必定，是我保持写作的能源~

本文转自 https://juejin.cn/post/7187535095392600121，如有侵权，请分割删除。