Added shortcut hint for change color, added ability to change color o…

…f group/label using the shortcut
cvat-ai · Jun 15, 2020 · 9f3bbd5 · 9f3bbd5
1 parent 5b9f8a1
commit 9f3bbd5
Show file tree

Hide file tree

Showing 7 changed files with 89 additions and 46 deletions.
diff --git a/cvat-ui/src/actions/annotation-actions.ts b/cvat-ui/src/actions/annotation-actions.ts
@@ -1288,19 +1288,23 @@ ThunkAction<Promise<void>, {}, {}, AnyAction> {
 }
 
 export function changeLabelColorAsync(
-    sessionInstance: any,
-    frameNumber: number,
     label: any,
     color: string,
 ): ThunkAction<Promise<void>, {}, {}, AnyAction> {
     return async (dispatch: ActionCreator<Dispatch>): Promise<void> => {
         try {
-            const { filters, showAllInterpolationTracks } = receiveAnnotationsParameters();
+            const {
+                filters,
+                showAllInterpolationTracks,
+                jobInstance,
+                frame,
+            } = receiveAnnotationsParameters();
+
             const updatedLabel = label;
             updatedLabel.color = color;
-            const states = await sessionInstance.annotations
-                .get(frameNumber, showAllInterpolationTracks, filters);
-            const history = await sessionInstance.actions.get();
+            const states = await jobInstance.annotations
+                .get(frame, showAllInterpolationTracks, filters);
+            const history = await jobInstance.actions.get();
 
             dispatch({
                 type: AnnotationActionTypes.CHANGE_LABEL_COLOR_SUCCESS,

diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/color-changer.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/color-changer.tsx
@@ -5,17 +5,16 @@
 import React from 'react';
 import { Row, Col } from 'antd/lib/grid';
 import Button from 'antd/lib/button';
+import Text from 'antd/lib/typography/Text';
 
 interface Props {
+    shortcut: string;
     colors: string[];
     onChange(color: string): void;
 }
 
 function ColorChanger(props: Props): JSX.Element {
-    const {
-        colors,
-        onChange,
-    } = props;
+    const { shortcut, colors, onChange } = props;
 
     const cols = 6;
     const rows = Math.ceil(colors.length / cols);
@@ -47,9 +46,12 @@ function ColorChanger(props: Props): JSX.Element {
     }
 
     return (
-        <>
+        <div>
+            <Text>
+                {`Press ${shortcut} to set a random color`}
+            </Text>
             {antdRows}
-        </>
+        </div>
     );
 }
 

diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/label-item.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/label-item.tsx
@@ -18,6 +18,7 @@ interface Props {
     visible: boolean;
     statesHidden: boolean;
     statesLocked: boolean;
+    changeColorShortcut: string;
     hideStates(): void;
     showStates(): void;
     lockStates(): void;
@@ -38,6 +39,7 @@ function LabelItemComponent(props: Props): JSX.Element {
         lockStates,
         unlockStates,
         changeColor,
+        changeColorShortcut,
     } = props;
 
     return (
@@ -54,6 +56,7 @@ function LabelItemComponent(props: Props): JSX.Element {
                     trigger='click'
                     content={(
                         <ColorChanger
+                            shortcut={changeColorShortcut}
                             onChange={changeColor}
                             colors={labelColors}
                         />

diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item.tsx
@@ -864,6 +864,7 @@ function ObjectItemComponent(props: Props): JSX.Element {
                 trigger='click'
                 content={(
                     <ColorChanger
+                        shortcut={normalizedKeyMap.CHANGE_OBJECT_COLOR}
                         onChange={changeColor}
                         colors={colors}
                     />

diff --git a/cvat-ui/src/containers/annotation-page/standard-workspace/objects-side-bar/label-item.tsx b/cvat-ui/src/containers/annotation-page/standard-workspace/objects-side-bar/label-item.tsx
@@ -23,14 +23,15 @@ interface StateToProps {
     labelName: string;
     labelColor: string;
     labelColors: string[];
+    changeColorShortcut: string;
     objectStates: any[];
     jobInstance: any;
     frameNumber: any;
 }
 
 interface DispatchToProps {
     updateAnnotations(states: any[]): void;
-    changeLabelColor(sessionInstance: any, frameNumber: number, label: any, color: string): void;
+    changeLabelColor(label: any, color: string): void;
 }
 
 function mapStateToProps(state: CombinedState, own: OwnProps): StateToProps {
@@ -50,6 +51,9 @@ function mapStateToProps(state: CombinedState, own: OwnProps): StateToProps {
             },
             colors: labelColors,
         },
+        shortcuts: {
+            normalizedKeyMap,
+        },
     } = state;
 
     const [label] = labels
@@ -63,6 +67,7 @@ function mapStateToProps(state: CombinedState, own: OwnProps): StateToProps {
         objectStates,
         jobInstance,
         frameNumber,
+        changeColorShortcut: normalizedKeyMap.CHANGE_OBJECT_COLOR,
     };
 }
 
@@ -72,12 +77,10 @@ function mapDispatchToProps(dispatch: any): DispatchToProps {
             dispatch(updateAnnotationsAsync(states));
         },
         changeLabelColor(
-            sessionInstance: any,
-            frameNumber: number,
             label: any,
             color: string,
         ): void {
-            dispatch(changeLabelColorAsync(sessionInstance, frameNumber, label, color));
+            dispatch(changeLabelColorAsync(label, color));
         },
     };
 }
@@ -152,11 +155,9 @@ class LabelItemContainer extends React.PureComponent<Props, State> {
         const {
             changeLabelColor,
             label,
-            frameNumber,
-            jobInstance,
         } = this.props;
 
-        changeLabelColor(jobInstance, frameNumber, label, color);
+        changeLabelColor(label, color);
     };
 
     private switchHidden(value: boolean): void {
@@ -196,6 +197,7 @@ class LabelItemContainer extends React.PureComponent<Props, State> {
             labelName,
             labelColor,
             labelColors,
+            changeColorShortcut,
         } = this.props;
 
         return (
@@ -206,6 +208,7 @@ class LabelItemContainer extends React.PureComponent<Props, State> {
                 visible={visible}
                 statesHidden={statesHidden}
                 statesLocked={statesLocked}
+                changeColorShortcut={changeColorShortcut}
                 hideStates={this.hideStates}
                 showStates={this.showStates}
                 lockStates={this.lockStates}

diff --git a/cvat-ui/src/containers/annotation-page/standard-workspace/objects-side-bar/object-item.tsx b/cvat-ui/src/containers/annotation-page/standard-workspace/objects-side-bar/object-item.tsx
@@ -24,8 +24,7 @@ import {
 } from 'actions/annotation-actions';
 
 import ObjectStateItemComponent from 'components/annotation-page/standard-workspace/objects-side-bar/object-item';
-
-import {shift} from 'utils/math';
+import { shift } from 'utils/math';
 
 interface OwnProps {
     clientID: number;
@@ -58,7 +57,7 @@ interface DispatchToProps {
     removeObject: (sessionInstance: any, objectState: any) => void;
     copyShape: (objectState: any) => void;
     propagateObject: (objectState: any) => void;
-    changeLabelColor(sessionInstance: any, frameNumber: number, label: any, color: string): void;
+    changeLabelColor(label: any, color: string): void;
     changeGroupColor(group: number, color: string): void;
 }
 
@@ -155,12 +154,10 @@ function mapDispatchToProps(dispatch: any): DispatchToProps {
             dispatch(propagateObjectAction(objectState));
         },
         changeLabelColor(
-            sessionInstance: any,
-            frameNumber: number,
             label: any,
             color: string,
         ): void {
-            dispatch(changeLabelColorAsync(sessionInstance, frameNumber, label, color));
+            dispatch(changeLabelColorAsync(label, color));
         },
         changeGroupColor(group: number, color: string): void {
             dispatch(changeGroupColorAsync(group, color));
@@ -357,12 +354,10 @@ class ObjectItemContainer extends React.PureComponent<Props> {
 
     private changeColor = (color: string): void => {
         const {
-            jobInstance,
             objectState,
             colorBy,
             changeLabelColor,
             changeGroupColor,
-            frameNumber,
         } = this.props;
 
         if (colorBy === ColorBy.INSTANCE) {
@@ -371,7 +366,7 @@ class ObjectItemContainer extends React.PureComponent<Props> {
         } else if (colorBy === ColorBy.GROUP) {
             changeGroupColor(objectState.group.id, color);
         } else if (colorBy === ColorBy.LABEL) {
-            changeLabelColor(jobInstance, frameNumber, objectState.label, color);
+            changeLabelColor(objectState.label, color);
         }
     };
 
@@ -399,39 +394,33 @@ class ObjectItemContainer extends React.PureComponent<Props> {
         this.commit();
     };
 
-    private changeFrame(frame: number): void {
-        const { changeFrame, canvasInstance } = this.props;
-        if (isAbleToChangeFrame(canvasInstance)) {
-            changeFrame(frame);
-        }
-    }
 
     private switchCuboidOrientation = (): void => {
         function cuboidOrientationIsLeft(points: number[]): boolean {
             return points[12] > points[0];
         }
 
-        const {objectState} = this.props;
+        const { objectState } = this.props;
 
         this.resetCuboidPerspective(false);
 
         objectState.points = shift(objectState.points,
             cuboidOrientationIsLeft(objectState.points) ? 4 : -4);
 
         this.commit();
-    }
+    };
 
-    private resetCuboidPerspective = (commit: boolean = true): void => {
+    private resetCuboidPerspective = (commit = true): void => {
         function cuboidOrientationIsLeft(points: number[]): boolean {
             return points[12] > points[0];
         }
 
-        const {objectState} = this.props;
-        const {points} = objectState;
+        const { objectState } = this.props;
+        const { points } = objectState;
         const minD = {
-            x: (points[6] - points[2])*0.001,
-            y: (points[3] - points[1])*0.001,
-        }
+            x: (points[6] - points[2]) * 0.001,
+            y: (points[3] - points[1]) * 0.001,
+        };
 
         if (cuboidOrientationIsLeft(points)) {
             points[14] = points[10] + points[2] - points[6] + minD.x;
@@ -451,6 +440,13 @@ class ObjectItemContainer extends React.PureComponent<Props> {
 
         objectState.points = points;
         if (commit) this.commit();
+    };
+
+    private changeFrame(frame: number): void {
+        const { changeFrame, canvasInstance } = this.props;
+        if (isAbleToChangeFrame(canvasInstance)) {
+            changeFrame(frame);
+        }
     }
 
     private commit(): void {