What's New in Document Solutions for Imaging v9

New Horizontal & Vertical Skew Transforms for Images

In v9.0, the Document Solutions Image Viewer adds more flexibility to the recently introduced Object Tools feature by supporting skew transformations for inserted images. This enhancement allows users to apply perspective-style distortion by adjusting an image along the X or Y axis—providing more creative control for annotations, markups, or custom visual layouts within the viewer.

To support the new skew operations, v9.0 introduces two new configurable properties within the Image Properties panel:

• Horizontal Skew
• Vertical Skew

These values allow users to precisely control how an image is sheared along each axis. The skew options are integrated seamlessly into the existing properties UI, appearing alongside rotation, size, opacity, border controls, and other image settings.

This is especially valuable for workflows involving technical diagrams, photographed documents, UI mockups, or any scenario where users need to visually align or tilt images without leaving the browser.

Help

New Built-In Image Gallery for Instant Image Insertion

In v9.0, DsImageViewer significantly expands the capabilities of the Object Tools feature by introducing a predefined Image Gallery directly accessible from the toolbar. This enhancement allows users to insert common icons, symbols, and graphic elements instantly, without preloading resources, hosting additional files, or writing custom loading logic.

The new gallery makes it easier than ever to annotate images, add checkmarks or arrows, place UI elements, or create consistent visual markups in the browser.

Instant Access from the Object Tools Toolbar

When the PaintToolsPlugin secondary toolbar is open, users will now see a new button:

“Open image gallery”

Clicking this button opens a drop-down panel containing a collection of predefined images organized into visual tiles.

From here:

• Selecting an image immediately closes the dropdown
• The viewer enters placement mode, allowing the user to draw or click the area where the new image should appear
• After placement, the inserted image behaves identically to any other Image object—supporting full resizing, rotation, skewing (new in v9.0), styling, and property adjustments
• This provides a fast, intuitive way to work with commonly used images, especially in annotation-heavy workflows such as document review, QA processes, technical markups, and training materials.

Flexible Configuration Through the Image Gallery API

To support customizable image libraries, v9.0 expands the PaintToolsPluginOptions type with a new imageGallery property. Developers can provide a simple list of image URLs or define a richly structured gallery with categories, labels, display preferences, and metadata.

type PaintToolsPluginOptions = {
  imageGallery?: string[] | ImageGalleryConfig;
}

ImageGalleryConfig Features Include:

• Categories for organizing multiple groups of images
• Default width/height for inserted preset images
• Aspect-ratio controls when resizing
• Optional tags, labels, and descriptions for enhanced UX
• Per-image size rules, if desired
• Icon support for categories

This ensures the gallery can scale from small checkmark/arrow sets to full icon libraries or branded image collections.

Example: Defining a Multi-Category Gallery

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

With this configuration:

• Users instantly see categories like “Annotations” and “Arrows”
• No pre-fetching or preloading logic is required
• Selecting an image immediately transitions to placement mode
• Inserted images remain fully editable through existing object properties

By reducing the friction of loading and placing images, DsImageViewer v9.0 delivers a faster, cleaner, and more user-friendly experience for anyone working with visual content in the browser.

Help | Demo