Inspector Bar

In this example, we will show you how to make inspector bar configurations for the mobile editor. The example is based on the Design Editor, however, it is exactly the same for all the other solutions.

Explore a full code sample on GitHub.

Inspector Bar Architecture

Inspector Bar

The inspector bar is a list of items placed horizontally at the bottom of the editor. It is visible when a design block is selected and its items provide different editing capabilities to the selected design block. Every item in the inspector bar conforms to InspectorBar.Item: EditorComponent where its Context is constraint to be of type InspectorBar.Context. InspectorBar.Button is a provided implementation of the InspectorBar.Item protocol that has an icon and a title. You can also create your own fully custom editor component that allows drawing arbitrary content by conforming your type to InspectorBar.Item.

Modifiers

After initializing an editor SwiftUI view you can apply any SwiftUI modifier to customize it like for any other SwiftUI view. All public Swift extensions of existing types provided by IMG.LY, e.g., for the SwiftUI View protocol, are exposed in a separate .imgly property namespace. The inspector bar configuration to customize the editor is no exception to this rule and is implemented as SwiftUI modifiers.

All inspector bar modifiers and InspectorBar.Items provide the InspectorBar.Context to access the engine, the asset library configuration, the EditorEventHandler, and the current selected design block. Prefer using this provided selection for any logic instead of accessing the same values from the engine because the engine values will update immediately on changes whereas the provided selection value is cached for the presentation time of the navigation bar including its appear and disappear animations.

inspectorBarItems - the @InspectorBar.Builder that registers the InspectorBar.Items and defines their order. Note that registering does not mean displaying. The items will be displayed if InspectorBar.Item.isVisible(_:) returns true for them. By default, the items shown in this example are defined for all editor solutions.
modifyInspectorBarItems - the modifications that should be applied to the order of items defined by the .imgly.inspectorBarItems builder above. This modifier can be used, when you do not want to touch the default general order of the items, but rather add additional items and replace/hide some of the default items. To achieve that, use the InspectorBar.Modifier provided as the second closure argument, named items in this example, to add, replace, and remove items as highlighted in modify inspector bar items. By default, no modifications are applied.

Modify Inspector Bar Items

In this example, we will modify the default inspector bar items with the .imgly.modifyInspectorBarItems modifier. Each modification is only applied to the items defined by .imgly.inspectorBarItems. The operations also accept a @InspectorBar.Builder so that you can define multiple items in the closures.

addFirst - prepends new InspectorBar.Items.
addLast - appends new InspectorBar.Items.
addAfter - adds new InspectorBar.Items right after the item with the provided id. An error will be thrown if no item exists with the provided id.
addBefore - adds new InspectorBar.Items right before the item with the provided id. An error will be thrown if no item exists with the provided id.
replace - replaces the InspectorBar.Item with the provided id with new InspectorBar.Items. An error will be thrown if no item exists with the provided id. The new items don’t need to have the same id as the replaced item.
remove - removes the InspectorBar.Item with the provided id. An error will be thrown if no item exists with the provided id.

InspectorBar.Item Configuration

As mentioned in the Inspector Bar Architecture section, InspectorBar.Item conforms to EditorComponent. Its id must be unique which is a requirement of the underlying SwiftUI ForEach type. Depending on your needs there are multiple ways to define an item. In this example, we demonstrate your options with increasing complexity.

Use Predefined Buttons

The most basic option is to use our predefined buttons which are provided in the nested InspectorBar.Buttons. namespace. All available predefined buttons are listed below.

Customize Predefined Buttons

All parameters of our predefined buttons are initialized with default values which allows you to change any of them if needed to finetune the button’s behavior and style. This example uses the default values of this particular predefined button.

action - the action to perform when the user triggers the button. In this example, the event handler is used to open a sheet to format text.
title - the title View that should be used to label the button. Don’t encode the visibility in this view. Use isVisible instead. In this example, a Text view is used.
icon - the icon View that should be used to label the button. Don’t encode the visibility in this view. Use isVisible instead. In this example, an Image view is used. We provide all our used icon images in the nested Image.imgly. namespace.
isEnabled - whether the button is enabled. In this example, true is always used.
isVisible - whether the button should be visible. Prefer using this parameter to toggle the visibility instead of encoding it in the title and icon views. In this example, true is only used when the selected design block is of type text and its scope allows for text editing.

Create New Buttons

If our predefined buttons don’t fit your needs you can create your own.

id - the unique id of the button. This parameter is required.
action - the action to perform when the user triggers the button. This parameter is required.
label - a View that describes the purpose of the button’s action. Don’t encode the visibility in this view. Use isVisible instead. This parameter is required.
isEnabled - whether the button is enabled. By default, true is always used.
isVisible - whether the button should be visible. Prefer using this parameter to toggle the visibility instead of encoding it in the label view. By default, true is always used.

Create New Custom Items

If you need something completely custom you can use arbitrary views as items.

Therefore, you need to conform your type to the InspectorBar.Item protocol.

var id: EditorComponentID { get } - the unique id of the item. This property is required.
func body(_: InspectorBar.Context) throws -> some View - the body of your view. Don’t encode the visibility in this view. Use isVisible instead. This property is required.
func isVisible(_: InspectorBar.Context) throws -> Bool - whether the item should be visible. Prefer using this parameter to toggle the visibility instead of encoding it in the body view. By default, true is always used.

List of Available InspectorBar.Buttons

This is a comprehensive list of all predefined buttons. Some of them were already used in the previous sections. They are static functions that look like this: InspectorBar.Buttons.{name}. All these functions return a InspectorBar.Button. They are public and can be used in your application. Note that all the parameters of these functions have default values, therefore, you do not need to provide any values, however, if you want to modify any of the parameters, it is exactly the same as described in the Customize Predefined Buttons section.

Button	ID	Description	Renders For
`InspectorBar.Buttons.replace`	`InspectorBar.Buttons.ID.replace`	Opens a library sheet via editor event `.openSheet`. By default `DesignBlockType`, `FillType` and kind of the selected design block are used to find the library in the Asset Library. Selected asset will replace the content of the currently selected design block.	Video, Image, Sticker, Audio
`InspectorBar.Buttons.editText`	`InspectorBar.Buttons.ID.editText`	Enters text editing mode for the selected design block.	Text
`InspectorBar.Buttons.formatText`	`InspectorBar.Buttons.ID.formatText`	Opens format text sheet via editor event `.openSheet`.	Text
`InspectorBar.Buttons.fillStroke`	`InspectorBar.Buttons.ID.fillStroke`	Opens fill & stroke sheet via editor event `.openSheet`.	Page, Video, Image, Shape, Text
`InspectorBar.Buttons.textBackground`	`InspectorBar.Buttons.ID.textBackground`	Opens text background sheet via editor event `.openSheet`.	Text
`InspectorBar.Buttons.editVoiceover`	`InspectorBar.Buttons.ID.editVoiceover`	Opens voiceover sheet via editor event `.openSheet`.	Video, Audio, Voiceover
`InspectorBar.Buttons.volume`	`InspectorBar.Buttons.ID.volume`	Opens volume sheet via editor event `.openSheet`.	Video, Audio, Voiceover
`InspectorBar.Buttons.crop`	`InspectorBar.Buttons.ID.crop`	Opens crop sheet via editor event `.openSheet`.	Video, Image
`InspectorBar.Buttons.adjustments`	`InspectorBar.Buttons.ID.adjustments`	Opens adjustments sheet via editor event `.openSheet`.	Video, Image
`InspectorBar.Buttons.filter`	`InspectorBar.Buttons.ID.filter`	Opens filter sheet via editor event `.openSheet`.	Video, Image
`InspectorBar.Buttons.effect`	`InspectorBar.Buttons.ID.effect`	Opens effect sheet via editor event `.openSheet`.	Video, Image
`InspectorBar.Buttons.blur`	`InspectorBar.Buttons.ID.blur`	Opens blur sheet via editor event `.openSheet`.	Video, Image
`InspectorBar.Buttons.shape`	`InspectorBar.Buttons.ID.shape`	Opens shape sheet via editor event `.openSheet`.	Video, Image, Shape
`InspectorBar.Buttons.selectGroup`	`InspectorBar.Buttons.ID.selectGroup`	Selects the group design block that contains the currently selected design block via editor event `.selectGroupForSelection`.	Video, Image, Sticker, Shape, Text
`InspectorBar.Buttons.enterGroup`	`InspectorBar.Buttons.ID.enterGroup`	Changes selection from the selected group design block to a design block within that group via editor event `.enterGroupForSelection`.	Group
`InspectorBar.Buttons.layer`	`InspectorBar.Buttons.ID.layer`	Opens layer sheet via editor event `.openSheet`.	Video, Image, Sticker, Shape, Text
`InspectorBar.Buttons.split`	`InspectorBar.Buttons.ID.split`	Splits currently selected design block via editor event `.splitSelection` in a video scene.	Video, Image, Sticker, Shape, Text, Audio
`InspectorBar.Buttons.moveAsClip`	`InspectorBar.Buttons.ID.moveAsClip`	Moves currently selected design block into the background track as clip via editor event `.moveSelectionAsClip`	Video, Image, Sticker, Shape, Text
`InspectorBar.Buttons.moveAsOverlay`	`InspectorBar.Buttons.ID.moveAsOverlay`	Moves currently selected design block from the background track to an overlay via editor event `.moveSelectionAsOverlay`	Video, Image, Sticker, Shape, Text
`InspectorBar.Buttons.reorder`	`InspectorBar.Buttons.ID.reorder`	Opens reorder sheet via editor event `.openSheet`.	Video, Image, Sticker, Shape, Text
`InspectorBar.Buttons.duplicate`	`InspectorBar.Buttons.ID.duplicate`	Duplicates currently selected design block via editor event `.duplicateSelection`.	Video, Image, Sticker, Shape, Text, Audio
`InspectorBar.Buttons.delete`	`InspectorBar.Buttons.ID.delete`	Deletes currently selected design block via editor event `.deleteSelection`.	Video, Image, Sticker, Shape, Text, Audio, Voiceover