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.
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