Type alias PaintToolsPluginOptions

Type declaration

• 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.

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

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

  Example

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

  Example

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

  Example

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

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

• Optional imageGallery?: string[] | ImageGalleryConfig

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

  Example

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

  Example

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