(UTC)
  MindFusion Forums › Diagramming Components › JavaScript › Routed links different in silverlight and html5
(Moderator: Slavcho)
‹ Previous Topic | Next Topic ›
Page Index Toggle Pages: 1 [2]  Send TopicPrint
Very Hot Topic (More than 25 Replies) Routed links different in silverlight and html5 (Read 11922 times)
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 284
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Routed links different in silverlight and html5
Reply #15 - Jul 1st, 2021 at 4:19pm
Print Post  
This worked for me. Thank you Slav  Cool
  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 284
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Routed links different in silverlight and html5
Reply #16 - Jul 2nd, 2021 at 8:12am
Print Post  
Hi,

Some times the link is not proper. Please check the attached screen shot. Here the link near the arrow head is not proper. Am I missing anything?

Looks like it happens because of our recent change to grid router,

this.diagram.setLinkRouter(new GridRouter(this.diagram));

Regards,
Kannan
« Last Edit: Jul 2nd, 2021 at 11:07am by Kannan Thirumal »  
Html5_Diagram_3.png (Attachment deleted)
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3435
Joined: Oct 19th, 2005
Re: Routed links different in silverlight and html5
Reply #17 - Jul 5th, 2021 at 4:45am
Print Post  
It should not be different than your Silverlight results, unless you were using different units or GridRouter property values there. Try setting larger nodeVicinity* values -

Code
Select All
gridRouter.nodeVicinitySize *= 3;
gridRouter.nodeVicinityCost *= 3;


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


I Love Mind Fusion Diagram
:-)

Posts: 284
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Routed links different in silverlight and html5
Reply #18 - Jul 15th, 2021 at 5:00pm
Print Post  
Hi,

I tried this too like below but still same issue. Am I wrong?

    var gridRouter = new GridRouter(this.diagram)
    var nodeVicinitySize = gridRouter.getNodeVicinitySize();
    var nodeVicinityCost = gridRouter.getNodeVicinityCost();
    nodeVicinitySize *= 3;
    nodeVicinityCost *= 3;
    gridRouter.setNodeVicinitySize(nodeVicinitySize);
    gridRouter.setNodeVicinityCost(nodeVicinityCost);
    this.diagram.setLinkRouter(gridRouter);

Please check the Node-2, Node-3 in the attached screen shot.

Sample uploaded here: https://drive.google.com/file/d/1UxIJmF_HB1W_ExVHo3Wp4aCvyM9fy-AP/view?usp=shari
ng

Regards,
Kannan
  
Link_Arrow_Header_Not_Proper.png (Attachment deleted)
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3435
Joined: Oct 19th, 2005
Re: Routed links different in silverlight and html5
Reply #19 - Jul 19th, 2021 at 10:12am
Print Post  
Hi,

Property values in GridRouter are adjusted for the default Millimeter measure unit, while your app seems to use Pixel unit, so you might need to tweak other properties too for that (length and turn costs, grid size). Try changing MeasureUnit to Pixel in "Link Routing" example from our .NET or Java libraries and find values that you like using the slider UI there -
https://mindfusion.eu/samples/winforms/diagram/Routing.zip

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


I Love Mind Fusion Diagram
:-)

Posts: 284
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Routed links different in silverlight and html5
Reply #20 - Jul 19th, 2021 at 6:27pm
Print Post  
Hi,

In silverlight we didn't set the measure unit. So, by default, the measure unit is WpfPoint. So, in java script app, I changed the measure unit to WpfPoint. But still it didn't work. In silverlight also, we didn't change default values for vicinity etc. May I know where I missed?

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


tech.support

Posts: 3435
Joined: Oct 19th, 2005
Re: Routed links different in silverlight and html5
Reply #21 - Jul 20th, 2021 at 8:43am
Print Post  
Well, we decided to use the superior metric system in JS library Wink and you will have to adjust various size-related property values if switching units to use pixels or points instead of millimeters (selection handles sizes, arrowhead sizes, etc). For GridRouter specifically, you will need to adjust at least the GridSize and NodeVicinitySize values. The cost values should not matter much if you have roughly same number of grid pieces per node.

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


I Love Mind Fusion Diagram
:-)

Posts: 284
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Routed links different in silverlight and html5
Reply #22 - Jul 21st, 2021 at 6:34pm
Print Post  
Hi,

As I said, we have used the default measure unit, WpfPoint, in silverlight. The coordinates and the size of the nodes are stored in the database. Now we are loading the java script app diagram from those db values. But you mentioned that in the java script, the default measure unit is millimetre. So, I like to try the millimeter measure unit in our java script app. May I know how to convert the below values which is in WpfPoint into Millimeter?

* X, Y coordinates of the diagram nodes
* Height, Width of the diagram nodes
* Control Points of the diagram links

Also, I've one more clarification. Since we have used WpfPoint in SL, better to use same WpfPoint in java script app also. Is SL WpfPoint and JS WpfPoint same right?

Regards,
Kannan
« Last Edit: Jul 22nd, 2021 at 6:42am by Kannan Thirumal »  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 284
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Routed links different in silverlight and html5
Reply #23 - Jul 22nd, 2021 at 7:57pm
Print Post  
Hi,

I tried by changing different grid router values. By setting the below values, seems the link better,

* GridSize - 6
* NodeVicinityCost - 18
* NodeVicinitySize - 24

- Screen shot 1 shows the initial diagram

- Screen shot 2 shows after setting the above optimum grid router values. In this the link between the nodes 1, 2, 3 seems better. Link between nodes 4 and 5 is better but the link drawn above the node-5. Also, the link between nodes 6 and 7 is not good.

- Screen shot 3: Also I tried by moving Node-1 so that the link between node 1 and 2 is straight line. But the orange colored selection handle position changed in node-1. It is not over the anchor.

May I know how to solve these issues? Do you suggest any better combination of grid router values or any other approach? Thank you!

I've uploaded the sample app: https://drive.google.com/file/d/1rbOnRKwVKVEx8ud_Cv7KP4yLSDxGhBth/view?usp=shari
ng

Regards,
Kannan

Kannan Thirumal wrote on Jul 21st, 2021 at 6:34pm:
Hi,

As I said, we have used the default measure unit, WpfPoint, in silverlight. The coordinates and the size of the nodes are stored in the database. Now we are loading the java script app diagram from those db values. But you mentioned that in the java script, the default measure unit is millimetre. So, I like to try the millimeter measure unit in our java script app. May I know how to convert the below values which is in WpfPoint into Millimeter?

* X, Y coordinates of the diagram nodes
* Height, Width of the diagram nodes
* Control Points of the diagram links

Also, I've one more clarification. Since we have used WpfPoint in SL, better to use same WpfPoint in java script app also. Is SL WpfPoint and JS WpfPoint same right?

Regards,
Kannan

  
1__GridRouting-Initial-Diagram.png (Attachment deleted)
2__GridRouting-After-Changing-Values.png (Attachment deleted)
3__GridRouting-Selection-Handle-Not-Over-Anchor.png (Attachment deleted)
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3435
Joined: Oct 19th, 2005
Re: Routed links different in silverlight and html5
Reply #24 - Jul 23rd, 2021 at 8:27am
Print Post  
Hi,

Quote:
- Screen shot 2 shows after setting the above optimum grid router values. In this the link between the nodes 1, 2, 3 seems better. Link between nodes 4 and 5 is better but the link drawn above the node-5. Also, the link between nodes 6 and 7 is not good.


GridRouter runs a cost minimization function and it's a matter of finding balance between length and node vicinity costs. If you set too large vicinity values and keep length values smaller, it might prefer the longer route (your above node-5 example). 22 / 22 seems to work for your units and node spacing as in attached screenshot.

Quote:
- Screen shot 3: Also I tried by moving Node-1 so that the link between node 1 and 2 is straight line. But the orange colored selection handle position changed in node-1. It is not over the anchor.


I can't reproduce link detaching from anchor point, make sure you haven't dragged link's end accidentally.

Regards,
Slavcho
  
Untitled_020.png (Attachment deleted)
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 284
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Routed links different in silverlight and html5
Reply #25 - Jul 23rd, 2021 at 6:44pm
Print Post  
Seems better. You saved my day. Thank you Slavcho  Smiley
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1 [2] 
Send TopicPrint
‹ Previous Topic | Next Topic ›
 
  « Board Index ‹ Board Top  

MindFusion Forums » Powered by YaBB 2.6.11!
YaBB Forum Software © 2000-2026. All Rights Reserved.

Valid RSS Valid XHTML Valid CSS Powered by Perl Source Forge