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


I Love Mind Fusion Diagram
:-)

Posts: 284
Location: Bangalore, India
Joined: Jan 18th, 2019
Creating Links Using Anchor Points !
Sep 16th, 2019 at 12:46pm
Print Post  
Hi,

I've defined a composite node and added anchor points around the node. During runtime, I tried to create link from an anchor point of one node to an anchor point of another node. I'm able to do so from the top and left anchor points of the node but not the right and bottom anchor points. May I know why? I've attached the screen shot.

Also uploaded the same code in the below url,

https://drive.google.com/open?id=1XIid50e_P4-RC-sHi-SBi2Govcvq9dNg

Regards,
Kannan
  

Creating_Links_Using_Anchor_Points.png (Attachment deleted)
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Creating Links Using Anchor Points !
Reply #1 - Sep 17th, 2019 at 6:01am
Print Post  
Hi,

I'm able to create links from all anchor points (see attached image). The anchor points are very small, and indeed it's somewhat harder to do. You can try with a bigger anchorSize value than 6.

Regards,
Lyubo
MindFusion
  

anchors_001.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: Creating Links Using Anchor Points !
Reply #2 - Sep 17th, 2019 at 6:18am
Print Post  
Hi,

Did you tried the rectangle shaped node (especially right and bottom anchor points)?

I couldn't move the mouse inside the anchor points. When I mouse over the node, the anchor points are displayed but when I tried to mouse over the anchor points, anchor points became invisible.

Also I think this size of 6 should be sufficient because this behaves fine in silverlight mindfusion diagram.

Another issue like when I try to mouse over the anchor points, node resize handle is showed. I don't need that too since I don't need to resize the nodes during runtime. May I know how to do this also?

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 #3 - Sep 17th, 2019 at 7:33am
Print Post  
Hi,

Yes, I can draw links fine from rectangular nodes too. Note, that the mouse cursor will change to hand when a link will be created.

About resize handles, I can see you use Invisible handles, and we've already discussed that here: https://mindfusion.eu/Forum/YaBB.pl?num=1552647996/37#37. Invisible handles won't show, but will still hit-test and allow interaction. The thread I linked already shows some different ways to approach that.

Regards,
Lyubo
MindFusion
  

anchors_002.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: Creating Links Using Anchor Points !
Reply #4 - Sep 17th, 2019 at 8:00am
Print Post  
Hi,

Yes, the mouse cursor is changing to hand when a link is created. After that I'm not able to link or move the node. Any idea why?

Regards,
Kannan
  
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: Creating Links Using Anchor Points !
Reply #5 - Sep 17th, 2019 at 8:59am
Print Post  
Sorry, this works fine now
  
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: Creating Links Using Anchor Points !
Reply #6 - Sep 17th, 2019 at 9:01am
Print Post  
Hi,

When I move the mouse cursor near the anchor point, the cursor type changes to Resize and I'm able to resize the node. I don't want to show the Resize cursor type and don't want to resize the node. May I know how to do it?

Also https://mindfusion.eu/Forum/YaBB.pl?num=1552647996/37#37 is about on mouse over, cursor changing to Move type. This is about on mouse over (near anchor points), cursor changing to Resize type.

Regards,
Kannan

Lyubo wrote on Sep 17th, 2019 at 7:33am:
Hi,

Yes, I can draw links fine from rectangular nodes too. Note, that the mouse cursor will change to hand when a link will be created.

About resize handles, I can see you use Invisible handles, and we've already discussed that here: https://mindfusion.eu/Forum/YaBB.pl?num=1552647996/37#37. Invisible handles won't show, but will still hit-test and allow interaction. The thread I linked already shows some different ways to approach that.

Regards,
Lyubo
MindFusion

« Last Edit: Sep 17th, 2019 at 10:27am by Kannan Thirumal »  

Node_Is_Resizable.png (Attachment deleted)
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Creating Links Using Anchor Points !
Reply #7 - Sep 17th, 2019 at 12:19pm
Print Post  
Hi,

Again, setting handles to Invisible, won't stop interactions or hit-testing. It's the same situation as described in the linked thread, just this time, a resize handle is interactive, and not a move handle. If you wish only to move the nodes, but not resize, set the handles style to InvisibleMove instead of Invisible.

Regards,
Lyubo
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: Creating Links Using Anchor Points !
Reply #8 - Sep 17th, 2019 at 1:07pm
Print Post  
Hi,

I tried the same, now the resize cursor type is not coming on mouse over and only Move cursor is showing. But still, on mouse over on the anchor points, I'm not able to drag and drop links from anchor points and also mouse cursor type not changing from Move. Sometimes it is possible to create link from ONLY ONE anchor point and after than I'm able to create from the immediate next and then from next and like this.

For example, in the node named "Node-6", it is possible to create link from the first anchor point on the top or left and not from any other anchor points. After creating the link from that first anchor point, it is possible to create from next point.

Please check the uploaded source code in the below url,

https://drive.google.com/open?id=1djRTEWGaaICyU2pKJu_O9C6HbMnvFNfY

Also I'v increased the anchor point size and placed the mouse cursor over and taken screen shot.

Regards,
Kannan
« Last Edit: Sep 18th, 2019 at 4:59am by Kannan Thirumal »  

Creating_Links_Using_Anchor_Points-2.png (Attachment deleted)
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Creating Links Using Anchor Points !
Reply #9 - Sep 18th, 2019 at 8:35am
Print Post  
Hi,

You can use Custom handles for what you want to achieve. Don't apply any drawing, just use the already present in your application hit test handles callback to specify a bounding rectangle for the move interaction. The below code worked well in my test for drawing links from/to anchors and moving the nodes.
Code (Javascript)
Select All
this.diagram.addEventListener(MindFusion.Diagramming.Events.hitTestAdjustmentHandles, this.onHitTestHandles);

// ...

// hitTestAdjustmentHandles handler
private onHitTestHandles(sender, args) {
    var node = args.node;
    var mousePosition = args.mousePosition;

    var bounds = new Rect(node.bounds.x + 3, node.bounds.y + 3, node.bounds.width - 6, node.bounds.height - 6)
    if (bounds.containsPoint(mousePosition))
        return args.setAdjustmentHandle(8 /* move handle */);
}

//...

private createCompositeNode(diagramElement: DiagramElement): CompositeNode {

    // ...

    node.setHandlesStyle(common.Diagramming.HandlesStyle.Custom);

    // ...
} 



Regards,
Lyubo
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: Creating Links Using Anchor Points !
Reply #10 - Sep 18th, 2019 at 11:45am
Print Post  
Thank you Lyubo. It works !

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

Thank you !
  

Highlight_Anchor_Points.png (Attachment deleted)
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Creating Links Using Anchor Points !
Reply #11 - Sep 19th, 2019 at 11:43am
Print Post  
Hi,

Since you're already using the custom handles, you can change the anchor point colors from there. So you could try and change your handler to:
Code (Javascript)
Select All
function onHitTestHandles(sender, args)
{
    var node = args.node;
    var mousePosition = args.mousePosition;

    if (node.isAnchorPatternVisible && node.anchorPointVisuals)
    {
        for (var i = 0; i < node.anchorPointVisuals.length; i++)
        {
            var p = node.anchorPointVisuals[i];
            if (p.containsPoint(mousePosition))
            {
                node.parent.removeElement(p);
                p.pen = "red";
                node.parent.addElement(p);
            }
            else
            {
                if (p.pen != node.anchorPattern.getPoints()[i].getColor())
                {
                    node.parent.removeElement(p);
                    p.pen = node.anchorPattern.getPoints()[i].getColor();
                    node.parent.addElement(p);
                }
            }
        }
    }

    var bounds = new Rect(node.bounds.x + 3, node.bounds.y + 3, node.bounds.width - 6, node.bounds.height - 6)
    if (bounds.containsPoint(mousePosition))
        return args.setAdjustmentHandle(8);
} 



Regards,
Lybuo
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: Creating Links Using Anchor Points !
Reply #12 - Sep 19th, 2019 at 11:59am
Print Post  
Thank you Lyubo. It works ! I added below code to make the border more visible,

p.strokeThickness = 2;


But still, when mouse over anchor points, sometimes the mouse cursor type is Move type. Strange !
  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Creating Links Using Anchor Points !
Reply #13 - Sep 19th, 2019 at 12:21pm
Print Post  
You can decrease the move handle interaction zone, currently it's set to be 3px from the borders of the node:
Code (Javascript)
Select All
var bounds = new Rect(node.bounds.x + 3, node.bounds.y + 3, node.bounds.width - 6, node.bounds.height - 6) 



You can increase these margins, so that the move interaction will trigger further from the borders.

Regards,
Lyubo
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: Creating Links Using Anchor Points !
Reply #14 - Sep 19th, 2019 at 1:05pm
Print Post  
This looks better, Thank you !

Also, when I move the mouse from right side of the node, the anchor points are visible only when the mouse over on the left border of the anchor point (not on the right border of the anchor point as expected). Any idea why?
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: [1] 2 
Send TopicPrint