Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic How to update image of node on mouse hover event? (Read 1244 times)
Shafi
Full Member
***
Offline


I Love MindFusion!

Posts: 109
Joined: Nov 8th, 2016
How to update image of node on mouse hover event?
Apr 16th, 2018 at 11:34am
Print Post  
I have added image inside node and I want this image should appear bigger or highlight on mouse hover on it.

How to do this?
  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: How to update image of node on mouse hover event?
Reply #1 - Apr 16th, 2018 at 1:28pm
Print Post  
Hi,

One thing you can do is handle the diagram canvas' mousemove event and hit-test for a node under the cursor. If you detect a node, you can then further test if the cursor is above the image in question, using the technique from this post. When you detect the image, you can then set a local variable to the pointed node, which can be used inside your onUpdateVisuals callback to increase the bounds of the image.

Code (Javascript)
Select All
var pointedNode = null;

// ...

$("#diagram").bind("mousemove", (e) =>
{
  let node = getNodeUnderCursor(e);
  if (node != null)
  {
    var content = node.getGraphicsContent();
    var image = content[content.length - 1];
    if (contains(image.bounds, getLocalPoint(e)))
      pointedNode = node;
    else
      pointedNode = null;

    (node as MindFusion.Diagramming.DiagramNode).invalidate();
    return;
  }

  pointedNode = null;
 });

// ...

function getNodeUnderCursor(event)
{
  var localPoint = this.getLocalPoint(event);
  return this.diagram.getNodeAt(localPoint, true, true);
}

function getLocalPoint(event)
{
  var offset = $('#diagram').offset();
  var x = (event.pageX - offset.left) + $(window).scrollLeft();
  var y = (event.pageY - offset.top) + $(window).scrollTop();

  return this.diagram.clientToDoc(new MindFusion.Drawing.Point(x, y));
}

function inflate (rect, x, y)
{
  if (rect.width + 2 * x < 0)
    x = -rect.width / 2;
  if (rect.height + 2 * y < 0)
    y = -rect.height / 2;

  return new Rect(rect.x - x, rect.y - y, rect.width + 2 * x, rect.height + 2 * y);
}

// ...

function onUpdateVisuals(item)
{
  // ...

  var imageRect = new Rect(rect.x + 20, rect.y + 20, 10, 10);
  if (pointedNode == item)
    imageRect = inflate(imageRect, 2, 2);

  var image = new MindFusion.Drawing.Image(imageRect);

  // ...
} 



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