jsplumb学习

流程图

字数统计: 1.7k阅读时长: 8 min

 2020/10/16   Share

jsplumb 基础学习

基本概念

source 源节点
Tatget 目标节点
Anchor 锚点 锚点位于源节点或者目标节点上
Endpoint 端点 端点位于连线上
Connector 连接 连接线
Overlays

Anchors

锚点类型：

静态锚点
动态锚点
边缘锚点
固定锚点

Connnetors

连线类型:

Bezier 贝塞尔曲线
Straight 直线
Flowchart 90度转角线
State Machine 状态机

基础实例

连接两个节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="diagramContainer">
    <div id="item_left" class="item"></div>
    <div id="item_right" class="item" style="margin-left:50px;"></div>
</div>
<script src="https://cdn.bootcss.com/jsPlumb/2.6.8/js/jsplumb.min.js"></script>
<script>
    /* global jsPlumb */
    jsPlumb.ready(function () {
        jsPlumb.connect({
            source: 'item_left',
            target: 'item_right',
            endpoint: 'Dot'
        })
    })
</script>

<style>
    .item {
        height: 80px;
        width: 80px;
        border: 1px solid blue;
        float: left;
    }

    #diagramContainer {
        padding: 20px;
        width: 80%;
        height: 200px;
        border: 1px solid gray;
    }
</style>
</body>
</html>

参数	参数类型	是否必须	说明
source	String,Object,Endpoint	是	连线源的标识，可以是id, element, 或者Endpoint
target	String,Object,Endpoint	是	连线目标的标识，可以是id, element, 或者Endpoint
endpoint	String	可选	端点类型，形状

可拖动节点

使用draggable可以让节点被拖动

元素应设置position: absolute;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="diagramContainer">
    <div id="item_left" class="item"></div>
    <div id="item_right" class="item" style="margin-left:50px;"></div>
</div>
<script src="https://cdn.bootcss.com/jsPlumb/2.6.8/js/jsplumb.min.js"></script>
<script>
    /* global jsPlumb */
    jsPlumb.ready(function () {
        jsPlumb.connect({
            source: 'item_left',
            target: 'item_right',
            endpoint: 'Rectangle'
        })
        jsPlumb.draggable(['item_left', 'item_right'])
    })
</script>

<style>
    .item {
        position: absolute;
        height: 80px;
        width: 80px;
        border: 1px solid blue;
        left: 489px;
        top: 139px;
    }

    #diagramContainer {
        padding: 20px;
        width: 80%;
        height: 400px;
        border: 1px solid gray;
    }
</style>
</body>
</html>

connect 的其他参数

可以通过connector去设置连接线的形状，如直线或者曲线之类的。anchor可以去设置锚点的位置。

Bezier 贝塞尔曲线
Straight 直线
Flowchart 90度转角线
State Machine 状态机

<div id="diagramContainer">
    <div id="item_left" class="item"></div>
    <div id="item_right" class="item" style="left:150px;"></div>
  </div>
  <script src="https://cdn.bootcss.com/jsPlumb/2.6.8/js/jsplumb.min.js"></script>

  <script>
    /* global jsPlumb */
    jsPlumb.ready(function () {
      jsPlumb.connect({
        source: 'item_left',
        target: 'item_right',
        endpoint: 'Rectangle',
        connector: ['Bezier'],
        anchor: ['Left', 'Right']
      })

      jsPlumb.draggable('item_left')
      jsPlumb.draggable('item_right')
    })
  </script>

connect 默认值

很多连线都是相同设置的情况下，可以将配置抽离出来，作为一个单独的变量，作为connect的第二个参数传入。实际上connect的第二个参数会和第一个参数merge，作为一个整体。

<script>
    /* global jsPlumb */
    const common = {
        endpoint: 'Rectangle',
        connector: ['StateMachine'],
        anchor: ['Left', 'Right']
    }
    jsPlumb.ready(function () {
        jsPlumb.connect({
            source: 'item_left',
            target: 'item_right'
        }, common)
        jsPlumb.draggable(['item_left', 'item_right'])
    })
</script>

给 connect 加上样式

jsPlumb.connect({
  source: 'item_left',
  target: 'item_right',
  paintStyle: { stroke: 'lightgray', strokeWidth: 3 },
  endpointStyle: { fill: 'lightgray', outlineStroke: 'darkgray', outlineWidth: 2 }
}, common)

给 connect 加上箭头

箭头实际上是通过设置overlays去设置的，可以设置箭头的长宽以及箭头的位置，location 0.5表示箭头位于中间，location 1表示箭头设置在连线末端。一根连线是可以添加多个箭头的。

overlays也是一个比较重要的概念，overlays可以理解为遮罩层。遮罩层不仅仅可以设置箭头，也可以设置其他内容。

Arrow 一个可配置的箭头
Label 标签, 可以在连接上显示文件信息
PlainArrow 原始类型的标签
Diamond 菱形箭头
Custom 自定义类型

Arrow

jsPlumb.connect({
  source: 'item_left',
  target: 'item_right',
  paintStyle: { stroke: 'lightgray', strokeWidth: 3 },
  endpointStyle: { fill: 'lightgray', outlineStroke: 'darkgray', outlineWidth: 2 },
  overlays: [ ['Arrow', { width: 12, length: 12, location: 0.5 }] ]
}, common)

Label

jsPlumb.ready(function () {
       jsPlumb.connect({
           source: 'item_left',
           target: 'item_right',
           paintStyle: {stroke: 'lightgray', strokeWidth: 3},
           endpointStyle: {fill: 'lightgray', outlineStroke: 'darkgray', outlineWidth: 2},
           overlays: [ ['Label', { label:"FOO", id:"label"}] ]
       }, common)
       jsPlumb.draggable(['item_left', 'item_right'])
   })

增加端点

addEndpoint 方法可以用来增加端点

<script>
    /* global jsPlumb */
    const common = {
        endpoint: 'Rectangle',
        connector: ['StateMachine'],
        anchor: ['Left', 'Right']
    }
    jsPlumb.ready(function () {
        jsPlumb.connect({
            source: 'item_left',
            target: 'item_right',
            paintStyle: {stroke: 'lightgray', strokeWidth: 3},
            endpointStyle: {fill: 'lightgray', outlineStroke: 'darkgray', outlineWidth: 2},
            overlays: [ ['Arrow', { width: 12, length: 12, location: 0.5 }] ]
        }, common)
        jsPlumb.draggable(['item_left', 'item_right'])
        jsPlumb.addEndpoint('item_left', {
        anchors: ['Left']
      })
        jsPlumb.addEndpoint('item_right', {
        anchors: ['Right']
      })
    })
</script>

拖动创建连接

如果你将isSource和isTarget设置成true，那么可以用户在拖动时，自动创建连接。

<script>
    /* global jsPlumb */
    const common = {
        endpoint: 'Rectangle',
        connector: ['StateMachine'],
        anchor: ['Left', 'Right'],
    }

    const endpoint = {
        isSource: true,
        isTarget: true,
        endpoint: 'Rectangle',
        connector: ['StateMachine'],
    }
    jsPlumb.ready(function () {
        jsPlumb.connect({
            source: 'item_left',
            target: 'item_right',
            paintStyle: {stroke: 'lightgray', strokeWidth: 3},
            endpointStyle: {fill: 'lightgray', outlineStroke: 'darkgray', outlineWidth: 2},
            overlays: [ ['Arrow', { width: 12, length: 12, location: 0.5 }] ]
        }, common)
        jsPlumb.draggable(['item_left', 'item_right'])

        // 添加端点
        jsPlumb.addEndpoint('item_left', {
        anchors: ['Left']
      }, endpoint)
        jsPlumb.addEndpoint('item_right', {
        anchors: ['Right']
      }, endpoint)
    })
</script>

一般来说拖动创建的连接，可以再次拖动，让连接断开。如果不想触发这种行为，可以设置。

1
2
3

jsPlumb.importDefaults({
   ConnectionsDetachable: false
 })

如果你需要在连接被拖动建立后，更新数据模型，则需要订阅connection事件, 回调函数的info对象里，有你所需的任何数据。比如说从哪个节点拖动到哪个节点的。

// 订阅连接事件
       jsPlumb.bind("connection", function (info, originalEvent) {
           console.log(info, originalEvent)
       });

限制节点拖动区域

jsPlumb.draggable(['item_left', 'item_right'], {
            // 设置拖动范围,父元素内
            containment: true
        })

给连接添加点击事件: 点击删除连线

// 请单点击一下连接线, 
jsPlumb.bind('click', function (conn, originalEvent) {
  if (window.prompt('确定删除所点击的连接吗？ 输入1确定') === '1') {
    jsPlumb.detach(conn)
  }
})

jsPlumb支持许多事件

jsPlumb Events列表

connection
connectionDetached
connectionMoved
click
dblclick
endpointClick
endpointDblClick
contextmenu
beforeDrop
beforeDetach
zoom
Connection Events
Endpoint Events
Overlay Events
Unbinding Events

删除节点，包括节点相关的连接

// nodeId为节点id, remove方法可以删除节点以及和节点相关的连线
console.log('3 秒后移除左边节点包括它的连线')
setTimeout(function () {
  jsPlumb.remove('item_left')
}, 3000)

通过代码连接endpoint

初始化数据后，给节点加上了endPoint, 如果想编码让endPoint连接上。需要在addEndpoint时，就给该断点加上一个uuid, 然后通过connect()方法，将两个断点连接上。建议使用node-uuid给每个断点都加上唯一的uuid，这样以后连接就方便多了。

// 添加端点
       jsPlumb.addEndpoint('item_left', {
           anchors: ['Left'],
           uuid: 'fromId'
       }, endpoint)
       jsPlumb.addEndpoint('item_right', {
           anchors: ['Right'],
           uuid: 'toId'
       }, endpoint)

       console.log('3 秒后建立连线')
       setTimeout(function () {
           jsPlumb.connect({uuids: ['fromId', 'toId']})
       }, 3000)

参考连接:

原文作者：Momo

原文链接：https://mo.xmomo521.top/2020/10/16/jsplumb学习/

发表日期：October 16th 2020, 10:56:27 am

更新日期：December 21st 2021, 3:32:58 pm

Next Post

js通过变量去调用js对象的属性或者方法
Previous Post

Go语言学习-入门

CATALOG

1. jsplumb 基础学习
1. 1.1. 基本概念
  1. 1.1.1. Anchors
  2. 1.1.2. Connnetors
2. 基础实例

