jsPlumb -岩石教程

jsPlumb 使用场景

jsPlumb 是一个用于创建交互式可视化连接图的 JavaScript 库，特别适合以下场景：

工作流系统：
- 可以用来展示任务之间的关系，显示复杂的流程和节点。
- 例如：BPMN 工作流设计器、审批流管理。
可视化编排工具：
- 用于绘制网络拓扑、服务编排等系统。
- 例如：云服务管理中的资源关联图。
流程图设计：
- 适合用于可视化的流程图绘制，展示各个步骤之间的连接关系。
- 例如：绘制思维导图、流程图等。
拖放式用户界面（UI）设计器：
- 允许用户在页面上拖拽组件，并将其互相连接，形成图形化界面。
- 例如：UI 原型工具、可视化编程工具。
表单生成器和字段映射：
- 可以用于创建动态表单生成器，通过连接不同的字段，实现字段映射或数据转换的图形化工具。
- 例如：表单生成工具、数据转换工具。

主要功能

连接两个或多个元素：
- 支持多种样式的连接线，如直线、贝塞尔曲线、折线等，并且可以根据需求定制连接线样式。
支持多种锚点和端点样式：
- 可以自定义锚点（连接点）的位置和形状，如圆形、矩形等，可以定义连接从元素的上下左右进行。
动态拖动和交互：
- 支持拖动元素，连接线会随着元素的位置变化而动态更新。
连接线覆盖物：
- 可以在连接线上添加覆盖物，如箭头、标签等，增强可视化展示。
事件处理：
- 支持多种交互事件，比如点击连接线、双击删除连接线、鼠标悬停等。你可以在这些事件中实现自定义逻辑。
分组和容器支持：
- 支持将多个元素放入容器或分组，方便组织和管理元素。
丰富的插件支持：
- 提供插件支持，例如拖放功能、缩放功能等，帮助扩展库的功能。

使用实例

以下是一个具体的 jsPlumb 使用示例，展示如何实现简单的节点连接功能，用户可以拖动节点，并且节点之间保持连接。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jsPlumb Example</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/2.15.6/js/jsplumb.min.js"></script>
  <style>
    .window {
      width: 100px;
      height: 100px;
      border: 1px solid black;
      text-align: center;
      line-height: 100px;
      position: absolute;
    }
    #window1 { left: 100px; top: 100px; }
    #window2 { left: 300px; top: 300px; }
  </style>
</head>
<body>

<div id="window1" class="window">Node 1</div>
<div id="window2" class="window">Node 2</div>

<script>
  jsPlumb.ready(function() {
    const instance = jsPlumb.getInstance({
      Connector: ["Straight"], // 设置连接线为直线
      PaintStyle: { strokeWidth: 2, stroke: "#000" }, // 设置连接线样式
      Endpoint: ["Dot", { radius: 5 }], // 设置连接点为圆形
      EndpointStyle: { fill: "#567" }, // 设置端点样式
      Anchors: ["Right", "Left"], // 设置连接点在右边和左边
    });

    // 定义可以拖动的节点
    instance.draggable("window1");
    instance.draggable("window2");

    // 连接两个元素
    instance.connect({
      source: "window1",  // 源节点
      target: "window2",  // 目标节点
      overlays: [
        ["Arrow", { width: 10, length: 10, location: 1 }], // 在连接线的末端添加箭头
      ]
    });

    // 添加事件监听，点击连接线时弹出提示
    instance.bind("click", function(conn) {
      alert("Clicked on connection from " + conn.sourceId + " to " + conn.targetId);
    });
  });
</script>

</body>
</html>

示例说明

基本连接：在这个示例中，window1 和 window2 是两个可以拖动的 DOM 元素。通过 instance.connect 方法，我们将它们连接起来。
配置连接线样式：我们使用直线连接，设置了连接线的颜色和粗细，同时在连接线上添加了箭头。
动态交互：用户可以通过拖动节点 window1 和 window2，jsPlumb 会自动更新连接线的位置。
事件绑定：为连接线绑定了点击事件，点击后弹出连接的源节点和目标节点的信息。