Document Solutions Image Viewer
    Preparing search index...

    Type Alias PaintToolsPluginOptions

    Options for the PaintToolsPlugin.

    type PaintToolsPluginOptions = {
        buttonPosition?: number | false;
        fontNames?: string[];
        tools?: Partial<ToolsOptions>;
        toolbarLayout?: {
            effectsTools: ToolbarItemType[] | boolean;
            paintTools: ToolbarItemType[] | boolean;
            textTools: ToolbarItemType[] | boolean;
            objectTools: ToolbarItemType[] | boolean;
        };
        imageGallery?: string[]
        | ImageGalleryConfig;
    }

    Properties

    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?: string[]

    Array of available font names.

    ['Arial', 'Verdana', 'Helvetica', 'Tahoma', 'Trebuchet MS', 'Times New Roman', 'Georgia', 'Garamond', 'Courier New', 'Brush Script MT']
    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.

    // 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?: {
        effectsTools: ToolbarItemType[] | boolean;
        paintTools: ToolbarItemType[] | boolean;
        textTools: ToolbarItemType[] | boolean;
        objectTools: ToolbarItemType[] | boolean;
    }

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

    Type Declaration

    • effectsTools: ToolbarItemType[] | boolean

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

      ["Apply", "Cancel", "Splitter", "Selection", "Splitter", "BrightnessContrast", "Vibrance", "Blur", "Pixelate", "Splitter", "Eraser", "Size", "UseOriginalImage", "Splitter", "Undo", "Redo"]
    • paintTools: ToolbarItemType[] | boolean

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

      ["Apply", "Cancel", "Splitter", "Selection", "Pencil", "Brush", "CloneStamp", "Eraser", "Splitter", "Size", "Color", "UseOriginalImage", "Splitter", "Undo", "Redo"]
    • textTools: ToolbarItemType[] | boolean

      Array of items for the text tools toolbar.

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

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

    • objectTools: ToolbarItemType[] | boolean

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

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

    // 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?: string[] | ImageGalleryConfig

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

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