Hello MindFusion Team,

I have been playing with JavaScript Components.

//here is my code which i change from your tutorial-1

var Diagram = MindFusion.Diagramming.Diagram;
var DiagramLink = MindFusion.Diagramming.DiagramLink;
var ShapeNode = MindFusion.Diagramming.ShapeNode;

var Rect = MindFusion.Drawing.Rect;
var LayeredLayout = MindFusion.Graphs.LayeredLayout;
var ArrayList = MindFusion.Collections.ArrayList;

var diagram;

$(document).ready(function ()
{
     // create a Diagram component that wraps the "diagram" canvas
     diagram = MindFusion.AbstractionLayer.createControl(Diagram, null, null, null, $("#diagram")[0]);
     diagram.setLinkHeadShapeSize(2);

     // pretend we are calling a web service
     //$.get("Tutorial1.txt", onResponse);
           onResponse("");
     
     var mdiag = MindFusion.Diagramming;
     mdiag.DiagramLink.prototype.setTextBounds = function ()
     {
           var pos = this.points.length % 2 == 1 ?
                 this.points[Math.floor(this.points.length / 2)] :
                 mdiag.Utils.mid(this.points[this.points.length / 2 - 1], this.points[this.points.length / 2]);
           var bounds = new MindFusion.Drawing.Rect(pos.x, pos.y, 0, 0);
           this.text.setBounds(bounds, 0);
     };
});

function onResponse(json)
{
     
           var graph = {
                 "nodes":[
                 {"id":0,"name":"parent 1 TEST TEST TEST For long TExt"},
                 {"id":1,"name":"parent 2"},
                 {"id":2,"name":"Main"},
                 {"id":3,"name":"child 1"},
                 {"id":4,"name":"child 2"},
                 ],
                 "links":[
                 {"origin":0,"target":2},
                 {"origin":1,"target":2},
                 {"origin":2,"target":3},
                 {"origin":2,"target":4},
                 ]};
           buildDiagram(graph);      
}

function buildDiagram(graph)
{
     var nodeMap = [];

     // load node data
     var nodes = graph.nodes;
     ArrayList.forEach(nodes, function (node)
     {
           var diagramNode = diagram.getFactory().createTableNode(0, 0, 18, 8);
           nodeMap[node.id] = diagramNode;
           diagramNode.setText(node.name);
           diagramNode.setBrush("LightGray");
     });

     // load link data
     var links = graph.links;
     ArrayList.forEach(links, function (link)
     {
           var link = diagram.getFactory().createDiagramLink(
                 nodeMap[link.origin],
                 nodeMap[link.target]);
     });

     // arrange the graph            
      var layout = new MindFusion.Graphs.TreeLayout();
layout.direction = MindFusion.Graphs.LayoutDirection.TopToBottom;
layout.levelDistance = 25;
layout.nodeDistance = 15;
layout.linkType = MindFusion.Graphs.TreeLayoutLinkType.Default;
diagram.arrange(layout);
diagram.resizeToFitItems(50);
}

It generates expected output but nodes width is predefined, thats why i loose text inside Tablenode.

my questions are following,

1) is there any way to set fix to text width/height for TableNode?

2) Is there way to add Link which does not have direction Arrow for connection?

You help will be highly appreciable.

Thank you for your continuous support.

Hi Slavcho,

Can you please give me an example how to set height and width with these methods for TableNode?

I do not see height/width property for TableNode. I didn't found measureString(text, font, bounds, styled) method for diagram class.

How do we set these?

Hi Slavcho,

Thank you for your help. It saved me a lot time.

I have small question regarding TreeLayout which rearrange nodes accordingly to their parent/Child relation.

I have attached a jpeg file which has info about how much i have achieved and what i want to achieve.

Can you please have a look and tell me what sort of diagram link or layout property i need to set to get the desired result?

Thanks.

Hi Slavcho,

Tried doing that.

I end up thinking for another way which divides the out going link into two childs as shown in picture.

How would you guide me to achieve this?

Hi Slavcho,

Thank you for the help. It does work for Child elements but when it comes to parent it doesn't merge in one link.

// Here is the Code which use & see the diagram For output

var Diagram = MindFusion.Diagramming.Diagram;
var DiagramLink = MindFusion.Diagramming.DiagramLink;
var ShapeNode = MindFusion.Diagramming.ShapeNode;

var Rect = MindFusion.Drawing.Rect;
var LayeredLayout = MindFusion.Graphs.LayeredLayout;
var ArrayList = MindFusion.Collections.ArrayList;

var diagram;

$(document).ready(function ()
{
     // create a Diagram component that wraps the "diagram" canvas
     diagram = MindFusion.AbstractionLayer.createControl(Diagram, null, null, null, $("#diagram")[0]);
     diagram.setLinkHeadShapeSize(2);

           var graph = {
                 "nodes":[
                 {"id":0,"name":"parent 1"},
                 {"id":1,"name":"parent 2"},
                 {"id":2,"name":"Main"},
                 {"id":3,"name":"child 1"},
                 {"id":4,"name":"child 2"},
                 ],
                 "links":[
                 {"origin":0,"target":2},
                 {"origin":1,"target":2},
                 {"origin":2,"target":3},
                 {"origin":2,"target":4},
                 ]};
     
     var nodeMap = [];

     // load node data
     var nodes = graph.nodes;
     ArrayList.forEach(nodes, function (node)
     {
           var diagramNode = diagram.getFactory().createTableNode(0, 0, 18, 8);
           nodeMap[node.id] = diagramNode;
           diagramNode.setText(node.name);
           diagramNode.setBrush("LightGray");
     });

     // load link data
     var links = graph.links;
     ArrayList.forEach(links, function (link)
     {
           var link = diagram.getFactory().createDiagramLink(
                 nodeMap[link.origin],
                 nodeMap[link.target]);
                 
                 link.route();
     });
     
     

     // arrange the graph            
      var layout = new MindFusion.Graphs.TreeLayout();
layout.direction = MindFusion.Graphs.LayoutDirection.TopToBottom;
layout.levelDistance = 15;
layout.nodeDistance = 10;
layout.linkType = MindFusion.Graphs.TreeLayoutLinkType.Cascading;
diagram.arrange(layout);
diagram.resizeToFitItems(50);
     
});



Is there something wrong i did or its right output with TreeLayout?