Page 1 of 2
Implement Layers Management (ex: like Adobe Illustrator)
Posted: Mon Jun 23, 2014 7:48 pm
by palanolho
Hi everyone,
On an application I'm implementing I will need to manage objects on layers.
As mentioned on the subject, what I want is the same behaviour that can be found (for example) on Adobe Illutratior.
That is:
- There are 1 or more layers
- Each layer may contain zero or more objects
- The objects on the same layers can be ordered among themselves, this mean that you can bring them to the top, send them to the back, etc... but only in relation with the other objects on the same layer.
Do you understand what I mean?
so, has anyone done anything like this before? anyone has any suggestion on ho to implement this?
Many thanks in advance
- Miguel
Re: Implement Layers Management (ex: like Adobe Illustrator)
Posted: Mon Jun 23, 2014 8:46 pm
by dunbarx
Hi.
LC is not a CAD program, where layers are essential to isolate common objects in groups that can be scaled and manipulated amongst themselves.
Wait a minute...
Groups?!!??!!
Do you need more than this? If so, write back.
Craig Newman
Re: Implement Layers Management (ex: like Adobe Illustrator)
Posted: Mon Jun 23, 2014 9:41 pm
by FourthWorld
LiveCode's layer property for objects has always been very useful for managing groups and controls within groups, and in v6.0.2 this became even easier to work with using the new relayer command:
http://downloads.livecode.com/livecode/ ... -6_0_2.pdf
Re: Implement Layers Management (ex: like Adobe Illustrator)
Posted: Tue Jun 24, 2014 9:26 am
by palanolho
@ FourthWorld : I will give a look at the Relayer command, thanks
@dunbarx :
Let me try to give you some more insight and you tell me if you thinks that groups can work.
This application will allow creation of a digital boardgame.
- The first layer (bottom one) will contain one or more game boards (generally only 1 but...)
- The next layer will contain map pieces (that you can move around and even rearrange like a puzzle)
- The next layers will contain cards and decks of cards
- And the last layer the top one will contain game tokens (whatever the token is: resources, army units, markets, etc...)
The application will allow the user to add the corresponding game components to the corresponding layer and on that layer you will be able to rearrange the components (bring to top, send to back, etc...)
The 4 main layers
will never change order and all there layers/components are inside a group (what I call the Playing Area) to allow scrolling when the playing area is big.
Do you think its can be done with groups ? any suggestions on how to ?
Many thanks,
- Miguel
Re: Implement Layers Management (ex: like Adobe Illustrator)
Posted: Tue Jun 24, 2014 4:41 pm
by dunbarx
Do each of the four layers exist on their own? In other words, when one layer is shown, do the others go away? If so, groups may not be the right methodology. Controls within a group are locked together in space as far a the user is concerned, though they may be manipulated under script control.
Would a separate card for each layer be an option? In this sense, the entire playing field is exchanged when you navigate from card to card, with a layer on each of those cards. The controls need not be grouped at all, and they can be managed more freely.
Craig
Re: Implement Layers Management (ex: like Adobe Illustrator)
Posted: Tue Jun 24, 2014 4:43 pm
by palanolho
All layers are visible at same time and the user can interact with any object on any layer
Re: Implement Layers Management (ex: like Adobe Illustrator)
Posted: Tue Jun 24, 2014 6:19 pm
by dunbarx
So you do need groups to an extent, due to the fact that scrolling is required.
Again, note that controls are locked in space within a group. Now this can be circumvented easily, for example:
Code: Select all
on mousemove
if the optionkey is down then set the loc of the target to the mouseLoc
end mousemove
This allows the user to move with a control within a group.
As Mark pointed out, LC offer control over layers. The problem is that one might easily relayer a control right out of its group. This can be managed, though, restricting it to the layer value between the extreme ends of all the controls in that group. Another method, it occurs to me, is to create a four-tier naming scheme, whereby each of the controls within a layer share a common name part:
button "car1X", button "car2X", button "car3X"
button "car1Y", button "car2Y", button "car3Y
etc.
Or perhaps a custom property, common to all the controls in a layer. In this way you never need to worry about layer number at all. Any action that is set to be valid for a control on "layer Y" will not affect a control on "layer X".
That sort of thing. There are probably a bunch of ways to delineate the members of each "layer". I think the principle is sound. Any ideas you might have?
Craig
Re: Implement Layers Management (ex: like Adobe Illustrator)
Posted: Wed Jun 25, 2014 11:16 am
by palanolho
Thanks for the suggestion.
This type of implementation was what I had in mind, but wanted to know if there were any other "simpler/better" way to do it.
Regarding re-layering ... If I have a group1 and inside it group2 and I want to modify something on group2, do I need to set the "relayerGroupedControls" of both groups or only for group2 ?
Re: Implement Layers Management (ex: like Adobe Illustrator)
Posted: Wed Jun 25, 2014 12:52 pm
by Klaus
Please look up "relayerGroupedControls" in the dictionary and you will see the answer immediately

Re: Implement Layers Management (ex: like Adobe Illustrator)
Posted: Wed Jun 25, 2014 12:59 pm
by bn
Hi Miguel,
here is an example of relayering controls within a group on the fly. There are 2 groups, innerGroup and outerGroup.
If you click on a control in innerGroup it is brought to the front within innerGroup.
Kind regards
Bernd
Re: Implement Layers Management (ex: like Adobe Illustrator)
Posted: Wed Jun 25, 2014 2:05 pm
by palanolho
Thanks,
I have also read something about "start editing group..." and it seems that it also helps in this situation.
It seems that allows you to manipulate only the objects in that group without interfering with everything else
ex: you can sent a control to the top and that will bring the control to the top of all control inside that group only
I'll try to investigate this a little bit more.
Many tanks

- Miguel
Re: Implement Layers Management (ex: like Adobe Illustrator)
Posted: Wed Jun 25, 2014 2:12 pm
by bn
Hi Miguel,
I stay away from "start editing group". Livecode does some strange things when editing groups. I would not trust except when in the IDE and actually adding to the group and some such.
"relayerGroupedControls" is the way to go.
ex: you can sent a control to the top and that will bring the control to the top of all control inside that group only
this is exactly what my script does. Or did I misunderstand you?
Kind regards
Bernd
Re: Implement Layers Management (ex: like Adobe Illustrator)
Posted: Wed Jun 25, 2014 2:31 pm
by palanolho
I saw your script an did works just fine (I even duplicated the group inside and its continues to work fine)
But I'm a little bit confused about the layers.
I thought that the layers were global to the stack
Following your script:
Code: Select all
on mouseUp
if the owner of the target is me then
put the layer of me into tMyLayer
put the number of controls of me into tNo
set the relayerGroupedcontrols to true
set the layer of the target to tMyLayer + tNo
set the relayerGroupedcontrols to false
end if
end mouseUp
If I have this objects/layers configuration bellow and I click on object 2, will get something like:
Code: Select all
L1 - obj1 L1 - obj1
L2 - obj2 -> L2 -
L3 - obj3 L3 - obj3
L4 -
L5 - obj2
Apparently this is not the case. Why ?
Re: Implement Layers Management (ex: like Adobe Illustrator)
Posted: Wed Jun 25, 2014 4:25 pm
by Klaus
Hola Miguel,
I just tested your script with some grouped groups and it works as exspected!?
The clicked object goes to the top of its owner group!
Not sure what your problem is.
Best
Klaus
Re: Implement Layers Management (ex: like Adobe Illustrator)
Posted: Wed Jun 25, 2014 4:47 pm
by palanolho
As I said, it is working just fine

I'm just not getting why.
If you see the attached img, you will see the initial layer of each object.
if we click on the image (yellow square), by the code, the new layer for it would be 3+3 = 6. However, the system is only assigning it to layer 5.
This is the behaviour I'm trying to understand.