Image Viewer - PaintTools

Image Viewer - PaintTools

Posted by: moshek on 5 January 2026, 10:15 am EST

• 

  moshek

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 5 January 2026, 10:15 am EST

  1. How can I set the PaintTools plugin layout to show only the object tools?
  2. How can I prevent object properties from being displayed after the object (rectangle) is created?
  3. How can I set the default pen color to red?
• 

  chirag.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 6 January 2026, 8:34 am EST

  Hi Moshe,

  Thanks for your questions. Please see the details below:

  1. Show only the Object (Text and Objects) tools: You can configure the PaintToolsPlugin to display only the Text and Objects tools by disabling the Paint and Effects tool groups during initialization:

        viewer.addPlugin(new PaintToolsPlugin({
          toolbarLayout: {
            paintTools: false,
            effectsTools: false
          }
        }));

     This configuration ensures that only the Text and Objects tools (such as Rectangle, Line, Arrow, etc.) are available to the end user.

  2. Prevent object properties from being displayed after an object is created: By default, when an object (for example, a rectangle) is created, the object properties panel is automatically opened. You can suppress this behavior by listening for panel changes and programmatically closing the object properties panel:

        viewer.tempOnPanelChange.register((panelKey) => {
          if (panelKey && paintToolsPlugin._propertiesPanelHandle && panelKey === paintToolsPlugin._propertiesPanelHandle.id) {
            paintToolsPlugin.closeObjectProperties();
          }
        });

     This prevents the object properties panel from being shown after object creation.

  3. Set the default pen color to red: For this point, we would like to clarify your requirement. The “pen color” applies only to the Paint tools (such as Pencil, Brush, or Line in paint mode). In your current setup, the Paint tools are disabled, and only the Object tools are shown.
     
     Could you please confirm whether:

     • You want to set the default color for paint tools (for example, pencil/brush strokes), or
     • You want to set the default border or fill color for object tools (such as Rectangle or Arrow)?
       
       Once we have this clarification, we can guide you with the appropriate solution.

  Please refer to the attached solution below that demonstrates the working of the initial two requirements (see below).

  Kind Regards,
  
  Chirag

  Attachment: Paint Tools.zip

  References:

  1. toolbarLayout: https://developer.mescius.com/document-solutions/javascript-image-viewer/api/type-aliases/PaintToolsPluginOptions#toolbarlayout
  2. tempOnPanelChange: https://developer.mescius.com/document-solutions/javascript-image-viewer/api/classes/DsImageViewer#temponpanelchange
• 

  moshek

  • Post Options:
  • Link
    Copy

  Posted 6 January 2026, 2:19 pm EST

     Actually I need both options ( pencil and rectangle ) ...
  

• 

  chirag.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 6 January 2026, 11:07 pm EST

  Hi Moshe,

  Thanks for the clarification.

  For setting default colors for both the paint tools (pencil/brush) and the object tools (rectangle/arrow), we’re currently checking the available configuration options and recommended approaches with the concerned development team to ensure the solution we share is accurate and supported.

  We will update you as soon as we get any information from their end.

  Internal Tracking ID: DOC-7276

  Kind Regards,
  
  Chirag

• 

  chirag.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 21 May 2026, 3:30 am EST

  Hi Moshe,

  Thank you for your patience while we discussed this matter with the concerned development team.

  As per their inputs, the default color for the pencil/brush can be set after loading the image using the following code:

  viewer.showSecondToolbar("paint-tools").then(() => {
    paintToolsPlugin.paintDesignerContext.setState({
      penColor: "#ff0000",
      brushColor: "#ff0000"
    });
  });

  Regarding the default border/fill colors for the object tools, modifying these default values is currently not supported. However, this enhancement has already been implemented and will be available in DsImageViewer v9.1.1, which is scheduled for release on May 31, 2026.

  Please also refer to the attached code sample, which demonstrates how to use the above snippet to set the default pen/brush color in the paint tools.

  Please let us know if you require any further assistance.

  Kind Regards,
  
  Chirag

  Attachment: PaintTools.zip

• 

  chirag.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 8 June 2026, 7:05 am EST

  Hi Moshe,

  The DsImageViewer v9.1.1 is now released, which contains the features to set the default border/fill colors for the object tools.

  Please refer to the code snippet below, which demonstrates how to set the default colors for the Paint tools and object tools:

  const paintToolsPlugin = new PaintToolsPlugin({
    tools: {
      penColor: "#ff0000",
      brushColor: "#ff0000",
      fillColor: "#ff0000",
      lineColor: "#ff0000"
    }
  });

  You can further refer to the attached code sample below that uses the code snippet above and sets the default colors for the desired tools.

  Please let us know if you require any further assistance.

  Kind Regards,
  
  Chirag

  Attachment: PaintTools.zip

  References:

  1. ToolOptions API