CESDK/CE.SDK/Web Editor/Customization/API Reference

Adjusting the Content of the Canvas Bar

Learn how to adjust the content of the canvas bar in the editor

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#

JavaScript


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

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

JavaScript


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

Set a new Order#

JavaScript


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.:

JavaScript


// 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

Component ID	Description
Component ID `ly.img.separator`	Description 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.
Component ID `ly.img.spacer`	Description 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

ly.img.separator

Description

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.

Component ID

ly.img.spacer

Description

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
Component ID `ly.img.settings.canvasBar`	Description Customize Editor button: Opens the Settings Panel when pressed.
Component ID `ly.img.page.add.canvasBar`	Description 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:

JavaScript


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