Skip to main content

Add Custom Tools

If your customization needs go beyond styling menu items and replacing icons, you define custom tool controls by overwriting the tool controllers. In this example, we are adding a custom control for an annotation tool which extends the brush tool to offer several pre-defined pens of different color, size and hardness to allow quick selection of an optimal pen for annotation.

Create custom menu item#

We first create a custom menu item to be displayed alongside other tool icons in the toolbar. To that end we create a UIImage from an icon in our bundle and pass it to a ToolMenuItem constructor along with the tool title and the tool controller class for our custom tool.

Configure menuItems#

When we configure the editor we have to be sure to include this custom menu item to the array of menu items that is assigned to the menuItems configuration option.

Implementing the custom annotation tool#

Define menu items for the annotation tool#

Before we dive into implementing the custom annotation controller, we need to set up the menu items to be displayed inside the tool. Since each menu item corresponds to a pen of a specific color. size and hardness the AnnotationMenuItem needs to store that data as instance variables. Implementing isEqual allows operations on collection of menu items such as diffing. Finally, we define AnnotationListSectionController as section controller responsible for rendering the menu of the custom tool.

Set up the menu item section controller#

The AnnotationListSectionController subclasses the MenuListSectionController. The method cellForItem defines what is to be displayed for a given menu items. In our example, we create an image with the background color of the annotation pen and the title as label. UIImage is extended in our example to generate an image of a given color, size and border radius. The method didUpdate updates the current annotation menu item when one is selected.

Define the annotation tool controller#

Now we can finally turn to our custom annotation controller which extends the BrushToolController. The method viewDidLoad is called when the tool screen loads and is used to set up the tool. In our example, we add the annotation menu items we want to make available to the menuViewController's (see below) menu items and initialize the slider values of the BrushEditController. The method configureToolbarItem allows us to control the appearance of our tools toolbar item such as label text and font.

Implementing the menuViewController method allows us to define what happens when a menu item is selected. Since the last AnnotationMenuItem we added in the CustomToolController should allow the user to define their own annotation pen freely, we delegate to the BrushToolController if the menu item's title equals "Custom". In all other cases, we retrieve the pen properties from the menu item and assign them to the respective BrushEditController's properties.