[Bug]: Halo plugin uses element root instead of specified magnet as link source, causing misaligned links (especially visible with long port names)

[Tilang]

Current versus expected behaviour

When using the Halo plugin to create a link from a specific magnet (e.g., a named port), the resulting link does not originate from that magnet. Instead, it incorrectly uses the center of the entire element’s root as the source point. This leads to visually broken connections—particularly noticeable when the port has a long name or is positioned far from the element’s center—making the link appear to start from empty space.

Root Cause:

The getLinkEnd function in the Halo plugin returns a selector string (e.g., .port[data-port="very-long-port-name"]). However, LinkView.prototype.findAnchor expects an anchor definition (or an object containing id and magnet), not a raw selector. Because of this mismatch, JointJS falls back to treating the source as { id: 'element-id' } without a magnet, which defaults to the element’s bounding box center.

Steps to reproduce

1.Create an element with a port that has a long name (e.g., "very-long-port-name-for-testing"), styled so the port is visibly offset from the element center.
2.Enable the Halo plugin on the element.
3.Use the Halo handle to drag a new link from that port.
4.Complete the link creation.

Version

4.0.0

What browsers are you seeing the problem on?

Chrome

What operating system are you seeing the problem on?

Windows

[kumilingus]

What is your configuration of the Halo? Do you use the magnet option? Or how do you tell Halo to start the link from a port?

[Tilang]

What is your configuration of the Halo? Do you use the magnet option? Or how do you tell Halo to start the link from a port?

Hi, thanks for looking into this!

Yes, I'm using the magnet option in my Halo configuration. Here's the exact setup:
const halo = new joint.ui.Halo({ cellView: elementView, magnet: (elementView) => elementView.selectors.body, useModelGeometry: true, boxContent: false, handles: [joint.ui.Halo.getDefaultHandle('link')] });
When I start a link from a port, I pass magnet = elementView.findPortNode(portId) to the linking logic. In this case, everything works correctly because inside Halo.prototype.getLinkEnd, it detects the port attribute via findAttribute('port', magnet) and returns a link end in the form { id, port }.

However, when starting a link from the main element body (not a port), findAttribute('port', magnet) returns null, so getLinkEnd falls back to returning { id, selector: '...' }.

The problem arises because LinkView.prototype.findAnchor does not handle the { id, selector } format properly—it expects either { id, magnet } or { id, anchor }. As a result, JointJS ignores the selector and defaults to using the entire element’s bounding box center as the source point, which causes the visual misalignment (especially noticeable with long port labels or offset magnets).

So the core issue is that the Halo plugin emits a selector-based link end for non-port magnets, but the link view infrastructure doesn’t interpret that correctly.

[kumilingus]

Could you please share a complete example with us?

---

If you want the link to start from a port, you set the magnet callback like this.

const halo = new joint.ui.Halo({
  cellView,
  magnet: (elementView) => elementView.findPortNode('my-port-1'),
});

If you want the link to start from a body, then you do:

const halo = new joint.ui.Halo({
  cellView,
  magnet: (elementView) => elementView.findNode('body')
});

So the core issue is that the Halo plugin emits a selector-based link end for non-port magnets, but the link view infrastructure doesn’t interpret that correctly.

We look at the selector propertyhere.

Where exactly it gets misinterpreted?

[Tilang]

You can use the code below to reproduce this bug：

const initHaloDemo = () => {
    const el = document.getElementById("demo");
    const graph = new joint.dia.Graph({}, { cellNamespace: joint.shapes });
    const paper = new joint.dia.Paper({
      width: 800,
      height: 800,
      model: graph,
      cellViewNamespace: joint.shapes
    });
    const paperScroller = new joint.ui.PaperScroller({
      paper,
      scrollWhileDragging: true
    });
    el.appendChild(paperScroller.el);
    paperScroller.render();
    const cell = new joint.dia.Element({
      type: "standard.Rectangle",
      size: {
        width: 100,
        height: 50
      },
      z: 2,
      position: {
        x: 328,
        y: 150
      },
      attrs: {
        body: {
          refHeight: "100%",
          refWidth: "100%",
          fill: "#e6e6e6",
          x: 0.5,
          y: 0.5,
          strokeWidth: 1,
          stroke: "#363636"
        },
        label: {
          text: "TestCell",
          fontSize: 12,
          x: "calc(w/2)",
          y: 0,
          textAnchor: "middle",
          textVerticalAnchor: "bottom",
          textWrap: {
            width: "100%",
            height: 16,
            ellipsis: true
          }
        }
      },
      markup: [
        {
          tagName: "rect",
          selector: "body"
        },
        {
          tagName: "text",
          selector: "label"
        }
      ]
    });
    const port = {
      group: "right",
      size: {
        width: 12,
        height: 12
      },
      attrs: {
        portBody: {
          magnet: true,
          x: 0.5,
          y: 0.5,
          width: "calc(w)",
          height: "calc(h)",
          strokeWidth: 1,
          stroke: "#535354",
          fill: "#F0F0F2"
        },
        arrowLine: {
          x1: "calc(0.2 * w + 0.5)",
          y1: "calc(0.5 * h + 0.5)",
          x2: "calc(0.8 * w + 0.5)",
          y2: "calc(0.5 * h + 0.5)",
          strokeWidth: 1,
          stroke: "#535354",
          pointerEvents: "none"
        },
        arrow: {
          points:
            "calc(0.5 * w + 0.5),calc(0.2 * h + 0.5) calc(0.8 * w + 0.5),calc(0.5 * h + 0.5) calc(0.5 * w + 0.5),calc(0.8 * h + 0.5) ",
          strokeWidth: 1,
          fill: "none",
          stroke: "#535354",
          pointerEvents: "none"
        },
        text: {
          text: "loooooooooooooooooooooooooooongPort",
          fontSize: 12,
          textAnchor: "start",
          x: "calc(w + 5)",
          refY: "50%"
        }
      },
      markup: [
        {
          tagName: "rect",
          selector: "portBody"
        },
        {
          tagName: "line",
          selector: "arrowLine"
        },
        {
          tagName: "polyline",
          selector: "arrow"
        }
      ]
    };
    cell.prop("ports/groups", PortGroups);
    cell.addPort(port);
    graph.addCell(cell);
    const elementView = cell.findView(paper);
    const halo = new joint.ui.Halo({
      cellView: elementView,
      handles: [joint.ui.Halo.getDefaultHandle("link")],
      magnet: view => {
        return view.findNode("body");
      }
    });
    halo.render();
  };