Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic How to get on increasing the clickable area of the playbutton on a node? (Read 790 times)
Rama
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 2
Joined: Feb 28th, 2024
How to get on increasing the clickable area of the playbutton on a node?
Feb 28th, 2024 at 9:46am
Print Post  
Hi

I have my nodeListView, from there I am added a play button of type triangle with rotation of 90 (see pic)
Below is the current code implemented like this...

var node = diagram.getFactory().createShapeNode(bounds);   
    node.locked = true;
    node.setShape("Triangle");
    node.setBrush('#000000');
    node.rotationAngle = 90;
    node.setBounds(bounds);
    node.fitInBounds = true;
    debugNodes.push(node);

The play button that I am using is supposed to be more clickable area than in (see pic.).

Something I need to place shape node in a canvas, so that when mouse moves, it should have more clickable area of the play button on a node (see pic clickable place).

please help me to share your thoughts how to achieve this.

Regards,
Rama
  

current_functionality.png ( 15 KB | 34 Downloads )
current_functionality.png
clickable_place.png ( 1 KB | 31 Downloads )
clickable_place.png
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3253
Joined: Oct 19th, 2005
Re: How to get on increasing the clickable area of the playbutton on a node?
Reply #1 - Feb 28th, 2024 at 10:39am
Print Post  
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
  
Back to top
 
IP Logged
 
Rama
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 2
Joined: Feb 28th, 2024
Re: How to get on increasing the clickable area of the playbutton on a node?
Reply #2 - Feb 28th, 2024 at 3:51pm
Print Post  
Thank you Slavcho.

can you please help me to provide some pseudo code as per your suggestions.

Regards,
Rama
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3253
Joined: Oct 19th, 2005
Re: How to get on increasing the clickable area of the playbutton on a node?
Reply #3 - Feb 29th, 2024 at 6:48am
Print Post  
E.g. importing Thickness from @mindfusion/drawing:

Code
Select All
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
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3253
Joined: Oct 19th, 2005
Re: How to get on increasing the clickable area of the playbutton on a node?
Reply #4 - Feb 29th, 2024 at 6:52am
Print Post  
>> TableNode or CompositeNode

check tutorial 3 and SpanningCells examples, both showing how you can display multiple images and text labels in a single node.
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3253
Joined: Oct 19th, 2005
Re: How to get on increasing the clickable area of the playbutton on a node?
Reply #5 - Feb 29th, 2024 at 7:14am
Print Post  
Custom hit-testing function:

Code
Select All
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
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint