Fixed copying/pasting actions

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

@@ -542,31 +542,10 @@ export function editShape(enabled: boolean): AnyAction {
 }
 
 export function copyShape(objectState: any): AnyAction {
-    const state = getStore().getState();
-
-    state.annotation.canvas.instance.cancel();
-    if (objectState.objectType !== ObjectType.TAG) {
-        state.annotation.canvas.instance.draw({
-            enabled: true,
-            initialState: objectState,
-        });
-    }
-
-    let activeControl = ActiveControl.CURSOR;
-    if (objectState.shapeType === ShapeType.RECTANGLE) {
-        activeControl = ActiveControl.DRAW_RECTANGLE;
-    } else if (objectState.shapeType === ShapeType.POINTS) {
-        activeControl = ActiveControl.DRAW_POINTS;
-    } else if (objectState.shapeType === ShapeType.POLYGON) {
-        activeControl = ActiveControl.DRAW_POLYGON;
-    } else if (objectState.shapeType === ShapeType.POLYLINE) {
-        activeControl = ActiveControl.DRAW_POLYLINE;
-    }
-
     return {
         type: AnnotationActionTypes.COPY_SHAPE,
         payload: {
-            activeControl,
+            objectState,
         },
     };
 }
@@ -1175,11 +1154,25 @@ export function searchAnnotationsAsync(
 export function pasteShapeAsync(): ThunkAction<Promise<void>, {}, {}, AnyAction> {
     return async (dispatch: ActionCreator<Dispatch>): Promise<void> => {
         const initialState = getStore().getState().annotation.drawing.activeInitialState;
-        const { instance: canvasInstance } = getStore().getState().annotation.canvas;
+        const {
+            canvas: {
+                instance: canvasInstance,
+            },
+            job: {
+                instance: jobInstance,
+            },
+            player: {
+                frame: {
+                    number: frameNumber,
+                },
+            },
+        } = getStore().getState().annotation;
 
         if (initialState) {
-            let activeControl = ActiveControl.DRAW_RECTANGLE;
-            if (initialState.shapeType === ShapeType.POINTS) {
+            let activeControl = ActiveControl.CURSOR;
+            if (initialState.shapeType === ShapeType.RECTANGLE) {
+                activeControl = ActiveControl.DRAW_RECTANGLE;
+            } else if (initialState.shapeType === ShapeType.POINTS) {
                 activeControl = ActiveControl.DRAW_POINTS;
             } else if (initialState.shapeType === ShapeType.POLYGON) {
                 activeControl = ActiveControl.DRAW_POLYGON;
@@ -1195,10 +1188,20 @@ export function pasteShapeAsync(): ThunkAction<Promise<void>, {}, {}, AnyAction>
             });
 
             canvasInstance.cancel();
-            canvasInstance.draw({
-                enabled: true,
-                initialState,
-            });
+            if (initialState.objectType === ObjectType.TAG) {
+                const state = new cvat.classes.ObjectState({
+                    objectType: initialState.objectType,
+                    label: initialState.label,
+                    frame: frameNumber,
+
+                });
+                dispatch(createAnnotationsAsync(jobInstance, frameNumber, [state]));
+            } else {
+                canvasInstance.draw({
+                    enabled: true,
+                    initialState,
+                });
+            }
         }
     };
 }

cvat-ui/src/base.scss

@@ -22,6 +22,7 @@ $info-icon-color: #0074D9;
 $objects-bar-tabs-color: #BEBEBE;
 $objects-bar-icons-color: #242424; // #6E6E6E
 $active-object-item-background-color: #D8ECFF;
+$default-object-colorpicker-item-background-color: #D8D8D8;
 $slider-color: #1890FF;
 
 $monospaced-fonts-stack: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;

cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item.tsx

@@ -719,21 +719,29 @@ function ObjectItemComponent(props: Props): JSX.Element {
 
     return (
         <div style={{ display: 'flex' }}>
-            <Popover
-                placement='left'
-                trigger='click'
-                content={(
-                    <ColorChanger
-                        onChange={changeColor}
-                        colors={colors}
+            {
+                objectType !== ObjectType.TAG ? (
+                    <Popover
+                        placement='left'
+                        trigger='click'
+                        content={(
+                            <ColorChanger
+                                onChange={changeColor}
+                                colors={colors}
+                            />
+                        )}
+                    >
+                        <div
+                            className='cvat-objects-sidebar-state-item-color'
+                            style={{ background: ` ${color}` }}
+                        />
+                    </Popover>
+                ) : (
+                    <div
+                        className='cvat-objects-sidebar-state-item-color'
                     />
-                )}
-            >
-                <div
-                    className='cvat-objects-sidebar-state-item-color'
-                    style={{ background: ` ${color}` }}
-                />
-            </Popover>
+                )
+            }
 
             <div
                 onMouseEnter={activate}

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

@@ -121,6 +121,7 @@
 .cvat-objects-sidebar-state-item-color {
     width: 7px;
     opacity: 1;
+    background-color: $default-object-colorpicker-item-background-color;
 
     &:hover {
         opacity: 0.7;

cvat-ui/src/containers/annotation-page/standard-workspace/objects-side-bar/object-item.tsx

@@ -226,21 +226,9 @@ class ObjectItemContainer extends React.PureComponent<Props> {
         const {
             objectState,
             copyShape,
-            jobInstance,
-            frameNumber,
-            createAnnotations,
         } = this.props;
 
         copyShape(objectState);
-        if (objectState.objectType === ObjectType.TAG) {
-            const state = new cvat.classes.ObjectState({
-                objectType: objectState.objectType,
-                label: objectState.label,
-                frame: frameNumber,
-
-            });
-            createAnnotations(jobInstance, frameNumber, [state]);
-        }
     };
 
     private propagate = (): void => {