Draw a Link dynamically

GoJS
#1

Hi people

I’ try to draw a Finite-State machine (http://en.wikipedia.org/wiki/Finite-state_machine). But I need to draw the elements dynamically. For this I used the following code (Im using jQuery Too):

var diagram = new go.Diagram("canvas");
var $$ = go.GraphObject.make;
diagram.initialContentAlignment = go.Spot.Center;
diagram.undoManager.isEnabled = false;
diagram.isReadOnly = true
diagram.allowSelect = false;
diagram.initialAutoScale = go.Diagram.Uniform;

var state = [{text: 'q0', initial: true, final: false}, {text: 'q1', initial: false, final: true}];

$.each(state , function (i, v) {
        var node = new go.Node(go.Panel.Auto);
        var shape = new go.Shape();
 
        shape.figure = "Circle";
                    
        if (v.final)
            shape.figure = "Ring";

        if (v.initial) {
            shape.fill = "lightblue";
        } else {
            shape.fill = "White";
        }
 
        node.key = v.text;
        node.add(shape);
        var textblock = new go.TextBlock();
        textblock.text = v.text;
        textblock.margin = 15;
        node.add(textblock);
        diagram.add(node);
});

with this the result is:


Well, that is ok. Now, I need to draw the transitions between q0 and q1. I try to draw using GraphLinksModel, but i cant.
I've also tried using this:


var initialNode = diagram.findNodeForKey(v.Initial);
var finalNode = diagram.findNodeForKey(v.Final);

var link = new go.Link();
link.fromNode = initialNode;
link.toNode = finalNode;
diagram.add(link);
What can I do??

Thanks

<span id=“result_” =“short_text”="" lang=“en”><span =“hps”="">The result <span =“hps”="">should be <span =“hps”="">something like:

#2

In general its better to deal with Nodes and Links as model data than adding them directly to the Diagram. This is how the majority of our samples are set up, and Nodes and Links can be added to model data dynamically with Diagram.model.addNodeData(data) and Diagram.model.addLinkData(data)

One sample that uses both of these is State Chart, which also serves as a great starting point for making a finite state machine app: http://www.gojs.net/latest/samples/stateChart.html

You could replace its node and link templates with the ones you have designed so far, and consider the addNodeAndLink method for example usage of addNodeData and addLinkData:

    // clicking the button inserts a new node to the right of the selected node,
    // and adds a link to that new node
    function addNodeAndLink(e, obj) {
      var adorn = obj.part;
      if (adorn === null) return;
      e.handled = true;
      var diagram = adorn.diagram;
      diagram.startTransaction("Add State");
      // get the node data for which the user clicked the button
      var fromNode = adorn.adornedPart;
      var fromData = fromNode.data;
      // create a new "State" data object, positioned off to the right of the adorned Node
      var toData = { text: "new" };
      var p = fromNode.location;
      toData.loc = p.x + 200 + " " + p.y;  // the "loc" property is a string, not a Point object
      // add the new node data to the model
      var model = diagram.model;
      model.addNodeData(toData);
      // create a link data from the old node data to the new node data
      var linkdata = {};
      linkdata[model.linkFromKeyProperty] = model.getKeyForNodeData(fromData);
      linkdata[model.linkToKeyProperty] = model.getKeyForNodeData(toData);
      // and add the link data to the model
      model.addLinkData(linkdata);
      // select the new Node
      var newnode = diagram.findNodeForData(toData);
      diagram.select(newnode);
      diagram.commitTransaction("Add State");
    }