More fun with Morphic: 1st iteration of a Mindmapping tool

The past three days, Noah Domingo (15) and I have
been working on a new Morphic example.
We have build a first iteration of a Mindmapping tool.
Noah shows it in:

https://vimeo.com/136943448

We would be interested in some design critique.
The way the Rubric text field is embedded in the
MindmapNode is not so clean.

The code can be loaded by

Gofer it
    smalltalkhubUser: 'StephanEggermont' project: 'Mindmap';
    package: 'Mindmap';
    load

Nice :)
would be fun to see if you can reuse the algo of roassal.


Le 21/8/15 23:57, Stephan Eggermont a écrit :

Hi,

Nice to see this mind map example, and that you're working with young
people for a brighter future with Smalltalk/Pharo :-). I remember that
the first app I want to create and even propose to this list was a Mind
mapping + Zooming app (think something like Xmind[1] mixed with
prezi[2]), but was too complex to start with by myself, so seeing young
people with proper tutorship starting with this is really awesome. I
went with outlining and interactive writing which, with GT Tools, seems
more approachable.

[1] https://en.wikipedia.org/wiki/XMind
[2] https://en.wikipedia.org/wiki/Prezi

About design critique, I'm too newbie to made any suggestion code wise,
but, as a long time user of mind mapping software I could offer some
advice about future steps for improvements on this early version.

   a. The first thing is colors, the vivid green for links can be too
vivid. This is a personal taste, but I would recommend to download Xmind
and see the provided templates and stick with one of them in colors and
graphical style as a prototype of the "end result".
   b. The second is edges. Curved are the classical style for them, even
on paper. Maybe the drawing or arranging mechanism is complicated, but
would be nice to have them instead of straight ones. Think in something
like http://www.xmind.net/m/ejnN/ or http://www.xmind.net/m/QLmZ/ or
http://www.xmind.net/m/jPvm/ as possible layouts for edges.
   c. Embedding graphics. If you offer this you could have a basic mind
mapping tool for pharo for 99% of the cases :-).

For the future I think in stuff like layout templates (a la Xmind),
links between nodes, collapsible and expandable nodes, multimedia and
zooming and you will have a serious contender in the presentation,
brainstorming arena!

Hope to be able to test it this weekend. This has been a really busy month!

Cheers,

Offray

Ps: I'm planning to use your Spec tutorials to rewrite the interface for
my Grafoscopio project trying to mix Spec and GT Tools, as soon as I
have time again, so thanks for writing it.

On 21/08/15 16:57, Stephan Eggermont wrote:

Just a small note:you can integrate GT tools as presentations in Spec now using a GlamourPresentationModel, so it seems that what you want to do should be easy.

The GlamourPresentationModel is currently in my Playground repository on Smalltalkhub. ( http://smalltalkhub.com/#!/~jfabry/Playground/packages/Spec-Glamour ) There is also an example UI called GlamourPMExample that shows how to use it.

> On Aug 22, 2015, at 07:44, Offray Vladimir Luna Cárdenas <[hidden email]> wrote:
>
> Ps: I'm planning to use your Spec tutorials to rewrite the interface for my Grafoscopio project trying to mix Spec and GT Tools, as soon as I have time again, so thanks for writing it.



---> Save our in-boxes! http://emailcharter.org <---

Johan Fabry   -   http://pleiad.cl/~jfabry
PLEIAD and RyCh labs  -  Computer Science Department (DCC)  -  University of Chile

On 22-08-15 09:55, stepharo wrote:
> Nice :)
> would be fun to see if you can reuse the algo of roassal.

I've taken a look at RTLayout and friends. Looks like
a pretty small interface to implement.

A separate package with the layouters would
be useful. Alexandre?

Stephan

Le 22/8/15 17:13, Stephan Eggermont a écrit :
> On 22-08-15 09:55, stepharo wrote:
>> Nice :)
>> would be fun to see if you can reuse the algo of roassal.
>
> I've taken a look at RTLayout and friends. Looks like
> a pretty small interface to implement.
>
> A separate package with the layouters would
> be useful.
Indeed I always thought about it.

> Alexandre?
>
> Stephan
>
>
>
>

Excerpts from stepharo's message of 2015-08-22 09:55:04 +0200:
> would be fun to see if you can reuse the algo of roassal.

i have taken a stab at that:

===========================================================================================
view := RTView new.
| activenode prevnode |

view
        when: TRMouseClick
        do:
                [ :ev |
                | label node |
                "node := shape element."
                label := RTEditableLabel new
                        height: 30; "i have a very high resolution and like large fonts"
                        text: '';
                        element.
                node := RTBox new
                        color: Color white;
                        borderWidth: 2;
                        borderColor: Color black;
                        element.
                node @ RTDraggable.

                "select a node to branch of new nodes from it"
                node when: TRMouseClick do: [ :click | activenode := click element ].

                "if the label is empty: '', then its size is 0@0 and is no
                 longer clickable to edit, hence we make the node clickable instead"
                node when: TRMouseDoubleClick do: [ label shape showTextMorphFor: label ].
                node when: TRMouseLeave do: [ label shape hideTextMorphFor: label ].
                view
                        add: node;
                        add: label.
                RTNest new
                        stretchable;
                        on: node nest: {label}.

                "when the label changes its size, the box doesn't update its
                 size unless we add this workaround"
                label trachelShape addCallback: (TRExtentCallback new block: [ :aShape :ratio | node trachelShape extent: aShape extent + (20 @ 0) ]).

                node translateTo: ev position.

                "label shape showTextMorphFor: label." "this opens the node in edit mode,
                                                        but somehow messes things up"

                (activenode notNil and: node ~= activenode)
                        ifTrue: [ prevnode := activenode ].
                prevnode
                        ifNotNil: [ edge := RTEdge from: prevnode to: node.
                                edge
                                        +
                                                (RTBezierLine horizontal
                                                        withContinuousRectangleAttachPoint;
                                                        yourself).
                                view add: edge ].
                prevnode := node.
                activenode := node.
                view signalUpdate ].
view.
===========================================================================================

the behavior is a bit different than the usual mindmapping tools as it does not
enforce an automatic layout but you are free to place nodes whereever you like
by just clicking in the location and moving the node later.

that behavior is inspired by a mindmapping tool called labyrint:
https://github.com/labyrinth-team/labyrinth
https://www.youtube.com/watch?v=Pv3dTovGc0E


thanks to alexandre  bergel and others who helped me to figure out some
problems such as a workaround for RTEditableLabel not working with
RTCompositeShape:

shape := RTCompositeShape new.
shape allOfSameSizeWithPadding.
shape add: (RTBox new color: Color white; borderWidth: 2; borderColor: Color black).
shape add: (RTEditableLabel new height: 30).

the remaining problems are cosmetic. for example i can't seem to get the nodes
to open up in edit mode. doing that with the commented line in the code above,
wrecks havoc on the node.
i also would like RTBezierLine to be horizontal or vertical depending on how
the two nodes are positioned to each other. and it should always start at the
middle of the rectangles edge at a 90degree angle.

lastly, i'd like to have rounded corners on the RTBox.

if/when i develop this further, i plan to add the ability to select multiple
nodes and add edges between them. be able to move selected nodes as a group,
and align selected (or all) nodes according to one of the layouts provided by
roassal (tree, circle, etc), things like export to svg or png would also be nice.

and of course, package it up...

greetings, martin.

--
eKita                   -   the online platform for your entire academic life
--
chief engineer                                                       eKita.co
pike programmer      pike.lysator.liu.se    caudium.net     societyserver.org
secretary                                                      beijinglug.org
mentor                                                           fossasia.org
foresight developer  foresightlinux.org                            realss.com
unix sysadmin
Martin Bähr          working in china        http://societyserver.org/mbaehr/

Looks good!!!!