Page Index Toggle Pages: 1 [2]  Send TopicPrint
Very Hot Topic (More than 25 Replies) Creating Links Using Anchor Points ! (Read 10292 times)
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Creating Links Using Anchor Points !
Reply #15 - Dec 24th, 2020 at 2:40pm
Print Post  
Hi Lyubo,

I want to create a link between two diagram elements. When I move over the anchor on the source element, the cursor changed to Hand Pointer. So now I'm able to drag and drop and create link

Now, I want to relink. I want to drag and drop the source origin to another element. When I move the cursor over the anchor in the source element, the cursor is changed to Move Cursor. It seems difficult to drag and drop. Any idea how to set Hand Cursor for relinking also?

Please check the sample in this link: https://drive.google.com/file/d/15mjXY56ppVGX0nPta6w9rXPFVE5-b8kg/view?usp=shari
ng

Regards,
Kannan

Kannan Thirumal wrote on Sep 18th, 2019 at 11:45am:
Thank you Lyubo. It works !

May I know how to highlight anchor point on mouse over as shown in the attached?

Thank you !

  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Creating Links Using Anchor Points !
Reply #16 - Dec 26th, 2020 at 11:39am
Print Post  
Hi,

You can change cursor by overriding the DrawLinksBehavior.setMouseCursor method and return the "pointer" value for the hand cursor.

But if you do this, users won't be able to differentiate whether they will move an existing link or they will start drawing a new link from the same anchor. That's why the default control behavior is to show two different cursors for the two different interactions - to indicate to users what action will be performed. Changing the cursor won't change the interaction, it's just a visual indicator of what the interaction will be.

Are that any problems you're seeing with the default behavior that you want to change it?

Regards,
Lyubo
MindFusion

  
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: Creating Links Using Anchor Points !
Reply #17 - Jan 20th, 2021 at 5:30pm
Print Post  
Hi Lyubo,

When I try to relink, I move the cursor near the first anchor of the link. The cursor is not changing to move cursor when it is over the border of the anchor. The cursor changes almost when it nears the center of the anchor. So it is difficult for us to select the anchor.

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

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


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Creating Links Using Anchor Points !
Reply #18 - Jan 21st, 2021 at 9:26am
Print Post  
Hi,

After examining your code, I noticed that you're setting the move adjustment handle yourself in the onHitTestHandles handler:

Code
Select All
    var bounds = new Rect(node.bounds.x + 5, node.bounds.y + 5, node.bounds.width - 10, node.bounds.height - 10)
    if (bounds.containsPoint(mousePosition))
      return args.setAdjustmentHandle(8 /* move handle */); 



But that code will execute even if the hittesting code detects that the pointer is over an anchor, effectively leaving you with a tiny area around the edges of the node bounds to draw links from. To solve this issue, simply exit the handler if you detect an anchor at that location. Couple of lines above in the same method, where you set the anchor stroke color:

Code
Select All
if (p.containsPoint(mousePosition)) {
          node.parent.removeElement(p);
          p.pen = "red";
          p.strokeThickness = 2;
          node.parent.addElement(p);
          return; // <----- add this line
        } 



Regards,
Lyubo
MindFusion
  
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: Creating Links Using Anchor Points !
Reply #19 - Jan 21st, 2021 at 10:19am
Print Post  
Hi Lyubo,

I tried the same but still the same issue. The cursor is not changed when it nears the border and it is changed near the center. In the sample, please zoom-in (using the button in the top) and try, you can see it.

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


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Creating Links Using Anchor Points !
Reply #20 - Jan 21st, 2021 at 10:52am
Print Post  
Hi,

Please check the attached image. That's what I'm seeing in your project after adding the single line from the example above.

The cursor will turn to a Pointer (Hand) when it's over an anchor or near the edges of the node and initiate a draw link operation on drag. And it will turn to a Move cursor, when the pointer is not over an anchor, or not near the edge of the node (as set by your HitTestHandles handler) - initiating a move interaction with the node on drag.

It's my understanding from your messages, that this is the desired effect, and that's how it's coded in your application. If that's not the behavior you're after, please elaborate further.

Regards,
Lyubo
MindFusion
  

anchors.png ( 114 KB | 98 Downloads )
anchors.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: Creating Links Using Anchor Points !
Reply #21 - Jan 21st, 2021 at 11:09am
Print Post  
Hi,

I mean this Red colored anchor which is used for relinking.

Regards,
Kannan
  

Change_Cursor.png ( 237 KB | 112 Downloads )
Change_Cursor.png
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Creating Links Using Anchor Points !
Reply #22 - Jan 21st, 2021 at 11:25am
Print Post  
Ah, you mean the selection handle on the link, not the anchor.

That happens because you custom draw your handles in a DiagramLink.drawHandles override, you hardcode a bigger handle size value, but then this bigger value is not accounted for during hit testing.

A better approach would be to increase the Diagram.AdjustmentHandlesSize value directly, instead of just using double that value in your custom drawing code:
Code
Select All
this.diagram.setAdjustmentHandlesSize(this.diagram.getAdjustmentHandlesSize() * 2); 



instead of:

Code
Select All
var handleSize: number = 2;
var size = this.getEffectiveHandlesSize() * handleSize + 2; // handle size

// ...

var size = item.getEffectiveHandlesSize() * 2; 



you will have:
Code
Select All
var size = this.getEffectiveHandlesSize() + 2; // handle size

// ...

var size = item.getEffectiveHandlesSize(); 



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: Creating Links Using Anchor Points !
Reply #23 - Jul 15th, 2021 at 1:59pm
Print Post  
Hi Lyubo,

I need this behaviour too. I tried that "return" but still it didn't work. When I move the mouse over the anchor point, the anchor points are not shown. When the mouse pointer comes over the border, all the points are shown. May I know how to fix it?

Sample uploaded: https://drive.google.com/file/d/1oag6QvAyWuTM1cADg0c6bEcYHyM1xYhG/view?usp=shari
ng

Regards,
Kannan

Lyubo wrote on Jan 21st, 2021 at 9:26am:
Hi,

After examining your code, I noticed that you're setting the move adjustment handle yourself in the onHitTestHandles handler:

Code
Select All
    var bounds = new Rect(node.bounds.x + 5, node.bounds.y + 5, node.bounds.width - 10, node.bounds.height - 10)
    if (bounds.containsPoint(mousePosition))
      return args.setAdjustmentHandle(8 /* move handle */); 



But that code will execute even if the hittesting code detects that the pointer is over an anchor, effectively leaving you with a tiny area around the edges of the node bounds to draw links from. To solve this issue, simply exit the handler if you detect an anchor at that location. Couple of lines above in the same method, where you set the anchor stroke color:

Code
Select All
if (p.containsPoint(mousePosition)) {
          node.parent.removeElement(p);
          p.pen = "red";
          p.strokeThickness = 2;
          node.parent.addElement(p);
          return; // <----- add this line
        } 



Regards,
Lyubo
MindFusion

« Last Edit: Jul 15th, 2021 at 4:08pm by Kannan Thirumal »  
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: Creating Links Using Anchor Points !
Reply #24 - Jul 20th, 2021 at 6:38am
Print Post  
Hi,

As I said in the previous post, the anchor point is not visible when I move the mouse cursor over that.

I've attached a screen shot. When I move the mouse over the node, the anchor points are visible like shown in the screen shot. ie when I move the mouse near the node marked by line 2. But expectation is when I move the mouse over the anchor points (that is near line 1) it should be visible. This is how it is behaving in silverligt. May I know how to achieve that?

Regards,
Kannan
  

Node_Anchor_Points.png ( 100 KB | 86 Downloads )
Node_Anchor_Points.png
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Creating Links Using Anchor Points !
Reply #25 - Jul 20th, 2021 at 9:18am
Print Post  
Hi,

Try overriding the Diagram.setAutoAnchorsNode method to include the anchors in the hit-testing logic. Something like:
Code
Select All
    var originalSetAutoAnchorsNode = Diagram.prototype["setAutoAnchorsNode"];
    Diagram.prototype["setAutoAnchorsNode"] = function(node) {
        if (node == null)
        {
          // get the nearest node to the current pointer position, limiting it to the size of the anchors
          node = this.getNearestNode(this.pointerPosition, 4, null, true);
        }
        originalSetAutoAnchorsNode.apply(this, [node]);
    }; 



Regards,
Lyubo
MindFusion
  
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: Creating Links Using Anchor Points !
Reply #26 - Jul 20th, 2021 at 11:43am
Print Post  
Hi,

This seems working fine. But when I try to drag from the anchor point to create link, the link is not coming. Because the "red color" selection handle (anchor) is not visible yet. It is visible only when the mouse cursor is moved near the line 2. May I know how to fix this?

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


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Creating Links Using Anchor Points !
Reply #27 - Jul 21st, 2021 at 8:40am
Print Post  
Hi,

If you need all your node hit-testing logic to apply outside of the node bounds (to include the anchors), override the Diagram.getNodeAt method:
Code
Select All
    var originalGetNodeAt = Diagram.prototype.getNodeAt;
    Diagram.prototype.getNodeAt = function(point: Point)
    {
        var node = originalGetNodeAt.apply(this, [point, true, true]);
        if (node == null)
          node = this.getNearestNode(point, 4, null, true);

        return node;

    }; 



You can delete the setAutoAnchorsNode override if you use the above.

Regards,
Lyubo
MindFusion
  
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: Creating Links Using Anchor Points !
Reply #28 - Jul 21st, 2021 at 6:35pm
Print Post  
This seems working. Thank you Lyubo!
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1 [2] 
Send TopicPrint