Type Alias: PaintToolsPluginOptions

type PaintToolsPluginOptions = object;

Options for the PaintToolsPlugin.

Properties

buttonPosition?

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?

optional fontNames: string[];

Array of available font names.

Default

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

imageGallery?

optional imageGallery: string[] | ImageGalleryConfig;

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

Examples

// 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'
  ]
}));

// 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' }
        ]
      }
    ]
  }
}));

toolbarLayout?

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

effectsTools: ToolbarItemType[] | boolean;

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

Default

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

objectTools

objectTools: ToolbarItemType[] | boolean;

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

Default

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

paintTools

paintTools: ToolbarItemType[] | boolean;

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

Default

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

textTools

textTools: ToolbarItemType[] | boolean;

Array of items for the text tools toolbar.

Default

["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.

Examples

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

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

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