Hi,

I am new to MindFusion. I tried some of the examples and tutorials. The diagram generated are positioned on its own. Are there some parameters which can fix the position of components. also can I change the Font of the text written?

Hi Stoyan,

Thanks for the reply. The font part worked.

For positioning the diagram components:
I am reading the parameters from a text file.

My js is: Tutorial5Iks.js
var Events = MindFusion.Diagramming.Events;
var Diagram = MindFusion.Diagramming.Diagram;
var DiagramLink = MindFusion.Diagramming.DiagramLink;
var ShapeNode = MindFusion.Diagramming.ShapeNode;
var AnchorPattern = MindFusion.Diagramming.AnchorPattern;
var AnchorPoint = MindFusion.Diagramming.AnchorPoint;
var MarkStyle = MindFusion.Diagramming.MarkStyle;
var GlassEffect = MindFusion.Diagramming.GlassEffect;
var LayeredLayout = MindFusion.Graphs.LayeredLayout;
var Font = MindFusion.Drawing.Font;
var Point = MindFusion.Drawing.Point;

var Rect = MindFusion.Drawing.Rect;

var diagram = null;


var decision1In3Out, apat2;

Sys.Application.add_load(function (sender, args)
{
     // create a Diagram component that wraps the "diagram" canvas
     diagram = $create(Diagram, null, null, null, $get("diagram"));

     // register event handlers
     //diagram.addEventListener(Events.nodeCreated, onNodeCreated);
     
     // pretent we are calling a web service
var request = new Sys.Net.WebRequest();
request.set_url("Tutorial5Iks.txt");
request.set_httpVerb("GET");
request.add_completed(onResponse);
request.invoke();

});

function onResponse(executor, eventArgs)
{
    if (executor.get_responseAvailable)
    {
        var json = executor.get_responseData();
        var graph = Sys.Serialization.JavaScriptSerializer.deserialize(json);
        buildDiagram(graph);
    }
}
function buildDiagram(graph)
{
    var nodeMap = [];
    var bounds = new Rect(20, 78, 60, 18);
           var blue = "#0000FF";
     var green = "#00FF00";
     var red = "#FF0000";
    // load node data
    var nodes = graph.nodes;
    Array.forEach(nodes, function (node)
    {
        var diagramNode = diagram.getFactory().createShapeNode(bounds);
        nodeMap[node.id] = diagramNode;
            diagramNode.setText(node.name);
      
           diagramNode.setShape(node.shape);
           diagramNode.setFont(new Font("sans-serif", 4));
             diagramNode.setBrush(node.color);
    });

    // load link data
    var links = graph.links;
    Array.forEach(links, function (link)
    {
      var diagramNode =   diagram.getFactory().createDiagramLink(
            nodeMap[link.origin],
            nodeMap[link.target]);
                 
                 diagramNode.setText(link.name);
                 
           
    });
     
           // arrange the graph
var layout = new LayeredLayout();
layout.nodeDistance = 10;
layout.layerDistance = 10;
diagram.arrange(layout);
}

And the text I am reading is :
{"nodes":[
     {"id":0,"name":"Start","shape":"Circle","color":"green"},
    {"id":1,"name":"Leave Request Created","shape":"Rectangle","color":"LightCyan"},
     {"id":2,"name":"Review By Approver","shape":"Rectangle","color":"LightCyan"},
    {"id":3,"name":"Is Leave Request Approved?","shape":"Decision","color":"LightCyan"},
    {"id":4,"name":"Approved by Approver 2","shape":"Rectangle","color":"LightCyan"} ,
     {"id":5,"name":"End","shape":"Circle","color":"green"},
],
"links":[
    {"origin":0,"target":1},
      {"origin":1,"target":2},
      {"origin":2,"target":3},
      {"origin":3,"target":4,"name":"No"},
      {"origin":3,"target":5,"name":"Yes"}
]}

Now I want to somehow pass the value of positioning the components through the text file. Please help me with this.

Hi Stoyan,

Thanks for the code. I am not sure what I am doing wrong.

js:

var Events = MindFusion.Diagramming.Events;
var Diagram = MindFusion.Diagramming.Diagram;
var DiagramLink = MindFusion.Diagramming.DiagramLink;
var ShapeNode = MindFusion.Diagramming.ShapeNode;
var AnchorPattern = MindFusion.Diagramming.AnchorPattern;
var AnchorPoint = MindFusion.Diagramming.AnchorPoint;
var MarkStyle = MindFusion.Diagramming.MarkStyle;
var GlassEffect = MindFusion.Diagramming.GlassEffect;
var LayeredLayout = MindFusion.Graphs.LayeredLayout;
var Font = MindFusion.Drawing.Font;
var Point = MindFusion.Drawing.Point;

var Rect = MindFusion.Drawing.Rect;

var diagram = null;


var decision1In3Out, apat2;

Sys.Application.add_load(function (sender, args)
{
     // create a Diagram component that wraps the "diagram" canvas
     diagram = $create(Diagram, null, null, null, $get("diagram"));

     // register event handlers
     //diagram.addEventListener(Events.nodeCreated, onNodeCreated);
     
     // pretent we are calling a web service
var request = new Sys.Net.WebRequest();
request.set_url("Tutorial5Iks.txt");
request.set_httpVerb("GET");
request.add_completed(onResponse);
request.invoke();

});

function onResponse(executor, eventArgs)
{
    if (executor.get_responseAvailable)
    {
        var json = executor.get_responseData();
        var graph = Sys.Serialization.JavaScriptSerializer.deserialize(json);
        buildDiagram(graph);
    }
}
function buildDiagram(graph)
{
    var nodeMap = [];
   
           var blue = "#0000FF";
     var green = "#00FF00";
     var red = "#FF0000";
    // load node data
    var nodes = graph.nodes;
    Array.forEach(nodes, function (node)
    {
     //var nodeBounds = new Rect(node.x, node.y, node.w, node.h);
        var diagramNode = diagram.getFactory().createShapeNode(node.bounds);
        nodeMap[node.id] = diagramNode;
            diagramNode.setText(node.name);
      
           diagramNode.setShape(node.shape);
           diagramNode.setFont(new Font("sans-serif", 4));
             diagramNode.setBrush(node.color);
    });

    // load link data
    var links = graph.links;
    Array.forEach(links, function (link)
    {
      var diagramNode =   diagram.getFactory().createDiagramLink(
            nodeMap[link.origin],
            nodeMap[link.target]);
           //      link.setStartPoint(new Point(link.startpointx, link.startpointy));
                 //link.setEndPoint(new Point(link.endpointx, link.endpointy));
                 diagramNode.setText(link.name);
                 
           
    });
     /*
           // arrange the graph
var layout = new LayeredLayout();
layout.nodeDistance = 10;
layout.layerDistance = 10;
diagram.arrange(layout);*/
}


txt:
{"nodes":[
     {"bounds":"new Rect(20, 35, 30, 20)","id":0,"name":"Start","shape":"Circle","color":"green"},
    {"bounds":"new Rect(70, 30, 30, 20)","id":1,"name":"Leave Request Created","shape":"Rectangle","color":"LightCyan"},
     {"id":2,"name":"Review By Approver","shape":"Rectangle","color":"LightCyan"},
    {"id":3,"name":"Is Leave Request Approved?","shape":"Decision","color":"LightCyan"},
    {"id":4,"name":"Approved by Approver 2","shape":"Rectangle","color":"LightCyan"} ,
     {"id":5,"name":"End","shape":"Circle","color":"green"}
],
"links":[
    {"origin":0,"target":1},
      {"origin":1,"target":2},
      {"origin":2,"target":3},
      {"origin":3,"target":4,"name":"No"},
      {"origin":3,"target":5,"name":"Yes"}
]}


with this I am getting error:
TypeError: D.getBounds(...).clone is not a function

I also tried setting x,y,w,h parameters for rectangles and startx,starty,endx,endy parameters for links. But somehow it is not working.

Hi Stoyan,

Thanks a ton. It worked  . I was passing  x,y,w,h parameters with "" ,due to this my diagram was not rendered.
{"id" :0, "x" :"10","y":"10","w":"10","h":"10"} .

I replaced it without quotes and it worked.

Thanks again