Hi,

it's me again 

My goal is align the anchor points for the diagram nodes programmatically. Therefore I wrote a method which re-aligns the anchor points for a diagram node (origin and destination).
Just now right, I realized that

diagram.getFactory().createDiagramLink(orig, dest)
 

does not offer parameters for the new calculated anchorpoints.

Why do I want to do that? The links are not starting from the anchor point and not ending at the destination point. I have followed this tutorial: https://www.mindfusion.eu/onlinehelp/jsdiagram/index.htm. It seems like the anchors are searching for the shortest way. Nevertheless, I reorder the position of the anchor points at runtime when some specific user interactions happen.

Additionally to the mentioned tutorial, I made some slight changes:
After creating the diagram, I call

    diagram.setLinkShape = MindFusion.Diagramming.LinkShape.Cascading;
    diagram.showAnchors = ShowAnchor.Always;
 

I also edited the nodes ForEach, to provide a unique AnchorPattern for each diagram node:

 var nodes = graph.nodes;
    nodes.forEach(node => {
      var diagramNode = diagram.getFactory().createShapeNode(bounds);
      nodeMap[node.id] = diagramNode;
      diagramNode.setText(node.name);
      diagramNode.setTextAlignment(MindFusion.Diagramming.Alignment.Center);
      diagramNode.setLineAlignment(MindFusion.Diagramming.Alignment.Near);
      diagramNode.setBrush("#e0e9e9");
      diagramNode.setAnchorPattern(new AnchorPattern([]));
    });
 

In the links loop, I do the same before, just trying to manage the new alignment now:

var links = graph.links;
    links.forEach(link => {
      var link = diagram.getFactory().createDiagramLink(
        nodeMap[link.origin],
        nodeMap[link.target]);

      this.manageNewLink(link);
    });
 

The function manageNewLink determine where to play the new AnchorPoint and what to do with already existing ones.
So the result of that method consists of two anchor points, one for the origin, one for the destination.
What I'm looking for, is a way to say

link.setOriginAnchor(anchorPointOrigin);
link.setDestinationAnchor(anchorPointDestination);
 

but actually this method expects a number as argument, not a AnchorPoint object.

What can I do to assign the anchorpoints to the link?

Hi,

thanks for your quick response.
I do place the new AnchorPoints within the point list for the specific DiagramNode. This is what happens in "this.manageNewLink(link);".
The AnchorPoints created there are showing up perfectly, but the links dont.

In manageNewLink, all I do is:

 var newOrigAP: MindFusion.Diagramming.AnchorPoint = this.manageNewAddedLink(link.getOrigin(), 100, true, false);
    var newDestAP: MindFusion.Diagramming.AnchorPoint = this.manageNewAddedLink(link.getDestination(), 0, false, true);
    link.setStartPoint(new MindFusion.Drawing.Point(newOrigAP.getX(), newOrigAP.getY()));
    link.setEndPoint(new MindFusion.Drawing.Point(newDestAP.getX(), newDestAP.getY()));
 

where link is the link object from createDiagramLink(...) in the for-Each loop.
The start and end points are looking correct so far (while debugging) for the link objects, but it seems like there is no visual effect on the graph. The links are not moving.

Quote:


setStart/End methods only change the elements in controlPoints array without actually repainting. Try also calling link.updateFromPoints after modifying coordinates.

Regards,
Slavcho

The keep and reassign options only work for nodes whose AnchorPattern property is set, I'm not sure what they would do for null patterns. If you need links to preserve their relative coordinates along node sides without actually using AnchorPattern/Point objects, you will need to save and restore them before and after layout at this time. E.g. this works in my test -

var n1 = diagram.factory.createShapeNode(10, 10, 20, 20);
var n2 = diagram.factory.createShapeNode(80, 10, 20, 20);
var l = diagram.factory.createDiagramLink(n1, n2);

l.setStartPoint(l.getStartPoint().newWithOffset(0, -5));
l.setEndPoint(l.getEndPoint().newWithOffset(0, -5));
l.updateFromPoints();

// record relative positions
for (var i = 0; i < diagram.links.length; i++)
{
	var link = diagram.links[i];
	link._relativeStart = link.originConnection.relativePosition;
	link._relativeEnd = link.destinationConnection.relativePosition;
}

var layout = new MindFusion.Graphs.LayeredLayout();
layout.direction = MindFusion.Graphs.LayoutDirection.LeftToRight;
diagram.arrange(layout);

var Utils = MindFusion.Diagramming.Utils;
for (var i = 0; i < diagram.links.length; i++)
{
	var link = diagram.links[i];
	link.setStartPoint(
		Utils.rectPtFromPercent(
			link._relativeStart, link.getOrigin().getBounds()));
	link.setEndPoint(
		Utils.rectPtFromPercent(
			link._relativeEnd, link.getDestination().getBounds()));
	link.updateFromPoints();
} 

Quote:


Layout and interaction code call a DiagramLink.prototype.updateIntersections() method to select end point coordinates for links when not using AnchorPattern/Point objects; so you could replace that function with your own to select different coordinates.

If you decide to use AnchorPattern/Point objects, the arrange method ends with this code in the Reassign case:

var oanchor = link.origin.getNearestAnchor(link.points[0], link, false);
var danchor = link.destination.getNearestAnchor(link.points[link.points.length - 1], link, true);
link.setOriginAnchor(oanchor.index);
link.setDestinationAnchor(danchor.index); 

So then you could replace DiagramNode.prototype.getNearestAnchor function to select different anchor points.

Regards,
Slavcho

Okay, could you explain what was the original problem when using AnchorPoints? You should be able to call setOriginAnchor and setDestinationAnchor after createDiagramLink to snap the link to respective points, where the arguments are integer indices specifying element inside AnchorPattern.

We could implement a new Anchoring option if you let us know by what criteria to select the points if different from closest pair. Or we could add some callback that lets you select the points yourself if you prefer that.

Regards,
Slavcho

This build adds an Anchoring.Custom element -
https://mindfusion.eu/_beta/jsdiag322.zip

var ll = new MindFusion.Graphs.LayeredLayout();
ll.setAnchoring(Anchoring.Custom);
ll.selectAnchorPoints = function (link)
{
	var ox = link.getOrigin().getCenter().x;
	var dx = link.getDestination().getCenter().x;
	var indices = ox > dx ?
		{
			origin: 1,
			destination: 3
		} :
		{
			origin: 4,
			destination: 0
		};
	return indices;
};
diagram.arrange(ll); 

Regards,
Slavcho

Hi,

These are just self-invoking functions and mdiag is the alias of the MindFusion.Diagramming object parameter that is passed to the method. So you can use access LayoutUtils via MindFusion.Diagramming. The LayeredLayout class is in the MindFusion.Graphs namespace.

Regards,
Lyubo