Vue的图(流程图)编辑器 - vue-diagram-editor

Vue的图(流程图)编辑器 - vue-diagram-editor
插件名称 diagram-flowchart-editor
发布时间 2021年3月12日
插件作者 max-kut

可自定义,可缩放,可缩放的图(流程图)编辑器,使您可以使用图的每个节点内的任何组件。

安装和下载:

# NPM
$ npm i vue-diagram-editor

如何使用它:

1.导入图编辑器组件。

import VueDiagramEditor from 'vue-diagram-editor';
import 'vue-diagram-editor/dist/vue-diagram-editor.css';

2.将图编辑器添加到您的应用程序模板中。

<template>
  <VueDiagramEditor
    ref="diagram"
    :node-color="nodeColor"
    :node-pulsable="nodePulsable"
  >
    <pre slot="node" slot-scope="{node}">{{ format(node) }}</pre>
  </VueDiagramEditor>
</template>

3.注册组件并将您自己的节点添加到图中。

export default {
  name: 'simple-example',
  components: {
    VueDiagramEditor
  },
  data: () => ({
    nodes: {
      'node-1': {
        id: 'node-1',
        title: 'My node 1',
        size: {
          width: 200,
          height: 220
        },
        portsOut: {
          default: ''
        }
      },
      'node-2': {
        id: 'node-2',
        title: 'My node 2',
        size: {
          width: 200,
          height: 220
        },
        coordinates: {
          x: 280,
          y: 100
        },
        portsIn: {
          default: 'in port'
        }
      },
    },
    links: {
      'link-1': {
        id: 'link-1',
        start_id: 'node-1',
        start_port: 'default',
        end_id: 'node-2',
        end_port: 'default'
      }
    }
  }),
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.$refs.diagram.setModel({
        nodes: this.nodes,
        links: this.links
      });
    },
    format(node) {
      return JSON.stringify(node, null, 2);
    },
    nodeColor(node) {
      if (node.coordinates.x > 200) {
        return '#0f0';
      }
      if (node.coordinates.y > 200) {
        return '#f00';
      }
      return '#00f';
    },
    nodePulsable(node) {
      return node.coordinates.y > 200;
    }
  }
};

4.可用的组件道具。

height: {
  type: Number,
  default: 500
},
gridSnap: {
  type: Number,
  default: 1
},
zoomEnabled: {
  type: Boolean,
  default: true
},
nodeColor: {
  type: Function,
  default: () => "#66cc00"
},
nodePulseColor: {
  type: Function,
  default: () => '#f00'
},
nodePulsable: {
  type: Function,
  default: () => false
},
nodeDeletable: {
  type: Function,
  default: () => true
},
beforeDeleteNode: {
  type: Function,
  default: () => true
},
beforeDeleteLink: {
  type: Function,
  default: () => true
},
portDisabled: {
  type: Function,
  default: () => false
},
portAvailable: {
  type: Function,
  default: () => true
},
pan: {
  type: Boolean,
  default: true
},

5.链接道具。

link: {type: Link, required: true},
nodeStart: {type: Node, required: true},
nodeEnd: {type: Node, required: true},
selected: {type: Boolean, default: false}