- Welcome, Guest. Please Login or Register
MindFusion  
  Version 2 of our Xamarin Calendar component adds Resource view and support for Universal Windows Platform. Now beta testing spreadsheet component for Java Swing. We have released our Java Swing Pack.  
  HomeHelpSearchLoginRegister   
     
     
   
 
Pages: 1 2  Send Topic Print  
Need to draw similar kind of component in angular2 shown in pic
Read 1134 times

Ankur shah   Offline
YaBB Newbies
*
Posts: 37
I Love MindFusion!


   
     
 
Need to draw similar kind of component in angular2 shown in pic
Mar 16th, 2017 at 12:13pm
 
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 11:40am by Ankur shah »
 
IP Logged    
 
     

Slavcho   Offline
God Member
*****
Posts: 1100
Gender: male
tech.support


   
     
 
Re: Need to draw similar kind of component in angular2 shown in pic
Reply #1 - Mar 16th, 2017 at 12:29pm
 
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?
 
 
 
IP Logged    
 
     

Ankur shah   Offline
YaBB Newbies
*
Posts: 37
I Love MindFusion!


   
     
 
Re: Need to draw similar kind of component in angular2 shown in pic
Reply #2 - Mar 16th, 2017 at 1:08pm
 
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 8:16am by Ankur shah »

se1.PNG (6 KB | 29 )
se1.PNG
 
IP Logged    
 
     

Slavcho   Offline
God Member
*****
Posts: 1100
Gender: male
tech.support


   
     
 
Re: Need to draw similar kind of component in angular2 shown in pic
Reply #3 - Mar 17th, 2017 at 8:44am
 
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
 
 
 
IP Logged    
 
     

Ankur shah   Offline
YaBB Newbies
*
Posts: 37
I Love MindFusion!


   
     
 
Re: Need to draw similar kind of component in angular2 shown in pic
Reply #4 - Mar 17th, 2017 at 11:09am
 
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
 
 
 
IP Logged    
 
     

Slavcho   Offline
God Member
*****
Posts: 1100
Gender: male
tech.support


   
     
 
Re: Need to draw similar kind of component in angular2 shown in pic
Reply #5 - Mar 17th, 2017 at 11:14am
 
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
 
 
 
IP Logged    
 
     

Ankur shah   Offline
YaBB Newbies
*
Posts: 37
I Love MindFusion!


   
     
 
Re: Need to draw similar kind of component in angular2 shown in pic
Reply #6 - Mar 17th, 2017 at 11:34am
 
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 | 29 )
code.PNG
 
IP Logged    
 
     

Slavcho   Offline
God Member
*****
Posts: 1100
Gender: male
tech.support


   
     
 
Re: Need to draw similar kind of component in angular2 shown in pic
Reply #7 - Mar 17th, 2017 at 11:44am
 
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.
 
 
 
IP Logged    
 
     

Ankur shah   Offline
YaBB Newbies
*
Posts: 37
I Love MindFusion!


   
     
 
Re: Need to draw similar kind of component in angular2 shown in pic
Reply #8 - Mar 17th, 2017 at 12:22pm
 
As you said that i need use attachTo method to ContainerNode.
Will it get attached to the header of each Container node?
 
 
 
IP Logged    
 
     

Slavcho   Offline
God Member
*****
Posts: 1100
Gender: male
tech.support


   
     
 
Re: Need to draw similar kind of component in angular2 shown in pic
Reply #9 - Mar 17th, 2017 at 12:47pm
 
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:
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
 
 
 
IP Logged    
 
     

Ankur shah   Offline
YaBB Newbies
*
Posts: 37
I Love MindFusion!


   
     
 
Re: Need to draw similar kind of component in angular2 shown in pic
Reply #10 - Mar 20th, 2017 at 8:32am
 
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 | 28 )
se.PNG
 
IP Logged    
 
     

Slavcho   Offline
God Member
*****
Posts: 1100
Gender: male
tech.support


   
     
 
Re: Need to draw similar kind of component in angular2 shown in pic
Reply #11 - Mar 20th, 2017 at 12:35pm
 
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:
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
 
 
 
IP Logged    
 
     

Ankur shah   Offline
YaBB Newbies
*
Posts: 37
I Love MindFusion!


   
     
 
Re: Need to draw similar kind of component in angular2 shown in pic
Reply #12 - Mar 20th, 2017 at 12:59pm
 
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.
 
 
 
IP Logged    
 
     

Slavcho   Offline
God Member
*****
Posts: 1100
Gender: male
tech.support


   
     
 
Re: Need to draw similar kind of component in angular2 shown in pic
Reply #13 - Mar 20th, 2017 at 9:13pm
 
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:
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
 
 
 
IP Logged    
 
     

Ankur shah   Offline
YaBB Newbies
*
Posts: 37
I Love MindFusion!


   
     
 
Re: Need to draw similar kind of component in angular2 shown in pic
Reply #14 - Mar 22nd, 2017 at 2:30pm
 
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.
 
 
 
IP Logged    
 
     
Pages: 1 2  Send Topic Print