temp

cvat-ui/src/actions/annotation-actions.ts

@@ -18,6 +18,7 @@ import {
     Task,
     FrameSpeed,
     Rotation,
+    ContextMenuType,
 } from 'reducers/interfaces';
 
 import getCore from 'cvat-core';
@@ -270,13 +271,19 @@ ThunkAction<Promise<void>, {}, {}, AnyAction> {
     };
 }
 
-export function updateCanvasContextMenu(visible: boolean, left: number, top: number): AnyAction {
+export function updateCanvasContextMenu(
+    visible: boolean,
+    left: number,
+    top: number,
+    type?: ContextMenuType,
+): AnyAction {
     return {
         type: AnnotationActionTypes.UPDATE_CANVAS_CONTEXT_MENU,
         payload: {
             visible,
             left,
             top,
+            type,
         },
     };
 }

cvat-ui/src/components/annotation-page/standard-workspace/canvas-point-context-menu.tsx

@@ -0,0 +1,34 @@
+// Copyright (C) 2020 Intel Corporation
+//
+// SPDX-License-Identifier: MIT
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+
+interface Props {
+    activatedStateID: number | null;
+    visible: boolean;
+    left: number;
+    top: number;
+}
+
+export default function CanvasPointContextMenu(props: Props): JSX.Element | null {
+    const {
+        activatedStateID,
+        visible,
+        left,
+        top,
+    } = props;
+
+    if (!visible || activatedStateID === null) {
+        return null;
+    }
+
+    return ReactDOM.createPortal(
+        <div className='cvat-canvas-point-context-menu' style={{ top, left }}>
+            <span>Haha</span>
+        </div>,
+        window.document.body,
+    );
+}

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

@@ -13,7 +13,12 @@ import {
 } from 'antd';
 
 import { SliderValue } from 'antd/lib//slider';
-import { ColorBy, GridColor, ObjectType } from 'reducers/interfaces';
+import {
+    ColorBy,
+    GridColor,
+    ObjectType,
+    ContextMenuType,
+} from 'reducers/interfaces';
 import { Canvas } from 'cvat-canvas';
 import getCore from 'cvat-core';
 
@@ -48,6 +53,8 @@ interface Props {
     contrastLevel: number;
     saturationLevel: number;
     resetZoom: boolean;
+    contextVisible: boolean;
+    contextType: ContextMenuType;
     onSetupCanvas: () => void;
     onDragCanvas: (enabled: boolean) => void;
     onZoomCanvas: (enabled: boolean) => void;
@@ -64,7 +71,7 @@ interface Props {
     onSplitAnnotations(sessionInstance: any, frame: number, state: any): void;
     onActivateObject(activatedStateID: number | null): void;
     onSelectObjects(selectedStatesID: number[]): void;
-    onUpdateContextMenu(visible: boolean, left: number, top: number): void;
+    onUpdateContextMenu(visible: boolean, left: number, top: number, type: ContextMenuType): void;
     onAddZLayer(): void;
     onSwitchZLayer(cur: number): void;
     onChangeBrightnessLevel(level: number): void;
@@ -414,9 +421,14 @@ export default class CanvasWrapperComponent extends React.PureComponent<Props> {
         canvasInstance.html().addEventListener('contextmenu', (e: MouseEvent): void => {
             const {
                 activatedStateID,
+                contextType,
+                contextVisible,
             } = this.props;
 
-            onUpdateContextMenu(activatedStateID !== null, e.clientX, e.clientY);
+            if (!(contextVisible && contextType === ContextMenuType.CANVAS_SHAPE_POINT)) {
+                onUpdateContextMenu(activatedStateID !== null, e.clientX, e.clientY,
+                    ContextMenuType.CANVAS_SHAPE);
+            }
         });
 
         canvasInstance.html().addEventListener('canvas.editstart', (): void => {
@@ -518,7 +530,14 @@ export default class CanvasWrapperComponent extends React.PureComponent<Props> {
         canvasInstance.html().addEventListener('canvas.splitted', this.onTrackSplitted.bind(this));
 
         canvasInstance.html().addEventListener('point.contextmenu', (event: any) => {
-            console.log(event);
+            // const {
+            //     activatedStateID,
+            // } = this.props;
+
+            // console.log(event);
+
+            // onUpdateContextMenu(activatedStateID !== null, event.detail.mouseEvent.clientX,
+            //     event.detail.mouseEvent.clientY, ContextMenuType.CANVAS_SHAPE_POINT);
         });
     }
 

cvat-ui/src/components/annotation-page/standard-workspace/styles.scss

@@ -129,6 +129,19 @@
     }
 }
 
+.cvat-canvas-point-context-menu {
+    opacity: 0.6;
+    position: fixed;
+    width: 100px;
+    z-index: 10;
+    max-height: 50%;
+    overflow-y: auto;
+
+    &:hover {
+        opacity: 1;
+    }
+}
+
 .cvat-canvas-z-axis-wrapper {
     position: absolute;
     background: $background-color-2;

cvat-ui/src/containers/annotation-page/standard-workspace/canvas-context-menu.tsx

@@ -5,15 +5,17 @@
 import React from 'react';
 
 import { connect } from 'react-redux';
-import { CombinedState } from 'reducers/interfaces';
+import { CombinedState, ContextMenuType } from 'reducers/interfaces';
 
 import CanvasContextMenuComponent from 'components/annotation-page/standard-workspace/canvas-context-menu';
+import CanvasPointContextMenuComponent from 'components/annotation-page/standard-workspace/canvas-point-context-menu';
 
 interface StateToProps {
     activatedStateID: number | null;
     visible: boolean;
     top: number;
     left: number;
+    type: ContextMenuType;
     collapsed: boolean | undefined;
 }
 
@@ -29,6 +31,7 @@ function mapStateToProps(state: CombinedState): StateToProps {
                     visible,
                     top,
                     left,
+                    type,
                 },
             },
         },
@@ -40,6 +43,7 @@ function mapStateToProps(state: CombinedState): StateToProps {
         visible,
         left,
         top,
+        type,
     };
 }
 
@@ -175,6 +179,7 @@ class CanvasContextMenuContainer extends React.PureComponent<Props, State> {
         const {
             visible,
             activatedStateID,
+            type,
         } = this.props;
 
         return (

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

@@ -39,6 +39,7 @@ import {
     GridColor,
     ObjectType,
     CombinedState,
+    ContextMenuType,
 } from 'reducers/interfaces';
 
 import { Canvas } from 'cvat-canvas';
@@ -70,6 +71,8 @@ interface StateToProps {
     minZLayer: number;
     maxZLayer: number;
     curZLayer: number;
+    contextVisible: boolean;
+    contextType: ContextMenuType;
 }
 
 interface DispatchToProps {
@@ -89,7 +92,7 @@ interface DispatchToProps {
     onSplitAnnotations(sessionInstance: any, frame: number, state: any): void;
     onActivateObject: (activatedStateID: number | null) => void;
     onSelectObjects: (selectedStatesID: number[]) => void;
-    onUpdateContextMenu(visible: boolean, left: number, top: number): void;
+    onUpdateContextMenu(visible: boolean, left: number, top: number, type: ContextMenuType): void;
     onAddZLayer(): void;
     onSwitchZLayer(cur: number): void;
     onChangeBrightnessLevel(level: number): void;
@@ -104,6 +107,10 @@ function mapStateToProps(state: CombinedState): StateToProps {
     const {
         annotation: {
             canvas: {
+                contextMenu: {
+                    visible: contextVisible,
+                    type: contextType,
+                },
                 instance: canvasInstance,
             },
             drawing: {
@@ -179,6 +186,8 @@ function mapStateToProps(state: CombinedState): StateToProps {
         curZLayer,
         minZLayer,
         maxZLayer,
+        contextVisible,
+        contextType,
     };
 }
 
@@ -236,8 +245,13 @@ function mapDispatchToProps(dispatch: any): DispatchToProps {
         onSelectObjects(selectedStatesID: number[]): void {
             dispatch(selectObjects(selectedStatesID));
         },
-        onUpdateContextMenu(visible: boolean, left: number, top: number): void {
+        onUpdateContextMenu(
-            dispatch(updateCanvasContextMenu(visible, left, top));
+            visible: boolean,
+            left: number,
+            top: number,
+            type: ContextMenuType,
+        ): void {
+            dispatch(updateCanvasContextMenu(visible, left, top, type));
         },
         onAddZLayer(): void {
             dispatch(addZLayer());

cvat-ui/src/reducers/annotation-reducer.ts

@@ -12,6 +12,7 @@ import {
     ActiveControl,
     ShapeType,
     ObjectType,
+    ContextMenuType,
 } from './interfaces';
 
 const defaultState: AnnotationState = {
@@ -23,6 +24,7 @@ const defaultState: AnnotationState = {
             visible: false,
             left: 0,
             top: 0,
+            type: ContextMenuType.CANVAS_SHAPE,
         },
         instance: new Canvas(),
         ready: false,
@@ -923,6 +925,7 @@ export default (state = defaultState, action: AnyAction): AnnotationState => {
                 visible,
                 left,
                 top,
+                type,
             } = action.payload;
 
             return {
@@ -934,6 +937,7 @@ export default (state = defaultState, action: AnyAction): AnnotationState => {
                         visible,
                         left,
                         top,
+                        type,
                     },
                 },
             };

cvat-ui/src/reducers/interfaces.ts

@@ -282,6 +282,7 @@ export enum StatesOrdering {
 export enum ContextMenuType {
     CANVAS = 'canvas',
     CANVAS_SHAPE = 'canvas_shape',
+    CANVAS_SHAPE_POINT = 'canvas_shape_point',
 }
 
 export enum Rotation {
@@ -301,6 +302,7 @@ export interface AnnotationState {
             visible: boolean;
             top: number;
             left: number;
+            type: ContextMenuType;
         };
         instance: Canvas;
         ready: boolean;