Layer Functionalities

Opacity Control

Each layer's opacity can be controlled through a slider. In order to access the sliders, click on the triangle before each layer name. The sliders go from low opacity to high opacity (left to right). Click and drag the slider in order to control the opacity. When doing so, the opacity level of the layer is shown in real-time.

It is possible to hide a slider by clicking on its respective layer's triangle again.

Turning Layers On/Off

The round button is used to turn layers on and off on click. Turning a layer off is not equivalent to turning the opacity level of the layer to 0. When a layer is off, even when it is selected, it will not be possible to paint on it. Painted elements on a deactivated layer will not appear even when opacity is turned up. When painting on minimum opacity 0, it is possible to view what has been painted by modifying the opacity.

Turning off a layer simply hides it from view, so any previously painted paths will reappear when the layer is turned back on.

Order Priority

The displayed layers represent layer priority. The higher the layer is placed on the stack, the higher it is on the z-index. In other words, layers at the top hide lower layers.

Re-ordering by Drag and Drop

When selecting a layer by mouse click, it is also possible to hold the selected layer and drag it to a desired layer position. This change in layer ordering will also change the layer priority of painted paths on the viewport.

When dropping, it is recommended to drop the layer directly on another layer instead of in between two layers. The dragged layer will automatically be placed above the drop location if moving upwards, or below the drop location if moving downwards.

Drag and Drop Functionality Logic

Take the initial condition in which layers are ordered 1 to 5, from the bottom to the top. It is important to note that dragging and dropping Layer 1 onto Layer 3, for example, will not swap both layers. Instead, it will place Layer 1 above Layer 3. On the other hand, when dragging Layer 3 on top of Layer 1, Layer 3 will be placed below Layer 1.

Changing the layer order is not logged as an action. In other words, the Undo and Redo functions will not be able to revert layer order changes. The two functions only keep track of the acts of painting on the page.

Renaming Layers

Here are the steps to follow in order to rename a layer:

1. Select the layer you wish to change.
2. Double-click the selected layer to activate edit-mode.
3. Change the layer's name.
4. Press the return key or click outside of the layer in order to exit edit-mode for that layer.

Layer Number Hotkeys

Note that the keyboard number shortcuts to select specific layers do not change when the name changes. For example, if Layer 1 is renamed to "Layer 4" and Layer 4 is renamed to "Layer 1" then the hotkey 1 will select the layer named "Layer 4."