美文网首页
拓扑图编辑器-jsplumb事件

拓扑图编辑器-jsplumb事件

作者: 宁小姐的慢时光 | 来源:发表于2019-04-04 10:28 被阅读0次

    jsPlumb支持绑定到Connections,Endpoints和Overlays上的几个不同事件,以及jsPlumb对象本身。

    jsPlumb事件

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

    jsPlumb.bind("connection", function(info) {
       .. update your model in here, maybe.
    });
    

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

    connection(info, originalEvent)- 通知连接建立

    info具有的属性:

    • connection: 新连接,可以注册监听
    • sourceId: 连接的源元素id
    • targetId: 连接的目标元素id
    • source: 连接的源元素
    • target: 连接的目标元素
    • sourceEndpoint: 连接的源端点
    • targetEndpoint: 连接的目标端点

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

    connectionDetached(info,originalEvent)- 通知连接断开

    info具有的属性:

    • connection: 已分离的连接
    • sourceId: 分离之前连接的源元素id
    • targetId: 分离之前连接的目标元素id
    • source: 分离之前连接的源元素
    • target: 分离之前连接的目标元素
    • sourceEndpoint: 分离之前连接的源端点
    • targetEndpoint: 分离之前连接的目标端点

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

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

    connectionMoved(info,originalEvent)- 通知已将现有连接的源或目标端点拖动到某个新位置

    info具有的属性:

    • index: 源端点为0,目标端点为1
    • originalSourceId: 移动前连接的源元素id
    • newSourceId: 移动后连接的源元素id
    • originalTargetId: 移动前连接的目标元素id
    • newTargetId: 移动后连接的目标元素id
    • originalSourceEndpoint: 移动前的源端点
    • newSourceEndpoint: 移动后的源端点
    • originalTargetEndpoint: 移动前的目标端点
    • newTargetEndpoint: 移动后的目标端点
    connectionAborted(connection,originalEvent)在连接到端点或目标元素之前放弃拖动连接时触发
    connectionDrag(connection)- 正在拖动现有连接

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

    connectionDragStop(connection)- 连接拖动结束
    click(connection, originalEvent)- 单击连接
    dblclick(connection, originalEvent)- 双击连接
    endpointClick(connection, originalEvent)- 单击端点
    endpointDblClick(connection, originalEvent)- 双击端点
    contextmenu(connection, originalEvent)- 右键单击某个给定组件jsPlumb将报告对Connections和Endpoints的右键单击
    beforeDrop(info)- 删除新连接或现有连接时触发此事件

    info具有的属性:

    • index: 源端点为0,目标端点为1
    • sourceId: 连接的源元素id
    • targetId: 连接的目标元素id
    • scope: 连接的范围
    • connection: 实际的Connection对象。可以访问Connection中的“端点”数组,以获取连接中涉及的端点,但注意,在拖动连接时,目标端点将始终是仅在拖动的生命周期内存在的瞬态端点。要获取正在删除的连接端点,请使用dropEndpoint。
    • dropEndpoint: 这是删除连接的实际端点。可能为null,因为如果在已调用makeTarget的元素上删除Connection,则不会设置它
    • targetEndpoint: 分离之前Connection中的目标端点
    beforeDetach(connection)- 断开连接时触发此事件。connection参数为刚断开的Connection。如果此拦截器返回false将会中止连接断开。
    beforeDrag(connection)- 开始拖动新连接时触发此事件。
    • endpoint: 拖动连接的端点
    • source: 端点所属的源
    • sourceId: 端点所属的源ID

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

    jsPlumbInstance.bind("beforeDrag", function(params) {
      return {
       foo:"bar"
      }
    });
    

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

    beforeStartDetach(connection)- 开始拖动现有连接时触发此事件。
    • endpoint: 拖动连接的端点
    • source: 端点所属的源
    • sourceId: 端点所属的源ID
    • connection: 即将被拖动的连接

    返回false,取消拖动。

    连接事件

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

    var connection = jsPlumb.connect({source:"d1", target:"d2"});
    connection.bind("click", function(conn) {
        console.log("you clicked on ", conn);
    });
    

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

    • click(connection, originalEvent) - 单击连接。
    • dblclick(connection, originalEvent) - 双击连接。
    • contextmenu(connection, originalEvent) - 右键单击​​连线。
    • mouseover(connection, originalEvent) - 鼠标放在连线上。
    • mouseout(connection, originalEvent) - 鼠标移出连线。
    • mousedown(connection, originalEvent) - 连接上的鼠标按钮被按下。
    • mouseup(connection, originalEvent) - 连接上的鼠标按钮被释放。
    端点事件

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

    var endpoint = jsPlumb.addEndpoint("d1", { someOptions } );
    endpoint.bind("click", function(endpoint) {
        console.log("you clicked on ", endpoint);
    });
    

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

    • click(endpoint, originalEvent) - 单击端点。
    • dblclick(endpoint, originalEvent) - 双击端点。
    • contextmenu(endpoint, originalEvent) - 右键单击​​端点。
    • mouseover(endpoint, originalEvent) - 鼠标放在端点上。
    • mouseout(endpoint, originalEvent) - 鼠标移出端点。
    • mousedown(endpoint, originalEvent) - 端点上的鼠标按钮被按下。
    • mouseup(endpoint, originalEvent) - 端点上鼠标按钮被释放。
    • maxConnections(info, originalEvent) - 在已具有最大连接数的端点上删除连接。
      info具有的属性:
      • endpoint:删除连线的端点
      • connection:删除的连接
      • maxConnections:端点的maxConnections值
    覆盖事件

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

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

    jsPlumb.connect({
        source:"el1",
        target:"el2",
        overlays:[
          [ "Label", {
            events:{
              click:function(labelOverlay, originalEvent) { 
                console.log("click on label overlay for :" + labelOverlay.component); 
              }
            }
          }],
          [ "Diamond", {
            events:{
              dblclick:function(diamondOverlay, originalEvent) { 
                console.log("double click on diamond overlay for : " + diamondOverlay.component); 
              }
            }
          }]    
        ]
      });
    
    解除绑定事件

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

    //取消绑定事件
    jsPlumb.unbind("click");
    
    或者
    
    //解除所有事件
    var e = jsPlumb.addEndpoint("someDiv");
    e.bind("click", function() { ... });
    e.bind("dblclick", function() { ... });
    
    ...
    
    e.unbind("click");
    

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

    相关文章

      网友评论

          本文标题:拓扑图编辑器-jsplumb事件

          本文链接:https://www.haomeiwen.com/subject/zdlzbqtx.html