Layer Operations

Objects on an artboard rely on a distinct layering order (z-index). You can move objects up, down, backwards, forwards, or sequentially in the stack using kittl.design.layers.

Reordering Layers

To move layers forward and back within the stack, pass an array of target object IDs to any layering function.

// Bring objects forward by a single visual step
await kittl.design.layers.sendForward({
    boardOrObjectIds: ['shape-123']
});

// Bring objects immediately to the absolute top of the board
await kittl.design.layers.sendToFront({
    boardOrObjectIds: ['text-id-456']
});

// Send objects backwards by a single visual step
await kittl.design.layers.sendBackward({
    boardOrObjectIds: ['shape-123']
});

// Send an object immediately to the absolute back of the board
await kittl.design.layers.sendToBack({
    boardOrObjectIds: ['background-image-id']
});

Move Relative to a Layer

Use moveTo to place layers before, after, or inside a target layer.

// Place these elements immediately before the target layer
await kittl.design.layers.moveTo({
    boardOrObjectIds: ['shape-123', 'image-321'],
    position: 'before',
    targetId: 'target-layer-id'
});