Cytoscape.js 使用edgehandles 插件，动态创建节点之间的连线

在 Cytoscape.js 中，使用edgehandles 插件，用于通过拖拽交互创建边（连线）。它允许用户从一个节点拖拽到另一个节点来创建边。以下是 edgehandles 插件的使用方法和详细说明。

安装 edgehandles 插件
首先，确保你已经安装了 edgehandles 插件。如果未安装，可以通过以下方式安装：

使用 npm 安装

javascript 复制代码

bash 
npm install cytoscape-edgehandles

通过 CDN 引入

javascript 复制代码

html 
<script src="https://cdn.jsdelivr.net/npm/cytoscape-edgehandles@3.5.3/cytoscape-edgehandles.min.js"></script>

运行 HTML

注册插件

在使用 edgehandles 插件之前，需要将其注册到 Cytoscape.js 中。

示例代码

javascript 复制代码

javascript 
import cytoscape from 'cytoscape';
import edgehandles from 'cytoscape-edgehandles';

// 注册插件
cytoscape.use(edgehandles);

初始化 edgehandles
在 Cytoscape 实例初始化后，可以通过 cy.edgehandles() 方法启用 edgehandles 插件。

javascript 复制代码

示例代码
javascript 
const cy = cytoscape({
  container: document.getElementById('cy'),
  elements: [
    { data: { id: 'a' } },
    { data: { id: 'b' } },
    { data: { id: 'c' } },
  ],
  style: [
    {
      selector: 'node',
      style: {
        'label': 'data(id)',
        'width': 50,
        'height': 50,
        'background-color': '#666',
      },
    },
    {
      selector: 'edge',
      style: {
        'width': 3,
        'line-color': '#999',
      },
    },
  ],
});

// 初始化 edgehandles
const eh = cy.edgehandles({
  snap: false, // 禁用自动吸附
});

edgehandles 的配置选项
edgehandles 插件支持多种配置选项，以下是一些常用选项：

选项名	类型	默认值	说明
snap	boolean	true	是否启用自动吸附到节点
snapFrequency	number	15	自动吸附的灵敏度（像素）
snapThreshold	number	10	自动吸附的阈值（像素）
handleSize	number	10	拖拽手柄的大小（像素）
handleColor	string	#ff0000	拖拽手柄的颜色
handleLineWidth	number	1	拖拽手柄的线宽（像素）
handleOutlineColor	string	#000000	拖拽手柄的轮廓颜色
handleOutlineWidth	number	1	拖拽手柄的轮廓线宽（像素）
edgeType	string	'flat'	边的类型（'flat' 或 'node'）
loopAllowed	boolean	true	自环边的偏移量（像素）
nodeLoopOffset	number	-50	是否启用自动吸附到节点
edgeParams	function	null	自定义边参数的函数
complete	function	null	拖拽完成时的回调函数
stop	function	null	拖拽停止时的回调函数

启用和禁用 edgehandles
你可以通过以下方法动态启用或禁用 edgehandles：

启用

javascript 复制代码

javascript
eh.enable();

禁用

javascript 复制代码

javascript
eh.disable();

事件回调
edgehandles 插件提供了多个事件回调函数，可以在不同阶段执行自定义逻辑。

示例代码

javascript 复制代码

javascript
const eh = cy.edgehandles({
  snap: false,
  complete: (sourceNode, targetNode, addedEdge) => {
    console.log('连线完成', sourceNode.id(), targetNode.id(), addedEdge.id());
  },
  stop: () => {
    console.log('连线停止');
  },
});

完整示例
以下是一个完整的示例，展示如何使用 edgehandles 插件：

javascript 复制代码

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cytoscape.js Edgehandles 示例</title>
  <style>
    #cy {
      width: 100%;
      height: 100vh;
      border: 1px solid #ccc;
    }
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.23.0/cytoscape.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/cytoscape-edgehandles@3.5.3/cytoscape-edgehandles.min.js"></script>
</head>
<body>
  <div id="cy"></div>
  <script>
    // 注册插件
    cytoscape.use(edgehandles);

    const cy = cytoscape({
      container: document.getElementById('cy'),
      elements: [
        { data: { id: 'a' } },
        { data: { id: 'b' } },
        { data: { id: 'c' } },
      ],
      style: [
        {
          selector: 'node',
          style: {
            'label': 'data(id)',
            'width': 50,
            'height': 50,
            'background-color': '#666',
          },
        },
        {
          selector: 'edge',
          style: {
            'width': 3,
            'line-color': '#999',
          },
        },
      ],
    });

    // 初始化 edgehandles
    const eh = cy.edgehandles({
      snap: false, // 禁用自动吸附
      complete: (sourceNode, targetNode, addedEdge) => {
        console.log('连线完成', sourceNode.id(), targetNode.id(), addedEdge.id());
      },
      stop: () => {
        console.log('连线停止');
      },
    });

    // 启用 edgehandles
    eh.enable();
  </script>
</body>
</html>
运行 HTML

总结
安装插件：通过 npm 或 CDN 引入 edgehandles 插件。

注册插件：使用 cytoscape.use(edgehandles) 注册插件。

初始化插件：通过 cy.edgehandles() 启用插件。

配置选项：根据需求配置 edgehandles 的行为。

事件回调：使用 complete 和 stop 回调函数处理连线完成和停止事件。

通过以上步骤，你可以在 Cytoscape.js 中使用 edgehandles 插件实现拖拽创建连线的功能。

以上就是文章全部内容了，如果喜欢这篇文章的话，还希望三连支持一下，感谢！