Skip to content

Latest commit

 

History

History
428 lines (369 loc) · 9.85 KB

vue.md

File metadata and controls

428 lines (369 loc) · 9.85 KB
Raw

Vue版小蝴蝶（butterfly-vue） {ignore=true}

安装 {ignore=true}

$ npm i butterfly-vue butterfly-dag -S

用法

//mockData.js
const endpoints = [
  {
    id: 'right',
    orientation: [1, 0],
    pos: [0, 0.5]
  },
  {
    id: 'left',
    orientation: [-1, 0],
    pos: [0, 0.5]
  }
];

export default {
  groups: [
    {
      id: '1',
      left: 10,
      top: 20,
    },
  ],
  nodes: [
    {
      id: '1',
      group: '1',
      top: 40,
      left: 20,
      endpoints: endpoints,
    },
    {
      id: '2',
      top: 50,
      left: 300,
      endpoints: endpoints,
    },
  ],
  edges: [{
    id: '1-2',
    sourceNode: '1',
    targetNode: '2',
    source: 'right',
    target: 'left',
  }],
};
// component.vue

<template>
  <div id="app">
    <butterfly-vue
      :canvasData="mockData"
    />
  </div>
</template>

<script>
import {ButterflyVue} from 'butterfly-vue';
import mockData from "./mockData.js";

export default {
  name: 'App',
  components: {
    ButterflyVue
  },
  data(){
    return{
      mockData
    }
  },
}
</script>

属性

Prop 类型 说明 默认值 required
canvasConf Object 参考官网定义 见下文 false
baseCanvas Function 参考官网定义 import { Canvas } from "butterfly-dag"; false
canvasData Object 见下文 true
className String 追加在最外层div上的class直接替换掉butterfly-vue样式 butterfly-vue false
onChangeEdges (data) => void; 线改变触发(system.link.reconnect) false
onCreateEdge (data) => void; 线创造触发(system.link.connect) false
onDeleteEdge (data) => void; 线删除触发(system.links.delete) false
onOtherEvent (data) => void; butterfly-dag中api 中除上述3种 false
onLoaded (VueCom) => void; 画布加载完毕后返回ButterflyVue实例（VueCom.canvas就是原生的canvas） false

canvasConf

  // canvasConf默认值：
  const defaultOptions = {
    disLinkable: true, // 可删除连线
    linkable: true, // 可连线
    draggable: true, // 可拖动
    zoomable: true, // 可放大
    moveable: true, // 可平移
    theme: {
      edge: {
        arrow: true,
        type: 'Straight',
      }
    }
  };

canvasData

  • render参数后文会详细说明
  // canvasData说明:
  let canvasData = {
    groups: [
      id: String; //必填
      left: Number //必填
      top: Number //必填
      render: String|Object; //选填(若为Sring类型需要符合vue的template规则)
      //(若为Object类型需要符合.vue文件编译后的类型，此处即为直接传入.vue文件）
      //其他属性参考官方https://github.com/alibaba/butterfly/blob/master/docs/zh-CN/group.md
    ],
    nodes: [
      id: String; //必填
      render: String|Object; //选填(若为Sring类型需要符合vue的template规则)
      //(若为Object类型需要符合.vue文件编译后的类型，此处即为直接传入.vue文件）
      //其他属性参考官网https://github.com/alibaba/butterfly/blob/master/docs/zh-CN/node.md#node-attr
    ],
    edges: [
      id: String; //必填
      render: String|Object; //选填(若为Sring类型需要符合vue的template规则)
      //(若为Object类型需要符合.vue文件编译后的类型，此处即为直接传入.vue文件）
      //其他属性参考官方https://github.com/alibaba/butterfly/blob/master/docs/zh-CN/edge.md
    ]
  }

canvasData.render渲染方式（两种）

  • 两种类型：String|Object

Object类型（.vue文件）推荐使用

// grid-node.vue
<template>
  <div class="grid-node">
    {{itemData.label}}
  </div>
</template>

<script>

export default {
  name: "grid-node",

  props: {
    // 这里可以拿到mockdata里的当前节点的数据
    itemData: {
      type: Object,
    },
    // 原生的节点数据（不推荐使用这个）
    canvasNode: {
      type: Object
    }
  },
  methods: {
  },
  created() {

  }
};
</script>

<style scoped>
  .grid-node {
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
    border: 1px solid #aaa;
    color: #FFF;
    background-color: #F66902;
  }

</style>
// component.js

<template>
  <div id="app">
    <butterfly-vue
      :canvasData="graphData"
    />
  </div>
</template>

<script>
import {ButterflyVue} from 'butterfly-vue';

import gridNode from './node/drag-node.vue';

export default {
  name: 'App',
  components: {
    ButterflyVue
  },
  data(){
    return{
      graphData: {
        groups: [],
        nodes: [
          {
            id: '0',
            left: 10,
            top: 10,
            label: '0',
            render: gridNode,
          }
        ],
        edges: [],
      },
    }
  },
}
</script>

String类型（template）

// component.js

<template>
  <div id="app">
    <butterfly-vue
      :canvasData="graphData"
    />
  </div>
</template>

<script>
import {ButterflyVue} from 'butterfly-vue';

export default {
  name: 'App',
  components: {
    ButterflyVue
  },
  data(){
    return{
      graphData: {
        groups: [],
        nodes: [
          {
            id: '0',
            left: 10,
            top: 10,
            render: `<div>测试节点0</div>`,
          }
        ],
        edges: [],
      },
    }
  },
}
</script>
  • 因为String类型使用了运行时编译，所以需要启用以下配置
//vue.config.js

module.exports = {
  runtimeCompiler: true
}

方法

方法名 说明 参数
redraw 重新绘制画布 - 
<template>
  <div>
    <button @click="redraw">重绘画布</button>
    <butterfly-vue
      ref="butterflyVue"
    />
  </div>
</template>

<script>
import {ButterflyVue} from 'butterfly-vue';

export default {
  name: 'Drag',
  components: {
    ButterflyVue,
  },
  methods:{
    redraw() {
      this.$refs.butterflyVue.redraw();
    },
  }
}
</script>

自定义锚点使用

// endpoint-node.vue
<template>
  <div class="endpoint-node">
    <butterfly-vue-endpoint id="1" :param="{scope:'endpoint-1', limitNum: 2}"/>
    <butterfly-vue-endpoint id="2" className="endpoint-2">
      content
    </butterfly-vue-endpoint>
  </div>
</template>

<script>

import {ButterflyVueEndpoint} from 'butterfly-vue';

export default {
  name: "endpoint-node",
  components: {
    ButterflyVueEndpoint
  },
};
</script>

<style scoped>
  .endpoint-node {
    width: 200px;
    height: 100px;
    border-radius: 5px;
    border: 1px solid #aaa;
    padding: 10px;
    box-shadow: 3px 4px 16px #888888;
  }

  .endpoint-node .endpoint-2 {
    position: absolute;
    bottom: 10px;
    right: 10px;
  }
</style>
// component.vue
<template>
  <div>
    <butterfly-vue :canvasData="graphData" />
  </div>
</template>

<script>
import {ButterflyVue} from 'butterfly-vue';
import 'butterfly-vue/dist/index.css';

import endpointNode from "./endpoint-node.vue";

export default {
  name: 'User-Endpoint',
  components: {
    ButterflyVue,
  },
  data(){
    return{
      graphData: {
        groups: [],
        nodes: [
          {
            id: '0',
            left: 10,
            top: 10,
            render: endpointNode,
          }
        ],
        edges: [],
      },
    }
  },
}
</script>
Prop 类型 说明 默认值 required
id String 自定义endpoint的唯一标示 true
className String 自定义endpoint的样式 vue-bf-endpoint-default false
param Object endponit的其他参数 false

param属性参考地址