From 4d0c22513ac2215686a11ec3e262fff3f74b8de8 Mon Sep 17 00:00:00 2001 From: Dmitry Kalinin Date: Mon, 16 Mar 2020 15:43:23 +0300 Subject: [PATCH] temp --- cvat-ui/src/actions/annotation-actions.ts | 9 ++++- .../canvas-point-context-menu.tsx | 34 +++++++++++++++++++ .../standard-workspace/canvas-wrapper.tsx | 27 ++++++++++++--- .../standard-workspace/styles.scss | 13 +++++++ .../canvas-context-menu.tsx | 7 +++- .../standard-workspace/canvas-wrapper.tsx | 20 +++++++++-- cvat-ui/src/reducers/annotation-reducer.ts | 4 +++ cvat-ui/src/reducers/interfaces.ts | 2 ++ 8 files changed, 107 insertions(+), 9 deletions(-) create mode 100644 cvat-ui/src/components/annotation-page/standard-workspace/canvas-point-context-menu.tsx diff --git a/cvat-ui/src/actions/annotation-actions.ts b/cvat-ui/src/actions/annotation-actions.ts index 44aeb752..916ddb7c 100644 --- 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, {}, {}, 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, }, }; } diff --git 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 new file mode 100644 index 00000000..4ce488f3 --- /dev/null +++ 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( +
+ Haha +
, + window.document.body, + ); +} 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 aaa6645d..bbb0aab2 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 @@ -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 { 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 { 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); }); } diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/styles.scss b/cvat-ui/src/components/annotation-page/standard-workspace/styles.scss index ed07a905..2ac89546 100644 --- 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; diff --git 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 index fd2ff980..7bd7b9fb 100644 --- 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 { const { visible, activatedStateID, + type, } = this.props; return ( diff --git a/cvat-ui/src/containers/annotation-page/standard-workspace/canvas-wrapper.tsx b/cvat-ui/src/containers/annotation-page/standard-workspace/canvas-wrapper.tsx index 0625bece..e52d9994 100644 --- 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()); diff --git a/cvat-ui/src/reducers/annotation-reducer.ts b/cvat-ui/src/reducers/annotation-reducer.ts index d5de5f60..550a61e4 100644 --- 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, }, }, }; diff --git a/cvat-ui/src/reducers/interfaces.ts b/cvat-ui/src/reducers/interfaces.ts index 74e36d86..f7bf7131 100644 --- 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;