- Let's round out our series on object organization
with a discussion about layers.
A layer is essentially a group,
but graphics editor recognizes it differently
and gives us some special organization functionality.
If you've worked with layers in other tools,
they work much the same here.
We'll start with a problem
that you've probably already noticed.
Anytime I want to select an object on the page,
I'm likely to click on the background image by mistake.
It would be nice if I could lock this object entirely,
which is one of the features a layer gives us.
To begin, I'll select the layers dialog in the view menu.
Right now, I have the default layer Tgml,
which always serves as the lowest level.
This is generally where the background should go
with all our objects on top of it.
The plus sign at the top adds a new layer to the list
and I'll name it Foreground, for clarity.
Note that Foreground is selected instead of TGML,
where all my objects live,
so I can't interact with anything on the page
unless I select TGML again.
Back in the object tree,
I can see the new layer object at the bottom from my tree.
My goal is to leave the image in the background
and move everything else into the foreground layer.
I can't select anything on the screen right now,
but I can shift select all the objects in my tree
and drag them into the layer.
Now I can work with all the objects in the foreground layer,
but my background image is locked.
If I need to move it around,
I can either enable it in the layers tab
or right click Tgml and select activate layer.
The check boxes under this eye symbol
set the layer's visibility.
So if I need to work on something behind a layer,
I can uncheck this box.
This just sets the visibility parameter
for the layer object.
This layer visibility is important,
as we will access this property in a script later
to hide objects based the zoom level.
But for now, it's just handy for organization.
Lastly, I have two ways to remove a layer
if I decide it's not needed.
In the object tree, I can select all the objects in a layer
and drag them out to Tgml.
It's probably easier to do this in the layers tab though,
if I select both layers, right-click and merge.
This has the same effect.
This concludes our section on basic graphics editor
functionality for now.
There are other objects to work with
and we've barely touched JavaScript, but for now,
I'll start with a blank page to integrate the graphics
with the rest of our project's runtime.
We'll begin with an overview of how the graphics fit
into the overall software,
Bind some simple objects on the screen,
and finally develop a full one line diagram.
There will be some advanced topics after that,
so stay with me.
Until then, thank you.