Annotation Icons does not change color as selected

Technical Support
1

Hello,
I have changed the icon of “AnnotationCreateTextHighlight” using “updateElements”.
But now when i select any different color, the color of icon remains same.
Is there any way to achieve this ( changing of icon/img color with different color selected ) using new img? Please comment if below steps are feasible, if not please provide any solution which may be shorted than below.

Steps:
1- Download different color img ( 5 color in use ).
2- Get selected color in code and accordingly use
“updateElement” to update img. (Don’t know how to get selected color, plz suggest )

Regards
Abhishek Maurya

2

Hi!

You can programmatically set the fill style of your SVG icon, so this is the approach I would take. You can listen for the toolChanged event to get the color every time it is changed. Something like this should work (you may have to make some tweaks to satisfy your own requirements)

Webviewer({
   ...
}, document.getElementById('viewer')).then(instance => {

  const { docViewer, Tools, updateElement } = instance;

  docViewer.on('toolUpdated', (updatedTool) => {

    if (updatedTool instanceof Tools.TextHighlightCreateTool) {
      const { StrokeColor } = updatedTool.defaults;
      const color = StrokeColor.toHexString();
      updateElement('highlightToolButton', {
        img: `<svg fill="${color}">...</svg>`,
      })
    }
  })
});

Thanks!
Logan

3

Hi,

I talked to some members of the team and they suggested trying to just set the fill to currentcolor, like so:

updateElement('highlightToolButton', {
    img: `<svg fill='currentColor'>...</svg>`,
})

Express should find and replace currentColor with the actual current color. Can you try that out and let me know if it works for you?

Thanks,
Logan