Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic How to avoid node overlap with TableNode (Read 1688 times)
Shafi
Full Member
***
Offline


I Love MindFusion!

Posts: 109
Joined: Nov 8th, 2016
How to avoid node overlap with TableNode
Jan 7th, 2020 at 2:09pm
Print Post  
How to avoid overlapping of nodes in case of TableNodes? When the user adds many columns in the node, the overlapping with existing nodes is undesirable.
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3152
Joined: Oct 19th, 2005
Re: How to avoid node overlap with TableNode
Reply #1 - Jan 9th, 2020 at 5:50am
Print Post  
Are you using any automatic layout, or need to redistribute nodes placed by end users?
  
Back to top
 
IP Logged
 
Shafi
Full Member
***
Offline


I Love MindFusion!

Posts: 109
Joined: Nov 8th, 2016
Re: How to avoid node overlap with TableNode
Reply #2 - Jan 10th, 2020 at 10:01am
Print Post  
I do not use any default layout. I also want to arrange nodes/cells added by end users.
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3152
Joined: Oct 19th, 2005
Re: How to avoid node overlap with TableNode
Reply #3 - Jan 13th, 2020 at 5:33am
Print Post  
You can find if the modified table overlaps any others using this method -

Code
Select All
function findOverlaps(modifiedNode, minDist)
{
	var bounds = modifiedNode.getBounds();
	bounds.inflate(minDist - 1, minDist - 1);

	var overlaps = [];
	for (var i = 0; i < diagram.nodes.length; i++)
	{
		var node = diagram.nodes[i];
		if (modifiedNode == node)
			continue;
		if (bounds.intersectsWith(node.getBounds()))
			overlaps.push(node);
	}
	return overlaps;
} 



and the move the intersecting nodes to the right. That might introduce new overlaps so you'll have to keep processing until all removed -

Code
Select All
function removeOverlaps(modifiedNode, minDist)
{
	var queue = [];
	queue.push(modifiedNode);

	while (queue.length > 0)
	{
		var node = queue.shift();
		var nodeCenter = node.getCenter();

		var overlaps = findOverlaps(node, minDist);
		for (var i = 0; i < overlaps.length; i++)
		{
			var overlap = overlaps[i];
			var ovrCenter = overlap.getCenter();
			var ovrBounds = overlap.getBounds().clone();
			var dx = ovrCenter.x - nodeCenter.x;
			var dy = ovrCenter.y - nodeCenter.y;
			//if (Math.abs(dx) > Math.abs(dy))
			{
				// offset horizontally
				ovrBounds.x = node.bounds.right() + minDist;
			}
			//else
			{
				// offset vertically
				//ovrBounds.y = node.bounds.bottom() + minDist;
			}

			// shifting the node might introduce new overlaps, continue processing
			overlap.setBounds(ovrBounds, true);
			queue.push(overlap);
		}
	}
} 



E.g. call this after adding columns to a table, or from a nodeModified event handler in case users dragging a node onto another.

Regards,
Slavcho
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint