Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic Change node position dynamically (Read 2588 times)
JaymeW
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 24
Joined: Oct 14th, 2021
Change node position dynamically
Nov 9th, 2021 at 4:39pm
Print Post  
Hi,
I'm trying to create a function that makes a node able to iterate through a flowchart. So far I can access the position of nodes and store them in a variable. What I'm not getting is updating the node position to the next node in the flowchart.
Also, I need to delete the current node at the end of the flowchart so that the next one can enter it, is there a function that can delete specific nodes? I had thought about saving the current state of the flowchart and then deleting everything and loading the flowchart so the next part could come in, but that would be too much work for something simple I plan to do.
Below is an example, I want nodes A and B to go through the flowchart. When A finishes its course, it would be deleted and B would enter. When I refer to entering the flowchart it is simply superimposing the node on the node of the flowchart placing it in the same position.
  

example.png ( 19 KB | 97 Downloads )
example.png
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: Change node position dynamically
Reply #1 - Nov 9th, 2021 at 5:08pm
Print Post  
Hi,

You can remove a node by calling Diagram.removeItem method.

Code
Select All
var overlayNode;
var flowchartNode;

// using version 4 property syntax

function iterateNextNode()
{
	if (overlayNode == null)
		return;

	var nextNode = null;
	if (flowchartNode != null)
	{
		for (var link of flowchartNode.outgoingLinks)
		{
			nextNode = link.destination;
			break;
		}
	}
	else
	{
		nextNode = diagram.nodes[0];
	}

	if (nextNode == null)
	{
		diagram.removeItem(overlayNode);
		overlayNode = null;
		// todo: select next overlay
	}
	else
	{
		overlayNode.bounds = nextNode.bounds;
	}

	flowchartNode = nextNode;
} 



Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
JaymeW
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 24
Joined: Oct 14th, 2021
Re: Change node position dynamically
Reply #2 - Nov 9th, 2021 at 5:50pm
Print Post  
Hi,
thank you it's working, but the node's size is changing as it goes through the flowchart. How could I just take the position without changing the size?
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: Change node position dynamically
Reply #3 - Nov 9th, 2021 at 5:55pm
Print Post  
Hi,

Clone overlay's bounds, call clone's Rect.setCenter method passing to it the target's center, and assign it back to overlay.bounds. Alternatively set Rect's x/y properties if you want to align node's sides instead of centers.

Regards,
Slavcho
  
Back to top
 
IP Logged
 
JaymeW
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 24
Joined: Oct 14th, 2021
Re: Change node position dynamically
Reply #4 - Nov 11th, 2021 at 6:28pm
Print Post  
Hi,
thank you. One last thing, I also researched that the library has an animation function, however, the node it can only traverse vertically? Whereas I only found examples in this model.
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: Change node position dynamically
Reply #5 - Nov 12th, 2021 at 7:50am
Print Post  
Hi,

You could register a callback function that lets you animate different values than Y position. E.g. this is from Samples/JavaScript/Animations.js:

Code
Select All
function createPulseAnimation(item) {
	var options =
	{
		duration: 550,
		repeat: true,
		reverse: true,
		fromValue: -0.075,
		toValue: 0.075
	}
	var a = new Animation(item, options, onPulse);
	return a;
}

// a custom update callback to create the pulsating effect.
function onPulse(animation, progress) {
	var bounds = animation.item.bounds.clone();
	var to = animation.toValue;
	bounds = DrawingUtils.inflate(bounds, to * progress, to * progress);
	animation.item.setBounds(bounds, true);
} 



Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
JaymeW
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 24
Joined: Oct 14th, 2021
Re: Change node position dynamically
Reply #6 - Nov 12th, 2021 at 4:00pm
Print Post  
Thanks again  Smiley
  
Back to top
 
IP Logged
 
JaymeW
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 24
Joined: Oct 14th, 2021
Re: Change node position dynamically
Reply #7 - Nov 17th, 2021 at 4:40pm
Print Post  
Hi,
I can animate a node and make it travel on the X axis and diagonally. However, my problem now is how to calculate the path that the node needs to go from one another diagonally. Is there any library function that, with the center of two nodes or using node bounds, I can calculate the path that the animated node needs to go?
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: Change node position dynamically
Reply #8 - Nov 17th, 2021 at 6:15pm
Print Post  
Hi,

Position math should be the same as links' start-to-end-points animation from that example -

Code
Select All
function onUpdateLink(animation, animationProgress) {
	var link = animation.item;
	var pointA = animation.fromValue,
		pointB = animation.toValue;

	link.endPoint = (
		new Point(
			pointA.x + (pointB.x - pointA.x) * animationProgress,
			pointA.y + (pointB.y - pointA.y) * animationProgress));
	link.invalidate();
} 



So replace pointA and pointB with your node centers, and then move overlay node instead of setting link.endPoint.

Regards,
Slavcho
  
Back to top
 
IP Logged
 
JaymeW
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 24
Joined: Oct 14th, 2021
Re: Change node position dynamically
Reply #9 - Nov 17th, 2021 at 7:40pm
Print Post  
It's works! Thank you Smiley
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint