Hi,

Some options are:

- keep the ShapeNode.shape property set to a rectangle or circle, and assign a png containing play icon to imageLocation. If you enable the transparent property, the shape won't be drawn, while you can control hit-test distance by setting node's bounds and / or imagePadding.

- replace ShapeNode.prototype.containsPoint(point) function with one that will accept the point from further away for the play-button node, and call the original function otherwise.

- create a custom Shape that defines the triangle as a smaller decoration, but otherwise the main outline is a large circle or rectangle. You can hide the main outline by setting brush to a transparent color, while it will still be used for hit-testing.

- replace the whole node group with a TableNode or CompositeNode. The table cell or composite's image component could be larger than the play icon for hit-testing, while displaying it centered.

Regards,
Slavcho
Mindfusion

E.g. importing Thickness from @mindfusion/drawing:

var node = diagram.factory.createShapeNode(100, 100, 24, 24);
node.imageLocation = "play.png";
node.imageAlign = ImageAlign.Fit;
node.imagePadding = new Thickness(4, 4, 4, 4);
node.transparent = true;
node.shape = Shape.fromId("Ellipse");
 

Regards,
Slavcho
Mindfusion

Custom hit-testing function:

var originalContainsPoint = ShapeNode.prototype.containsPoint;
ShapeNode.prototype.containsPoint = function (point)
{
	// e.g. replace this with an id, tag or shape check
	let isPlayButton = this.imageLocation == "play.png";
	if (isPlayButton)
	{
		var hitTestRect = this.bounds.inflate(8);
		return hitTestRect.containsPoint(point);
	}
	else
	{
		return originalContainsPoint.apply(this, [point]);
	}
}; 

Regards,
Slavcho
Mindfusion