七、使用jsPlumb实现流程图功能--Connection事件和拦截器

在一个交互式的流程图配置中，连线可能是最高频的操作。jsPlumb也提供了相对应的事件和拦截器可以让开发人员做一些符合需求的功能。

一、Connection事件

Connection事件是在行为发生之后的一个通知，Connection常用的一些事件有：

• EVENT_CONNECTION：连线创建之后触发的事件。
• EVENT_CONNECTION_CLICK：单击线条会触发的事件。
• EVENT_CONNECTION_DBL_CLICK：双击线条会触发的事件。
• EVENT_CONNECTION_DETACHED：线条与锚点脱离后触发的事件。
• EVENT_CONNECTION_MOVED：线条移动触发的事件。
• EVENT_CONNECTION_MOUSEOVER：鼠标在线条内移动时触发的事件。
• EVENT_CONNECTION_MOUSEOUT：鼠标离开线条时触发的事件。
  绑定事件可以通过全局绑定，或者通过一个Connection实例绑定在某一条连线上：

import {
    newInstance,
    BrowserJsPlumbInstance,
    EVENT_CONNECTION,
    EVENT_CONNECTION_CLICK,
    Connection,
} from '@jsplumb/browser-ui';

onMounted(() => {
    jsPlumb.value = newInstance({
         // 参数省略.....
    });

    jsPlumb.value.bind(EVENT_CONNECTION, (params: ConnectionEstablishedParams) => {
        console.log("EVENT_CONNECTION", params);
    });
    jsPlumb.value.bind(EVENT_CONNECTION_CLICK, (connection: Connection) => {
        console.log("EVENT_CONNECTION_CLICK", connection);
    });
    // ...等等

});

这些事件的含义都很清晰，可以绑定事件后使用console.log打印来确认事件的触发以及参数内容。还有更多的事件，可以参考官方文档中完整的事件列表

如果线条配置了outlineWidth属性，那么需要留意的就是鼠标从outline区域移入线条时，也会触发一次MOUSEOUT事件，从outline区域移到外部时也会触发MOUSEOUT事件

二、Connection拦截器

jsPlumb一共提供了4个Connection拦截器，这4个拦截器都有返回值，返回值严格为Boolean类型。如果返回false，则可以阻止行为的继续进行：

• INTERCEPT_BEFORE_DROP：拖拽连线松开鼠标时会触发。
• INTERCEPT_BEFORE_DETACH：线条与锚点脱离时会触发，无论是通过鼠标拖拽还是通过代码的形式。
• INTERCEPT_BEFORE_START_DETACH：拖拽线条，线条与锚点脱离时会触发。
• INTERCEPT_BEFORE_DRAG：从一个锚点开始拖拽连线时会触发

官方文档中的一些拦截器的常量名以及参数对象名的文案目前是错误的，不知道后续会不会修改

拦截器中就可以在行为完成之前执行一些业务逻辑，例如INTERCEPT_BEFORE_DROP拦截器中，可以判断是否满足某些条件或某种规则，如果不满足可以返回false从而使这次连线失败。

import {
    newInstance,
    BrowserJsPlumbInstance,
    Connection,
    BeforeDropParams,
    BeforeDragParams,
    BeforeStartConnectionDetachParams,
    INTERCEPT_BEFORE_START_DETACH,
    INTERCEPT_BEFORE_DRAG,
    INTERCEPT_BEFORE_DETACH,
    INTERCEPT_BEFORE_DROP,
    BeforeDragParams,
} from '@jsplumb/browser-ui';

    const jsPlumb = newInstance({
         // 参数省略.....
    })

    jsPlumb.value.bind(INTERCEPT_BEFORE_DROP, (params: BeforeDropParams) => {
        console.log('before drop interceptor', params);
    });

    jsPlumb.value.bind(INTERCEPT_BEFORE_DETACH, (params: Connection) => {
        console.log('before detach interceptor', params);
    });
    jsPlumb.value.bind(
        INTERCEPT_BEFORE_DRAG,
        (params: BeforeDragParams<Element>) => {
            console.log('before drag interceptor', params);
        }
    );
    jsPlumb.value.bind(
        INTERCEPT_BEFORE_START_DETACH,
        (params: BeforeStartConnectionDetachParams<Element>) => {
            console.log('before start connection detach interceptor', params);
        }
    );

然而这里比较难受的就是拦截器的返回值只能是Boolean类型，也就意味着如果想在拦截器中使用axios的话或其他异步操作的话就很难。

三、总结

这次的代码仅仅只是演示了如何去使用事件与拦截器，而且事件与拦截器的含义清晰，也就没有写示例代码去演示效果。jsPlumb除了Connection的事件，其他元素也有相应的事件，实际使用的不多因此就没有说明，这方面内容可以看官方文档。
到目前为止jsPlumb的大部份的用法都已经介绍完毕，接下来计划用最后一篇文章讲述如何实现简单的流程图配置。