[UI] Hotkeys and default URL search params

[Segolene-Albouy]

This PR proposes several additions for viewer interaction.

Keyboard Shortcut

• Introduction of a new module hotkeys/ with a generic HotkeyListener, an extendable HotkeyDefinitions registry and custom hotkeysEvents to link Redux state and React components
• The listener make sure the user is not focused on an Input or TextArea or Select, then get the currently use window to act in the correct viewer panel and check if target is editable
• New hotkeys include:
  • A: if the annotation form sidebar (companion window) is closed, open it to add new annotation
  • Backspace / Del: when a shape is selected, delete the shape. If the annotation contains no more shapes, delete the annotation as well and close companion window
  • Enter: when the companion window is open, save the annotation
  • Esc: unselect selected annotation (if one is selected), then close companion window
• Events allows to use custom HTML events to me dispatched by hotkeys action and listen to by components. The HotkeysListener is mounted inside externalStorageAnnotationPlugin. Events include:
  • mae-save-annotation: when saving an annotation
  • mae-delete-shape: when deleting a shape
  • mae-annotation-empty: when the last shape associated with an annotation is deleted

Context configuration with URL search parameters

• src/contextParams.js allow to define configuration parameters in URL, if not present, behavior is the same as before. This can be extented
• Available parameters include:
  • editMode: when set to true, all shape outlines are visible. When hovering an annotation, the outline changes color. On click on the shape, the shape is immediately resizable
  • defaultForm: can be set to "note"|"tag"|"expert", when set, the annotation form is automatically selected
  • defaultTags: can be set with a list of strings separated by commas. If note form is selected, all the tags are added by default to the annotation. If tag form is selected, only the first tag of the list is added

Test with http://localhost:4444/demo/src/index.html?editMode=true&defaultForm=note&defaultTags=super,cool

Miscellaneous

• Fixed the back button tooltip in AnnotationFormHeader
• When switching to a drawing tool (not edit), the current shape is now deselected to prevent unintended edits.
• Removed duplicated code in AnnotationDrawing and bit of linting
• Deselect any selected shape when switching to drawing tool (should fix Unselect all annotation when adding/editing one #154)

NOTE: when drawing multiple shapes for a unique annotation, the outline of the shapes stays as if it was editable (red and 5px thick) even when the companion window is not open. It seems that the issue pre-existed this PR but it became more visible is editMode

[codecov-commenter]

⚠️ Please install the to ensure uploads and comments are reliably processed by Codecov.

Codecov Report

❌ Patch coverage is 7.93651% with 348 lines in your changes missing coverage. Please review.

Files with missing lines	Patch %	Lines
src/hotkeys/hotkeysDefinitions.js	0.00%	75 Missing and 1 partial ⚠️
src/plugins/canvasAnnotationsPlugin.jsx	0.00%	58 Missing ⚠️
...onForm/AnnotationFormOverlay/AnnotationDrawing.jsx	1.88%	52 Missing ⚠️
src/hotkeys/HotkeysListener.jsx	0.00%	41 Missing and 1 partial ⚠️
src/annotationForm/AnnotationForm.jsx	0.00%	29 Missing and 1 partial ⚠️
src/annotationForm/TargetSpatialInput.jsx	11.76%	30 Missing ⚠️
src/contextParams.js	34.88%	28 Missing ⚠️
src/plugins/externalStorageAnnotationPlugin.jsx	0.00%	8 Missing ⚠️
src/annotationForm/AnnotationFormFooter.jsx	22.22%	7 Missing ⚠️
src/annotationForm/TaggingTemplate.jsx	0.00%	7 Missing ⚠️
... and 3 more

📢 Thoughts on this report? Let us know!