三、jsPlumb实现流程图配置–Endpoint详细参数

一、前言

基于上一篇文章中已经搭建好的jsPlumb项目，在此篇文章中演示Endpoint的一些参数以及参数的效果。

二、Endpoint创建

在一个节点上创建Endpoint有三种方式：

  // 方式一：直接使用字符串指定类型。注意：大小写敏感

  // 圆点形
  const endpoint1 = jsPlumb.value.addEndpoint(node1.value, {
    endpoint: 'Dot'
  });
  // 矩形
  const endpoint2 = jsPlumb.value.addEndpoint(node2.value, {
    endpoint: 'Rectangle'
  });
  // 空白
  const endpoint3 = jsPlumb.value.addEndpoint(node3.value, {
    endpoint: 'Blank'
  });

  // 方式二：使用官方定义好的类型DotEndpoint.type、RectangleEndpoint.type、BlankEndpoint.type
  // 圆点形
  const endpoint1 = jsPlumb.value.addEndpoint(node1.value, {
    endpoint: DotEndpoint.type,
  });
  // 矩形
  const endpoint2 = jsPlumb.value.addEndpoint(node2.value, {
    endpoint: RectangleEndpoint.type,
  });
  // 空白
  const endpoint3 = jsPlumb.value.addEndpoint(node3.value, {
    endpoint: BlankEndpoint.type,
  });

  // 方式三：使用一个对像，实现更多细节的配置
  const endpoint3 = jsPlumb.value.addEndpoint(node3.value, {
    endpoint: {
      type: 'Dot',
      options: {}
    }
  });

前两种方式都只能简单的创建一个指定类型的Endpoint，因此着重演示第三种方式中，都有哪些参数可以配置。

三、Endpoint配置

endpoint的配置参数都在options属性中，如代码所示进行控制Endpoint的大小：

const endpoint4 = jsPlumb.value.addEndpoint(node4.value, {
    endpoint: {
      type: 'Dot',
      options: {
        radius: 3,
      },
    },
  });
  const endpoint5 = jsPlumb.value.addEndpoint(node5.value, {
    endpoint: {
      type: 'Dot',
      options: {
        radius: 10,
      },
    },
  });
  const endpoint6 = jsPlumb.value.addEndpoint(node6.value, {
    endpoint: {
      type: 'Rectangle',
      options: {
        width: 20,
        height: 10,
      },
    },
  });

Dot类型的Endpoint使用radius参数来控制大小；Rectangle类型使用width和height来控制大小。
根据官方文档所写，Endpoint还有cssClass和hoverClass属性可以用来调整样式，试一试配置cssClass和hoverClass看看效果：

const endpoint7 = jsPlumb.value.addEndpoint(node7.value, {
    endpoint: {
      type: 'Dot',
      options: {
        radius: 10,
        cssClass: 'endpoint-css',
      },
    },
  });
  const endpoint8 = jsPlumb.value.addEndpoint(node8.value, {
    endpoint: {
      type: 'Rectangle',
      options: {
        width: 20,
        height: 10,
        cssClass: 'endpoint-css',
      },
    },
  });

  // 不会触发hover
  const endpoint9 = jsPlumb.value.addEndpoint(node9.value, {
    endpoint: {
      type: 'Dot',
      options: {
        radius: 12,
        hoverClass: 'endpoint-css',
      },
    },
  });

.endpoint-css {
  background-color: red;
  border: 2px solid blue;
}

从效果可以看到，配置cssClass无法改变Endpoint的颜色以及边框。原因是界面上所能看到的Endpoint形状，实际是由svg所实现，我们配置的cssClass实际上是被添加到了svg元素上，而SVG绘制的图形的样式也不是通过style来控制的，实际控制它们的属性参考svg文档；
属性hoverClass不管鼠标怎么移动，放到哪里都没有触发过所配置的class，不知道是文档问题还是我的使用问题。

虽然配置cssClass不能进行Endpoint的颜色、边框等样式的调整，但是可以用margin或padding来调整位置，比如Endpoint有一半遮住了节点，导致节点内的文案会看不清，想要Endpoint往外挪一点：

  const endpoint10 = jsPlumb.value.addEndpoint(node10.value, {
    endpoint: {
      type: 'Dot',
      options: {
        radius: 10,
        cssClass: 'endpoint-margin',
      },
    },
  });

.endpoint-margin {
  margin-top: 10px;
}

这样整个Endpoint就在节点外面了，还可以试试设置padding从而得到一个半圆的Endpoint。那么想要设置Endpoint的颜色等样式该如何设置呢？
方式一：局部设置
由于svg绘制的图形不能通过style设置样式，那么就使用svg图形控制样式的属性进行设置颜色等样式，例如fill、stroke等属性，这种方式还是需要先设置好cssClass：

const endpoint11 = jsPlumb.value.addEndpoint(node11.value, {
    endpoint: {
      type: 'Dot',
      options: {
        radius: 6,
        cssClass: 'real-css',
      },
    },
  });

svg.real-css circle{
  fill: red;
  stroke: blue;
  stroke-width: 2px;
}

这样就可以对real-css类下的Dot类型的Endpoint进行颜色、边框等的设置。当然如果css编写时去掉类的限制就可以实现全局设置，也就是第二种方式。
另外还可以实现不需要编写css就可以实现Endpoint的样式设置的方式，就是使用paintStyle参数：

  const endpoint12 = jsPlumb.value.addEndpoint(node12.value, {
    endpoint: {
      type: 'Dot',
      options: {
        radius: 6,
      },
    },
    paintStyle: {
      fill: 'red',
      stroke: 'blue',
      strokeWidth: 2,
      dashstyle: '2',
      // dashstyle: '2 4'
    },
  });

补充说明，paintStyle中的dashstyle是用于设置边框虚线的。如果dashstyle中只设置一个值，那就是虚线的长度；如果设置两个值，那第二个值就是虚线与虚线之间的间隔距离。

方式二：全局设置

svg circle, svg rect {
  fill: red;
  stroke: blue;
  stroke-width: 2px;
}

这样就可以完成全局的设置，但是如果你的项目中存在其他的svg图形，就可能产生一些干扰。jsPlumb还提供了一种全局设置的方式：在jsPlumb实例化的时候，设置Endpoint的全局参数：

  jsPlumb.value = newInstance({
    container: canvas.value,
    endpointStyle: {
      fill: 'red',
    },
  });

四、总结

这样就介绍完了对Endpoint的大小、颜色、位置等一些样式的设置，就可以根据实际情况进行调整。至于svg图形的样式属性，每个属性实际的效果，就可以查询svg的文档学习了解。此篇文章中的完整项目代码地址。