Hi Tudor,
Very nice! Thank you for sharing, this seems to be hard work.
If you welcome some feedback:
Live tab:
- When I select "Figure" button, then choose from the figures toolbar and
put a figure, the selection focus goes back to the "Select" button loosing
the figures toolbar. It would be nice to save some clicks by staying in the
Figure when putting a lot of figures.
- The "Figure" are actually UML figures? It would be cool to categorize the
types of figures available in a toolbar.
- Clicking "Line" button does not display any lines to select (maybe ToDo?)
Events tab
- I guess is used for Undo/Redo
"User data", "Resizers", and "Transformation"
- I didn't understood what are they for.
I am intrigued by the "inject visual attributes" per-instance, maybe
something like the old Parts Workbench from VisualSmalltalk?
Cheers,
Hernán
2018-04-07 13:39 GMT-03:00 Tudor Girba <tudor(a)tudorgirba.com>om>:
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:
https://twitter.com/feenkcom/status/976341449267531776
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/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';
load.
And then inspect:
GtDiagrammerElement new
Cheers,
The feenk team
--
www.tudorgirba.com
www.feenk.com
"Presenting is storytelling."
_______________________________________________
Moose-dev mailing list
Moose-dev(a)list.inf.unibe.ch
https://www.list.inf.unibe.ch/listinfo/moose-dev