Home » Blog » Nodable » Nodable v0.8

Nodable v0.8

Posted on by

Today I publish a first version of Nodable v0.8. This version comes with a lot of changes.

To start, a picture is better than words:

Fig. 1 – Nodable v0.8 – User edit a value from the graph, Nodable updates the code.

You don’t know Nodable? check this out: Nodable website

What’s new ?

We handle now multiple instructions and conditional structures. This new feature has been developed in order to figure out how to symbolize the code flow? and how to deal with execution?

We decided to add new nodes to symbolize instruction, code block and scopes. These nodes can be connected with green links to express next-previous relation type.

Fig 2 – Two instruction nodes liked in green to express next/previous relation.

A new way to display nodes

We decided to change the direction of the connection. Nodes are now connected at the top or at the bottom. This allows to draw instructions stacked and following a left-to-right top-to-bottom reading.

Fig. 3 – Nodable v0.8 – User select multiple lines, Nodable generate a graph.
Then user edit that graph, Nodable updates the code.

This new layout is interesting to follow the code flow during execution or debugging.

To execute the program

Since multiple instructions and conditions are allowed, we added a simple runner (responsible for evaluating instructions). User can execute the entire program at once or step by step.

Fig. 4 – Nodable v0.8 – The runner execute the selected program (first time fully and then step by step).

UI and level of detail

We can now adapt view to visualize the graph with different a level of details. This feature is here for future large graph edition. Though, something important is missing here: the possibility to open a node like a folder in a file explorer. This last feature will allow more abstraction layers and point of views, for example we could: enter in a nested scope to see only what’s inside, enter in a function node to edit its definition, visualise a class definition, visualise an entire project with its multiple files/folders, etc.

Fig 5 – Nodable v0.8 – Demonstration of switching to minimalist/essential/exhaustive view mode. Expanding/unexpanding nodes.

Thanks for reading this article, If you want to know more about this project:

Laisser un commentaire