- 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.  
  HomeHelpSearchLoginRegister   
     
     
   
 
Page Index Toggle Pages: 1 Send Topic Print  
Custom Conatiner Node
Read 143 times

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


   
     
 
Custom Conatiner Node
Apr 18th, 2017 at 3:03pm
 
Please download video from given URL. In this video when ever i collapse the container node heading text for every node i.e. text in caption goes out of the box as you can see in video.  And also when i expand it again you can see the diagram please let me know how can i solve these issues.

https://goo.gl/A0saNX
 
 
 
IP Logged    
 
     

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


   
     
 
Re: Custom Conatiner Node
Reply #1 - Apr 19th, 2017 at 8:45am
 
If you are custom-drawing that text using MindFusion.Drawing.Text in onUpdateVisuals, I guess you aren't updating its bounds on subsequent onUpdateVisuals calls after creating it the first time.

If second issue you mention is that child tree nodes do not offset when container gets folded, you will need to handle the containerUnfolded event too and move child nodes with offset in the other direction this time (http://mindfusion.eu/Forum/YaBB.pl?num=1491205900/5#5)
 
 
 
IP Logged    
 
     

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


   
     
 
Re: Custom Conatiner Node
Reply #2 - Apr 19th, 2017 at 2:22pm
 
I tried to use  MindFusion.Drawing.Text in onUpdateVisuals. but facing the problem that text in every container node i.e. heading text is same for all container node present in that diagram. As per my requirement Heading text will be changed accordingly for every custom container. To avoid this problem I have created a separate shape Node and assign text to that then adding it to container node using attachNode api.

the below code is for Container node  UpdateVisuals.
Code (Javascript):
MindFusion.Diagramming.ContainerNode.prototype.onUpdateVisuals = (item: MindFusion.Diagramming.DiagramItem) => {
            var rect = item.bounds;
            //rect.height = 40;
            rect.width = this._conatinerAtt.width
            item.setBounds(rect);
            item.setFoldable(true);
            item.setFoldIconSize(10);
            var rectPath = new MindFusion.Drawing.Path();
            let tempWidth = this._conatinerAtt.height - 4;
            rectPath.addRect(rect.x + 2, rect.y + 2, 4, tempWidth);
            rectPath.setPen(this._conatinerAtt.headingColor);
            rectPath.setBrush(this._conatinerAtt.headingColor);
            item.getGraphicsContent().push(rectPath);

            //var nodeText = new MindFusion.Drawing.Text(this._conatinerAtt.headingText, new MindFusion.Drawing.Rect(rect.x + 30, rect.y + 2, rect.width / 2, rect.width/2));
            //nodeText.setFont(new MindFusion.Drawing.Font("sans-serif", 4, false, true, false));
            //item.getGraphicsContent().push(nodeText);

            var image = new MindFusion.Drawing.Image(new Rect(rect.x + 10, rect.y + 5, 15, 15));
            image.image.src = this._conatinerAtt.imageUrl;
            image.image.width = 10;
            image.image.height = 10;
            image.loaded = true;
            item.getGraphicsContent().push(image);

            image = new MindFusion.Drawing.Image(new Rect(rect.x + 20, rect.y + 20, 8, 8));
            image.image.src = this._conatinerAtt.incomingLnkImg;
            image.image.width = 10;
            image.image.height = 10;
            image.loaded = true;
            item.getGraphicsContent().push(image);

            image = new MindFusion.Drawing.Image(new Rect(rect.x + 35, rect.y + 20, 8, 8));
            image.image.src = this._conatinerAtt.outgoingLnkImg;
            image.image.width = 10;
            image.image.height = 10;
            image.loaded = true;
            item.getGraphicsContent().push(image);
        };
 


Code for adding heading text
Code (Javascript):
private addHeaderLabel(x, y){
        let l1 = this._factory.createShapeNode(x + 30, y - 8, this._conatinerAtt.height, this._conatinerAtt.height);
        l1.setFont(new Font(this._conatinerAtt.fontName, this._conatinerAtt.fontSize, false, false, false));
        l1.setTextColor(this._conatinerAtt.headingColor);
        l1.setText(this._conatinerAtt.headingText);
        l1.setTransparent(true);
        l1.setLocked(true);
        this.attachNode(l1);
    }
 


Code For adding Nodes child nodes in container node
Code (Javascript):
addNode(x, y, columnText, columnTextColor, columnImageSrcUrl) {
        let row = this._factory.createShapeNode(x, y + this._conatinerAtt.height + this._i, this._conatinerAtt.width, 10);
        let image = this._factory.createShapeNode(x + 4, y + this._conatinerAtt.height + 2 + this._i, 5, 5);
        image.setBrush(this._conatinerAtt.brushColor);
        image.setPen(this._conatinerAtt.penColor);
        //image.setShape(shape.fromId("Circle"));
        image.setImageLocation(columnImageSrcUrl);
        image.setLocked(true);
        this._ctr.add(image);
        //this.attachNode(image);
        row.setText(columnText);
        row.setBrush("White");
        this._i += 10;
        row.setTextColor(columnTextColor);
       
        this._ctr.add(row);
    }
 


For your Ref. i am adding custom-conatiner.component.ts file
 
 
 
IP Logged    
 
     

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


   
     
 
Re: Custom Conatiner Node
Reply #3 - Apr 20th, 2017 at 9:40am
 
The way you set ContainerNode.prototype.onUpdateVisuals to e nested function -

Code:
private createCustomTableTableNode() {
    MindFusion.Diagramming.ContainerNode.prototype.onUpdateVisuals = (item: MindFusion.Diagramming.DiagramItem) => {
    ... };} 



The nested function gets the "this" reference from the closure of last called createCustomTableTableNode(), and it gets shared by all containers when you assign it to a prototype. Try moving the ContainerNode.prototype.onUpdateVisual function declaration to a global context, or otherwise assign it to separate node instances instead of ContainerNode.prototype, so each instance remembers "this" from respective createCustomTableTableNode call -

Code:
var node = this._factory.createContainerNode(bounds.x, bounds.y, bounds.width, bounds.height);
node.onUpdateVisuals = (item: MindFusion.Diagramming.DiagramItem) =>
{
    var rect = item.bounds;
    console.log(this.id);
    var nodeText = new MindFusion.Drawing.Text(this._conatinerAtt.text, new MindFusion.Drawing.Rect(rect.x + 30, rect.y + 2, rect.width / 2, rect.width / 2));
    nodeText.setFont(new MindFusion.Drawing.Font("sans-serif", 4, false, true, false));
    item.getGraphicsContent().push(nodeText);
} 

 
 
 
IP Logged    
 
     

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


   
     
 
Re: Custom Conatiner Node
Reply #4 - Apr 21st, 2017 at 11:36am
 
Thanks this resolved the issue.
 
 
 
IP Logged    
 
     

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


   
     
 
Re: Custom Conatiner Node
Reply #5 - Apr 21st, 2017 at 11:54am
 
Now I am facing problem wierd problem Please have a look at the Pic 1 which in expanded state. If collapsed the root node tree appears like this in pic 2.Please let me know where i am going wrong.
 
 
 
IP Logged    
 
     

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


   
     
 
Re: Custom Conatiner Node
Reply #6 - Apr 21st, 2017 at 12:39pm
 
Child table nodes in whole tree disappear when you fold the root container? You were handling containerFolded event to offset descendant containers in the tree, are you doing anything else from the event handler?
 
 
 
IP Logged    
 
     

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


   
     
 
Re: Custom Conatiner Node
Reply #7 - Apr 21st, 2017 at 12:58pm
 
yes Child nodes in tree disappears.
Code for Folded Event
Code (Javascript):
this.diagram.addEventListener(Events.containerFolded, (sender, args) => {
                    console.log("diagram clicked");
                    var node = args.getNode();
                    this.offsetChildNodesFolded(node, node.unfoldedSize.height - node.captionHeight);
                    var r = node.getBounds();
                    r.height = nodeAtt.height;
                    r.width = nodeAtt.width;
                    node.setBounds(r);
                    node.updateLinks();
                    //this.rearrangeDiagram(this.diagram);
                });
private offsetChildNodesFolded(node, offset) {
        var links = node.getOutgoingLinks();
        for (var l = 0; l < links.length; l++) {
            var link = links[l];
            var child = link.getDestination();
            var rect = child.getBounds().clone();
            rect.y -= offset;
            child.setBounds(rect, true);
            this.offsetChildNodesFolded(child, offset);
        }
    }
 


Code For Unfolded Event
Code (Javascript):
this.diagram.addEventListener(Events.containerUnfolded, (sender, args) => {
                    console.log("diagram clicked");
                    var node = args.getNode();
                    this.offsetChildNodesUnFolded(node, node.unfoldedSize.height - node.captionHeight);

                    node.updateLinks();
                    //this.rearrangeDiagram(this.diagram);
                });
 private offsetChildNodesUnFolded(node, offset) {
        var links = node.getOutgoingLinks();
        for (var l = 0; l < links.length; l++) {
            var link = links[l];
            var child = link.getDestination();
            var rect = child.getBounds().clone();
            rect.y += offset;
            child.setBounds(rect, true);
            this.offsetChildNodesUnFolded(child, offset);
        }
    }
 

 
 
 
IP Logged    
 
     

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


   
     
 
Re: Custom Conatiner Node
Reply #8 - Apr 21st, 2017 at 1:30pm
 
Right, node.setBounds(r) only moves specified node and not child nodes and connected links. So in version 2.8 there are optional parameters like setBounds: function(rect, updateLinks, updateChildren) and you'd need to call it with true for updateChildren to automatically offset the table too. In version 3 it's a single bool parameter - setBounds: function(rect, updateDependencies). We haven't added these to Typescript definitions, you can either add them to d.ts file depending on what version you are using, or call setBounds(rect) for the child table too when offsetting its container. We'll add the updateDependencies argument for v3 Typescript definitions next week.
 
 
 
IP Logged    
 
     

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


   
     
 
Re: Custom Conatiner Node
Reply #9 - Apr 23rd, 2017 at 12:46pm
 
This resolved my issue. Please let me know when are you going to release the typescript definitions files
One more problem i am facing now please have look at the pics.
Please let me know how can i solve this issue.
 
 
 
IP Logged    
 
     

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


   
     
 
Re: Custom Conatiner Node
Reply #10 - Apr 24th, 2017 at 7:58am
 
As we discussed before node.setBounds only offsets end points of connected links, and if your links consist of more than one segments you'll need to apply same offset to their points too. E.g. add this to offsetChildNodesFolded after the child.setBounds call -

Code:
  for (var c = 1; c < link.getControlPoints().length - 1; c++)
   link.getControlPoints()[c].y -= offset;
  link.updateFromPoints(); 



and same in Unfolded variant but adding the offset to y instead.
 
 
 
IP Logged    
 
     
Page Index Toggle Pages: 1 Send Topic Print