More control over React ImageAnnotator div

[jrr]

I'm trying to style the annotated image, and feel limited by the control I have over the div that ImageAnnotator wraps around it.

(which is currently <div data-theme="light" style="position: relative; display: inline-block;">)

In my specific case I'm trying to add annotation to an image that is a flex child, with flex-grow on it. I'm not sure whether my layout would be theoretically possible, but it's difficult to even experiment with it given the current component's interface.

A few ideas to give users more control:

• Accept common react props like ref, className, and style.
  • (and because React's standard style prop conflicts with ImageAnnotator's, perhaps rename to the latter to drawingStyle?)
• Provide a way to use elements other than <img> (e.g. a div with background-image).

[rsimon]

Hi,

I think it might not actually work, as you say, because you need to find a layout that allows the SVG annotation layer to properly scale along with the image. It's similar to what I described here for Annotorious v2. In a nutshell, you might be able to achieve what you need by wrapping the whole annotator in a DIV with position: relative, applying any extra styles you need to that wrapper, and then set the image width & height to 100% so it follows the wrapper DIV.

Provide a way to use elements other than <img>

That's a bit trickier, because without an image there's no longer a straightforward "native resolution" for the element. That means annotations would have to be stored in viewport coordinates. Annotorious v2 supported this option, but it can easily mess things up in responsive layouts if you're not aware of the limitation.

Anyways: image support in Annotorious v3 is, frankly, a bit half-done at the moment. It's likely to stay so for a while since none of my current clients are using it. (They are all using the OpenSeadragon version.) Happy to review & take pull requests. But I won't likely be able to work on this myself until client demand arises.