Layer Visibility Panel
PinePaper organizes canvas content into four layers, each manageable through the Layers panel in the sidebar.
Layers
| Layer | Color | Group | Content |
|---|---|---|---|
| Text & Shapes | Blue | textItemGroup |
Text, shapes, diagrams, 3D objects |
| Background | Green | patternGroup |
Generators, patterns, background elements |
| Drawings | Purple | drawingGroup |
Freehand drawings, brush strokes |
| Images | Amber | imageGroup |
Uploaded images |
Access
Open the Layers panel via the “Layers” tab in the sidebar.
Visibility Toggle
Click the eye icon to show/hide a layer. This sets group.visible on the Paper.js group.
// Programmatic access
const group = getLayerGroup('text');
group.visible = false; // Hide text layer
group.visible = true; // Show text layer
Hidden layers are not rendered on the canvas. The panel row dims when a layer is hidden.
Lock Toggle
Click the lock icon to lock/unlock a layer. Locked layers prevent selection, dragging, and editing of contained items.
Locking sets group.locked = true and recursively locks all children:
// Programmatic access
const group = getLayerGroup('drawing');
group.locked = true;
if (group.children) {
group.children.forEach(child => { child.locked = true; });
}
Item Counts
Each layer row displays the number of user items it contains. System items (blend backgrounds, internal helpers) are excluded from the count:
function countLayerItems(group) {
if (!group) return 0;
return group.children ? group.children.filter(c =>
!c.data?.isSystemItem && !c.data?.isBlendBackground
).length : 0;
}
Layer Names
| UI Name | getLayerGroup() Key |
|---|---|
| Text & Shapes | 'text' |
| Background | 'pattern' |
| Drawings | 'drawing' |
| Images | 'image' |
Unknown layer names return null.