[Feature Request] Dim area outside the drawing tool to better see the annotation area about annotorious

[rsimon]

I love that design! Yes, it's possible to do this in principle. What would be needed is an extra SVG path element that serves as mask. (See here for how to use path to create holes.)

The code that handles the drawing while dragging a new box in Annotorious is here:
https://github.com/recogito/annotorious/blob/master/src/tools/rectangle/RubberbandRect.js

You'd basically just need to add another shape in addition to this.shape (e.g. called this.mask) for the masking path, and update it along with this.shape.

Likewise, the code that handles the drawing for editing an existing shape (=the state in your screenshot above) is here:
https://github.com/recogito/annotorious/blob/master/src/tools/rectangle/EditableRect.js

Steps would need to be repeated there (or, better, of course, shared through some common base function.)

Last but not least, this should probably made optional through some kind of config parameter that users can set outside from the API. But that would be merely a bit of plumbing.

A pull request for this would be great! Let me know if you're interested in giving this a try.

[rsimon]

Just a quick update: I started playing with this and it seems to work pretty well. Will need to find some time to cleanly implement this, but it’s definitely going to come as a feature.

[dosstx]

Sorry I didn't respond sooner, but we have been busy with a newborn baby. I just wanted to let you know that I appreciate your update and I can't wait to grab the latest version of this plugin! Thanks again.

[rsimon]

I just published a new release & includes the mask feature. Two caveats:

• per default, the mask is hidden to keep things consistent with the previous versions for now
• it's only available for rectangle selection for now, but not yet for polygons

To switch it on: the mask is an extra SVG path element with CSS class a9s-selection-mask. Just apply a style override of your choice, e.g.

.a9s-selection-mask {
  fill: rgba(0, 0, 0, 0.6) !important;
}

[rsimon]

The feature is now available in the latest release and a bit of documentation + an example is available here:

https://recogito.github.io/guides/customizing-appearance/

It's not 100% as pixel perfect as in your example. (The annotation outline is centered on the mask hole, rather than aligned with it. Perhaps there are SVG experts out there who have an idea if and how this can be tweaked.)

[dosstx]

Just wanted to report that this works excellent! Looks really good, too! Thank you!