We are happy to announce an initial version of GT Diagrammer, an engine for 
constructing diagrams interactively. This is the newest addition to the next 
generation GT built on Bloc.
It looks like this:

We chose to work on Diagrammer for multiple reasons. First, developers often 
need to create hand built diagrams to communicate intentions, and an integrated 
experience should not require us to leave our environment to create them. At 
the same time, Diagrammer is an application that requires a widgets and 
interactions, and thus it is a nice exercise for Bloc and Brick.

One requirement we had from the beginning was to make it work with any Bloc 
element. This means that the editing part had to be reasonably generic. To this 
end, we now have elements that can define visual editors. This is somewhat a 
combination between Magritte descriptions, and inspector extensions. An 
interesting side effect is that now we can edit visual properties when 
inspecting any element. In other words, we got the basic infrastructure of a UI 
painter. It looks like this:
The user interface essentially relies on two widgets: scrollable list and 
toggle button. While the visual look of the toggle button is inspired from 
material design, the most interesting part is that now we have an 
implementation for controlling looks per element instance. A key issue here is 
that looks can react to events coming from the element and inject visual 
attributes and possible even change behavior (for example, changing an icon 
while pressing a button). We will post more about looks soon.
We now also have a nice solution for overlays. For example, we have an overlay 
showing selection and an overlay for resizing elements.
Perhaps less obvious, Diagrammer also offers a basic infrastructure for the 
area of visual languages. As Diagrammer works with any Bloc elements, we can 
simply create dedicated visual elements. As an example, Diagrammer comes with 
an implementation of a UML class figure. Furthermore, as the functionality does 
not impose a specific model, custom language semantics can be mapped on visual 
There are several things to do still for it to become a mature solution. An 
important next step is to serialize a diagram scene in a reproducible manner. 
Currently, the diagram (or any element) can be exported as pdf 
(https://twitter.com/feenkcom/status/976580153802358786), svg 
(https://twitter.com/feenkcom/status/976578060429484032), png, gif or jpeg by 
directly using the low level canvas. However, for the diagram to be truly 
useful we need to store the result in either code or another reloadable form 
such as STON. Other future directions are related to figure controlling (for 
example, custom anchors or line bending points) and to enhanced editors.
To play with it, the easiest way is to download the new GT in a Pharo 6.1 image:
Metacello new
   baseline: 'GToolkit';
   repository: 'github://feenkcom/gtoolkit/src';
And then inspect:
GtDiagrammerElement new
The feenk team


"Presenting is storytelling."

Reply via email to