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.