Adjusting the Content of the Canvas Menu
There are 2 APIs for getting and setting the order of components in the Canvas Menu.
The content of the Canvas Menu 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 these APIs, see also Moving Existing Buttons or Adding New Buttons in the Guides section.
Get the Current Order#
cesdk.ui.getCanvasMenuOrder(orderContext: OrderContext = { editMode: 'Transform' })
When omitting the orderContext parameter, the order for the 'Transform' edit mode is returned, e.g.
cesdk.ui.getCanvasMenuOrder();// => [// {id: 'ly.img.group.enter.canvasMenu'},// {id: 'ly.img.group.select.canvasMenu'},// ...// ]
Set a new Order#
setCanvasMenuOrder(canvasMenuOrder: (CanvasMenuComponentId | OrderComponent)[],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 defaultcesdk.ui.setCanvasMenuOrder([ 'my.component.for.transform.mode']);
Canvas Menu Components#
The following lists the default Canvas Menu components available within CE.SDK.
Take special note of the "Feature ID" column. Most components can be hidden/disabled by disabling the corresponding feature using the Feature API.
Also note that many components are only rendered for the block types listed in the "Renders for" column, because their associated controls (e.g. font size) are only meaningful for specific kinds of blocks (e.g. text).
Layout Helpers#
| Component ID | Description |
|---|---|
Component ID ly.img.separator | Description Adds a vertical separator (<hr> element) in the Canvas Menu.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 Menu will not be rendered. - Separators directly adjacent to the left side of a spacer (see below) will not be rendered. |
Common Controls#
These components are useful for editing various different block types.
| Component ID | Description | Feature ID | Renders for |
|---|---|---|---|
Component ID ly.img.replace.canvasMenu | Description Replace button:Opens the "Replace" Panel offering to replace the current image or video fill. | Feature ID ly.img.replace | Renders for Images, Videos |
Component ID ly.img.placeholder.canvasMenu | Description Placeholder button:Opens the "Placeholder" panel, allowing the user to toggle specific constraints on the selected block. | Feature ID ly.img.placeholder | Renders for Every block |
Component ID ly.img.duplicate.canvasMenu | Description Duplicate button:Duplicates the selected elements when pressed. | Feature ID ly.img.duplicate | Renders for Every block |
Component ID ly.img.delete.canvasMenu | Description Delete button:Deletes the selected elements when pressed. | Feature ID ly.img.delete | Renders for Every block |
Text#
These components are relevant for editing text blocks, and will only render when a text block is selected.
| Component ID | Description | Feature ID |
|---|---|---|
Component ID ly.img.text.edit.canvasMenu | Description Edit button:Switches to text edit mode when pressed. | Feature ID ly.img.text.edit |
Component ID ly.img.text.color.canvasMenu | Description Color swatch button:Opens the Color Panel, where the user can set the color for the currently selected text run. | Feature ID ly.img.fill |
Component ID ly.img.text.bold.canvasMenu | Description Bold toggle:Toggles the bold cut (if available) for the currently selected text run. | Feature ID ly.img.text.edit |
Component ID ly.img.text.italic.canvasMenu | Description Italic toggle:Toggles the italic cut (if available) for the currently selected text run. | Feature ID ly.img.text.edit |
Component ID ly.img.text.variables.canvasMenu | Description Insert Variable button:Opens a dropdown containing the selection of available text variables. | Feature ID |
Groups#
These controls will only render when a group or an element of a group is selected.
| Component ID | Description | Feature ID | Renders for |
|---|---|---|---|
Component ID ly.img.group.enter.canvasMenu | Description Enter group button:Moves selection to the first element of the group when pressed. | Feature ID ly.img.group | Renders for Groups |
Component ID ly.img.group.select.canvasMenu | Description Select group button:Moves selection to the parent group of the currently selected element when pressed. | Feature ID ly.img.group | Renders for Elements within groups |
Page#
These controls will only render when a page is selected.
| Component ID | Description | Feature ID |
|---|---|---|
Component ID ly.img.page.moveUp.canvasMenu | Description Move Up/Left button:Moves the current page closer to the start of a multi-page document. | Feature ID ly.img.page.move |
Component ID ly.img.page.moveDown.canvasMenu | Description Move Down/Right button:Moves the current page closer to the end of a multi-page document. | Feature ID ly.img.page.move |
Default Order#
The default order of the Canvas Menu is the following:
Transform Mode#
['ly.img.group.enter.canvasMenu','ly.img.group.select.canvasMenu','ly.img.page.moveUp.canvasMenu','ly.img.page.moveDown.canvasMenu','ly.img.separator','ly.img.text.edit.canvasMenu','ly.img.replace.canvasMenu','ly.img.separator','ly.img.placeholder.canvasMenu','ly.img.separator','ly.img.duplicate.canvasMenu','ly.img.delete.canvasMenu']
Text Mode#
['ly.img.text.color.canvasMenu','ly.img.separator','ly.img.text.bold.canvasMenu','ly.img.text.italic.canvasMenu','ly.img.separator','ly.img.text.variables.canvasMenu']