Page Index Toggle Pages: 1 Send TopicPrint
Hot Topic (More than 10 Replies) Custom Conatiner Node (Read 5973 times)
Ankur shah
Junior Member
**
Offline


I Love MindFusion!

Posts: 63
Joined: Mar 16th, 2017
Custom Conatiner Node
Apr 18th, 2017 at 2:03pm
Print Post  
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
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: Custom Conatiner Node
Reply #1 - Apr 19th, 2017 at 7:45am
Print Post  
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)
  
Back to top
 
IP Logged
 
Ankur shah
Junior Member
**
Offline


I Love MindFusion!

Posts: 63
Joined: Mar 16th, 2017
Re: Custom Conatiner Node
Reply #2 - Apr 19th, 2017 at 1:22pm
Print Post  
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)
Select All
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)
Select All
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)
Select All
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
  

custom-container_component.zip ( 1 KB | 120 Downloads )
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: Custom Conatiner Node
Reply #3 - Apr 20th, 2017 at 8:40am
Print Post  
The way you set ContainerNode.prototype.onUpdateVisuals to e nested function -

Code
Select All
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
Select All
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);
} 

  
Back to top
 
IP Logged
 
Ankur shah
Junior Member
**
Offline


I Love MindFusion!

Posts: 63
Joined: Mar 16th, 2017
Re: Custom Conatiner Node
Reply #4 - Apr 21st, 2017 at 10:36am
Print Post  
Thanks this resolved the issue.
  
Back to top
 
IP Logged
 
Ankur shah
Junior Member
**
Offline


I Love MindFusion!

Posts: 63
Joined: Mar 16th, 2017
Re: Custom Conatiner Node
Reply #5 - Apr 21st, 2017 at 10:54am
Print Post  
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.
« Last Edit: Jun 1st, 2017 at 5:00am by Ankur shah »  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: Custom Conatiner Node
Reply #6 - Apr 21st, 2017 at 11:39am
Print Post  
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?
  
Back to top
 
IP Logged
 
Ankur shah
Junior Member
**
Offline


I Love MindFusion!

Posts: 63
Joined: Mar 16th, 2017
Re: Custom Conatiner Node
Reply #7 - Apr 21st, 2017 at 11:58am
Print Post  
yes Child nodes in tree disappears.
Code for Folded Event
Code (Javascript)
Select All
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)
Select All
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);
        }
    }
 

  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: Custom Conatiner Node
Reply #8 - Apr 21st, 2017 at 12:30pm
Print Post  
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.
  
Back to top
 
IP Logged
 
Ankur shah
Junior Member
**
Offline


I Love MindFusion!

Posts: 63
Joined: Mar 16th, 2017
Re: Custom Conatiner Node
Reply #9 - Apr 23rd, 2017 at 11:46am
Print Post  
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.
« Last Edit: Jun 1st, 2017 at 5:00am by Ankur shah »  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: Custom Conatiner Node
Reply #10 - Apr 24th, 2017 at 6:58am
Print Post  
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
Select All
  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.
  
Back to top
 
IP Logged
 
Ankur shah
Junior Member
**
Offline


I Love MindFusion!

Posts: 63
Joined: Mar 16th, 2017
Re: Custom Conatiner Node
Reply #11 - May 29th, 2017 at 10:07am
Print Post  
In below diagram i need to drag the node highlighted in red and drop in to parent node and It should get appended to parent node in blue section. Here comes my problem

1. When ever we dragging node i need to show ghost image of the node which we are dragging in tooltip which is not happening right now please have a look at the code.
We are using Angular 2 and not able to find out the definitions of get_element and Dispose
Code (Javascript)
Select All
    getNodeUnderCursor(event) {
        var localPoint = this.getLocalPoint(event);
        return this.diagram.getNodeAt(localPoint, true, true);
    }
    getLocalPoint(event) {
        // Get the relative coordinates
        var offset = $('#diagram').offset();
        var x = (event.pageX - offset.left) + $(window).scrollLeft();
        var y = (event.pageY - offset.top) + $(window).scrollTop();

        return this.diagram.clientToDoc(new Point(x, y));
    }
    onDragStartEvent(e) {
        let node = this.tngc.getNodeUnderCursor(e);
        if (node != null) {
            if (e.dataTransfer.setDragImage) {
                let ghost = <MindFusion.Diagramming.Diagram>this.createDragShape(node);
                if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
                    let img = new Image();
                    img.src = ghost.get_element().toDataURL();
                    e.dataTransfer.setDragImage(img, 0, 0);
                }
                else
                    e.dataTransfer.setDragImage(ghost.get_element(), 0, 0);
                ghost.dispose();
                ghost = null;
            }
            e.dataTransfer.setData("text", node.getText());

        }
    }

    onDragEnterEvent(event) {
        console.log(event);
    }

    createDragShape(node) {
        var bounds = new Rect(0, 0, node.getBounds().width, node.getBounds().height);

        var canvasElement = document.createElement('canvas');
        canvasElement.id = 'ghost';
        canvasElement.width = bounds.width;
        canvasElement.height = bounds.height;

        var canvas = MindFusion.Diagramming.Diagram.create(canvasElement);
        canvas.setBounds(bounds);

        var cnode = node.clone();
        cnode.shadowColor = 'transparent';
        cnode.parent = canvas;
        cnode.setBounds(bounds);
        cnode.addCanvasElements();

        return canvas;
    }
 


Can you please let me know what is going wrong over here?
« Last Edit: Jun 1st, 2017 at 5:00am by Ankur shah »  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: Custom Conatiner Node
Reply #12 - May 29th, 2017 at 11:27am
Print Post  
Comparing with our code above, you have changed MindFusion.Drawing.Canvas to MindFusion.Diagramming.Diagram and have removed the lines that call repaint and set canvas.scale. Return these back and it will work.

Code
Select All
var canvas = MindFusion.AbstractionLayer.createControl(MindFusion.Drawing.Canvas, null, null, null, canvasElement);
canvas.scale = 1;
canvas.setBounds(bounds);

var cnode = node.clone();
cnode.shadowColor = 'transparent';
cnode.parent = canvas;
cnode.setBounds(bounds);
cnode.addCanvasElements();

canvas.repaint(); 

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