Update color used for all tools and their buttons

Technical Support WebViewer
,
1

WebViewer Version: 11.11.0

Do you have an issue with a specific file(s)? No
Can you reproduce using one of our samples or online demos? No
Are you using the WebViewer server? No
Does the issue only happen on certain browsers? No
Is your issue related to a front-end framework? e
Is your issue related to annotations? Yes

Please give a brief summary of your issue:

Hi,

I’m trying to programmatically set the TextColor and StrokeColor for all tools, and also update each tool button’s color so everything stays consistent. I’m adding a custom color picker, and when a user selects a color, my goal is I want that color applied across all tools automatically. The code below is working for me, but I’m wondering if there’s a cleaner or more efficient way to handle this

// Updates toolbar button colors
private updateToolbarColors(instance: WebViewerInstance, color: string): void {
   TOOL_BUTTONS.forEach((button) => {
      instance.UI.updateElement(button, { color })
   })
}

// Updates active tool colors
private updateActiveToolColors(instance: WebViewerInstance, color: string): void {
   const { r, g, b, a } = this.convertHexToRgba(color)
   TOOL_NAMES.forEach((toolName) => {
      instance.Core.documentViewer.getTool(toolName).setStyles({
         TextColor: new instance.Core.Annotations.Color(r, g, b, a),
         StrokeColor: new instance.Core.Annotations.Color(r, g, b, a)
      })
   })
}

Thanks
3

Hello, I’m AiRon, an automated tech support bot :robot:
While you wait for one of our customer support representatives, I can help you with your question.


To update the text and stroke colors for all tools and their toolbar buttons in WebViewer, you can streamline your approach by using a centralized function to handle color updates. This can help maintain consistency and reduce redundancy in your code.

Some things you can try:

  • Create a single function that updates both the toolbar button colors and the active tool colors.

  • Utilize a map or a configuration object to store tool names and their corresponding button elements, which can simplify iterating over them.

  • Ensure your color conversion logic is efficient and used consistently across your functions.



Here are some resources that might help you:


Hopefully, this helps you solve your problem while you wait for a human to get back to you.

4

Hello @koa,

Thank you for posting on our forum.

Currently, we do not have any API which would batch update all of the tools’ styles, so your current implementation of iterating through the tools/buttons and updating the color would be our current recommended approach.

If you would like to, we can raise a Feature Request to implement such an API, but we would not have a timeline as to when our Product team would review it. Otherwise, if you have any cases in which this implementation does not function as expected, feel free to provide those findings and we can investigate further.

Let us know if you need clarification!

Best Regards,
Jacob Romano Carlsen
Web Development Support Engineer
Apryse Software Inc.

5

Appreciate the info, I am okay with the current implementation - no feature request necessary.

Thanks,
Makoa

1 Like