jsplumb在vue-cli项目中实现关系指向_jsplumb 表关联关系

1.在项目中引入jsplumb

先附上中文官网网址：https://wdd.js.org/jsplumb-chinese-tutorial/#/
下载包：npm install jsplumb --save
引入：在mian.js中加入：

import jsPlumb from 'jsplumb'
Vue.prototype.$jsPlumb = jsPlumb.jsPlum
1
2

一个小栗子测试有没有成功：

<template>
  <div>
    <div id="container">
      <div class="col1">
        <div v-for="item in list1" :id="item.nodeId" name="cell">{{item.name}}</div>
      </div>
      <div class="col2">
        <div v-for="item in list2" :id="item.nodeId" name="cell">{{item.name}}</div>
      </div>
    </div>
  </div>
</template>
<script>
    export default {
        data(){
            return {
                jsPlumb: null,
                list1:[{name:'Z',nodeId:'x'},{name:'W',nodeId:'y'},{name:'K',nodeId:'z'}],
                list2:[{name:'k',nodeId:'c'}],
                connlist:[{sourceNodeId:'x',targetNodeId:'c'},{sourceNodeId:'y',targetNodeId:'c'},{sourceNodeId:'z',targetNodeId:'c'}]
            }
        },
        created() {
            this.jsPlumb = this.$jsPlumb.getInstance({
                Container:"container",   //选择器id
                EndpointStyle: { radius: 4, fill: "#acd",shape:'circle'},  //端点样式
                PaintStyle: { stroke: '#dbdd9d',strokeWidth:4},// 绘画样式，默认8px线宽  #456
                HoverPaintStyle: { stroke: '#dbdd9d' }, // 默认悬停样式  默认为null
                EndpointHoverStyle: { fill: '#ffe9d1', radius:6 }, // 端点悬停样式
                ConnectionOverlays:[
                    ["Arrow",{
                        location:1,
                        paintStyle: {
                            stroke: '#00688B',
                            fill: '#00688B',
                        }
                    }]
                ],
                Connector:["StateMachine",{gap:1}],     //要使用的默认连接器的类型：折线，流程等
                DrapOptions:{cursor:"crosshair",zIndex:2000}

            });
        },
        mounted() {
            let ins = this.jsPlumb,
                allConnection = ins.getAllConnections();
            ins.batch(() => {
                this.initAll();
                this.connectionAll();
            });
            this.switchContainer(true,true,false);
            // this.jsPlumb.draggable("container");  元素可拖动   为id
        },
        methods:{
            initAll () {
                let rl = this.list1;
                for (let i = 0; i < rl.length; i++) {
                    this.init(rl[i].nodeId)
                }
                let rl2 = this.list2;
                for (let i = 0; i < rl2.length; i++) {
                    this.init(rl2[i].nodeId)
                }
            },
            // 初始化规则使其可以连线、拖拽
            init (id) {
                let ins = this.jsPlumb,
                    elem = document.getElementById(id);
                ins.makeSource(elem,{
                    anchor: ["Top", {anchorCount:200, shape:"Rectangle"}],
                    allowLoopback: false,
                    maxConnections: 1
                });
                ins.makeTarget(elem,{
                    anchor: ["Top", {anchorCount:200, shape:"Rectangle"}],
                    allowLoopback: false,
                    maxConnections: 1
                });
                ins.draggable(elem,{
                    containment: true
                });
            },
            connectionAll () {
                let ins = this.jsPlumb;
                ins.ready(() => {
                    for (let i = 0; i < this.connlist.length; i++) {
                        let conn = this.connlist[i],
                            connection = ins.connect({
                                source:conn.sourceNodeId,
                                target:conn.targetNodeId
                            });
                        connection.setPaintStyle({stroke:"#9f9b9c",strokeWidth:4})
                    }
                })
            },
            switchContainer (target,source,draggable) {
                let elem = document.getElementsByName("cell"),
                    ins = this.jsPlumb;
                ins.setSourceEnabled(elem,source);
                ins.setTargetEnabled(elem,target);
                ins.setDraggable(elem,draggable);
            },
        }
    }
</script>

<style>
  #container{
    margin: 50px;
    position: relative;
    background: #efefef;
    width: 400px;
    height: 400px;
  }
  .col2,.col1{
    float: left;
  }
  .col1{
    margin-left: 40px;
  }
  .col2{
    margin-left: 150px;
  }
  #container>div>div{
    width: 100px;
    height: 40px;
    line-height: 40px;
    background: lightcyan;
    margin-top: 40px;
  }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132

关系指向图

1. 了解默认值

Anchor : “BottomCenter”,//端点的定位点的位置声明（锚点）：left，top，bottom等
Anchors : [ null, null ],//多个锚点的位置声明
ConnectionsDetachable : true,//连接是否可以使用鼠标默认分离
ConnectionOverlays : [],//附加到每个连接的默认重叠
Connector : “Bezier”,//要使用的默认连接器的类型：折线，流程等
Container : null,//设置父级的元素，一个容器
DoNotThrowErrors : false,//如果请求不存在的Anchor，Endpoint或Connector，是否会抛出
DragOptions : { },//用于配置拖拽元素的参数
DropOptions : { },//用于配置元素的drop行为的参数
Endpoint : “Dot”,//端点（锚点）的样式声明（Dot）
Endpoints : [ null, null ],//多个端点的样式声明（Dot）
EndpointOverlays : [ ],//端点的重叠
EndpointStyle : { fill : “#456” },//端点的css样式声明
EndpointStyles : [ null, null ],//同上
EndpointHoverStyle : null,//鼠标经过样式
EndpointHoverStyles : [ null, null ],//同上
HoverPaintStyle : null,//鼠标经过线的样式
LabelStyle : { color : “black” },／／标签的默认样式。
LogEnabled : false,//是否打开jsPlumb的内部日志记录
Overlays : [ ],//重叠
MaxConnections : 1,//最大连接数
PaintStyle : { lineWidth : 8, stroke : “#456” },//连线样式
ReattachConnections : false,//是否重新连接使用鼠标分离的线
RenderMode : “svg”,//默认渲染模式
Scope : “jsPlumb_DefaultScope”//范围，标识

2. 节点、连接、锚点的style设置。
   a.节点：
   （其实这是个表）
   参数 | 参数类型 | 是否必须 | 说明
   source | String,Object,Endpoint | 是 | 连线源的标识，可以是id, element, 或者Endpoint
   target | String,Object,Endpoint | 是 | 连线目标的标识，可以是id, element, 或者Endpoint
   endpoint | String | 可选 | 端点类型，形状

   b.连接：jsplumb的直线分为四种
   
   Bezier: 贝塞尔曲线
   
   Flowchart: 具有90度转折点的流程线

   :
   StateMachine状态机
   
   Straight: 直线

   Lable标签

   设置线上值的时候需要用到

 connection.setLabel("测试");//connection为创建边时调用connect方法的返回值
1

c.锚点
anchor可以去设置锚点的位置。

锚点又分为静态锚、动态锚、周边锚、连续锚四类。 静态锚写法： 9个单词
(Top,Left,Right,Center,Perimeter之类)

或者[x, y, dx, dy] 写法 x,y为锚点位置 取值为0到1 ，dx,dy为锚点连线方向，取值为0,1,-1就像这样写

anchor:“Bottom” 动态锚

指多个锚，每次自动选择最佳的锚点

anchor: [ [ 0.2, 0, 0, -1 ], [ 1, 0.2, 1, 0 ], “Top”, “Bottom” ] 周长锚

动态锚的一种形式，锚点在周长上变化，自动取最近的

6种形状 Circle Ellipse Triangle Diamond Rectangle Square

anchor:[ “Perimeter”, { shape:“Circle”,anchorCount:150 } ]
Perimeter为周长的意思，后面大括号里周长锚属性，shape为形状，anchorCount为周长锚的数量，值越大锚点越多越平滑

(未完待续！！！)