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']

tools?

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

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

// 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?

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"]

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.

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"]

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

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