Configure Inspector Bar

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.