Holes

This is a script that will move a panel to the opposite of the desktop, to give the illusion that it is a hole.

Check the video to better understanding. It is difficult to understand I know, but the fact is that both are panels, both are placed relative to the screen, not the desktop. That’s why it makes the illusion of holes, but they are panels!

It works also with zoom, and it move all the panels labeled “Hole” in the container.

It works also with panels inside folders, panels inside panels, etc. But to avoid misunderstanding the instructions says ‘desktop’ for the parent and ‘panels’ for the child panels it has.

Have in mind that you will be able to see only the main page of the panel, it’s recommended to check ‘use desktop size’ under layout on the panels settings. This will help you setting it.

Instructions:

– Copy/paste this script as a new one.

– Set it to run on the position change event of the desktop. Only the desktop, NOT the panels!

– Label the panels you want to as “Hole”, the others won’t work;

– [Optional] Disable the scrolling of the panels (Scroll direction: No scrolling at all)

– [Optional] Check the no scroll limit of the desktop, disable snap to pages and enable pinch to zoom and diagonal scrolling to move freely the panel.

These last two instructions are just optional, maybe you find an awesome way of using this script without them.

Pierre Hébert: This is the script that shows why you need to round the position, in case you want to test.

There is also another bad behavior that is shown when using this script. If you zoom the desktop, the panel will unzoom, but in edit mode the grid lines and the helpers are really really big, because the panel think it is really big (and it is, but not for the user). Not exactly a bug, but maybe you can think in this to give them an absolute size relative to the screen, not the container and their zoom.

——————————

//Vars

var desk =LL.getEvent().getContainer();

var scale = desk.getPositionScale();

var items=desk.getItems();

//for each item

for(var i=items.getLength()-1;i>=0;–i){

var panop = items.getAt(i);

if(panop.getLabel()!=”Hole” || panop.getType()!=”Panel”)continue;//only panels labeled “Hole”

var pan=panop.getContainer();

//Relative position

var posX= Math.round(panop.getPositionX())-desk.getPositionX();

var posY= Math.round(panop.getPositionY())-desk.getPositionY();

//The offset of the position if the panel has margins/borders/padding respectively

//if your pannels don’t have, you can comment this section to avoid extra operations

var prop=panop.getProperties().getBox(“i.box”); posX+=prop.getSize(“ml”)+prop.getSize(“bl”)+prop.getSize(“pl”); posY+=prop.getSize(“mt”)+prop.getSize(“bt”)+prop.getSize(“pt”);

//the final position

pan.setPosition( posX*scale , posY*scale ,1/scale,false);

}