Page Index Toggle Pages: 1 Send TopicPrint
Hot Topic (More than 10 Replies) Overlapping Routed Links (Read 5349 times)
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Overlapping Routed Links
Jul 30th, 2019 at 7:24am
Print Post  
Hi,

I've few nodes (vertical) connected with routed links. But they are overlapping.

Here is the code,

private createVerticalNodes() {

var node1 = this.diagram.getFactory().createShapeNode(new Rect(500, 0, 200, 50));
node1.setText("node 1");
node1.setBrush("white");
node1.setTextAlignment(Alignment.Center);
node1.setTextPadding(new Thickness(10, 10, 10, 10));
node1.setFont(new Font("Meiryo UI", 15, true, false, false));
node1.resizeToFitText(common.Diagramming.FitSize.KeepWidth);
this.diagram.addItem(node1);

var node2 = this.diagram.getFactory().createShapeNode(new Rect(500, 200, 200, 50));
node2.setText("node 2");
node2.setBrush("white");
node2.setTextAlignment(Alignment.Center);
node2.setTextPadding(new Thickness(10, 10, 10, 10));
node2.setFont(new Font("Meiryo UI", 15, true, false, false));
node2.resizeToFitText(common.Diagramming.FitSize.KeepWidth);
this.diagram.addItem(node2);

var node3 = this.diagram.getFactory().createShapeNode(new Rect(500, 400, 200, 50));
node3.setText("node 3");
node3.setBrush("white");
node3.setTextAlignment(Alignment.Center);
node3.setTextPadding(new Thickness(10, 10, 10, 10));
node3.setFont(new Font("Meiryo UI", 15, true, false, false));
node3.resizeToFitText(common.Diagramming.FitSize.KeepWidth);
this.diagram.addItem(node3);

var node4 = this.diagram.getFactory().createShapeNode(new Rect(500, 600, 200, 50));
node4.setText("node 4");
node4.setBrush("white");
node4.setTextAlignment(Alignment.Center);
node4.setTextPadding(new Thickness(10, 10, 10, 10));
node4.setFont(new Font("Meiryo UI", 15, true, false, false));
node4.resizeToFitText(common.Diagramming.FitSize.KeepWidth);
this.diagram.addItem(node4);

var link1 = this.diagram.getFactory().createDiagramLink(node1, node2);
link1.setAutoRoute(true);
link1.setBrush("blue");
link1.setStroke("blue");
link1.setStrokeThickness(3);
link1.route();

var link2 = this.diagram.getFactory().createDiagramLink(node2, node3);
link2.setAutoRoute(true);
link2.setBrush("#82E0AA");
link2.setStroke("#82E0AA");
link2.setStrokeThickness(3);
link2.route();

var link3 = this.diagram.getFactory().createDiagramLink(node3, node4);
link3.setBrush("#7D3C98");
link3.setStroke("#7D3C98");
link3.setStrokeThickness(3);
link3.setAutoRoute(true);
link3.route();

var link4 = this.diagram.getFactory().createDiagramLink(node1, node4);
link4.setAutoRoute(true);
link4.setBrush("Orange");
link4.setStroke("Orange");
link4.setStrokeThickness(3);
link4.route();

this.diagram.repaint();
}

Attached the screen shots. Also uploaded the complete code in the below url,

https://drive.google.com/open?id=1K8t0uEg7LW9ZUZ-UJe0-EOaVfRetnkNm

May I know how to auto route these links properly without overlapping. Thanks !

Regards,
Kannan
  

Diagram-1.png ( 59 KB | 206 Downloads )
Diagram-1.png
Diagram-2.png ( 66 KB | 188 Downloads )
Diagram-2.png
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Overlapping Routed Links
Reply #1 - Jul 30th, 2019 at 11:02am
Print Post  
Hi,

Instead of calling route() individually on every link, to avoid the overlapping call diagram.routeAllLinks() in the end.

Regards,
Lyubo
  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Overlapping Routed Links
Reply #2 - Jul 30th, 2019 at 11:31am
Print Post  
Hi,

I tried that too, but still not working. Could you please check this code?

private createVerticalNodes() {

var node1 = this.diagram.getFactory().createShapeNode(new Rect(500, 0, 200, 50));
node1.setText("node 1");
node1.setBrush("white");
node1.setTextAlignment(Alignment.Center);
node1.setTextPadding(new Thickness(10, 10, 10, 10));
node1.setFont(new Font("Meiryo UI", 15, true, false, false));
node1.resizeToFitText(common.Diagramming.FitSize.KeepWidth);
this.diagram.addItem(node1);

var node2 = this.diagram.getFactory().createShapeNode(new Rect(500, 200, 200, 50));
node2.setText("node 2");
node2.setBrush("white");
node2.setTextAlignment(Alignment.Center);
node2.setTextPadding(new Thickness(10, 10, 10, 10));
node2.setFont(new Font("Meiryo UI", 15, true, false, false));
node2.resizeToFitText(common.Diagramming.FitSize.KeepWidth);
this.diagram.addItem(node2);

var node3 = this.diagram.getFactory().createShapeNode(new Rect(500, 400, 200, 50));
node3.setText("node 3");
node3.setBrush("white");
node3.setTextAlignment(Alignment.Center);
node3.setTextPadding(new Thickness(10, 10, 10, 10));
node3.setFont(new Font("Meiryo UI", 15, true, false, false));
node3.resizeToFitText(common.Diagramming.FitSize.KeepWidth);
this.diagram.addItem(node3);

var node4 = this.diagram.getFactory().createShapeNode(new Rect(500, 600, 200, 50));
node4.setText("node 4");
node4.setBrush("white");
node4.setTextAlignment(Alignment.Center);
node4.setTextPadding(new Thickness(10, 10, 10, 10));
node4.setFont(new Font("Meiryo UI", 15, true, false, false));
node4.resizeToFitText(common.Diagramming.FitSize.KeepWidth);
this.diagram.addItem(node4);

var link1 = this.diagram.getFactory().createDiagramLink(node1, node2);
link1.setAutoRoute(true);
link1.setBrush("blue");
link1.setStroke("blue");
link1.setStrokeThickness(3);
//link1.route();

var link2 = this.diagram.getFactory().createDiagramLink(node2, node3);
link2.setAutoRoute(true);
link2.setBrush("#82E0AA");
link2.setStroke("#82E0AA");
link2.setStrokeThickness(3);
//link2.route();

var link3 = this.diagram.getFactory().createDiagramLink(node3, node4);
link3.setBrush("#7D3C98");
link3.setStroke("#7D3C98");
link3.setStrokeThickness(3);
link3.setAutoRoute(true);
//link3.route();

var link4 = this.diagram.getFactory().createDiagramLink(node1, node4);
link4.setAutoRoute(true);
link4.setBrush("Orange");
link4.setStroke("Orange");
link4.setStrokeThickness(3);
//link4.route();

//this.diagram.repaint();

this.diagram.routeAllLinks();
}

Regards,
Kannan
« Last Edit: Aug 1st, 2019 at 8:58am by Kannan Thirumal »  

Overlapping_Links_001.png ( 62 KB | 178 Downloads )
Overlapping_Links_001.png
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Overlapping Routed Links
Reply #3 - Aug 7th, 2019 at 8:05am
Print Post  
Hi,

     Did you had a chance to check this? Thank you !

Regards,
Kannan
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Online


tech.support

Posts: 3146
Joined: Oct 19th, 2005
Re: Overlapping Routed Links
Reply #4 - Aug 8th, 2019 at 6:25am
Print Post  
Hi,

Try this code, with and without distributeLinks -

Code
Select All
//for (var node of diagram.nodes)
//	distributeLinks(node);

diagram.linkRouter = new MindFusion.Diagramming.GridRouter(diagram);
diagram.routeMargin = 20;
diagram.routeAllLinks();

function distributeLinks(node)
{
	var rect = node.getBounds();

	var bottomLinks = collectLinks(node,
		p => Math.abs(p.y - rect.bottom()) < 1);
	distributeX(node, bottomLinks);

	var topLinks = collectLinks(node,
		p => Math.abs(p.y - rect.top()) < 1);
	distributeX(node, topLinks);
}
 



Get rest of the functions from this post -
https://mindfusion.eu/Forum/YaBB.pl?num=1547140103/1#1

If using distributeLinks(), you might modify it to keep the first of node's links always centered and pull away only the rest of them.

Regards,
Slavcho
  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Overlapping Routed Links
Reply #5 - Nov 12th, 2019 at 12:15pm
Print Post  
Hi,

I tried the same. Please check the attached outcome and the expected behavior.

     Please download the sample code in this url,

     https://drive.google.com/open?id=14eZ5sENigCqU8qxIP_QDYhOCt7F_dGsg

Regards,
Kannan
  

Links_Current_Behavior.png ( 7 KB | 216 Downloads )
Links_Current_Behavior.png
Links_Expected_Behavior.png ( 3 KB | 195 Downloads )
Links_Expected_Behavior.png
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Overlapping Routed Links
Reply #6 - Nov 15th, 2019 at 3:48am
Print Post  
Hi,

The expected behavior is how it is happening in silverlight/wpf mind fusion diagram by just routing and without any other extra logic. We need the same in html too. May I know how?

Regards,
Kannan

Kannan Thirumal wrote on Nov 12th, 2019 at 12:15pm:
Hi,

I tried the same. Please check the attached outcome and the expected behavior.

Please download the sample code in this url,

https://drive.google.com/open?id=14eZ5sENigCqU8qxIP_QDYhOCt7F_dGsg

Regards,
Kannan

  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Online


tech.support

Posts: 3146
Joined: Oct 19th, 2005
Re: Overlapping Routed Links
Reply #7 - Nov 15th, 2019 at 5:23am
Print Post  
It looks like you call distribute after routeAllLinks, and not before it as the sample code shows. We'll have in mind porting the WPF router to JavaScript diagram for next release.

Regards,
Slavcho
  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Overlapping Routed Links
Reply #8 - Nov 15th, 2019 at 8:26am
Print Post  
Thank you. May I know when I can expect the next release?
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Online


tech.support

Posts: 3146
Joined: Oct 19th, 2005
Re: Overlapping Routed Links
Reply #9 - Feb 5th, 2020 at 12:27pm
Print Post  
We are preparing some improvements in default Router for upcoming release, check if this build works better for you -
https://mindfusion.eu/_beta/jsdiag34.zip

Please also set a larger routeMargin value to match your smaller measure units -
Code
Select All
diagram.setRouteMargin(100);
diagram.routeAllLinks(); 



  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Overlapping Routed Links
Reply #10 - Apr 27th, 2020 at 12:08pm
Print Post  
Hi Slavcho,

May I know whether this is ported and available in the latest diagram release?

Regards,
Kannan

Slavcho wrote on Nov 15th, 2019 at 5:23am:
It looks like you call distribute after routeAllLinks, and not before it as the sample code shows. We'll have in mind porting the WPF router to JavaScript diagram for next release.

Regards,
Slavcho

  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Online


tech.support

Posts: 3146
Joined: Oct 19th, 2005
Re: Overlapping Routed Links
Reply #11 - Apr 27th, 2020 at 6:16pm
Print Post  
Hi,

We have improved the standard router as shown in previous post. Have you tried that version?

Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint