wip

cvat-canvas/src/typescript/canvasView.ts

@@ -453,6 +453,27 @@ export class CanvasViewImpl implements CanvasView, Listener {
             e.preventDefault();
         }
 
+        function contextmenuHandler(e: MouseEvent): void {
+            const pointID = Array.prototype.indexOf
+                .call(((e.target as HTMLElement).parentElement as HTMLElement).children, e.target);
+            if (self.activeElement.clientID !== null) {
+                const [state] = self.controller.objects
+                    .filter((_state: any): boolean => (
+                        _state.clientID === self.activeElement.clientID
+                    ));
+                self.canvas.dispatchEvent(new CustomEvent('point.contextmenu', {
+                    bubbles: false,
+                    cancelable: true,
+                    detail: {
+                        mouseEvent: e,
+                        objectState: state,
+                        pointID,
+                    },
+                }));
+            }
+            e.preventDefault();
+        }
+
         if (value) {
             (shape as any).selectize(value, {
                 deepSelect: true,
@@ -475,6 +496,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
                         });
 
                         circle.on('dblclick', dblClickHandler);
+                        circle.on('contextmenu', contextmenuHandler);
                         circle.addClass('cvat_canvas_selected_point');
                     });
 
@@ -484,6 +506,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
                         });
 
                         circle.off('dblclick', dblClickHandler);
+                        circle.off('contextmenu', contextmenuHandler);
                         circle.removeClass('cvat_canvas_selected_point');
                     });
 

cvat-ui/src/components/annotation-page/standard-workspace/canvas-wrapper.tsx

@@ -516,6 +516,10 @@ export default class CanvasWrapperComponent extends React.PureComponent<Props> {
         canvasInstance.html().addEventListener('canvas.merged', this.onObjectsMerged.bind(this));
         canvasInstance.html().addEventListener('canvas.groupped', this.onObjectsGroupped.bind(this));
         canvasInstance.html().addEventListener('canvas.splitted', this.onTrackSplitted.bind(this));
+
+        canvasInstance.html().addEventListener('point.contextmenu', (event: any) => {
+            console.log(event);
+        });
     }
 
     public render(): JSX.Element {