diff --git a/cvat-canvas/src/typescript/canvasView.ts b/cvat-canvas/src/typescript/canvasView.ts index d026c524..1ea3bdd6 100644 --- a/cvat-canvas/src/typescript/canvasView.ts +++ b/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'); }); diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/canvas-wrapper.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/canvas-wrapper.tsx index 1b5d7508..aaa6645d 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/canvas-wrapper.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/canvas-wrapper.tsx @@ -516,6 +516,10 @@ export default class CanvasWrapperComponent extends React.PureComponent { 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 {