temp

6 years ago · 4d0c22513a
parent 965ff77898
commit 4d0c22513a
8 changed files with 107 additions and 9 deletions
--- a/cvat-ui/src/actions/annotation-actions.ts
+++ b/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,
        },
    };
 }
--- a/cvat-ui/src/components/annotation-page/standard-workspace/canvas-point-context-menu.tsx
+++ b/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,
+    );
+}
--- a/cvat-ui/src/components/annotation-page/standard-workspace/canvas-wrapper.tsx
+++ b/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);
        });
    }

--- a/cvat-ui/src/components/annotation-page/standard-workspace/styles.scss
+++ b/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;
--- a/cvat-ui/src/containers/annotation-page/standard-workspace/canvas-context-menu.tsx
+++ b/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 (
--- a/cvat-ui/src/containers/annotation-page/standard-workspace/canvas-wrapper.tsx
+++ b/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 {
-            dispatch(updateCanvasContextMenu(visible, left, top));
+        onUpdateContextMenu(
+            visible: boolean,
+            left: number,
+            top: number,
+            type: ContextMenuType,
+        ): void {
+            dispatch(updateCanvasContextMenu(visible, left, top, type));
        },
        onAddZLayer(): void {
            dispatch(addZLayer());
--- a/cvat-ui/src/reducers/annotation-reducer.ts
+++ b/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,
                    },
                },
            };
--- a/cvat-ui/src/reducers/interfaces.ts
+++ b/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;