Page Index Toggle Pages: [1] 2  Send TopicPrint
Hot Topic (More than 10 Replies) Need to draw similar kind of component in angular2 shown in pic (Read 7937 times)
Ankur shah
Junior Member
**
Offline


I Love MindFusion!

Posts: 63
Joined: Mar 16th, 2017
Need to draw similar kind of component in angular2 shown in pic
Mar 16th, 2017 at 11:13am
Print Post  
Please have a look the pic attached. I need to draw this kind of container using mind fusion. As you can see in attached pic Test/001 is one container which is collapse able. Is this possible in mind fusion library.

I also need to add event for every child node selection and node selection
« Last Edit: Mar 17th, 2017 at 10:40am by Ankur shah »  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: Need to draw similar kind of component in angular2 shown in pic
Reply #1 - Mar 16th, 2017 at 11:29am
Print Post  
By that being a container, do you mean the triangle, icons and text labels should be separate child nodes, selectable and movable independently? Or do you need drawing code that will render these elements as static graphics in a custom node type?
  
Back to top
 
IP Logged
 
Ankur shah
Junior Member
**
Offline


I Love MindFusion!

Posts: 63
Joined: Mar 16th, 2017
Re: Need to draw similar kind of component in angular2 shown in pic
Reply #2 - Mar 16th, 2017 at 12:08pm
Print Post  
Yes i mean to say that text and icons and triangle should be a header of container.then in expanded state we will add child node to it.

Please have a look at the pic below this should be my single component in collapse state over here test should dynamic color of green line should be dynamic and small icon with square need the dynamic text.
Please provide me an example
« Last Edit: Mar 17th, 2017 at 7:16am by Ankur shah »  

se1.PNG ( 6 KB | 116 Downloads )
se1.PNG
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: Need to draw similar kind of component in angular2 shown in pic
Reply #3 - Mar 17th, 2017 at 7:44am
Print Post  
Yes, it should be possible, for sample code that adds extra text labels and images see this thread -
http://mindfusion.eu/Forum/YaBB.pl?num=1488530760

You will be setting ContainerNode.prototype.onUpdateVisuals instead of ShapeNode's one.

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


I Love MindFusion!

Posts: 63
Joined: Mar 16th, 2017
Re: Need to draw similar kind of component in angular2 shown in pic
Reply #4 - Mar 17th, 2017 at 10:09am
Print Post  
As i am using Angular2 I am creating container like below
var container = diagram.getFactory().createContainerNode(20, 20, 80, 100);

As suggested by you that we can use 
ContainerNode.prototype.onUpdateVisuals it gives me syntax error
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: Need to draw similar kind of component in angular2 shown in pic
Reply #5 - Mar 17th, 2017 at 10:14am
Print Post  
That assumes you've set a shortcut like -
var ContainerNode = MindFusion.Diagramming.ContainerNode;

Otherwise use the fully qualified name -
MindFusion.Diagramming.ContainerNode.prototype....

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


I Love MindFusion!

Posts: 63
Joined: Mar 16th, 2017
Re: Need to draw similar kind of component in angular2 shown in pic
Reply #6 - Mar 17th, 2017 at 10:34am
Print Post  
Please have a look at the sample code and let know where i am going wrong and please let what will be the correct way to use it.
  

code.PNG ( 63 KB | 126 Downloads )
code.PNG
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: Need to draw similar kind of component in angular2 shown in pic
Reply #7 - Mar 17th, 2017 at 10:44am
Print Post  
Is that Typescript? I guess we don't have the onUpdateVisuals definition in d.ts file, we'll try to add it today.

An alternative you could try is creating a ShapeNode for each additional icon and image you need, and attaching the ShapeNode to a ContainerNode using attachTo method. Set the ShapeNode's Transparent property to true to hide the node geometry and show only text and image.
  
Back to top
 
IP Logged
 
Ankur shah
Junior Member
**
Offline


I Love MindFusion!

Posts: 63
Joined: Mar 16th, 2017
Re: Need to draw similar kind of component in angular2 shown in pic
Reply #8 - Mar 17th, 2017 at 11:22am
Print Post  
As you said that i need use attachTo method to ContainerNode.
Will it get attached to the header of each Container node?
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: Need to draw similar kind of component in angular2 shown in pic
Reply #9 - Mar 17th, 2017 at 11:47am
Print Post  
If you do it with custom-drawing through prototype.onUpdateVisuals, the custom graphics will show for all container nodes. If doing it with the help of shape-nodes, you will need to create a set of such helper nodes for each ContainerNode instance. E.g. you could use a function like this to create and set up each container -

Code
Select All
function myCreateContainer(factory, x, y, label1)
{
    var ctr = factory.createContainerNode(x, y, 80, 100);
    var l1 = factory.createShapeNode(x + 10, y + 10, 20, 10);
    l1.setText(label1);
    l1.setTransparent(true);
    l1.attachTo(ctr);
    return ctr;
} 



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


I Love MindFusion!

Posts: 63
Joined: Mar 16th, 2017
Re: Need to draw similar kind of component in angular2 shown in pic
Reply #10 - Mar 20th, 2017 at 7:32am
Print Post  
Please have a look at the code.
I am facing issue when ever i fixed the height of "ctr.setCaptionHeight(40)" the collapse/expand button size automatically increased. Can you please let me know why this happening?

var container = this.dummyfunction( diagram.getFactory(), 20, 20, "Test/001 \n Bla Bla");
dummyfunction(factory, x, y, label1){
    var ctr = factory.createContainerNode(x, y, 120, 80);
    //ctr.setBounds(new Rect(20,20,120,80));
    var l1 = factory.createShapeNode(x + 18, y + 10, 20, 10);
    var bar = factory.createShapeNode(x+5, y+2, 2, 35);
    var triangle = factory.createShapeNode(x+8, y+12, 15, 10);
    var icon1 = factory.createShapeNode(x+30, y+30, 2, 2);
    var icon2 = factory.createShapeNode(x+30, y+33, 2, 2);
    var icon3 = factory.createShapeNode(x+33, y+30, 2, 2);
    var icon4 = factory.createShapeNode(x+33, y+33, 2.5, 2.5);
    var iconText1 = factory.createShapeNode(x + 28, y + 28, 20, 10);
    var smBar = factory.createShapeNode(x + 41, y + 28, .5, 10);
    var icon11 = factory.createShapeNode(x+45, y+30, 2, 2);
    var icon21 = factory.createShapeNode(x+45, y+33, 2, 2);
    var icon31 = factory.createShapeNode(x+48, y+30, 2, 2);
    var icon41 = factory.createShapeNode(x+48, y+33, 2.5, 2.5);
    var iconText2 = factory.createShapeNode(x + 43, y + 28, 20, 10);
    iconText1.setText("4");
    iconText1.setTransparent(true);
    iconText2.setText("5");
    iconText2.setTransparent(true);
    iconText1.css = { type: "LinearGradientBrush", color1: "LightGray", color2: "Black", angle: 60 };
   

    triangle.setShape(shape1.fromId("Triangle"));
    //triangle.setTransparent(true);
    bar.setPen("green");
    //iconText1.
    //bar.setShapeBrush({ type: "LinearGradientBrush", color1: "LightGray", color2: "Black", angle: 60 });
    //bar.setBackBrush("red")
    ctr.setCaptionHeight(40);
    ctr.setFoldable(true);
    l1.setText(label1);
    l1.setTransparent(true);
    icon1.attachTo(ctr);
    icon2.attachTo(ctr);
    icon3.attachTo(ctr);
    icon4.attachTo(ctr);
    icon11.attachTo(ctr);
    icon21.attachTo(ctr);
    icon31.attachTo(ctr);
    icon41.attachTo(ctr);
    smBar.attachTo(ctr);
    iconText1.attachTo(ctr);
    iconText2.attachTo(ctr);
    l1.attachTo(ctr);
    bar.attachTo(ctr);
    triangle.attachTo(ctr);
    //this.drawIcon().attachTo(ctr);
    return ctr;
  }
  

se.PNG ( 7 KB | 120 Downloads )
se.PNG
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: Need to draw similar kind of component in angular2 shown in pic
Reply #11 - Mar 20th, 2017 at 11:35am
Print Post  
It's by design, fold icon height is set to CaptionHeight minus some padding space. if you don't mind adding some JavaScript to your project, you could set MindFusion.Diagramming.Folder.prototype.getRect to your own function that returns a smaller rectangle. Default implementation is -

Code
Select All
getRect: function ()
{
    var node = this.node;
    var mm = GraphicsUnit.getMillimeter(node.parent.measureUnit);

    var diameter = node.getCaptionHeight();
    var padding = mm;
    if (padding > diameter / 4)
        padding = diameter / 4;

    var rect = node.bounds.clone();
    rect.height = diameter;
    rect.x = rect.right() - diameter;
    rect.width = diameter;
    rect = rect.inflate(-padding, -padding);

    return rect;
} 



Alternatively set container's Foldable property to false to hide the standard fold graphic and use attached node to represent it.

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


I Love MindFusion!

Posts: 63
Joined: Mar 16th, 2017
Re: Need to draw similar kind of component in angular2 shown in pic
Reply #12 - Mar 20th, 2017 at 11:59am
Print Post  
As you can see in below pic
What we need?
In se.png container is in expanded state. Over here my problem is that i need add table-nodes like test1, test2, ... test n. How can we achieve this?

We need container in collapsed state shown in pic se_collapsed_state.png but while collapsing we get the wrong one.

Please suggest me the best way to achieve this.
  

se_001.PNG ( 9 KB | 114 Downloads )
se_001.PNG
se_collapsed_state.png ( 7 KB | 106 Downloads )
se_collapsed_state.png
se_collapsed_state_wrong.PNG ( 7 KB | 105 Downloads )
se_collapsed_state_wrong.PNG
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: Need to draw similar kind of component in angular2 shown in pic
Reply #13 - Mar 20th, 2017 at 8:13pm
Print Post  
If all you need is to hide table rows, consider using TableNode alone without nesting it inside container, and implementing your own fold/unfold. E.g. try this -

Code
Select All
function onNodeClicked(sender, args)
{
	var node = args.getNode();
	if (node.constructor == TableNode)
	{
		var r = node.getBounds();
		if (args.getMousePosition().y < r.y + node.getCaptionHeight())
		{
			if (!node.getTag())
			{
				node.setTag(r.clone());
				r.height = node.getCaptionHeight();
				node.setBounds(r);
			}
			else
			{
				node.setBounds(node.getTag());
				node.setTag(null);
			}
		}
		return;
	}
} 



When NodeClicked is raised and pointer is inside caption area, that code stores original Bounds and collapses TableNode to its CaptionHeight, hiding the rows. On next click it restores table to its original size.

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


I Love MindFusion!

Posts: 63
Joined: Mar 16th, 2017
Re: Need to draw similar kind of component in angular2 shown in pic
Reply #14 - Mar 22nd, 2017 at 1:30pm
Print Post  
One more question regarding the node if we can keep all the node in read only mode i.e. it is not select able and also we are not allow to create a link.
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: [1] 2 
Send TopicPrint