- Welcome, Guest. Please Login or Register
MindFusion  
  We have released initial version of MindFusion.Scheduling library for HTML5 & JavaScript.  
  HomeHelpSearchLoginRegister   
     
     
   
 
Page Index Toggle Pages: 1 Send Topic Print  
How to update image of node on mouse hover event?
Read 190 times

Shafi   Offline
Junior Member
**
Posts: 81
Gender: male
I Love MindFusion!


   
     
 
How to update image of node on mouse hover event?
Apr 16th, 2018 at 12:34pm
 
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?
 
 
 
IP Logged    
 
     

Lyubo   Offline
Full Member
***
Posts: 191
Gender: male
MindFusion team


   
     
 
Re: How to update image of node on mouse hover event?
Reply #1 - Apr 16th, 2018 at 2:28pm
 
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):
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
 
 
 
IP Logged    
 
     
Page Index Toggle Pages: 1 Send Topic Print