Basic Interface for adding annotations

[cubap]

Given the programmatic loading of a single page, the user can create a new fragmentSelector Annotation.

Load

For this case, the user would be navigating to a Page in a Project. For some reason, perhaps a detection that there are no annotations, the user will be interacting with an Interface where they can draw new Lines on the Page.

This issue assumes the Project is already known and the User is authenticated, so this can all be hardcoded as a demo.

• Project will have a title and layers that do not need to be displayed.
• Layer only one Layer will be used, though extras are allowed. The Layer label should be displayed for the user. The Layer will be a Web Annotation AnnotationPage and saved in TinyPen.
• Canvas are the targets of each AnnotationPage and are from the IIIF Model. This Canvas conventionally would contain the AnnotationPage reference in its annotations but in our application, it will frequently be an external reference.
• Annotation describes a single Line as an Annotation that targets the Canvas with a Fragment Selector and a simple rectangular xywh pattern.

Render

On screen, the User will expect a depiction of the Page image (Canvas.items[0].items[0]). If there is an Annotation in the Layer already, that should also be drawn. Finally, some interaction element for drawing a new annotation should be visible.

Annotate

Most simply, the User can delete/remove and create a new Annotation. This should be saved through the TPEN API to save an Annotation to a Layer.

[cubap]

These 200 lines are where it happens in TPEN28:

https://github.com/CenterForDigitalHumanities/TPEN28/blob/6b5b057d94a1164b259609110def227913490cff/web/js/transcribe.js#L3724

[cubap]

import { animate, scroll } from "https://cdn.jsdelivr.net/npm/motion@11.11.13/+esm" possibly simplified animation to consider