jsPlumb How to set dashed line?

Question

Using jsPlumb needs to implement a function similar to a flow chart. It can save and restore the flow chart. Dragging a node can connect two points. However, after the connection is successful, you need to set the connection type, solid line or dotted line.

JS codesandbox demo

Answer 1

I found the answer, first register the "dashed line type", and then set it through the link object.

1 step：

instance.registerConnectionType("dashConnection", {
  paintStyle: {
    strokeWidth: 1,
    stroke: "green",
    joinstyle: "round",
    // outlineStroke: "white",
    // outlineWidth: 2,
    dashstyle: "2 4",
  },
  hoverPaintStyle: {
    stroke: "green",
    lineWidth: 1,
  },
});

2 step：

let connection = instance.connect();
connection.setType('dashConnection')