拓扑图编辑器-jsplumb事件

Posted 2023-05-13

参考技术A jsPlumb支持绑定到Connections，Endpoints和Overlays上的几个不同事件，以及jsPlumb对象本身。

要在jsPlumb本身（或jsPlumb实例）上绑定事件，请使用jsPlumb.bind(event, callback)

可以在jsPlumb类上绑定的事件：

info具有的属性：

originalEvent：建立连接的原始鼠标事件。
注： jsPlumb.connect或者鼠标连线时触发此事件

info具有的属性：

连接到某个节点之前放弃新拖动的Connection时不会触发此事件，可以使用connectionAborted捕获。

originalEvent：断开连接的原始鼠标事件。

info具有的属性：

注：当此事件触发时，连接的目标端点是jsPlumb用于拖动的瞬态元素，随后在建立或中止连接时将从DOM中删除。

info具有的属性：

beforeDrag 与其他拦截器的操作略有不同：从拦截器函数返回false将取消当前拖动，也可以从拦截器返回一个对象，此对象将作为 data 被传进新连接的构造函数中:

如果已定义参数化连接类型，此功能特别有用。使用此机制，可以使用选择的数据填充新拖动的连接。
注: 1.7.6之前的所有jsPlumb版本，新的连接拖动以及拖动现有的连接都会触发beforeDetach。从1.7.6开始，后一种行为已被移至 beforeStartDetach拦截器。

返回false，取消拖动。

绑定到Connection上的事件，还可以使用以下bind方法：

这些是可以绑定到连线事件：

绑定到端点上的事件，使用以下bind方法：

这些是可以绑定到端点的事件：

在Overlay上注册事件侦听器是一个稍微不同的过程 - 将它们作为Overlay构造函数的参数。

以下是在Overlay上注册点击监听器的方法：

在jsPlumb对象以及Connections和Endpoints上，可以使用unbind方法删除监听器。

下一篇：拓扑图编辑器-实现过程

Vue 项目中使用 jsPlumb

jsPlumb 介绍

 

jsPlumb 是一个强大的 JavaScript 连线库，它可以将 html中 的元素用箭头、曲线、直线等连接起来，适用于开发 Web 上的图表、建模工具、流程图、关系图等。

 

jsPlumb 参考网站

 

博客园：http://www.cnblogs.com/leomYili/p/6346526.html?utm_source=itdadao&utm_medium=referral

官网：https://www.jsplumbtoolkit.com/

 

安装 jsPlumb

• vue 项目中安装 jsPlumb 模块

  npm install jsPlumb --save(建议使用cnpm，--save表示将模块写入package.json文件dependencies属性

• main.js 中引入 jsPlumb（全局引入，也可以局部引入）

  import jsPlumb from ‘jsplumb‘
  Vue.prototype.$jsPlumb = jsPlumb.jsPlumb

     经过上述步骤后，可以在所有的vue组件里通过 this.$jsPlumb 引用jsPlump模块

 

使用 jsPlumb

1. 初始化 jsPlumb,DOM初始化之后再调用jsPlumb

   jsPlumb.ready(function() {
       ...       
       // your jsPlumb related init code goes here
       ...
   });
   

   　　

2. 实例化一个jsPlumb实例，并且可以提供一个默认值对象

   var instance = jsPlumb.getInstance({
     PaintStyle:{
       strokeWidth:6,
       stroke:"#567567",
       outlineStroke:"black",
       outlineWidth:1
     },
     Connector:[ "Bezier", { curviness: 30 } ],
     Endpoint:[ "Dot", { radius:5 } ],
     EndpointStyle : { fill: "#567567"  },
     Anchor : [ 0.5, 0.5, 1, 1 ]
   });

3. 然后就尽情使用吧，具体使用方法见参考网站1