Text and Objects

Text and Objects tools are a set of tools or functions used to add text and various objects to the current layer. These tools can be added to the toolbar using the PaintToolsPlugin.

The Text and Objects Tool button () opens a secondary toolbar with buttons for adding text and objects, and a properties panel that will display configurable options for the selected option.

The following table lists the options available in the Text and Objects Tools secondary toolbar:

The following tables list the configurable options for each selected text/object.

Text

Rectangle

Line

Arrow

The properties for the Arrow object are the same as those for the Line object, with the main difference that the End Cap Style is preset to 'closedArrow' by default for convenience.

Ellipse

Brackets

Image

Image Gallery

The Image Gallery is a predefined collection of icons and graphic elements that’s available on the toolbar. You can use it to insert common images, icons, and symbols without preloading assets, hosting extra files, or writing custom code.

The properties for the Image Gallery are the same as those for the Image object.

Adding & Customizing Image Gallery

Users can add the Image Gallery via the imageGallery property from PaintToolsPluginOptions type.

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

The Image Gallery button is automatically included in the secondary toolbar (Text and Objects tools) when PaintToolsPlugin is added to the Viewer. To check how to add Text and Objects tools via PaintToolsPlugin, visit this topic.

You can pass a simple list of image URLs or a structured ImageGalleryConfig that organizes images into categories and controls display behavior. Typical configuration options include categories, aspect ratio controls, labels, descriptions, and tags. You can check the API for more examples.

Refer to the following example code demonstrating how to customize the Image Gallery by adding custom images:

viewer.addPlugin(new PaintToolsPlugin({
    imageGallery: [
        'images/croissant.svg',
        'images/curry-rice.svg',
        'images/doughnut.svg',
        'images/french-fries.svg',
        'images/green-salad.svg',
        'images/hamburger.svg',
        'images/hot-beverage.svg',
        'images/hot-dog.svg',
        'images/ice-cream.svg',
        'images/pancakes.svg'
    ],
}));

Displaying Text and Objects Tools on Image Load

This example demonstrates how to configure the DsImageViewer to show only text and objects tools when an image loads, while hiding other tool groups (paint, effects).

viewer.addPlugin(new PaintToolsPlugin({ 
  toolbarLayout: { 
    paintTools: false,    // Hide painting tools
    effectsTools: false,  // Hide effects tools
    objectTools: true     // Show text and objects tools
  }
}));
viewer.open("./nature.jpg").then(() => {
  viewer.showSecondToolbar("objects"); // Display object toolbar post-load
});

Work with Text/Objects

DsImageViewer allows you to add, edit, move, and delete text/objects per your needs. Examples for Text, Rectangle, and Image gallery appear below with step-by-step illustrations.

Text

Text is a toolbar button that adds editable text layers to the canvas. Use it to add, move, edit, select, and delete text. Refer to the step-by-step workflows below:

Add Text

1. Click on the Text button and on the desired location.

2. Start typing the text, then press the Enter button.

Edit Text

1. Click on the text box to open the properties panel.

2. Edit the text, then press the Control+Enter key to apply changes.

Move Text

1. Click on the text box. The move cursor icon will appear.

2. Click and move the text to the desired location.

Select and Delete Text

1. To select a text, click on the text box.

2. To delete a text, press the Delete button.

Rectangle

Rectangle is a toolbar button that creates rectangular shape objects on the canvas. Use it to draw, resize, move, select, and delete rectangles. Refer to the step-by-step workflows below:

Add Rectangle

1. Click on the Rectangle button and on the desired location.

2. Position and size the rectangle, then click outside.

Edit Rectangle

1. Click on the rectangle to open the properties panel.

2. Edit the properties, then press the Control+Enter key to apply changes.

Move Rectangle

1. Click on the rectangle. The move cursor icon will appear.

2. Click and move the rectangle to the desired location.

Select and Delete Rectangle

1. To select a rectangle, click on it.

2. To delete a rectangle, press the Delete button.

Image Gallery

Image gallery is a toolbar button that opens a collection of preset and custom images for quick insertion. Use it to insert, resize, move, select, and remove gallery images. Refer to the step-by-step workflows below:

Add Image from Image Gallery

1. Click on the Image Gallery button, select your desired image, and add it on the desired location.

2. Position and size the image, then click outside.

Edit Image from Image Gallery

1. Click on the image to open the properties panel.

2. Edit the properties, then press the Control+Enter keys to apply changes.

Move Image from Image Gallery

1. Click on the image. The move cursor icon will appear.

2. Click and move the image to the desired location.

Select and Delete Image from Image Gallery

1. To select an image, click on it.

2. To delete an image, press the Delete button.

Limitations

DsImageViewer does not support editing images with animation or multi-frame images. The following is a list of uneditable image formats:

• GIF

• ICO

• SVG

• TIFF