Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic Can i add click event to a image added on top of the node? (Read 1972 times)
Shafi
Full Member
***
Offline


I Love MindFusion!

Posts: 109
Joined: Nov 8th, 2016
Can i add click event to a image added on top of the node?
Apr 3rd, 2018 at 12:57pm
Print Post  
Hi,

I have a tree diagram, in every node i have drawn a image using below code:

const icon = new MindFusion.Drawing.Image(config.iconRect);
icon.image.src = this.nodeAttribute.iconUrl;

item.getGraphicsContent().push(icon);

Now i want to attach a click event to this icon, could you please help me with this?
Any ideas / example could help alot.

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


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Can i add click event to a image added on top of the node?
Reply #1 - Apr 4th, 2018 at 6:40am
Print Post  
Hi,

You can check whether a point is contained within the image bounding rectangle inside a nodeClicked handler. Retrieve the image object from the node graphics content container and hit test it with the mouse coordinates:

Code (Javascript)
Select All
diagram.addEventListener("nodeClicked", (sender, args) =>
{
    let content = args.getNode().getGraphicsContent();
    let image: MindFusion.Drawing.Image = null;
    for (let i = 0; i < content.length; i++)
    {
        if (MindFusion.AbstractionLayer.isInstanceOfType(MindFusion.Drawing.Image, content[i]))
        {
             image = content[i];
             break;
	}
        if (image != null)
        {
             let pointInsideBounds = contains(image.bounds, args.getMousePosition());
             if (pointInsideBounds)
             {
                   // the image was clicked.
             }
    }
});

function contains(rect: MindFusion.Drawing.Rect, point: MindFusion.Drawing.Point)
{
    return rect.x <= point.x && point.x <= rect.x + rect.width &&
        rect.y <= point.y && point.y <= rect.y + rect.height;
} 



Regards,
Lyubo
  
Back to top
 
IP Logged
 
Shafi
Full Member
***
Offline


I Love MindFusion!

Posts: 109
Joined: Nov 8th, 2016
Re: Can i add click event to a image added on top of the node?
Reply #2 - Apr 4th, 2018 at 11:21am
Print Post  
Hi Lyubo,

Thankyou for the response, this solution will work if we have only one image.
If we have multiple images then click event is triggered for all the other images as well, i need restrict it to a particular image only not for all others.

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


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Can i add click event to a image added on top of the node?
Reply #3 - Apr 4th, 2018 at 12:57pm
Print Post  
Hi,

When you iterate over the GraphicsContent collection of the node, you can identity each individual image, that is displayed within the node. The image is represented by the MindFusion.Drawing.Image class, that wraps the Image DOM element, which can be accessed via the image property. You can use this to identify the needed image and react on the event.

Code (Javascript)
Select All
if (MindFusion.AbstractionLayer.isInstanceOfType(MindFusion.Drawing.Image, content[i]))
{
    let img = content[i];
    // Perform checks if this is the needed image, if not, continue with the iteration
    if (img.image.....)
    {
        // this is the needed image
        image = content[i];
        break;
    }
} 



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