vue-visual-flow

0.0.4 • Public • Published

介绍

vue-visual-flow 是一个基于 antv/g6 实现的可视化流程配置 Vue 组件

项目使用 rollup 打包,分别提供 cjs esm 两种模块化引入方式,大小仅为 100K 左右

设计思路

为了尽可能摘除业务逻辑,组件将G6实例、以及当前操作的节点、边实例共享出去,供使用者在外部完成自己的业务逻辑

关于G6 api: G6

部分问题与进度追踪

目前 antv/g6 版本更新后会出现自定义图形消失的问题,暂不支持新版 antv/g6,追踪issue:g6-issue

issue 已经被修复,请使用 antv/g6@3.7.3 及以上版本

目前不支持同时设置节点配置 tips 和锚点配置 labelName ,会产生无法切换提示信息的问题 g6-issue

demo

个人使用demo

使用

安装

$ npm install @antv/g6 --save
$ npm install vue-visual-flow --save

配置

main.js

import VisualFlow from 'vue-visual-flow';
Vue.use(VisualFlow);

index.vue

<template>
  <div id="app">
    <visual-flow
      :tree-list="treeList"
      :tool-list="toolList"
      :contextmenu-list="contextmenuList"
 
      :graph.sync="graph"
      :current-node.sync="currentNode"
      :current-edge.sync="currentEdge"
 
      @contextmenuEvent="contextmenuEvent"
    />
  </div>
</template>
 
<script>
export default {
  name: 'App',
  data() {
    return {
      // 左侧树形节点列表,兼容 2-n 深度
      treeList: [
        // 一级分类
        {
          label: '一级分类1',
          showFlag: false,
          children: [
            // 二级分类
            {
              label: '二级分类1-1',
              showFlag: false,
              children: [
                // 三级分类 (节点)
                {
                  // 基本属性
                  label: '节点1', // 节点显示名称
                  tips: '在这增加一些节点描述信息~', // (可选)节点悬浮tip
                  inPoints: [ // 入锚点数组
                    {
                      dataType: 'type1', // 自定义锚点类型,只有相同类型的入锚点和出锚点才可以连接
                      labelName: '入锚点类型为type1', // (可选)锚点提示信息
                    },
                    {
                      dataType: 'type2',
                      labelName: '入锚点类型为type2',
                    },
                  ],
                  outPoints: [ // 出锚点数组
                    {
                      dataType: 'type1',
                      labelName: '出锚点类型为type1',
                    },
                  ],
 
                  // 自定义属性
                  itemId: 'xxx', // 节点id
                },
              ],
            },
          ],
        },
      ],
      // 可选的画布控件
      toolList: ['zoomIn', 'zoomOut', 'adjustCanvas', 'realRatio', 'autoFormat', 'fullScreen'], 
      // 右键菜单配置
      contextmenuList: {
        // 节点右键菜单
        node: [
          {
            label: '删除节点',
            eventName: 'removeNode', // 自定义事件contextmenuEvent会捕获该字段
          },
        ],
        // 边右键菜单
        edge: [
          {
            label: '删除边',
            eventName: 'removeEdge',
          },
        ],
        // 画布右键菜单
        canvas: [
          {
            label: '不知道做点啥',
            eventName: 'unknow',
          },
        ],
      },
 
      // 与组件共享g6实例
      graph: {}, // g6实例
      currentNode: {}, // 左右键时节点实例
      currentEdge: {}, // 左右键时边实例
    };
  },
  methods: {
    contextmenuEvent(eventName) {
      // eventName 匹配 contextmenuList中同名字段
      if (eventName === 'removeNode') {
        this.graph.removeItem(this.currentNode);
      }
 
      if (eventName === 'removeEdge') {
        this.graph.removeItem(this.currentEdge);
      }
 
      if (eventName === 'unknow') {
        alert('真的啥都没做呢');
      }
    },
  },
};
</script> 

Dependencies (1)

Dev Dependencies (22)

Package Sidebar

Install

npm i vue-visual-flow

Weekly Downloads

6

Version

0.0.4

License

MIT

Unpacked Size

223 kB

Total Files

7

Last publish

Collaborators

  • qunzi0214