首页 > 其他分享 >记录一下LogicFlow流程图在vue3中的简单使用，配置左侧菜单工具栏和右键菜单

记录一下LogicFlow流程图在vue3中的简单使用，配置左侧菜单工具栏和右键菜单

时间：2024-05-31 18:32:49浏览次数：22  
标签：lf 菜单 工具栏 text data 画布 右键 type id

 

最终的效果

配置画布

首先通过npm安装LogicFlow

npm install @logicflow/core --save

在vue页面引用LogicFlow和css

import LogicFlow from "@logicflow/core";
import "@logicflow/core/dist/style/index.css";

 创建div容器并添加ref

<div id="container" ref="container"></div>

分别定义container、lf、data

//ref获取div容器
const container = ref();
//用来渲染画布
const lf = ref();
//定义好需要渲染的JSON数据
const data = {
  // 节点
  nodes: [
    {
      id: 1,
      type: "rect",
      x: 100,
      y: 250,
      text: "开始",
    },
    {
      id: 2,
      type: "circle",
      x: 300,
      y: 150,
      text: "进行中",
    },
    {
      id: 3,
      type: "circle",
      x: 300,
      y: 350,
      text: "失败了",
    },
    {
      id: 4,
      type: "circle",
      x: 500,
      y: 250,
      text: "结束",
    },
  ],
  // 边
  edges: [
    {
      type: "polyline",
      sourceNodeId: 1,
      targetNodeId: 2,
    },
    {
      type: "polyline",
      sourceNodeId: 1,
      targetNodeId: 3,
    },
    {
      type: "polyline",
      sourceNodeId: 2,
      targetNodeId: 4,
    },
  ],
};

在onMounted中创建实例并渲染画布

onMounted(() => {
  lf.value = new LogicFlow({
    container: container.value,
    stopScrollGraph: true, //禁止鼠标滚动移动画布
    stopZoomGraph: true, //禁止缩放画布
    width: 1200, //默认100%
    height: 800, //默认100%
    //画布的网格配置
    // grid:false, //禁止画布网格
    grid: {
      type: "dot", //mesh方格
      size: 20, //间距
    },
  });
  //渲染画布
  lf.value.render(data);
});

下面是网页渲染出的效果

 

 完整代码

 1 <template>
 2   <div id="container" ref="container"></div>
 3 </template>
 4 <script lang="ts" setup>
 5 import { ref, onMounted } from "vue";
 6 import LogicFlow from "@logicflow/core";
 7 import "@logicflow/core/dist/style/index.css";
 8 
 9 //ref获取div容器
10 const container = ref();
11 //用来渲染画布
12 const lf = ref();
13 //定义好需要渲染的JSON数据
14 const data = {
15   // 节点
16   nodes: [
17     {
18       id: 1,
19       type: "rect",
20       x: 100,
21       y: 250,
22       text: "开始",
23     },
24     {
25       id: 2,
26       type: "circle",
27       x: 300,
28       y: 150,
29       text: "进行中",
30     },
31     {
32       id: 3,
33       type: "circle",
34       x: 300,
35       y: 350,
36       text: "失败了",
37     },
38     {
39       id: 4,
40       type: "circle",
41       x: 500,
42       y: 250,
43       text: "结束",
44     },
45   ],
46   // 边
47   edges: [
48     {
49       type: "polyline",
50       sourceNodeId: 1,
51       targetNodeId: 2,
52     },
53     {
54       type: "polyline",
55       sourceNodeId: 1,
56       targetNodeId: 3,
57     },
58     {
59       type: "polyline",
60       sourceNodeId: 2,
61       targetNodeId: 4,
62     },
63   ],
64 };
65 
66 onMounted(() => {
67   lf.value = new LogicFlow({
68     container: container.value,
69     stopScrollGraph: true, //禁止鼠标滚动移动画布
70     stopZoomGraph: true, //禁止缩放画布
71     width: 1200, //默认100%
72     height: 800, //默认100%
73     //画布的网格配置
74     // grid:false, //禁止画布网格
75     grid: {
76       type: "dot", //mesh方格
77       size: 20, //间距
78     },
79   });
80   //渲染画布
81   lf.value.render(data);
82 });
83 </script>
View Code

 

 配置左侧菜单和右键菜单

先通过npm安装工具栏扩展

npm i @logicflow/extension

 在页面引用

import { DndPanel, Menu } from "@logicflow/extension";
import "@logicflow/core/dist/style/index.css";
import "@logicflow/extension/lib/style/index.css";

在创建实例的时候注册这两个插件         plugins: [DndPanel, Menu], //注册插件

lf.value = new LogicFlow({
    container: container.value,
    plugins: [DndPanel, Menu], //注册两个插件
    stopScrollGraph: true, //禁止鼠标滚动移动画布
    stopZoomGraph: true, //禁止缩放画布
    width: 1200, //默认100%
    height: 800, //默认100%
    //画布的网格配置
    // grid:false, //禁止画布网格
    grid: {
      type: "dot", //mesh方格
      size: 20, //间距
    },
  });

定义左侧菜单patternItems和右键菜单menuConfig，我这里图标直接用的base64编码

const patternItems = [
    {
        type: 'circle',
        text: '文本',
        label: '圆形',
        icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAACWklEQVRYhcWYz05TQRTGf8IaSTSBwEZRFvxxhwsWFPeUF2hXPoEPYJR30GUDKWt3WlCX6lp3sFQxmugCjNBEYhAwJ/lOcry2vbe1Hb6kSWfumfN9M3fumXPmEt1hDFgB7gC3gOvAZXk4AvaAHeA18BL41qX/XJSABnACnBf8/daYUhGCvBW5ATwGypl+m/1b4ANwoL6rsr8dVsmxDdyTfdeoAIdh9r+ADWAZGO7gbFg2Gxrj481XtVsRa8HBGfAEmO5hMtMaexb8rRUdfD8MOmjxWnpBWb7c74M8H5Vg/AWY64MIx5x8uv9KO8MpbUIz2gfm+ygiitkXx5E4/8FW2BOrAxDhWA17Ziv7cCks2eYARTg2A99fceaZOo+BiQRCJsRlnE+9cyxEzPUEIhzr4jyRBu6GZVpOKKQUeE0D9RD5OkXMfsO4fvi+HNIpangHnCYUcipOw/yQjnLD+4QiHM45ZUJG1PBTNCWcc2SoQCqQBCakKSLLJ1LDOZsm5KMaltSkxk3x7ZmQXTUWLuDzXdD/HRPySo1RYDGhkEVxomSb8RDiawmF1EKIH/fOxgUcej/F2YgPYtyvJxBSb5cGkEmMVgYoohwSo+1WBvb5xlRxdgAiZjOpYtuQUQ1L9hmY6aOIGfl0/7k1zsME5UTh2iZbYFmOOdmDgEltzJ4KLEdV59B5+LRrSrTzSs4l2R6H8c1OryPv5LWz4FGL13MYivDv6rsSivDRjP1zFeH/nfNYLmuBx64ail5LWAZmYwrlwb1c1Njq+EXNtTB7W6VPuqh5A7wAvhbyCvwBF7PLkDgvfRwAAAAASUVORK5CYII=',
    },
    {
        type: 'rect',
        text: '文本',
        label: '矩形',
        icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAVCAYAAAAuJkyQAAAAXUlEQVRIie3WMQrAIBBE0Z+QQ6XL8XIuu9xKSTBg5ZROMR8Et/KBzW5AxajdCfN2DPcHKIscF3D+Q+3nXoShv/057L4sIFVAqoBUAakCUgWksgONG6PFPpQVdhrQANSEDC8tBgdiAAAAAElFTkSuQmCC',
    },
    {
        type: 'ellipse',
        text: '文本',
        label: '椭圆',
        icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAiCAYAAAC0nUK+AAABzUlEQVRIibWWSytFURTHf7gTijwyQ4YoI89v4PkpdJW5iWJk4PEp8CXcMmKmiBEmMhBCIo8kcWnVWlrdznHuuWfff932Xnut/Tt7n7pn/UlQPTAHFIA74FvHgq7XJwHiNAVcAj///CQ/nRa8CBQd9ArYAtZ0vHK5otaXpQW38RmYBXIlG3O6/uxqF5LgY+7E10BvQn2vu4XsG48rbHKFL0B/mTft13p7fU1RRSvuivkywaYZt3e1NNkKvGpyH6hJCa/RfbL/DWjzyXn35ImUYNOEY8z7xJEunldwan/6c+Uc22KHe+JyhWDTsmN11gKjLlnICN928xGBD2vwDhxkhB8qRzQs8AENToGvjPAv5YgGBN6lwUVGsMk4XQJv1+AmENw47QJv1OAjENw4jQL/1KAuEPyPI/BHnbcEghvnVeBPGjQHghvnQeC3GnQHghvnUuBnGvRFdJy0yilHdFLr/pUNwFBG+KByRIcC33PJSj+3pkk337VJ1T65BGoW43HNok3bU1XaHNpYQzTo9aiCENbiOs5aoO+t6DxIkinqKdcUmUrtXD7GzuXT2jnTUoQR3VQjuhFhRKU+lcQaV8VCm8z87wD3CpRR4v/NP/ALpzype25spAMAAAAASUVORK5CYII=',
    },
    {
        type: 'diamond',
        text: '文本',
        label: '菱形',
        icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAjCAYAAAAaLGNkAAADK0lEQVRYhb2YTYhNYRjHf3eGadzBmGPGt5BSsrEgjWQoZacsRBaWiiILC0rNhpjMSq5YSE3KRopZGDYWSokwo8mMOzMUYzHyNb4yPq4e/c/tved+nXPuNU+duee87/M+7/99vt8hJs0D7gBL4yzPZDI5TxyaDzwzWcAtoGayQXgOAP85A0ybFBBi3uhsPuC87/7vIMRYB/zSpleAtcA7fb8HFoYVGBmEmGqBL9rwLbBT04eBUY3/NKBhhEYC4TD4fvANOKuoSOg5CQxqftgAlxPspQYT5Y+fC6JTG4wDF4EVgYiw9y4H6N1yJ4xqhuMSbKa4ASwpwl4PXAdeif9CGBAlgWjyiGOCXjliKWoGbstnbN3+SkCYvVYBE8BvgdhRBoBPy4H7wFcBaS20UVgQwxJi6j2qsbDUBjwB/iiEZ0cFkZBKbfYjcBmYEgGAT4eAEcl5ATS4G7ogmjsG8g7Y6mRB84OGGABQXukGPklWj5JdHggvNZRzyOnAmBaNFVJjRGoB+mQWk7kvuNxANKXSU/3vRqViXwvbCy2IQVvl2L7cg9JSVqYnEBbjBxQJGRWpPDvFLbsyaY+T8Dbkghiqs2y3GjjhZMHHWlCpFnxqAh7pPQls9g+ZSPz7qfH/dDoV8rPfH1ShA6pVvzEh2ZfkK1mTeKl0vS88qcLk2+6Uq4UKNGF15rtk9rub+9SUSiezH9romlOWW+LuLHVbSD6QPAOyMsjknUsnvNRQMjhe7zhob0wAdto1wE3JeQ0sKMacp2UN7HHM8jwiAPOvOcBT5zBthTYu6WsabJcASzQdEUBYs3PacfJjpcK9pL9p4qEEmWevCwHAU/n3M2RfscIXJepmOtnOHHVREb4aPdYAfRB/l1srYoPQ5CZV04x6hGJ86wP3kbmlThc1/5g6FwM/JHwkMNcoU/kaGFNuKElxW/5255RDmpoFLNOdw8bvATPKS6zs8nM+ELoWinv1PaoeM1QHVuk1sNsJ3X6n1uwqlJKrDkJU5zhqRr5wNYwfVBME8vxxgXgDbInah1YDhNE24KUKXrELUWgQUVr5INk/S6zg2bXA0nQkEFkC/gIG0Fnx2pQBIwAAAABJRU5ErkJggg==',
    },
    {
        type: 'polygon',
        text: '文本',
        label: '多边形',
        icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAYAAAAe2bNZAAAB8UlEQVRYhcWWh04CQRRFj18hKmBv32fvDXv7IKNG4zfYFVTUz9BMMs88n8IWZpebkJDZVw7ZMPcSQCPACdAZYlgrGgbqwBdwDRTaBTIEvHkQ+dy0A2jQgFwZoK68QAaAV7V8DugAjtXZLdCdNUg/8KKWLqhnFugO6MkKpA+oqWVLDeoOVc09UAwN0gtU1ZKViPp9VfsIlEKBlIFnNXw1Zt+u6nkKAWRB1hP2bxugclqQkh+QFkS0qWY8+1eeSEX/rmVIJe0v8tpQs6r+zxBLDuRBNW+1CPIfUM1fE03V4/+O0rQTCES0pma/+Av0X3X7i0qK9wKDiJbVjldvLb/U5a9wKTrICES02Aio4M1NHh5lDCKaVzvffBzhXB1e5AQiulS7T93ZOPCpDidyAtkzpvrj8mMGaDJjkB1jpn/c3QF9qKLpjEC21I6HZq4+Cryr4tnAIBXj5pHxwqX9umqaDwSyntbFh03GXWwRZNWYZWL3HjRZt1Gyi9KKMcnEri2y4Xs5Yf+SMcfYbt0MSIfwtZh9C8YUI106rvpNGN+I6JuL685p1WdC+WaDOTPGBIODiHpNJt42z6eN+f2JB6FVNtlYgKYMyFDWIKKSychn6ntd4kCesqH9y1vJSN4gIgckmdmZrPO2tsrZvwtlzvXTC/gGVbHb5VM39kkAAAAASUVORK5CYII=',
    },
    {
        type: 'text',
        text: '文本',
        label: '文本',
        icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAARCAYAAAC1tw6GAAABS0lEQVRIia1U223DMBAj2gm8gn/7qRWyQlfwCu4IXkEdwSv4u3/OCFohGSHFATzgoOp1SQkIMASJ5lG8e0cbEcAHgJ/OuRGs5Lq+QjIBSFzzi4JO8kytQ28dkjuAb4r5LIgNTlF3LovZyxNYXV7ZAeDmIDu5SvuPvOCDm8+sm+GJ/8TzB7Gyv/PyNuiK4GJ+epK7msdWhkpPEZiBL4cg5dHsXAt57GIpuKCV7k6uZPJz0p3kFTQV3nQrha+DhXdCFurEueSCOKGXVKC3smSctoJW8rlmmzihl+IT7mzsXoUVpAWWxkkTO6t8ZOQ9XAo/s4J2CtLOGx6Mq2nZZfCO5mUdnD36HXvCNMSHmaZH59lCowtrkzqSN9QypRWKeuvKZqrRsOautTqnJqiK2WSmRqxncmEjGRgWJGRimxCPdpEIk/OeDpEi27MHwC9JTZBpT0VBjwAAAABJRU5ErkJggg==',
    },
    // {
    //     type: 'html',
    //     text: 'html',
    //     label: 'html',
    //     icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAmCAYAAACoPemuAAAAAXNSR0IArs4c6QAAA+ZJREFUWEfNmF+oFHUUx7/nt3rpIeTO3MQMfLGZNRBS0JesBy1D8soVMyqKnrypO5tCPSRk4A1UsIcCb/tb/FMPgoJRkaXlg5ebgvmSiILi3d/US0Rl985chB5aunNidnZ2Z9bdnb17dZuFfdj9nT+fOef3O+fMj5DSD6WUC3MC6x9VazOCdSaqfOF5IEGTgjHpCdjOTvNWtw8+azDtk4mNRJkhCAyBeXGC45tE+JY9uujkjfOzgewYTCvaTxNjF8CvzMZBXZZOM2HUzRmXO9HvCEwrlvYT094Gg3cBXCHgEjP+ZBJ/+OvE3qNEWMTgNSB6Hoy+mB7jYydvvpMElwg2INVJBl6rGSIa85gPTz9SPo+Xl5fbOVhw/Fc9U/7nJYC3E7CqbgNXnJy5pp1uWzBdKm5QftOxzONJT9tsXZP2dgIfia45ltnSf8sFvah+BOOp0BAjs8K1lt7oBirU0aT9AoG/C38TcGrKMl9vZrMpmF5QH4HwdqjQ7sm6AY1mgokPuLns+4127gHTZGmQQGfrkaKNrmV83w1AKx1N/vIkYeZ6zQfRM42nNQ42zvP0W/YlUJBCBu1wLeNoKwd6YWIEQjA8j5z8spHZwMf3HJ12LOPVqH4MrOKIxL4AClddy1zdzpkm1TgBa32ZbtKtSfVTeFoZ8czEwDSpzhAw1Em0fJm5g9VPKoNHXSu7O3Iw6jHRpXIB9INQ/nf+Q4vvDi9xHmTEHj6sFvbNw28A5jNgu5Zp3gPWXyitFETXggU+51jZTUl7Zq4R8+3rUo0BeDbI0swK13qiUpJqqRwoqjeYcaL6594pyzzYC7ABqd5j4IDvSwCbJy3zmxiYVrT3E3PQDxnDTt78tBdgekFtAyHoJoRtTs78LAamy9IXAG0NuMQm13r8XC/ANPnzIMGr1E1m3uPmsx82gNlfAvzi/wpGtMfNGXGwgULpEBO9220qk6LrzWDd9C7zh0a5WCqB2pBQ2/y6VMMAjnW7+bsFi25+Yt46lc9+FUulP7+LDMaDVNLXrmVsSXLml4skmXCdZ/BB04hJ5Y/cG3y5aFTrld/vk7ftv6sT57Rzp7wII+0HwU6hWsp9frNPn+z7C8ACEP3u5IzHQtl4r5T2WYAHK/TA5ulqTZkzQAsD/VINCeBMsK/piJM3djYHizRxEI05OWP9g4Ly7epF+wKYn6twed6g+9ay6BAZcd0w9iBySu43YPSwAQljj+88nYNiNSypHK3DlKXyZaQGl8bXtxAulS+8IVwqrwjqcCm8VInWsNRdQzUrsNXGbxCzySQMwGMmcVuAJ5hwtacXd/e7A7Syl3gN1SuQRj//ARDQB0UouH96AAAAAElFTkSuQmCC',
    // },
    {
        text: '',
        label: '查看JSON',
        icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAKCAYAAADRuIyZAAABIUlEQVQ4ja1UgY3CMAy8/w2yQlfoj1BG+B+BFbICP0IZoYwAI/RHKCPACLws3aGTG5CQOMlS48Tnc+z0A+9DB2Ag2xnA6RXmz7TeAriZBXoAs/lGrh07ABOAQqtcCwtjLxQM8ohz2xJXGeAkI78jyZHBvZ3PwsBzY+Kp9AsTfasbCVxpjj/b2wA4UIiqPzR49qy0M5/ODcZ3fSQkY8PAmRWGgB8mUiuycJj4Ifl/001BQqpdc0Yk+WbiL6tyeRIjFKvacaKt5uKmPhFK5Ps56Y69LpynijU0axK0WJs6ricXdLQJL2yBD9TMIAX0aYBreg2eyAXmW6z5xZT0POPbSUOkZsSfsCNIJS6sJUKx4o689wLf+UMLYlUcg9oa4DYA/AOloF2VlY1LJgAAAABJRU5ErkJggg==',
        callback() {
            console.log(lf.value?.getGraphData());
            alert('已输出至控制台');
        },
    },
];

const menuConfig = {
    nodeMenu: [
        {
            text: '属性',
            callback(node: any) {
                alert(`
          节点id：${node.id}
          节点类型：${node.type}
          节点坐标：(x: ${node.x}, y: ${node.y})`);
            },
        },
    ],
    edgeMenu: [
        {
            text: '属性',
            callback(edge: any) {
                alert(`
          边id：${edge.id}
          边类型：${edge.type}
          边坐标：(x: ${edge.x}, y: ${edge.y})
          源节点id：${edge.sourceNodeId}
          目标节点id：${edge.targetNodeId}`);
            },
        },
    ],
};
View Code

在lf.value.render(graphData);渲染画布之前进行配置

lf.value.extension.dndPanel.setPatternItems(patternItems);
lf.value.extension.menu.addMenuConfig(menuConfig);
//渲染画布
lf.value.render(graphData);

最终效果

 

 完整代码

<template>
  <div id="container" ref="container"></div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from "vue";
import LogicFlow from "@logicflow/core";
import "@logicflow/core/dist/style/index.css";
import { DndPanel, Menu } from "@logicflow/extension";
import "@logicflow/core/dist/style/index.css";
import "@logicflow/extension/lib/style/index.css";
//ref获取div容器
const container = ref();
//用来渲染画布
const lf = ref();
//定义好需要渲染的JSON数据
const data = {
  // 节点
  nodes: [
    {
      id: 1,
      type: "rect",
      x: 100,
      y: 250,
      text: "开始",
    },
    {
      id: 2,
      type: "circle",
      x: 300,
      y: 150,
      text: "进行中",
    },
    {
      id: 3,
      type: "circle",
      x: 300,
      y: 350,
      text: "失败了",
    },
    {
      id: 4,
      type: "circle",
      x: 500,
      y: 250,
      text: "结束",
    },
  ],
  // 边
  edges: [
    {
      type: "polyline",
      sourceNodeId: 1,
      targetNodeId: 2,
    },
    {
      type: "polyline",
      sourceNodeId: 1,
      targetNodeId: 3,
    },
    {
      type: "polyline",
      sourceNodeId: 2,
      targetNodeId: 4,
    },
  ],
};

const patternItems = [
  {
    type: "circle",
    text: "文本",
    label: "圆形",
    icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAACWklEQVRYhcWYz05TQRTGf8IaSTSBwEZRFvxxhwsWFPeUF2hXPoEPYJR30GUDKWt3WlCX6lp3sFQxmugCjNBEYhAwJ/lOcry2vbe1Hb6kSWfumfN9M3fumXPmEt1hDFgB7gC3gOvAZXk4AvaAHeA18BL41qX/XJSABnACnBf8/daYUhGCvBW5ATwGypl+m/1b4ANwoL6rsr8dVsmxDdyTfdeoAIdh9r+ADWAZGO7gbFg2Gxrj481XtVsRa8HBGfAEmO5hMtMaexb8rRUdfD8MOmjxWnpBWb7c74M8H5Vg/AWY64MIx5x8uv9KO8MpbUIz2gfm+ygiitkXx5E4/8FW2BOrAxDhWA17Ziv7cCks2eYARTg2A99fceaZOo+BiQRCJsRlnE+9cyxEzPUEIhzr4jyRBu6GZVpOKKQUeE0D9RD5OkXMfsO4fvi+HNIpangHnCYUcipOw/yQjnLD+4QiHM45ZUJG1PBTNCWcc2SoQCqQBCakKSLLJ1LDOZsm5KMaltSkxk3x7ZmQXTUWLuDzXdD/HRPySo1RYDGhkEVxomSb8RDiawmF1EKIH/fOxgUcej/F2YgPYtyvJxBSb5cGkEmMVgYoohwSo+1WBvb5xlRxdgAiZjOpYtuQUQ1L9hmY6aOIGfl0/7k1zsME5UTh2iZbYFmOOdmDgEltzJ4KLEdV59B5+LRrSrTzSs4l2R6H8c1OryPv5LWz4FGL13MYivDv6rsSivDRjP1zFeH/nfNYLmuBx64ail5LWAZmYwrlwb1c1Njq+EXNtTB7W6VPuqh5A7wAvhbyCvwBF7PLkDgvfRwAAAAASUVORK5CYII=",
  },
  {
    type: "rect",
    text: "文本",
    label: "矩形",
    icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAVCAYAAAAuJkyQAAAAXUlEQVRIie3WMQrAIBBE0Z+QQ6XL8XIuu9xKSTBg5ZROMR8Et/KBzW5AxajdCfN2DPcHKIscF3D+Q+3nXoShv/057L4sIFVAqoBUAakCUgWksgONG6PFPpQVdhrQANSEDC8tBgdiAAAAAElFTkSuQmCC",
  },
  {
    type: "ellipse",
    text: "文本",
    label: "椭圆",
    icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAiCAYAAAC0nUK+AAABzUlEQVRIibWWSytFURTHf7gTijwyQ4YoI89v4PkpdJW5iWJk4PEp8CXcMmKmiBEmMhBCIo8kcWnVWlrdznHuuWfff932Xnut/Tt7n7pn/UlQPTAHFIA74FvHgq7XJwHiNAVcAj///CQ/nRa8CBQd9ArYAtZ0vHK5otaXpQW38RmYBXIlG3O6/uxqF5LgY+7E10BvQn2vu4XsG48rbHKFL0B/mTft13p7fU1RRSvuivkywaYZt3e1NNkKvGpyH6hJCa/RfbL/DWjzyXn35ImUYNOEY8z7xJEunldwan/6c+Uc22KHe+JyhWDTsmN11gKjLlnICN928xGBD2vwDhxkhB8qRzQs8AENToGvjPAv5YgGBN6lwUVGsMk4XQJv1+AmENw47QJv1OAjENw4jQL/1KAuEPyPI/BHnbcEghvnVeBPGjQHghvnQeC3GnQHghvnUuBnGvRFdJy0yilHdFLr/pUNwFBG+KByRIcC33PJSj+3pkk337VJ1T65BGoW43HNok3bU1XaHNpYQzTo9aiCENbiOs5aoO+t6DxIkinqKdcUmUrtXD7GzuXT2jnTUoQR3VQjuhFhRKU+lcQaV8VCm8z87wD3CpRR4v/NP/ALpzype25spAMAAAAASUVORK5CYII=",
  },
  {
    type: "diamond",
    text: "文本",
    label: "菱形",
    icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAjCAYAAAAaLGNkAAADK0lEQVRYhb2YTYhNYRjHf3eGadzBmGPGt5BSsrEgjWQoZacsRBaWiiILC0rNhpjMSq5YSE3KRopZGDYWSokwo8mMOzMUYzHyNb4yPq4e/c/tved+nXPuNU+duee87/M+7/99vt8hJs0D7gBL4yzPZDI5TxyaDzwzWcAtoGayQXgOAP85A0ybFBBi3uhsPuC87/7vIMRYB/zSpleAtcA7fb8HFoYVGBmEmGqBL9rwLbBT04eBUY3/NKBhhEYC4TD4fvANOKuoSOg5CQxqftgAlxPspQYT5Y+fC6JTG4wDF4EVgYiw9y4H6N1yJ4xqhuMSbKa4ASwpwl4PXAdeif9CGBAlgWjyiGOCXjliKWoGbstnbN3+SkCYvVYBE8BvgdhRBoBPy4H7wFcBaS20UVgQwxJi6j2qsbDUBjwB/iiEZ0cFkZBKbfYjcBmYEgGAT4eAEcl5ATS4G7ogmjsG8g7Y6mRB84OGGABQXukGPklWj5JdHggvNZRzyOnAmBaNFVJjRGoB+mQWk7kvuNxANKXSU/3vRqViXwvbCy2IQVvl2L7cg9JSVqYnEBbjBxQJGRWpPDvFLbsyaY+T8Dbkghiqs2y3GjjhZMHHWlCpFnxqAh7pPQls9g+ZSPz7qfH/dDoV8rPfH1ShA6pVvzEh2ZfkK1mTeKl0vS88qcLk2+6Uq4UKNGF15rtk9rub+9SUSiezH9romlOWW+LuLHVbSD6QPAOyMsjknUsnvNRQMjhe7zhob0wAdto1wE3JeQ0sKMacp2UN7HHM8jwiAPOvOcBT5zBthTYu6WsabJcASzQdEUBYs3PacfJjpcK9pL9p4qEEmWevCwHAU/n3M2RfscIXJepmOtnOHHVREb4aPdYAfRB/l1srYoPQ5CZV04x6hGJ86wP3kbmlThc1/5g6FwM/JHwkMNcoU/kaGFNuKElxW/5255RDmpoFLNOdw8bvATPKS6zs8nM+ELoWinv1PaoeM1QHVuk1sNsJ3X6n1uwqlJKrDkJU5zhqRr5wNYwfVBME8vxxgXgDbInah1YDhNE24KUKXrELUWgQUVr5INk/S6zg2bXA0nQkEFkC/gIG0Fnx2pQBIwAAAABJRU5ErkJggg==",
  },
  {
    type: "polygon",
    text: "文本",
    label: "多边形",
    icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAYAAAAe2bNZAAAB8UlEQVRYhcWWh04CQRRFj18hKmBv32fvDXv7IKNG4zfYFVTUz9BMMs88n8IWZpebkJDZVw7ZMPcSQCPACdAZYlgrGgbqwBdwDRTaBTIEvHkQ+dy0A2jQgFwZoK68QAaAV7V8DugAjtXZLdCdNUg/8KKWLqhnFugO6MkKpA+oqWVLDeoOVc09UAwN0gtU1ZKViPp9VfsIlEKBlIFnNXw1Zt+u6nkKAWRB1hP2bxugclqQkh+QFkS0qWY8+1eeSEX/rmVIJe0v8tpQs6r+zxBLDuRBNW+1CPIfUM1fE03V4/+O0rQTCES0pma/+Av0X3X7i0qK9wKDiJbVjldvLb/U5a9wKTrICES02Aio4M1NHh5lDCKaVzvffBzhXB1e5AQiulS7T93ZOPCpDidyAtkzpvrj8mMGaDJjkB1jpn/c3QF9qKLpjEC21I6HZq4+Cryr4tnAIBXj5pHxwqX9umqaDwSyntbFh03GXWwRZNWYZWL3HjRZt1Gyi9KKMcnEri2y4Xs5Yf+SMcfYbt0MSIfwtZh9C8YUI106rvpNGN+I6JuL685p1WdC+WaDOTPGBIODiHpNJt42z6eN+f2JB6FVNtlYgKYMyFDWIKKSychn6ntd4kCesqH9y1vJSN4gIgckmdmZrPO2tsrZvwtlzvXTC/gGVbHb5VM39kkAAAAASUVORK5CYII=",
  },
  {
    type: "text",
    text: "文本",
    label: "文本",
    icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAARCAYAAAC1tw6GAAABS0lEQVRIia1U223DMBAj2gm8gn/7qRWyQlfwCu4IXkEdwSv4u3/OCFohGSHFATzgoOp1SQkIMASJ5lG8e0cbEcAHgJ/OuRGs5Lq+QjIBSFzzi4JO8kytQ28dkjuAb4r5LIgNTlF3LovZyxNYXV7ZAeDmIDu5SvuPvOCDm8+sm+GJ/8TzB7Gyv/PyNuiK4GJ+epK7msdWhkpPEZiBL4cg5dHsXAt57GIpuKCV7k6uZPJz0p3kFTQV3nQrha+DhXdCFurEueSCOKGXVKC3smSctoJW8rlmmzihl+IT7mzsXoUVpAWWxkkTO6t8ZOQ9XAo/s4J2CtLOGx6Mq2nZZfCO5mUdnD36HXvCNMSHmaZH59lCowtrkzqSN9QypRWKeuvKZqrRsOautTqnJqiK2WSmRqxncmEjGRgWJGRimxCPdpEIk/OeDpEi27MHwC9JTZBpT0VBjwAAAABJRU5ErkJggg==",
  },
  // {
  //     type: 'html',
  //     text: 'html',
  //     label: 'html',
  //     icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAmCAYAAACoPemuAAAAAXNSR0IArs4c6QAAA+ZJREFUWEfNmF+oFHUUx7/nt3rpIeTO3MQMfLGZNRBS0JesBy1D8soVMyqKnrypO5tCPSRk4A1UsIcCb/tb/FMPgoJRkaXlg5ebgvmSiILi3d/US0Rl985chB5aunNidnZ2Z9bdnb17dZuFfdj9nT+fOef3O+fMj5DSD6WUC3MC6x9VazOCdSaqfOF5IEGTgjHpCdjOTvNWtw8+azDtk4mNRJkhCAyBeXGC45tE+JY9uujkjfOzgewYTCvaTxNjF8CvzMZBXZZOM2HUzRmXO9HvCEwrlvYT094Gg3cBXCHgEjP+ZBJ/+OvE3qNEWMTgNSB6Hoy+mB7jYydvvpMElwg2INVJBl6rGSIa85gPTz9SPo+Xl5fbOVhw/Fc9U/7nJYC3E7CqbgNXnJy5pp1uWzBdKm5QftOxzONJT9tsXZP2dgIfia45ltnSf8sFvah+BOOp0BAjs8K1lt7oBirU0aT9AoG/C38TcGrKMl9vZrMpmF5QH4HwdqjQ7sm6AY1mgokPuLns+4127gHTZGmQQGfrkaKNrmV83w1AKx1N/vIkYeZ6zQfRM42nNQ42zvP0W/YlUJBCBu1wLeNoKwd6YWIEQjA8j5z8spHZwMf3HJ12LOPVqH4MrOKIxL4AClddy1zdzpkm1TgBa32ZbtKtSfVTeFoZ8czEwDSpzhAw1Em0fJm5g9VPKoNHXSu7O3Iw6jHRpXIB9INQ/nf+Q4vvDi9xHmTEHj6sFvbNw28A5jNgu5Zp3gPWXyitFETXggU+51jZTUl7Zq4R8+3rUo0BeDbI0swK13qiUpJqqRwoqjeYcaL6594pyzzYC7ABqd5j4IDvSwCbJy3zmxiYVrT3E3PQDxnDTt78tBdgekFtAyHoJoRtTs78LAamy9IXAG0NuMQm13r8XC/ANPnzIMGr1E1m3uPmsx82gNlfAvzi/wpGtMfNGXGwgULpEBO9220qk6LrzWDd9C7zh0a5WCqB2pBQ2/y6VMMAjnW7+bsFi25+Yt46lc9+FUulP7+LDMaDVNLXrmVsSXLml4skmXCdZ/BB04hJ5Y/cG3y5aFTrld/vk7ftv6sT57Rzp7wII+0HwU6hWsp9frNPn+z7C8ACEP3u5IzHQtl4r5T2WYAHK/TA5ulqTZkzQAsD/VINCeBMsK/piJM3djYHizRxEI05OWP9g4Ly7epF+wKYn6twed6g+9ay6BAZcd0w9iBySu43YPSwAQljj+88nYNiNSypHK3DlKXyZaQGl8bXtxAulS+8IVwqrwjqcCm8VInWsNRdQzUrsNXGbxCzySQMwGMmcVuAJ5hwtacXd/e7A7Syl3gN1SuQRj//ARDQB0UouH96AAAAAElFTkSuQmCC',
  // },
  {
    text: "",
    label: "查看JSON",
    icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAKCAYAAADRuIyZAAABIUlEQVQ4ja1UgY3CMAy8/w2yQlfoj1BG+B+BFbICP0IZoYwAI/RHKCPACLws3aGTG5CQOMlS48Tnc+z0A+9DB2Ag2xnA6RXmz7TeAriZBXoAs/lGrh07ABOAQqtcCwtjLxQM8ohz2xJXGeAkI78jyZHBvZ3PwsBzY+Kp9AsTfasbCVxpjj/b2wA4UIiqPzR49qy0M5/ODcZ3fSQkY8PAmRWGgB8mUiuycJj4Ifl/001BQqpdc0Yk+WbiL6tyeRIjFKvacaKt5uKmPhFK5Ps56Y69LpynijU0axK0WJs6ricXdLQJL2yBD9TMIAX0aYBreg2eyAXmW6z5xZT0POPbSUOkZsSfsCNIJS6sJUKx4o689wLf+UMLYlUcg9oa4DYA/AOloF2VlY1LJgAAAABJRU5ErkJggg==",
    callback() {
      console.log(lf.value?.getGraphData());
      alert("已输出至控制台");
    },
  },
];

const menuConfig = {
  nodeMenu: [
    {
      text: "属性",
      callback(node: any) {
        alert(`
          节点id：${node.id}
          节点类型：${node.type}
          节点坐标：(x: ${node.x}, y: ${node.y})`);
      },
    },
  ],
  edgeMenu: [
    {
      text: "属性",
      callback(edge: any) {
        alert(`
          边id：${edge.id}
          边类型：${edge.type}
          边坐标：(x: ${edge.x}, y: ${edge.y})
          源节点id：${edge.sourceNodeId}
          目标节点id：${edge.targetNodeId}`);
      },
    },
  ],
};

onMounted(() => {
  lf.value = new LogicFlow({
    container: container.value,
    plugins: [DndPanel, Menu], //注册插件
    stopScrollGraph: true, //禁止鼠标滚动移动画布
    stopZoomGraph: true, //禁止缩放画布
    width: 1200, //默认100%
    height: 800, //默认100%
    //画布的网格配置
    // grid:false, //禁止画布网格
    grid: {
      type: "dot", //mesh方格
      size: 20, //间距
    },
  });
  lf.value.extension.dndPanel.setPatternItems(patternItems);
  lf.value.extension.menu.addMenuConfig(menuConfig);
  //渲染画布
  lf.value.render(data);
});
</script>
View Code

标签：lf,菜单,工具栏,text,data,画布,右键,type,id
From： https://www.cnblogs.com/shenhaii/p/18224750

相关文章

  • javascript右键菜单
      文章来源：https://segmentfault.com/a/1190000023098787 HTML<h1>Clickonblanktoshowcustomcontextmenus</h1>CSS.custom-context-menu{position:fixed;border:1pxsolid#ccc;list-style:none;padding:4px0;border-radius:......
  • 将sublime text 3加入到windows右键功能中
    1.reg文件内容，编辑好之后，双击1.reg文件即可WindowsRegistryEditorVersion5.00[HKEY_CLASSES_ROOT\*\shell\SublimeText3]@="EditwithSublimeText3""Icon"="D:\\software\\sublime_text_build_4169_x64\\sublime_text.exe,0"[HKEY_CLASS......
  • 实现树形菜单
    在Android中创建树形菜单（TreeView）有几种方法，可以根据你的需求选择合适的方式。这种结构通常用于展示层级关系的数据。一个常见的实现方式是使用`RecyclerView`配合自定义的适配器来创建树形菜单。以下是一个简单的示例，展示如何在Android中创建树形菜单，并点击每个分类可以......
  • win11右键子菜单展开增加延时
    展开注册表HKEY_CURRENT_USER\ControlPanel\Desktop在右侧窗格中，查找名为MenuShowDelay的字符串值。如果没有此项，可以右键单击空白处，选择新建>字符串值，然后将其命名为MenuShowDelay。双击MenuShowDelay项，修改其值数据。默认值是400（单位是毫秒）。你可以将其改为更高的......
  • win11通过注册表禁用鼠标右键
    本经验分为5个步骤，详情如下。工具/原料华硕K5win11专业版21H2注册表22000.556方法/步骤 同时按下“win”+"R"键，打开运行弹窗。 在运行框的输入框中输入“regedit”，然后点击"确定"按钮进入注册表。  接着依次打开以下的文件......
  • vs2019（或者2012），项目右键重新生成，就提示打不开某某lib链接文件。而右键生成则成功通过
    参考这个VS2019附加库目录路径和附加依赖项没有问题却仍报错LNK1104无法打开lib的解决办法https://blog.csdn.net/weixin_66296893/article/details/127463346 他解释的原因很好，目录深度（绝对路径深度） 而我遇到的问题是，右键重新生成则提示打不开某lib文件。而右键生成，则没......
  • 响应式UI组件DevExtreme中文教程 - 工具栏的自适应模式
    DevExtreme拥有高性能的HTML5/JavaScript小部件集合，使您可以利用现代Web开发堆栈（包括React，Angular，ASP.NETCore，jQuery，Knockout等）构建交互式的Web应用程序。从Angular和Reac，到ASP.NETCore或Vue，DevExtreme包含全面的高性能和响应式UI小部件集合，可在传统Web和下一代移动应用程......
  • 响应式UI组件DevExtreme中文教程 - 工具栏的自适应模式
    DevExtreme拥有高性能的HTML5/JavaScript小部件集合，使您可以利用现代Web开发堆栈（包括React，Angular，ASP.NETCore，jQuery，Knockout等）构建交互式的Web应用程序。从Angular和Reac，到ASP.NETCore或Vue，DevExtreme包含全面的高性能和响应式UI小部件集合，可在传统Web和下一代移动应用程序中......
  • Cesium实现右键弹出菜单
    一、实现思路1.创建菜单容器，设置好样式，并隐藏2.监听鼠标右键事件，控制菜单的显隐性二、实现代码1.创建菜单代码如下：<divid="menu"v-show="menuVisible":style="{left:menuX+'px',top:menuY+'px'}"style="position:absolute;background-color......
  • 8-4 【Python0036】中文级联菜单
    编写程序实现中文级联菜单，建议可以使用pypinyin或其它扩展库。 importtkinterastkfromtkinterimportttkfrompypinyinimportpinyin,Style#示例数据menu_data={"水果":\["苹果","香蕉","橙子"\],"动物":\["狗","猫"......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99