Skip to main content

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({
    objectIds: ['shape-123']
});

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

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

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

Move To Specific Index​

For explicit positioning, you can utilize moveTo to provide exact layer-index logic if dealing with highly specific layering requirements across multiple items.

// Move these two elements to exact depth index '2' in the hierarchy
await kittl.design.layers.moveTo({
    objectIds: ['shape-123', 'image-321'],
    index: 2
});