JointJs is Really Interesting!

In this week, I spent my time trying to trigger the simulation on the schematic part as I told you last week. In the beginning, it was confusing. I definitely needed to understand first how the schematic was built. The schematic was built using JointJs as I mentioned before. However, there are many cells that were customized. I went through many demos on JointJs website and had a good understanding of the attributes and features of the library and how they work. Since I have spent most of my time this week dealing with JointJs library, I am going to talk a little bit about it and how it works.

When you are building your schematic/diagram using JointJs library, your schematic will mainly consist of three main things which are the paper, graph and cells. Paper is the view for the graph model. Graph is the model holding the cells (elements and links) of the diagram. Cells basically represent all the things in your diagram. All of paper, graph and cells are objects, thus, they have properties and methods. They all inherit from Backbone View. Backbone.js is really interesting. If you have used JavaScript before, you might have noticed that you trigger specific functions when some actions/events happen to a related part of HTML elements on the web page. On the other hand, when using Backbone, you trigger specific lines of code when data are changed, hence, you keep data in sync between the HTML UI and your JavaScript logic.

With Backbone, you represent your data as Models, which can be created, validated, destroyed, and saved to the server. Whenever a UI action causes an attribute of a model to change, the model triggers a “change” event; all the Views that display the model’s state can be notified of the change so that they are able to respond accordingly, re-rendering themselves with the new information. In a finished Backbone app, you don’t have to write the glue code that looks into the DOM to find an element with a specific id, and update the HTML manually — when the model changes, the views simply update themselves.

Here is an example of a basic code built using JointJs library:

var graph = new joint.dia.Graph var paper = new joint.dia.Paper({     el: $('#paper'),      width: 600,      height: 400,      gridSize: 10,      model: graph }); 
var rect = new joint.shapes.basic.Rect(position: { x: 50, y: 70 },
          size: { width: 100, height: 40 } }); 
graph.addCell(rect);

• When a paper is associated with a graph, the paper makes sure that all the cells added to the graph are automatically rendered.
• Paper automatically handles changes an renders the rectangle to the SVG document that it internally holds.

I hope you feel how fun it is. Maybe you have used this concept before. I mean triggering functions based on data change, not events that are linked with DOM, but for me, it is a first time experience.

I did not finish my task completely yet. As I mentioned before, I am assigned to link the code with the schematic so that they can communicate. I successfully could blink modules on the schematic. However, I am using dummy data so far to make it happen. I have to send data according to addresses that come from the simulator. I will explain to you about it when I am hopefully completely done with it.