Question

im trying to figure out how to style a link when connecting two elements using drag and drop between ports.

I understand that you can style a link using the link.attr like this:

link.attr({
line: { // selector for the visible <path> SVGElement
    stroke: 'orange' // SVG attribute and value
}

});

given that you manually create the link and add it to the graph. However the only option I found styling a magnet link is when creating the paper like this:

initializeScene(domNode) {
this.paper = new joint.dia.Paper({
  el: domNode,
  model: this.graph,
  width: "100%",
  height: "100%",
  gridSize: 1,
  //define the style of magnet links
  defaultLink: new joint.shapes.standard.Link({
    attrs: {
      line: {
        stroke: "#4e4e4e"
      }
    }
  })
});

Is there a way of individually style the links from a magnet. For example if I want a link created from port A to be blue and link created from port B to be red?

Answer 1

joint.dia.Paper的defaultLink选项也可以是一个函数，而不是普通对象。该函数具有函数形式（cellView，magnet）。这样，您可以为用户“拖动”磁铁以创建新链接时动态定义默认链接。例如：

this.paper = new joint.dia.Paper({
  el: domNode,
  model: this.graph,
  width: "100%",
  height: "100%",
  gridSize: 1,
  //define the style of magnet links
  defaultLink: function(cellView, magnet) {
    return new joint.shapes.standard.Link({
        attrs: {
          line: {
            stroke: V(magnet).attr('port-group') === "blue-ports" ? "blue" : "red"
          }
        }
    }
  })
});

到defaultLink选项的文档在这里：https://resources.jointjs.com/docs/jointjs/v2.2/joint.html#dia.Paper.prototype.options.defaultLink

How to style a link created from a magnet port?

1 个答案: