Feat/add-context-menu-event (#44)

Author: NicolasChampionRoadCare

src/annotation-engine/stories.tsx

@@ -336,6 +336,9 @@ const useEngineStateMachine = (
                 case 'mouse_up_event':
                     mouseUpEvent(event, operations);
                     break;
+                case 'context_menu_event':
+                        event.event.preventDefault()
+                        break
                 default:
                     // nothing to do
             }

src/annotation-engine/use-annotation-engine.ts

@@ -30,7 +30,8 @@ export type Events =
     | KeyUpEvent
     | KeyDownEvent
     | MouseUpOnExistingPointEvent
-    | MouseWheelEvent;
+    | MouseWheelEvent
+    | contextMenuEvent;
 
 export type OnEvent = (event: Events, operations: Operations) => void;
 
@@ -118,6 +119,11 @@ export interface KeyDownEvent {
     event: KeyboardEvent;
 }
 
+export interface contextMenuEvent {
+    type: 'context_menu_event';
+    event: MouseEvent;
+}
+
 export interface Operations {
     addPoint(at: Coordinates): PointId;
     movePoint(pointId: PointId, to: Coordinates): void;
@@ -420,7 +426,7 @@ const useAnnotationEngine = ({
                         operations,
                     );
                 } 
-
+                
                 return onEvent(
                     {
                         type: 'mouse_move_event',
@@ -469,6 +475,17 @@ const useAnnotationEngine = ({
                 );
             });
 
+        const handleContextMenu = (event: MouseEvent) =>
+            handleEvent(() => {
+                    onEvent(
+                        {
+                            type: 'context_menu_event',
+                            event,
+                        },
+                        operations,
+                    );
+            });
+            
         if (currentCanvasRef) {
             const canvasRenderingContext = currentCanvasRef.getContext('2d');
 
@@ -479,6 +496,7 @@ const useAnnotationEngine = ({
                 currentCanvasRef.addEventListener('wheel', handleMouseWheel);
                 document.addEventListener('keyup', handleKeyUp);
                 document.addEventListener('keydown', handleKeyDown);
+                currentCanvasRef.addEventListener("contextmenu", handleContextMenu);
                 currentCanvasRef.width = currentCanvasRef.offsetWidth;
                 currentCanvasRef.height = currentCanvasRef.offsetHeight;
                 renderingContextRef.current = canvasRenderingContext;
@@ -493,6 +511,7 @@ const useAnnotationEngine = ({
                 currentCanvasRef.removeEventListener('mousedown', handleMouseDown);
                 currentCanvasRef.removeEventListener('mousemove', handleMouseMove);
                 currentCanvasRef.removeEventListener('wheel', handleMouseWheel);
+                currentCanvasRef.removeEventListener("contextmenu", handleContextMenu);
                 document.removeEventListener('keyup', handleKeyUp);
                 document.removeEventListener('keydown', handleKeyDown);
             }