Annotations placed as markers on an image

[stephenwf]

Annotations will be placed as markers on an image

In order to maintain a responsive design, we've decided to represent the regions of the image using annotation boxes with a height, width, X and Y. This will be displayed to the user as a pin.

1. X co-ordinate of the annotation, from the target
2. Y co-ordinate of the annotation, from the target
3. Width of the annotation, from the target
4. Height of the annotation, from the target
5. X position of pin, driven by configuration (50%)
6. Offset at the top, driven by configuration (3.5% of canvas height)

• Dotted line won't be visible, driven by configuration
• Area in dotted line might be click-able to view annotation (?)

[stephenwf]

This is currently driven by CSS. You can view the CSS here:
https://github.com/digirati-co-uk/canvas-panel/blob/master/packages/canvas-panel-patchwork-plugin/Patchwork.css#L76-L116

You can see it on the site here: https://canvas-panel.netlify.com/#/patchwork