On Sat, Apr 7, 2018 at 6:39 PM, Tudor Girba <tudor@tudorgirba.com> wrote:
Hi,
��
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:
https://twitter.com/feenkcom/status/982656456968241152
��
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��actions.
��
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/ ),��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.976578060429484032
��
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';
�� ��load.
��
And then inspect:
GtDiagrammerElement��new
��
Cheers,
The feenk team
��