Canvas Bar

There are 2 APIs for getting and setting the order of components in the Canvas Bar.

The Canvas Bar can appear in 2 positions: At the top of the canvas, and at the bottom of the canvas. The APIs can get and set the content for both of these positions independently.

The content of the Canvas Bar changes based on the current edit mode ('Transform' (the default), 'Text', 'Crop', 'Trim', or a custom value), so both APIs accept an orderContext argument to specify the mode.

For example usage of similar APIs, see also Moving Existing Buttons or Adding New Buttons in the Guides section.

Get the Current Order

getCanvasBarOrder(
  position: 'top' | 'bottom',
  orderContext: OrderContext = {
    editMode: 'Transform'
  }
)

When omitting the orderContext parameter, the order for the 'Transform' edit mode is returned, e.g.

cesdk.ui.getCanvasMenuOrder('bottom');
// => [
// {id: 'ly.img.settings.canvasBar'},
// {id: 'ly.img.spacer'},
// ...
// ]

Set a new Order

setCanvasBarOrder(
  canvasBarOrder: (CanvasBarComponentId | OrderComponent)[],
  position: 'top' | 'bottom',
  orderContext: OrderContext = {
    editMode: 'Transform'
  }
)

When omitting the orderContext parameter, the order is set for the default edit mode ('Transform'), e.g.:

// Sets the order for transform mode by default
cesdk.ui.setCanvasBarOrder('bottom', ['my.component.for.transform.mode']);

Canvas Bar Components

The following lists the default Canvas Bar components available within CE.SDK.

Layout Helpers

Component ID Description

ly.img.separator Adds a vertical separator (<hr> element) in the Canvas Bar.
Separators follow some special layouting rules:
- If 2 or more separators end up next to each other (e.g. due to other components not rendering), only 1 separator will be rendered.
- Separators that end up being the first or last element in the Canvas Bar will not be rendered.
- Separators directly adjacent to the left side of a spacer (see below) will not be rendered.

ly.img.spacer Adds horizontal spacing in the Canvas Bar.
Spacers will try to fill all available whitespace, by distributing the available space between all spacers found in the Canvas Bar.

Component ID	Description
`ly.img.separator`	Adds a vertical separator (`<hr>` element) in the Canvas Bar. Separators follow some special layouting rules: - If 2 or more separators end up next to each other (e.g. due to other components not rendering), only 1 separator will be rendered. - Separators that end up being the first or last element in the Canvas Bar will not be rendered. - Separators directly adjacent to the left side of a spacer (see below) will not be rendered.
`ly.img.spacer`	Adds horizontal spacing in the Canvas Bar. Spacers will try to fill all available whitespace, by distributing the available space between all spacers found in the Canvas Bar.

Common Controls

Component ID	Description
`ly.img.settings.canvasBar`	Customize Editor button: Opens the Settings Panel when pressed.
`ly.img.page.add.canvasBar`	Add Page button: Adds a new page to the end of the document when pressed.

Default Order

The default order of the Canvas Bar is the following:

[
  'ly.img.settings.canvasBar',
  'ly.img.spacer',
  'ly.img.page.add.canvasBar',
  'ly.img.spacer',
];