Roassal: ROTranslatingShape - label besides node

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
9 messages Options
Reply | Threaded
Open this post in threaded view
|

Roassal: ROTranslatingShape - label besides node

Dennis Schenk
Hi all,

I am trying to place a label besides nodes (and make them stick at their place when dragging them around). Then I saw the ongoing discussion related to RoTranslatingShape, which seems is exactly what I would need. I looked at all the examples and the discussion, but am not able to make it work correctly.

What I would want is to create some node, then have a label right at its bottom left side (or top left, or bottom right). The node is not resizable (and its contents, or children, do not change), so that should not be a problem.

What I would like to do is simply something like in this image: http://cl.ly/image/3c1e1s15433Q.

The difference to the other examples is probably that I already have a node in the view, and then I try to attach the label afterwards. 

So I have something like this:

testNodeLabeling
| view rawView nodes node label |
rawView := ROView new.
view := ROMondrianViewBuilder view: rawView.
        view shape rectangle size: 100.
nodes := view nodes: (Array with: 1).
node := nodes at: 1.
node translateTo: 20@20.
        label := (ROElement on: 'test') + (ROTranslatingShape new offset: 0 @ 20 negated) + ROLabel.
rawView add: label.
view noLayout.
view open.

How would I now 'attach' this label to the node?
Or is this the wrong way to go on about this?

Cheers,
Dennis

_______________________________________________
Moose-dev mailing list
[hidden email]
https://www.iam.unibe.ch/mailman/listinfo/moose-dev
Reply | Threaded
Open this post in threaded view
|

Re: Roassal: ROTranslatingShape - label besides node

vpena
Hello Dennis,

Maybe you can try something like this:

testNodeLabeling
        | view rawView nodes node label |
        rawView := ROView new.
        view := ROMondrianViewBuilder view: rawView.
        view shape rectangle withoutBorder.
        node := view node: 'example' forIt:[
              view shape rectangle size: 100.
                view node: 1.
              view shape label.
                view node: 'test'.
                view verticalLineLayout.
                ].
        view noLayout.
        view open.

So you have a node that contains 2 nodes, your original node and its label. With this you can re-arrange any way you like. For example, if you want to put the label in the top you can do something like this:

nodes := view node: 'example' forIt:[
              view shape label.
              view node: 'test'.
              view shape rectangle size: 100.
              view node: 1.
              view verticalLineLayout.
                ].

I hope it helps.

Cheers,
Vanessa.
Reply | Threaded
Open this post in threaded view
|

Re: Roassal: ROTranslatingShape - label besides node

Ben Coman
vpena wrote:

> Hello Dennis,
>
> Maybe you can try something like this:
>
> testNodeLabeling
> | view rawView nodes node label |
> rawView := ROView new.
> view := ROMondrianViewBuilder view: rawView.
>         view shape rectangle withoutBorder.
> node := view node: 'example' forIt:[
>      view shape rectangle size: 100.
> view node: 1.
>      view shape label.
> view node: 'test'.
> view verticalLineLayout.
> ].
> view noLayout.
> view open.
>
> So you have a node that contains 2 nodes, your original node and its label.
> With this you can re-arrange any way you like. For example, if you want to
> put the label in the top you can do something like this:
>
> nodes := view node: 'example' forIt:[
>      view shape label.
>               view node: 'test'.
>      view shape rectangle size: 100.
>      view node: 1.
>               view verticalLineLayout.
> ].
>
> I hope it helps.
>
> Cheers,
> Vanessa.
>
>
>  
Depending on Dennis' requirements, the problem with using two elements
is that when node '1' is moved, node 'test' does not move with it.
Guessing from what I can see of the Roassal architecture, it seems
shapes are meant for this purpose to remain in a fixed orientation its
element. The difficulty however with putting a label at the bottom is
that the height of the ChildrenShape is dynamic depending on how you
drag around the inner nodes.

With recent changes I had requested regarding shapes, I envisage
something like the following would work, and you can see the label
positioned correctly but the mouse interaction to drag 'inner2' is not
quite right yet, or I'm doing it wrong:
-----------------
    | view outer inner1 inner2 childrenShape labelOffsetShape |
    outer := ((ROElement spriteOn: 'outer') + ROLabel  ).
    inner1 := ((ROElement bare on: 'SN-TestData') @ RODraggable @
ROLightlyHighlightable ).     "shapes defined later"
    inner2 := ((ROElement spriteOn: 'inner2' ) + ROLabel @
ROLightlyHighlightable ).

    childrenShape := ROChildrenShape new.
    labelOffsetShape := ROTranslatingShape offset:
    [     :el2 |
        | offset |
        offset := 0 @ (childrenShape boundsFor: el2) extent y negated.
        Transcript crShow: offset asString, '  ', el2 model asString.
        offset
    ].
   
    inner1 + ROBorder + childrenShape  + labelOffsetShape + ROLabel.

    view := (ROView new @ RODraggable) add: (outer add: (inner1 add:
inner2)).
    view open.
------------------
_______________________________________________
Moose-dev mailing list
[hidden email]
https://www.iam.unibe.ch/mailman/listinfo/moose-dev
Reply | Threaded
Open this post in threaded view
|

Re: Roassal: ROTranslatingShape - label besides node

vpena
On 09/26/2012 03:09 PM, Ben Coman wrote:

> Depending on Dennis' requirements, the problem with using two elements
> is that when node '1' is moved, node 'test' does not move with it.
> Guessing from what I can see of the Roassal architecture, it seems
> shapes are meant for this purpose to remain in a fixed orientation its
> element. The difficulty however with putting a label at the bottom is
> that the height of the ChildrenShape is dynamic depending on how you
> drag around the inner nodes.
>
> With recent changes I had requested regarding shapes, I envisage
> something like the following would work, and you can see the label
> positioned correctly but the mouse interaction to drag 'inner2' is not
> quite right yet, or I'm doing it wrong:
> -----------------
>    | view outer inner1 inner2 childrenShape labelOffsetShape |
>    outer := ((ROElement spriteOn: 'outer') + ROLabel  ).
>    inner1 := ((ROElement bare on: 'SN-TestData') @ RODraggable @
> ROLightlyHighlightable ).     "shapes defined later"
>    inner2 := ((ROElement spriteOn: 'inner2' ) + ROLabel @
> ROLightlyHighlightable ).
>
>    childrenShape := ROChildrenShape new.
>    labelOffsetShape := ROTranslatingShape offset:
>    [     :el2 |        | offset |
>        offset := 0 @ (childrenShape boundsFor: el2) extent y negated.
>        Transcript crShow: offset asString, '  ', el2 model asString.
>        offset
>    ].
>      inner1 + ROBorder + childrenShape  + labelOffsetShape + ROLabel.
>
>    view := (ROView new @ RODraggable) add: (outer add: (inner1 add:
> inner2)).
>    view open.
> ------------------
> _______________________________________________
>

Actually you can with something like this:

     | view rawView nodes node label |
     rawView := ROView new.
     view := ROMondrianViewBuilder view: rawView.
       view shape rectangle.
     nodes := view node: 'example' forIt:[
         view interaction forwarder.
           view shape rectangle size: 100.
         view node: 1.
         view interaction forwarder.
           view shape label.
         view node: 'test'.
         view verticalLineLayout.
         ].
     view noLayout.
     view open.

In which the interactions to the nodes are "forwarder" to the parent.
But yes, the solution with ROTranslatingShape seems nicer :)

Cheers,
Vanessa.


_______________________________________________
Moose-dev mailing list
[hidden email]
https://www.iam.unibe.ch/mailman/listinfo/moose-dev
Reply | Threaded
Open this post in threaded view
|

Re: Roassal: ROTranslatingShape - label besides node

Ben Coman
Vanessa Peña Araya wrote:

> On 09/26/2012 03:09 PM, Ben Coman wrote:
>> Depending on Dennis' requirements, the problem with using two
>> elements is that when node '1' is moved, node 'test' does not move
>> with it.
>> Guessing from what I can see of the Roassal architecture, it seems
>> shapes are meant for this purpose to remain in a fixed orientation
>> its element. The difficulty however with putting a label at the
>> bottom is that the height of the ChildrenShape is dynamic depending
>> on how you drag around the inner nodes.
>>
>> With recent changes I had requested regarding shapes, I envisage
>> something like the following would work, and you can see the label
>> positioned correctly but the mouse interaction to drag 'inner2' is
>> not quite right yet, or I'm doing it wrong:
>> -----------------
>>    | view outer inner1 inner2 childrenShape labelOffsetShape |
>>    outer := ((ROElement spriteOn: 'outer') + ROLabel  ).
>>    inner1 := ((ROElement bare on: 'SN-TestData') @ RODraggable @
>> ROLightlyHighlightable ).     "shapes defined later"
>>    inner2 := ((ROElement spriteOn: 'inner2' ) + ROLabel @
>> ROLightlyHighlightable ).
>>
>>    childrenShape := ROChildrenShape new.
>>    labelOffsetShape := ROTranslatingShape offset:
>>    [     :el2 |        | offset |
>>        offset := 0 @ (childrenShape boundsFor: el2) extent y negated.
>>        Transcript crShow: offset asString, '  ', el2 model asString.
>>        offset
>>    ].
>>      inner1 + ROBorder + childrenShape  + labelOffsetShape + ROLabel.
>>
>>    view := (ROView new @ RODraggable) add: (outer add: (inner1 add:
>> inner2)).
>>    view open.
>> ------------------
>> _______________________________________________
>>
>
> Actually you can with something like this:
>
>     | view rawView nodes node label |
>     rawView := ROView new.
>     view := ROMondrianViewBuilder view: rawView.
>       view shape rectangle.
>     nodes := view node: 'example' forIt:[
>         view interaction forwarder.
>           view shape rectangle size: 100.
>         view node: 1.
>         view interaction forwarder.
>           view shape label.
>         view node: 'test'.
>         view verticalLineLayout.
>         ].
>     view noLayout.
>     view open.
>
> In which the interactions to the nodes are "forwarder" to the parent.
> But yes, the solution with ROTranslatingShape seems nicer :)
>
> Cheers,
> Vanessa.
>

If you remove the outer border, then that may be just what is required.  
Doing this layout at the element level like this seems easier, but not
so flexible as with shapes.  Now for my additional benefit, how would
you do that raw Roassal.  That is, by removing ROMondrianViewBuilder
from the example.

cheers -ben

_______________________________________________
Moose-dev mailing list
[hidden email]
https://www.iam.unibe.ch/mailman/listinfo/moose-dev
Reply | Threaded
Open this post in threaded view
|

Re: Roassal: ROTranslatingShape - label besides node

Tudor Girba-2
Indeed, you can work around the current issue with two nodes. But, I
think this goes against a clean model.

Ideally, one model object should appear once in the graph and be shown
with one shape. Whether a shape is simple or complex, it is another
issue. This is why we need a more elaborate way of defining shapes.

Cheers,
Doru



On Wed, Sep 26, 2012 at 8:51 PM, Ben Coman <[hidden email]> wrote:

> Vanessa Peña Araya wrote:
>>
>> On 09/26/2012 03:09 PM, Ben Coman wrote:
>>>
>>> Depending on Dennis' requirements, the problem with using two elements is
>>> that when node '1' is moved, node 'test' does not move with it.
>>> Guessing from what I can see of the Roassal architecture, it seems shapes
>>> are meant for this purpose to remain in a fixed orientation its element. The
>>> difficulty however with putting a label at the bottom is that the height of
>>> the ChildrenShape is dynamic depending on how you drag around the inner
>>> nodes.
>>>
>>> With recent changes I had requested regarding shapes, I envisage
>>> something like the following would work, and you can see the label
>>> positioned correctly but the mouse interaction to drag 'inner2' is not quite
>>> right yet, or I'm doing it wrong:
>>> -----------------
>>>    | view outer inner1 inner2 childrenShape labelOffsetShape |
>>>    outer := ((ROElement spriteOn: 'outer') + ROLabel  ).
>>>    inner1 := ((ROElement bare on: 'SN-TestData') @ RODraggable @
>>> ROLightlyHighlightable ).     "shapes defined later"
>>>    inner2 := ((ROElement spriteOn: 'inner2' ) + ROLabel @
>>> ROLightlyHighlightable ).
>>>
>>>    childrenShape := ROChildrenShape new.
>>>    labelOffsetShape := ROTranslatingShape offset:
>>>    [     :el2 |        | offset |
>>>        offset := 0 @ (childrenShape boundsFor: el2) extent y negated.
>>>        Transcript crShow: offset asString, '  ', el2 model asString.
>>>        offset
>>>    ].
>>>      inner1 + ROBorder + childrenShape  + labelOffsetShape + ROLabel.
>>>
>>>    view := (ROView new @ RODraggable) add: (outer add: (inner1 add:
>>> inner2)).
>>>    view open.
>>> ------------------
>>> _______________________________________________
>>>
>>
>> Actually you can with something like this:
>>
>>     | view rawView nodes node label |
>>     rawView := ROView new.
>>     view := ROMondrianViewBuilder view: rawView.
>>       view shape rectangle.
>>     nodes := view node: 'example' forIt:[
>>         view interaction forwarder.
>>           view shape rectangle size: 100.
>>         view node: 1.
>>         view interaction forwarder.
>>           view shape label.
>>         view node: 'test'.
>>         view verticalLineLayout.
>>         ].
>>     view noLayout.
>>     view open.
>>
>> In which the interactions to the nodes are "forwarder" to the parent. But
>> yes, the solution with ROTranslatingShape seems nicer :)
>>
>> Cheers,
>> Vanessa.
>>
>
> If you remove the outer border, then that may be just what is required.
> Doing this layout at the element level like this seems easier, but not so
> flexible as with shapes.  Now for my additional benefit, how would you do
> that raw Roassal.  That is, by removing ROMondrianViewBuilder from the
> example.
>
> cheers -ben
>
>
> _______________________________________________
> Moose-dev mailing list
> [hidden email]
> https://www.iam.unibe.ch/mailman/listinfo/moose-dev



--
www.tudorgirba.com

"Every thing has its own flow"

_______________________________________________
Moose-dev mailing list
[hidden email]
https://www.iam.unibe.ch/mailman/listinfo/moose-dev
Reply | Threaded
Open this post in threaded view
|

Re: Roassal: ROTranslatingShape - label besides node

abergel
> Indeed, you can work around the current issue with two nodes. But, I
> think this goes against a clean model.
>
> Ideally, one model object should appear once in the graph and be shown
> with one shape. Whether a shape is simple or complex, it is another
> issue. This is why we need a more elaborate way of defining shapes.

I agree with you. I have been working on this issue for a couple of days already. We are making progress, but more work is necessary.

So far, shapes form a linked list. I have recently added a translating shape to give an offset (dx@dy) to a part of the shape chain.
In my opinion, translating shape is an interesting way to compose shapes. We can easily think about how to design a MOFormsBuilder using this mechanism.

However, I have a growing negative feeling: each operation such as #elementAt: (used to get children element) and #contains: (whether a point is within the bounds of an element) needs to crawl over this list of shapes. As you can imagine the drawback: the last version of Roassal is slower than the version of last week. Sure, I can add caches to speed these operations up, but we will fall into a dangerous situation in which caches have been introduced to make Roassal work, instead of addressing particular scalability problems.

Now, I cannot stop thinking about subclassing ROElement into a ROCompositeElement.

Does this mail make sense?

Cheers,
Alexandre


>
>
> On Wed, Sep 26, 2012 at 8:51 PM, Ben Coman <[hidden email]> wrote:
>> Vanessa Peña Araya wrote:
>>>
>>> On 09/26/2012 03:09 PM, Ben Coman wrote:
>>>>
>>>> Depending on Dennis' requirements, the problem with using two elements is
>>>> that when node '1' is moved, node 'test' does not move with it.
>>>> Guessing from what I can see of the Roassal architecture, it seems shapes
>>>> are meant for this purpose to remain in a fixed orientation its element. The
>>>> difficulty however with putting a label at the bottom is that the height of
>>>> the ChildrenShape is dynamic depending on how you drag around the inner
>>>> nodes.
>>>>
>>>> With recent changes I had requested regarding shapes, I envisage
>>>> something like the following would work, and you can see the label
>>>> positioned correctly but the mouse interaction to drag 'inner2' is not quite
>>>> right yet, or I'm doing it wrong:
>>>> -----------------
>>>>   | view outer inner1 inner2 childrenShape labelOffsetShape |
>>>>   outer := ((ROElement spriteOn: 'outer') + ROLabel  ).
>>>>   inner1 := ((ROElement bare on: 'SN-TestData') @ RODraggable @
>>>> ROLightlyHighlightable ).     "shapes defined later"
>>>>   inner2 := ((ROElement spriteOn: 'inner2' ) + ROLabel @
>>>> ROLightlyHighlightable ).
>>>>
>>>>   childrenShape := ROChildrenShape new.
>>>>   labelOffsetShape := ROTranslatingShape offset:
>>>>   [     :el2 |        | offset |
>>>>       offset := 0 @ (childrenShape boundsFor: el2) extent y negated.
>>>>       Transcript crShow: offset asString, '  ', el2 model asString.
>>>>       offset
>>>>   ].
>>>>     inner1 + ROBorder + childrenShape  + labelOffsetShape + ROLabel.
>>>>
>>>>   view := (ROView new @ RODraggable) add: (outer add: (inner1 add:
>>>> inner2)).
>>>>   view open.
>>>> ------------------
>>>> _______________________________________________
>>>>
>>>
>>> Actually you can with something like this:
>>>
>>>    | view rawView nodes node label |
>>>    rawView := ROView new.
>>>    view := ROMondrianViewBuilder view: rawView.
>>>      view shape rectangle.
>>>    nodes := view node: 'example' forIt:[
>>>        view interaction forwarder.
>>>          view shape rectangle size: 100.
>>>        view node: 1.
>>>        view interaction forwarder.
>>>          view shape label.
>>>        view node: 'test'.
>>>        view verticalLineLayout.
>>>        ].
>>>    view noLayout.
>>>    view open.
>>>
>>> In which the interactions to the nodes are "forwarder" to the parent. But
>>> yes, the solution with ROTranslatingShape seems nicer :)
>>>
>>> Cheers,
>>> Vanessa.
>>>
>>
>> If you remove the outer border, then that may be just what is required.
>> Doing this layout at the element level like this seems easier, but not so
>> flexible as with shapes.  Now for my additional benefit, how would you do
>> that raw Roassal.  That is, by removing ROMondrianViewBuilder from the
>> example.
>>
>> cheers -ben
>>
>>
>> _______________________________________________
>> Moose-dev mailing list
>> [hidden email]
>> https://www.iam.unibe.ch/mailman/listinfo/moose-dev
>
>
>
> --
> www.tudorgirba.com
>
> "Every thing has its own flow"
>
> _______________________________________________
> Moose-dev mailing list
> [hidden email]
> https://www.iam.unibe.ch/mailman/listinfo/moose-dev

--
_,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:
Alexandre Bergel  http://www.bergel.eu
^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;.




_______________________________________________
Moose-dev mailing list
[hidden email]
https://www.iam.unibe.ch/mailman/listinfo/moose-dev
Reply | Threaded
Open this post in threaded view
|

Re: Roassal: ROTranslatingShape - label besides node

abergel
In reply to this post by Ben Coman
> If you remove the outer border, then that may be just what is required.  Doing this layout at the element level like this seems easier, but not so flexible as with shapes.  Now for my additional benefit, how would you do that raw Roassal. That is, by removing ROMondrianViewBuilder from the example.

Like this:

-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
| view outter inner innerLabel |
view := ROView new.

outter := ROElement new + ROBorder white.
outter @ RODraggable.

inner := ROElement sprite.
innerLabel := ROElement labelOn: 'My sprite'.

outter add: inner; add: innerLabel.

"We make the inner and innerLabel forwarder of events"
inner forward.
innerLabel forward.

"We layout the things"
ROVerticalLineLayout on: outter elements.

view add: outter.
view open
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=

This example has been added to ROExample as #compositeOn: (accessible from the easel then).

Cheers,
Alexandre

--
_,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:
Alexandre Bergel  http://www.bergel.eu
^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;.



_______________________________________________
Moose-dev mailing list
[hidden email]
https://www.iam.unibe.ch/mailman/listinfo/moose-dev
Reply | Threaded
Open this post in threaded view
|

Re: Roassal: ROTranslatingShape - label besides node

abergel
In reply to this post by Dennis Schenk
Does the solution proposed by Vanessa works for you until we get a better solution?

Alexandre


On Sep 26, 2012, at 9:52 AM, Dennis Schenk <[hidden email]> wrote:

> Hi all,
>
> I am trying to place a label besides nodes (and make them stick at their place when dragging them around). Then I saw the ongoing discussion related to RoTranslatingShape, which seems is exactly what I would need. I looked at all the examples and the discussion, but am not able to make it work correctly.
>
> What I would want is to create some node, then have a label right at its bottom left side (or top left, or bottom right). The node is not resizable (and its contents, or children, do not change), so that should not be a problem.
>
> What I would like to do is simply something like in this image: http://cl.ly/image/3c1e1s15433Q.
>
> The difference to the other examples is probably that I already have a node in the view, and then I try to attach the label afterwards.
>
> So I have something like this:
>
> testNodeLabeling
> | view rawView nodes node label |
> rawView := ROView new.
> view := ROMondrianViewBuilder view: rawView.
>         view shape rectangle size: 100.
> nodes := view nodes: (Array with: 1).
> node := nodes at: 1.
> node translateTo: 20@20.
>         label := (ROElement on: 'test') + (ROTranslatingShape new offset: 0 @ 20 negated) + ROLabel.
> rawView add: label.
> view noLayout.
> view open.
>
> How would I now 'attach' this label to the node?
> Or is this the wrong way to go on about this?
>
> Cheers,
> Dennis
> _______________________________________________
> Moose-dev mailing list
> [hidden email]
> https://www.iam.unibe.ch/mailman/listinfo/moose-dev

--
_,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:
Alexandre Bergel  http://www.bergel.eu
^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;.



_______________________________________________
Moose-dev mailing list
[hidden email]
https://www.iam.unibe.ch/mailman/listinfo/moose-dev