[annotator-dev] Image annotation

Sun Oct 12 17:50:01 UTC 2014

On Sun, Oct 12, 2014, at 18:22, Randall Leeds wrote:
> Another potentially useful direction to go would be to separate the steps
> of identifying and highlighting the anchors. It should be possible to use
> the selector implementation to get the image element and bounding box
> information. With OS integration that'd probably be adjusted for zoom and
> pan.

Randall is bang on in regard to how this works in Annotator 2.0.

Selecting an area for annotation and drawing a loaded annotation are
entirely decoupled from one another. The first part is handled by a
piece of the UI called TextSelector:

https://github.com/openannotation/annotator/blob/8d126eb/src/ui/textselector.js

To create a TextSelector, you give it a bounding element within which it
should respond to selections, and a callback to call when a selection is
made:

    var ts = new TextSelector(document.body, {
        onSelection: function (ranges, event) { ... }
    });

I would imagine an image selector being very similar in API.

The Highlighter is a completely separate component, which is given an
element within which to search for and draw highlights, and exposes an
API of draw/undraw/redraw (for create/delete/update respectively) as
well as a "drawAll" method for bulk load:

https://github.com/openannotation/annotator/blob/8d126eb/src/ui/highlighter.js

There is also a plugin which sets up a highlighter to respond to the
appropriate annotation lifecycle hooks:

https://github.com/openannotation/annotator/blob/8d126eb/src/plugin/highlighter.js

But in the default instantiation of Annotator the DefaultUI plugin is
used, which hooks up the TextSelector and Highlighter in the following
lines:

https://github.com/openannotation/annotator/blob/8d126eb/src/plugin/defaultui.js#L132-L144
https://github.com/openannotation/annotator/blob/8d126eb/src/plugin/defaultui.js#L182-L185

It should be possible to build an ImageSelector and ImageHighlighter (or
similar) components that work in much the same way, and which can be
configured to trigger the same adder, editor, and viewer as the rest of
Annotator.

Best,
N