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?

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