Page Index Toggle Pages: [1] 2 3  Send TopicPrint
Very Hot Topic (More than 25 Replies) Can we add inside container node another container node on click of expand collapse button (Read 9615 times)
reshma
Junior Member
**
Offline


I Love MindFusion!

Posts: 91
Joined: Jan 16th, 2018
Can we add inside container node another container node on click of expand collapse button
Jan 11th, 2021 at 11:38am
Print Post  
I already have diagram in this one container node and inside container node adding row(as creating Shapenode).
but now we have to do this functionality in another way as below mentioned,
Parent container node have one expand button, click on that expand button i want to add child container node and so on.....for multiple child.
For eg. in below diagram i have Parent node(container node) on click of expand button 2 child added 1)Child node 2)Child1 node both are container node.
again if i click on 1)Child node expand button i want to add another container node(Childs).

Can you please help on the same?
« Last Edit: Jan 11th, 2021 at 12:39pm by reshma »  

ContainernodeInsideContainernode.png ( 10 KB | 115 Downloads )
ContainernodeInsideContainernode.png
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3148
Joined: Oct 19th, 2005
Re: Can we add inside container node another container node on click of expand collapse button
Reply #1 - Jan 12th, 2021 at 8:13am
Print Post  
E.g. following code will do that from standard fold/unfold icon click -

Code
Select All
var mg = MindFusion.Graphs;
var md = MindFusion.Diagramming;

md.Folder.prototype.onClick = function (mousePosition)
{
	if (!this.hitTest(mousePosition))
		return;

	var child = diagram.getFactory().createContainerNode(0, 0, 20, 8);
	child.setFoldable(true);

	var container = this.node;
	container.add(child);

	// rearrange the container and its parent containers
	var verticalLayout = new mg.LayeredLayout();
	verticalLayout.multipleGraphsPlacement = mg.MultipleGraphsPlacement.Vertical;

	while (container)
	{
		container.arrange(verticalLayout);
		container = container.container;
	}
}; 



Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
reshma
Junior Member
**
Offline


I Love MindFusion!

Posts: 91
Joined: Jan 16th, 2018
Re: Can we add inside container node another container node on click of expand collapse button
Reply #2 - Jan 13th, 2021 at 5:42am
Print Post  
adding child in container but diagram area is not increasing.

while adding child in container or adding multiple container using how to increase diagram area automatically.
added
this.diagram.setAutoResize(AutoResize.AllDirections);
but still not working

and when i am doing collapse and expand node size(width) is changed how to avoid this?
« Last Edit: Jan 13th, 2021 at 8:08am by reshma »  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3148
Joined: Oct 19th, 2005
Re: Can we add inside container node another container node on click of expand collapse button
Reply #3 - Jan 13th, 2021 at 9:30am
Print Post  
Auto-resize is applied during user interactions. If you need a new size after changing item positions from code, call setBounds ot resizeToFitItems methods of Diagram.

ContainerNode.arrange leaves layout.margins space around nodes, so that might change the width. Set margins to the difference between container's expected width and the children's width to leave container's one intact.

Regards,
Slavcho
  
Back to top
 
IP Logged
 
reshma
Junior Member
**
Offline


I Love MindFusion!

Posts: 91
Joined: Jan 16th, 2018
Re: Can we add inside container node another container node on click of expand collapse button
Reply #4 - Jan 13th, 2021 at 2:34pm
Print Post  
i have applied above solution for adding and arrage child as per layout  but for the left ,right top and bottom margin is very large can we remove this margin or dynamically add margin ?
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3148
Joined: Oct 19th, 2005
Re: Can we add inside container node another container node on click of expand collapse button
Reply #5 - Jan 13th, 2021 at 3:41pm
Print Post  
You can call container.setBounds with whatever size you want after arranging.

Regards,
Slavcho
  
Back to top
 
IP Logged
 
reshma
Junior Member
**
Offline


I Love MindFusion!

Posts: 91
Joined: Jan 16th, 2018
Re: Can we add inside container node another container node on click of expand collapse button
Reply #6 - Jan 18th, 2021 at 11:41am
Print Post  
one more question regarding when we folded inside child how to manage the space and put child as one below postion insted of showing space inside.

And one more query how to hide expand /collapse button? if children's not present
« Last Edit: Jan 18th, 2021 at 1:50pm by reshma »  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3148
Joined: Oct 19th, 2005
Re: Can we add inside container node another container node on click of expand collapse button
Reply #7 - Jan 18th, 2021 at 2:18pm
Print Post  
Quote:
one more question regarding when we folded inside child how to manage the space and put child as one below postion insted of showing space inside.


What do you mean by "putting child as one below position"?

Quote:
And one more query how to hide expand /collapse button? if children's not present


Call container.setFoldable(false);
  
Back to top
 
IP Logged
 
reshma
Junior Member
**
Offline


I Love MindFusion!

Posts: 91
Joined: Jan 16th, 2018
Re: Can we add inside container node another container node on click of expand collapse button
Reply #8 - Jan 21st, 2021 at 8:39am
Print Post  
i have one problem while collapse and expand when i am expanding node inside all node and after that i am collapsing inside node and after that main node collapsed and after that all collapsed node again i am expanding that time my other parent node link disconnected
  
Back to top
 
IP Logged
 
reshma
Junior Member
**
Offline


I Love MindFusion!

Posts: 91
Joined: Jan 16th, 2018
Re: Can we add inside container node another container node on click of expand collapse button
Reply #9 - Jan 21st, 2021 at 8:46am
Print Post  
Quote:
[tr]one more question regarding when we folded inside child how to manage the space and put child as one below postion insted of showing space inside.[/tr]

when we collapsed inside node that time space is showing between collapsed node and other node ,below is the image
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3148
Joined: Oct 19th, 2005
Re: Can we add inside container node another container node on click of expand collapse button
Reply #10 - Jan 21st, 2021 at 1:26pm
Print Post  
The while (container) { arrange ... } loop from code above should take care of that, check if it executes as expected for your collapse case.
  
Back to top
 
IP Logged
 
reshma
Junior Member
**
Offline


I Love MindFusion!

Posts: 91
Joined: Jan 16th, 2018
Re: Can we add inside container node another container node on click of expand collapse button
Reply #11 - Jan 21st, 2021 at 7:39pm
Print Post  
i already put this on folded and unfolded event can you explain in details i don not understand
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3148
Joined: Oct 19th, 2005
Re: Can we add inside container node another container node on click of expand collapse button
Reply #12 - Jan 23rd, 2021 at 9:23am
Print Post  
Don't call arrange on folded containers, or the layout will still resize them to fit their children -

Code
Select All
function onContainerFolded(sender, e)
{
	arrangeContainers(e.getNode());
}

function onContainerUnfolded(sender, e)
{
	arrangeContainers(e.getNode());
}

function arrangeContainers(container)
{
	var verticalLayout = new mg.LayeredLayout();
	verticalLayout.multipleGraphsPlacement = mg.MultipleGraphsPlacement.Vertical;

	while (container)
	{
		if (!container.getFolded())
			container.arrange(verticalLayout);
		container = container.container;
	}
}

function arrangeRecursive(container)
{
	var childNodes = container.getChildren();
	for (var i = 0; i < childNodes.length; i++)
	{
		if (childNodes[i].children)
			arrangeRecursive(childNodes[i]);
	}
	var verticalLayout = new mg.LayeredLayout();
	verticalLayout.multipleGraphsPlacement = mg.MultipleGraphsPlacement.Vertical;
	container.arrange(verticalLayout);
}

function testCtrArrange(diagram)
{
	var l1 = diagram.factory.createContainerNode(20, 20, 60, 100);
	l1.setFoldable(true);

	for (var i = 0; i < 3; i++)
	{
		var l2 = diagram.factory.createContainerNode(20, 20, 60, 100);
		l2.setFoldable(true);
		l1.add(l2);

		for (var j = 0; j < 3; j++)
		{
			var l3 = diagram.factory.createContainerNode(20, 20, 60, 20);
			l3.setFoldable(true);
			l2.add(l3);
		}
	}

	arrangeRecursive(l1);
} 



Regards,
Slavcho
  
Back to top
 
IP Logged
 
reshma
Junior Member
**
Offline


I Love MindFusion!

Posts: 91
Joined: Jan 16th, 2018
Re: Can we add inside container node another container node on click of expand collapse button
Reply #13 - Feb 5th, 2021 at 2:02pm
Print Post  
In my case i am adding my 310 child node on unfolded event in container,In my container child not showing properly and sequence also changed(order changed whatever i am sending order that way adding element but not showing that order and showing only half element in main container node other space is showing empty) and showing empty space at the last in the main container,
« Last Edit: Feb 8th, 2021 at 6:37am by reshma »  

net-diagram-element-showing_space.png ( 29 KB | 104 Downloads )
net-diagram-element-showing_space.png
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3148
Joined: Oct 19th, 2005
Re: Can we add inside container node another container node on click of expand collapse button
Reply #14 - Feb 8th, 2021 at 7:24am
Print Post  
This shows child nodes in correct order in my test -

Code
Select All
function onContainerUnfolded(diagram, e)
{
	var ctr = e.getNode();
	if (ctr.children.length == 0)
	{
		var r = ctr.getBounds();
		for (var i = 0; i < 310; i++)
		{
			var child = diagram.factory.createContainerNode(r.x, r.y, 50, 10);
			child.setText(String(i));
			ctr.add(child);
		}
		arrangeContainers(ctr);
		diagram.resizeToFitItems();
		return;
	}
	// ....
} 





You could get such unfinished graphics if you have disabled virtual-scroll mode and the diagram size reaches the max. supported canvas element size (that might depend on browser version, video memory available, etc). Virtual scroll mode is enabled by default in recent versions of the diagram. Otherwise check if there aren't some errors reported in browser's console.

Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: [1] 2 3 
Send TopicPrint