Linking and Styling Nodes with GoJs | Lessoncup Programming Blog

Wednesday, 16 October 2013

Linking and Styling Nodes with GoJs

Few days back i have posted lesson on Creating Nodes with GoJs. Now i am going to explain how to linking the nodes to each other and how we styling and manage the nodes on our diagram panel. in this lesson i am elaborating this to previous one with adding some GoJs functions to linking & stying the nodes.





Javascript

Include the Gojs library inside the HEAD tag.

i have used go.GraphObject.make; to make the diagram and assign to $ variable.

go.Diagram will use to display the created diagram in the DIV

initialContentAlignment: go.Spot.Center  this property is define the diagram from center of the panel and we can manage the diagram alignments with this.

go.Node  is to create the Nodes on panel.

go.Binding  is to manage locations & styling the created nodes.

go.Shape is use to change the nodes into different shapes.

go.TextBlock is style inside the text in Nodes.

now i am creating lessonsArray to store the Models, bellow is the sample example.

ex: {key: "nodename", color: "colorname", loc: "t, r, b, l"},

and one more array to link the each node

ex: {from:"node name", to: "node name"}

after completing this i am using this new go.GraphLinksModel(lessonsArray, linkTolessons); to links the nodes to models.

undoManager.isEnabled = true; is enable the feature for changes we made on diagram board.



<script type="text/javascript" src="go.js"></script>

<script>

function myBoard() {
 
 
 var $ = go.GraphObject.make;

    myDiagrams =
      $(go.Diagram, "lessoncup", 
        {
          initialContentAlignment: go.Spot.Center,
    
        });
  
  myDiagrams.nodeTemplate =
      $(go.Node, "Auto",
   
   new go.Binding("location", "loc", go.Point.parse),
   
        $(go.Shape, "RoundedRectangle",
  
          new go.Binding("fill", "color")),
    
        $(go.TextBlock,
  
          { margin: 5 },
    
          new go.Binding("text", "key"))
      );
   
   
    

    // Create the Diagram's Model:
 
   var lessonsArray=[
   {key: "Lesson Cup", color: "lightblue"},
   {key: "Html5", color: "Orange", loc: "50 -50 0 0"},
   {key: "JQuery" , color: "cyan", loc: "130 -50 0 0"},
   {key: "Ajax",color: "lightGreen", loc: "200 20 0 0"},
   {key: "Css3",color: "Yellow", loc: "130 50 0 0"},
   {key: "Php",color: "red", loc: "200 -20 0 0"},
   {key: "My Sql",color: "pink",loc: "50 50 0 0"}
   ];
 
 //End ..
 
 //Linking to Each one..
 
 var linkTolessons=[
 {from: "Lesson Cup", to: "Html5"},
 {from: "Lesson Cup", to: "JQuery"},
 {from: "Lesson Cup", to: "Ajax"},
 {from: "Lesson Cup", to: "Css3"},
 {from: "Lesson Cup", to: "Php"},
 {from: "Lesson Cup", to: "My Sql"}
 
 ];


    myDiagrams.model = new go.GraphLinksModel(lessonsArray, linkTolessons);
 
 myDiagrams.model.undoManager.isEnabled = true;

}
 
</script>

HTML

<body onload="myBoard()">

<div id="lessoncup"></div>

</body>


Live Demo

No comments :

Post a Comment

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA
lessoncup@gmail.com

PHP | My SQL | JQUERY
Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons