Need technical support to resolve link issues

[samuel-muse]

Introduction

Hello,

We are paying user of JointJS+. We encountered some difficulties by using JointJS library, and most of the issues are focusing on the behavior of Link/Segments/Anchors/Vertices.
Our purpose is, keep the line of links always to be orthogonal, including moving element/moving port/moving anchor/adjusting segment, etc.

I can list some points below:

1. Segement issues

Current behavior:

• Link connecting element to element which has ports/parameters:
  If I drag the segment which connects to the anchor stopping on the corner, the segment will become skewed in a short distance.
  
  
  But,
  a) if continue to drag, the segment resumes orthogonality.
  
  b) if move the related anchor a little bit, the segment also resumes orthogonality.
  

• Link connecting port to port: the result is similar.
  

2. Vertices issue

Current behavior:

• If link segment becomes skewed, its vertices will be locked, and if I drag other segments (adjacent to the skewed segment) on the same link, the whole link line will become messy.
  

• Link connecting rectangle element to non-rectangle element may also have the same issue of vertices.
  

  But all these messy links can be adjusted to be orthogonal by moving the anchor just a little bit.

In all, the main difficulties are focusing on the link orthogonality when its end elements have port/parameter. The root cause is that the BBOX of end view includes the spaces of ports (and port labels), but what we really need is a "clean" BBOX, i.e., element should returns BBOX without any other attachments (port and other things) when do linking. I also tried to "local hack" some JointJS official opening source code (by using function overriding in ".define()" or ".extend()"), this can fix some cases in some scenarios, but the above segments/vertices issue are not fixed.

We're hoping and looking forward to help or concrete instructions from JointJS official tech experts.
Thank you very much.

Steps to reproduce

No response

Restrictions & Constraints

No response

Does your question relate to JointJS or JointJS+. Select both if applicable.

JointJS

[kumilingus]

If you need the model’s bounding box without any overlapping SVG, you should use the useModelGeometry option.

Could you provide an example demonstrating this setup? You can fork this JSFiddle.
Thank you.

[kumilingus]

The Segments tools can not be used with other than normal router. See #2044.

[Geliogabalus]

In the new 4.2 version we added support for useModelGeometry option in anchor settings. It will allow to use model bbox (using size and position defined in model attributes of a shape) instead of the view for anchor position calculation.

Regarding the snippets, you can just show how you define your link model attributes.

[samuel-muse]

The Segments tools can not be used with other than normal router. See #2044.

Yes, we also noticed this limitation in the official docs. But we really need this function in our code, is there any possiblity to enable segments and also fix the orthogonality issue? No matter what kind of ways, even if somewhat "dirty solution" or workaround (just like the "local hack" that I mentioned in the post). For example, which object or function in the opening source code can be override?

As paying user, we really hope JointJS experts can provide some solutions to resolve this...

Thank you.

[kumilingus]

A workaround solution is mentioned in #2044 (comment).

[samuel-muse]

In the new 4.2 version we added support for useModelGeometry option in anchor settings. It will allow to use model bbox (using size and position defined in model attributes of a shape) instead of the view for anchor position calculation.

Regarding the snippets, you can just show how you define your link model attributes.

OK. I can paste one case of link usage:

link.source({
    id: sourceElementId,
    port: sourcePortId,
    connectionPoint: {
        name: 'getPortBodyEdgePoint'
    },
    anchor: {
        name: 'getPortBodyCenterForAnchor'
    }
});

Here defines customized connection point and anchor:

export const getPortBodyEdgePoint = (line: g.Line, view: dia.CellView, magnet: SVGGraphicsElement): g.Point => {
	const portBody = magnet.querySelector('[joint-selector="portBody"]') as SVGGraphicsElement | null;
	if (!portBody) {
		return new g.Point(0, 0);
	}

	const bbox = portBody.getBBox();
	const ctm = portBody.getCTM();
	if (!ctm) {
		return new g.Point(0, 0);
	}

	const svg = portBody.ownerSVGElement!;
	const center = new g.Point(bbox.x + bbox.width / 2, bbox.y + bbox.height / 2);

	const direction = line.start.clone().offset(-line.end.x, -line.end.y).normalize(1);

	const halfWidth = bbox.width / 2;
	const halfHeight = bbox.height / 2;
	const scaleX = 1 / Math.abs(direction.x || 1e-6);
	const scaleY = 1 / Math.abs(direction.y || 1e-6);
	const scale = Math.min(halfWidth * scaleX, halfHeight * scaleY);

	const localEdgePoint = new g.Point(center.x + direction.x * scale, center.y + direction.y * scale);

	const result = transformPoint(svg, localEdgePoint, ctm);
	return result;
};

function transformPoint(svg: SVGSVGElement, pt: g.Point, ctm: DOMMatrix): g.Point {
	const svgPoint = svg.createSVGPoint();
	svgPoint.x = pt.x;
	svgPoint.y = pt.y;
	// Get the transform result in current screen coordinate system
	const result = svgPoint.matrixTransform(ctm);
	// Transform to the paper coordinate system, according to the zooming scale
	return new g.Point(result.x / ctm.a, result.y / ctm.d);
}

export function getPortBodyCenterForAnchor(endView: dia.ElementView, endMagnet: SVGElement, anchorReference: g.Point, args: any): g.Point {
	const portBody = endMagnet.querySelector?.('[joint-selector="portBody"]') as SVGGraphicsElement | null;

	const target = portBody ?? (endMagnet as SVGGraphicsElement);
	const bbox = target.getBBox?.();
	const ctm = target.getCTM?.();
	const svg = target.ownerSVGElement;

	if (!bbox || !ctm || !svg) {
		// fallback: use the anchorReference directly
		return new g.Point(anchorReference);
	}

	const center = new g.Point(bbox.x + bbox.width / 2, bbox.y + bbox.height / 2);
	const result = transformPoint(svg, center, ctm);
	return result;
}

The purpose is to link a port and keep the connection point on the edge of the port, and keep the initial position of the anchor is at the center of the port.

I also defined a snap callback to restrict the anchor to be always in the center of the port edge, when user is moving the anchor.

export function snapAnchorToPortBoundaryCenter(coords: dia.Point, view: dia.CellView, magnet: SVGElement): dia.Point {
	const portBody = magnet.querySelector?.('[joint-selector="portBody"]') as SVGGraphicsElement | null;

	const target = portBody ?? (magnet as SVGGraphicsElement);
	const bbox = target.getBBox?.();

	if (bbox) {
		const { x, y, width, height } = bbox;
		const { x: offsetX, y: offsetY } = view.model.getBBox();

		// No shrink for port
		const INSET_PX = 0;

		// Restrict anchor on the midpoint of the borders of the port
		// BBOX center
		const cx = offsetX + x + width / 2;
		const cy = offsetY + y + height / 2;

		// 4 midpoints on the border
		const midpoints = [
			{ x: cx, y: offsetY + y + INSET_PX }, // top
			{ x: offsetX + x + width - INSET_PX, y: cy }, // right
			{ x: cx, y: offsetY + y + height - INSET_PX }, // bottom
			{ x: offsetX + x + INSET_PX, y: cy }  // left
		];

		// Get the nearest midpoint
		let best = midpoints[0];
		let bestDist = Infinity;

		for (const p of midpoints) {
			const d = (coords.x - p.x) ** 2 + (coords.y - p.y) ** 2;
			if (d < bestDist) {
				bestDist = d;
				best = p;
			}
		}

		return best;
	} else {
		return coords;
	}
}

[samuel-muse]

A workaround solution is mentioned in #2044 (comment).

Thank you so much.

Actually, we implemented the segments with orthogonal/rightAngle, and it can work with links connecting elements without ports.
But once the end element carries ports, the mentioned "skewed link" issues come out...

[samuel-muse]

Hi,

My collegue writes a demo, refer to https://jsfiddle.net/9twagvqb/

And also prepared a screen record in the attachment:
https://github.com/user-attachments/assets/d8adce2b-15b3-42ba-a997-24a9dbe6075d

Maybe this code snippets can help you to find the solution.

Thank you.

[kumilingus]

The simplest solution in v4.2 is to override how the view root element is measured:

const paper = new dia.Paper({
    /* ... */
    // Links can not be dragged
    interactive: { linkMove: false },
    measureNode: function (el, view) {
      if (el === view.el && view.model.isElement()) {
        // Whenever JJ measures the root SVGGElement of an element, read the size from the model
        return { x: 0, y: 0, ...view.model.size() };
      }
      // Default behavior for any other SVG node
      return V(el).getBBox();
    },
});

See updated JSFiddle.