Customizations with the @annotorious/react

[ShashanKV98]

Firstly, it's nice to have a package that handles both the annotations and the viewer in react. I had a few things I wanted to ask and hopefully get some directions on how to integrate them.

1. The library has a Rectangle as its default shape. I see there's "annotorious-v2-selector-pack" library which has got other shapes too. How can I select the shape (tool) with this package using the library and perhaps even create our own shapes?

2. Is there also a way to "erase" the created shapes?

3. It would be great to have an even greater control over the shapes (like the css).

The docs are probably a better place for some of these. In any case, appreciate the time and effort put into this library.

[rsimon]

Some answers below:

• v2.x extensions will no longer be compatible with v3. Out of the box, Annotorious 3 has rectangle and polygon tools, like the old version. In addition, there's a new selector pack in the works which currently adds a circle/ellipse tool.
• Internally, Annotorious is written in Svelte. You could gather some inspiration here and here on how to write new drawing tools and shape editors, respectively.
• In React you can generally change the tool with the <ImageAnnotator tool={tool} /> property. But documentation is still... ahm... waiting to be written ;-) Meanwhile, see here for a real-world code example. (This also uses the selector pack plugin, BTW.)
• There is currently no "controlled mode" for Annotorious React, or callback properties. This might come in the future. At the moment, you can get a reference to the anno object using the useAnnotator hook.
• The anno object offers largely the same API methods as v2. You can use anno.removeAnnotation(id) to remove an annotation.
• You can control the annotation style via the <ImageAnnotator style={...} /> property. The style property takes either an object of type DrawingStyle, or a function that takes an annotation as argument and returns a DrawingStyle.

[ShashanKV98]

These are some quality resources, thanks! I was able to inject the plugin and get it working.

I also did notice some new and exciting stuff in the extensions repo. I see packages such as annotorious-comment-popup, annotorious-osd-textlayer and wanted to ask if there's a way to get them plugged in just like the Selectorpack.

There was also a "freehand" tool in the v2 extensions. Is the approach to get this tool added going to be the same as with the custom shapes? I'm trying to draw parallels between the old code and the new one, but had no luck so far :')

[rsimon]

Yes, almost too much work in progress ;-) The annotorious-comment-popup isn't done yet. (Actually not even properly started...) The text layer plugin might work... Although I haven't tried it with React yet, only in a vanilla JS setup. (It should work in principle. But I wouldn't be surprised if it still lacks some plumbing to get it working.)

Some background:

• The annotorious-comment-popup is supposed to offer a backwards-compatible UI for those who are now using Annotorious v2 with the default comment/tag popup. I was never particularly fond of the default popup, and many people ended up not using it, anyway. Also: extending the default popup was a mess, especially if you wanted to use React. That's why Annotorious v3 will no longer have a popup at all. Instead, there will be helpers that make it easy to build your own popup in the framework of your choice. However: for those who just need a basic, non-extensible drop-in replacement for the old UI, the annotorious-comment-popup will be it.
• The osd-text-layer extension will be great :-) In spirit, it replaces the old Shape Labels plugin. But it's a lot more flexible, customizable, and will have better performance.
• A freehand tool is something I would like to build for v3, too. But it's not on the immediate roadmap. Which likely means I won't personally work on it any time soon - unless I happen to find a paying customer for it. (My goal would be to build a slightly enhanced version, that does polygon simplification as you draw.)
• I'm also still planning to add a Photoshop-style smart scissors tool. But, likewise, probably something that has to wait until I actually find a paying customer (or end up having A LOT of spare time at some point ;-)
• Re-use of any of the old drawing tools, I'm afraid, is out of the question. v3 is a complete re-write that changed literally everything. So: no surprise that you had no luck drawing parallels between the old and the new code ;-)

[ShashanKV98]

This is great news, thanks for all the updates. Just wanted to ask/mention a couple of things.

I tried the command npm install --save @annotorious/openseadragon-textlayer, but it throws a "Not Found" error.

I was also leaning towards making some changes/add new drawing tools as you mentioned by forking the repo. However, it looks like a simple npm install wasn't cutting it. It might have been due to some paths in the exports not being available. Do you have any advice on how I could resolve this?

[ShashanKV98]

I got the repo part (selector-pack) working.

[rsimon]

I think some of the work-in-progress repos might be pointing to super-early versions of Annotorious which I've unpublished in the meantime, to avoid having a list of 100 dev versions on npm. (You can see it if the version has something like -pre-alpha in it.) The versions that are published now are getting fairly stable. They all have -rc.X suffixes, and won't get unpublished. So, that's something you might want to check.

As for the text layer specifically, I think I haven't actually published that so far. I can see that the dependencies still point to local folders. I.e. for now, you could check out the Annotorious 3 branch locally, and change the paths to match your own system.

I'll try to roll an official release. But probably not this week anymore.

[ShashanKV98]

Hi @rsimon I was trying to implement a freehand functionality (using path tag). It looked just fine for the non-openseadragon version (probably because it renders directly on the browser). But I am out of luck trying to get it to render on Pixi js for the OSD Viewer.

I noticed that PIXI Graphics has APIs for rect, polygon and ellipse but for paths, functions like moveTo, quadraticCurveTo seem to be the closest. The issue with this is when there are sharp angles in the path ("V" shaped turns), PIXI fills the spaces with triangles thereby rendering a different shape. Have you ever come across such problems or happen to know what could be done to mitigate this?
Thanks

[rsimon]

I haven't looked into how rendering of lines, polylines, curves etc. works in Pixi, TBH. (Beyond verifying that the do have moveTo and lineTo methods.) So can't really say much about it. Might this be something you can control via Pixi's fill- and line-style options somehow?

[ShashanKV98]

I tried changing the functions (beginFill, linestyle), even switching them to other places in the code, but wasn't helping much.

I used a smoothing library to render the path. It outputs a path with a certain thickness although the "d' param in the path is a normal string of points. I did notice that if I didn't use the fill (or when made transparent), the additional polygons are not seen, but the path looks hollow (kind of like a pipe). I couldn't find any resource about rendering complex paths with Pixi. I guess people don't generally use it for a pen tool?

[rsimon]

Weird. WebGL is probably not the perfect environment for paths. But I'd be surprised if there was no way to do it at all. My hope was that moveTo/lineTo would allow drawing an un-closed path. And then it's up to the line style to set the thickness.

In general, if you want to the thickness to be independent of the zoom factor, you can either use a path width of 1px (supported by the WebGL environment); or you can provide a px-width to to Pixi - but then have to handle scaling according to the current stage zoom factor yourself. (I'm doing this already for box/polygon outlines.)

Anyways: I'll try to find some time to experiment with this. So far, it's just me guessing what Pixi can and cannot do ;-)

[ShashanKV98]

Appreciate it, thanks! I tried with the same two functions of Pixi, but sometimes when the shape takes a few angles it weirdly closes the path itself. Attached is an image showing this behavior (third scribble from the top).