LogicFlow更多配置选项

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

1. 准备工作：

1. 初始化项目：

1.1 初始化环境：

使用pnpm create vite创建项目，选择Vue框架及TypeScript变体；

1.2 安装核心模块：

安装核心模块：pnpm add @logicflow/core；

2. 初始化容器及LogicFlow对象：

2.1 准备容器：

准备一个container容器，并通过css初始化容器的尺寸；

<template>
  <div ref="container" class="container"></div>
</template>

<style scoped>
.container {
  width: 500px;
  height: 400px;
}
</style>

2.2 导入模块：

导入LogicFlow和对应的样式依赖模块；

<script setup lang="ts">
import LogicFlow from "@logicflow/core";
import "@logicflow/core/dist/style/index.css";
</script>

2.3 实例化&渲染：

在onMounted后对LogicFlow对象实例化并进行渲染，为了能看到初始容器建议开启grid选项；

<script setup lang="ts">
import { onMounted, ref } from "vue";

const container = ref();
const lf = ref<LogicFlow>();

onMounted(() => {
  lf.value = new LogicFlow({
    container: container.value,
    grid: true,
  })
  lf.value.render();
})
</script>

2.4 预览效果：

启动项目后在浏览器访问即可看到这个500*400的点阵图，这个就是后面绘制节点的区域；

2. 设置主题 Theme：

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

设置主题的常用属性列表（完整的选项列表参见ThemeApi）：

属性名	说明
stroke	属性定义了给定图形元素的外轮廓的颜色
stroke-dasharray	属性可控制用来描边的点划线的图案范式
stroke-width	属性指定了当前对象的轮廓的宽度
fill	属性用来定义给定图形元素内部的颜色
fill-opacity	属性指定了填色的不透明度或当前对象的内容物的不透明度
font-size	属性定义文本字体大小
color	属性定义文本颜色

1. 实例化LF时配置：

<script setup lang="ts">

  const styleConfig = {
    baseNode: {
      fill: "rgb(255, 230, 204)",
      stroke: "green",
      strokeDasharray: "3,3"
    },
    rect: {
      fill: "#FFFFFF",
      strokeDasharray: "10, 1",
      className: "custom-cls",
      radius: 30
    },
    circle: {
      r: 10,
      fill: "#9a9b9c"
    },
    nodeText: {
      fontSize: 20,
      color: "red",
      overflowMode: "autoWrap"
    },
    baseEdge: {
      strokeWidth: 1,
      strokeDasharray: "3,3"
    },
    polyline: {
      offset: 20,
      strokeDasharray: "none",
      strokeWidth: 4
    },
  }

onMounted(() => {
  lf.value = new LogicFlow({
    container: container.value,
    grid: true,
    // 实例化LF时配置主题
    style: styleConfig,
  })

  lf.value.render(graphData);
})
  </script>

2. 实例化LF后配置：

<script setup lang="ts">

const styleConfig = {
  baseNode: {
    fill: "rgb(255, 230, 204)",
    stroke: "green",
    strokeDasharray: "3,3"
  },
  rect: {
    fill: "#FFFFFF",
    strokeDasharray: "10, 1",
    className: "custom-cls",
    radius: 30
  },
  circle: {
    r: 10,
    fill: "#9a9b9c"
  },
  nodeText: {
    fontSize: 20,
    color: "red",
    overflowMode: "autoWrap"
  },
  baseEdge: {
    strokeWidth: 1,
    strokeDasharray: "3,3"
  },
  polyline: {
    offset: 20,
    strokeDasharray: "none",
    strokeWidth: 4
  },
}

onMounted(() => {
  lf.value = new LogicFlow({
    container: container.value,
    grid: true,
  })

  // 实例化LF后配置主题
  lf.value.setTheme(styleConfig);

  lf.value.render(graphData);
})
</script>

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

3. 设置网格 Gird：

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

<script setup lang="ts">

const gridConfig = {
  size: 20,
  visible: true,
  type: 'mesh',
  config: {
    color: '#ababab',
    thickness: 1,
  },
}

onMounted(() => {
  lf.value = new LogicFlow({
    container: container.value,
    grid: gridConfig,
  })

  lf.value.render(graphData);
})
</script>

4. 设置对齐线 Snapline：

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

<script setup lang="ts">

const styleConfig = {
  snapline: {
    stroke: '#1E90FF', // 对齐线颜色
    strokeWidth: 1, // 对齐线宽度
  },
}

onMounted(() => {
  lf.value = new LogicFlow({
    container: container.value,
  })

  lf.value.setTheme(styleConfig);

  lf.value.render(graphData);
})
</script>

5. 设置背景 Background：

在前面的示例中一直是启用了Gird来充当着背景的角色，LF对象在实例化的时候同样可以通过选项来控制背景，默认是关闭的状态，修改的选项是background；

<script setup lang="ts">

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

  lf.value.render(graphData);
})
</script>

// grid.svg
<?xml version="1.0" encoding="UTF-8"?>
<svg width="53px" height="54px" viewBox="0 0 53 54" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>背景网格</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="背景网格" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <rect id="Rectangle-1" fill="#F5F5F5" x="0" y="10" width="53" height="1"></rect>
        <rect id="Rectangle-2" fill="#F5F5F5" x="10" y="0" width="1" height="54"></rect>
        <rect id="Rectangle-3" fill="#F5F5F5" x="21" y="0" width="1" height="54"></rect>
        <rect id="Rectangle-4" fill="#F5F5F5" x="32" y="0" width="1" height="54"></rect>
        <rect id="Rectangle-5" fill="#F5F5F5" x="43" y="0" width="1" height="54"></rect>
        <rect id="Rectangle-6" fill="#E9E9E9" x="0" y="0" width="53" height="1"></rect>
        <rect id="Rectangle-7" fill="#F5F5F5" x="0" y="21" width="53" height="1"></rect>
        <rect id="Rectangle-8" fill="#F5F5F5" x="0" y="32" width="53" height="1"></rect>
        <rect id="Rectangle-9" fill="#F5F5F5" x="0" y="43" width="53" height="1"></rect>
        <rect id="Rectangle-10" fill="#E9E9E9" x="0" y="0" width="1" height="54"></rect>
    </g>
</svg>

6. 设置键盘快捷键 Keyboard：

快捷键在流程图产品中也是比不可少的一块功能，可以大大方便使用者的体验，在LF中默认关闭了快捷键的使用，可以在实例化LF时通过启用enabled选项来支持；LF除内置的快捷键外也支持自定义来扩展快捷键的使用；

1. 内置快捷键：
   | 快捷键 | 功能 |
   | — | — |
   | cmd + c 或 ctrl + c | 复制节点 |
   | cmd + v 或 ctrl + v | 粘贴节点 |
   | cmd + z 或 ctrl + z | 撤销操作 |
   | cmd + y 或 ctrl + y | 回退操作 |
   | backspace | 删除操作 |

2. 启用快捷键：

<script setup lang="ts">

onMounted(() => {
  lf.value = new LogicFlow({
    container: container.value,
    keyboard: {
      enabled: true
    },
  })

  lf.value.render(graphData);
})
</script>

3. 自定义快捷键：

快捷键keys的定义规则同mousetrap；下面使用官网的示例来演示自义定删除节点的快捷键触发时增加二次确认的提醒；

<script setup lang="ts">

onMounted(() => {
  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 || ''));
            }
          }
        }
      ]
    },
  })

  lf.value.render(graphData);
})
</script>

7. 设置图编辑方式：

LF提供了更多方便控制图编辑方式的选项，同样是可以在实例化LF时通过选项初始化，也支持实例化LF后通过lf.updateEditConfig函数进行调整；

图编辑模式支持的选项列举（完整的选项列表详见editConfigModelApi）：

属性名	默认值	说明
isSilentMode	false	是否为静默模式
stopZoomGraph	false	禁止缩放画布
stopScrollGraph	false	禁止鼠标滚动移动画布
stopMoveGraph	false	禁止拖动画布

1. 如下启用了只读的静默模式、禁止缩放、禁止鼠标滚动移动画布、禁止拖动画布：

<script setup lang="ts">

onMounted(() => {
  lf.value = new LogicFlow({
    container: container.value,
    isSilentMode: true, // 静默模式
    stopZoomGraph: true, // 禁止缩放
    stopScrollGraph: true, // 禁止鼠标滚动移动画布
    stopMoveGraph: true, // 禁止拖动画布
  })

  lf.value.render(graphData);
})
</script>

2. 通过lf.updateEditConfig更灵活的调整：

<script setup lang="ts">

onMounted(() => {
  lf.value.updateEditConfig({
    isSilentMode: false
  });
})
</script>

---

如果看完觉得有收获，欢迎点赞、评论、分享支持一下。你的支持和肯定，是我坚持写作的动力~