jsplumb在vue-cli项目中实现关系指向_jsplumb 保障关系-CSDN博客

本文链接：https://blog.csdn.net/Cuimengting/article/details/103293358

1.在项目中引入jsplumb

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

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

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

<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. 了解默认值

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”//范围，标识

节点、连接、锚点的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方法的返回值

加入lable
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为周长锚的数量，值越大锚点越多越平滑

(未完待续！！！)