# PaintToolsPluginOptions

## Content

# Type Alias: PaintToolsPluginOptions

```ts
type PaintToolsPluginOptions = object;
```

Options for the PaintToolsPlugin.

## Properties

### buttonPosition?

```ts
optional buttonPosition: number | false;
```

The position where the "Paint tools", "Text and Objects" and "Effects" buttons should be inserted in the main toolbar.
Use `false` or `-1` to skip insertion.
Undefined means the position will be determined automatically.

***

### fontNames?

```ts
optional fontNames: string[];
```

Array of available font names.

#### Default

```ts
['Arial', 'Verdana', 'Helvetica', 'Tahoma', 'Trebuchet MS', 'Times New Roman', 'Georgia', 'Garamond', 'Courier New', 'Brush Script MT']
```

***

### tools?

```ts
optional tools: Partial<ToolsOptions>;
```

Specifies default visual properties for each paint and object tool.

These values override the built-in defaults when the toolbar opens for the first time.
They are superseded by values the user adjusts interactively during the session.
To change defaults after the viewer is initialized, set `plugin.toolsOptions` at runtime.

#### Examples

```javascript
// Set default pencil and brush options
viewer.addPlugin(new PaintToolsPlugin({
  tools: {
    penSize: 2,
    penColor: '#e03030',
    brushSize: 20,
    brushHardness: 50,
    brushOpacity: 80,
    eraserSize: 30,
  }
}));
```

```javascript
// Set default style for shape and text objects
viewer.addPlugin(new PaintToolsPlugin({
  tools: {
    lineWidth: 2,
    lineColor: '#0055cc',
    objects: {
      text: { fontSize: 16, fontColor: '#222222', fontName: 'Arial', fontBold: true },
      rectangle: { fillColor: 'transparent' },
    },
  }
}));
```

***

### toolbarLayout?

```ts
optional toolbarLayout: object;
```

Optional. Specifies the layout of the paint, effects and objects toolbar.
Defaults:
* paintTools:  ["Apply", "Cancel", "Splitter", "Selection", "Pencil", "Brush", "CloneStamp", "Eraser", "Splitter", "Size", "Color", "UseOriginalImage", "Splitter", "Undo", "Redo"]
* effectsTools: ["Apply", "Cancel", "Splitter", "Selection", "Splitter", "BrightnessContrast", "Vibrance", "Blur", "Pixelate", "Splitter", "Eraser", "Size", "UseOriginalImage", "Splitter", "Undo", "Redo"]
* objectTools: ["Apply", "Cancel", "Text", "Rectangle", "Line", "Arrow", "Ellipse", "Brackets", "Image", "ImageGallery", "Splitter", "Splitter", "Undo", "Redo"]

#### effectsTools

```ts
effectsTools: ToolbarItemType[] | boolean;
```

Array of items for the effects tools toolbar.
Set to `false` if you want to hide this toolbar item.

##### Default

```ts
["Apply", "Cancel", "Splitter", "Selection", "Splitter", "BrightnessContrast", "Vibrance", "Blur", "Pixelate", "Splitter", "Eraser", "Size", "UseOriginalImage", "Splitter", "Undo", "Redo"]
```

#### paintTools

```ts
paintTools: ToolbarItemType[] | boolean;
```

Array of items for the paint tools toolbar.
Set to `false` if you want to hide this toolbar item.

##### Default

```ts
["Apply", "Cancel", "Splitter", "Selection", "Pencil", "Brush", "CloneStamp", "Eraser", "Splitter", "Size", "Color", "UseOriginalImage", "Splitter", "Undo", "Redo"]
```

#### ~~textTools~~

```ts
textTools: ToolbarItemType[] | boolean;
```

Array of items for the text tools toolbar.

##### Default

```ts
["Apply", "Cancel" , "Splitter", "Text", "Splitter", "FontSize", "FontName", "FontBold", "FontItalic", "FontColor", "Splitter", "Undo", "Redo"]
```

##### Deprecated

This option is deprecated in favor of the "Text and Objects" toolbar where you can add text objects directly.

#### objectTools

```ts
objectTools: ToolbarItemType[] | boolean;
```

Array of items for the insert objects toolbar.
Set to `false` if you want to hide this toolbar item.

##### Default

```ts
["Apply", "Cancel", "Text", "Rectangle", "Line", "Arrow", "Ellipse", "Brackets", "Image", "ImageGallery", "Splitter", "Undo", "Redo"]
```

#### Examples

```javascript
// Modify paint tools toolbar
viewer.addPlugin(new PaintToolsPlugin({
	toolbarLayout: {
		paintTools: ["Pencil", "Size", "Color", "Splitter", "Apply", "Cancel"]
	}
}));
```

```javascript
// Modify object tools toolbar
viewer.addPlugin(new PaintToolsPlugin({
	toolbarLayout: {
		objectTools:  ["Apply", "Cancel", "Rectangle",  "Arrow"]
	}
}));
```

```javascript
// Modify effects tools toolbar
viewer.addPlugin(new PaintToolsPlugin({
	toolbarLayout: {
		effectsTools:  ["Apply", "Cancel", "Splitter", "Brightness", "Pixelate" ]
	}
}));
```

***

### imageGallery?

```ts
optional imageGallery: string[] | ImageGalleryConfig;
```

Configuration for predefined images that can be inserted via the "ImageGallery" toolbar button.

#### Examples

```javascript
// Simple array of image URLs
viewer.addPlugin(new PaintToolsPlugin({
  imageGallery: [
    'https://example.com/images/checkmark.png',
    'https://example.com/images/cross.png',
    'https://example.com/images/arrow-up.png'
  ]
}));
```

```javascript
// Advanced configuration with labels and categories
viewer.addPlugin(new PaintToolsPlugin({
  imageGallery: {
    categories: [
      {
        name: "Annotations",
        items: [
          { url: 'images/checkmark.png', label: 'Checkmark', width: 32, height: 32 },
          { url: 'images/cross.png', label: 'Cross mark', width: 32, height: 32 }
        ]
      },
      {
        name: "Arrows",
        items: [
          { url: 'images/arrow-up.png', label: 'Up arrow' },
          { url: 'images/arrow-down.png', label: 'Down arrow' }
        ]
      }
    ]
  }
}));
```