From 9f3bbd5b6445c3e1574ed2456da1a7dea3a0a58b Mon Sep 17 00:00:00 2001 From: Boris Sekachev Date: Mon, 15 Jun 2020 13:12:04 +0300 Subject: [PATCH] Added shortcut hint for change color, added ability to change color of group/label using the shortcut --- cvat-ui/src/actions/annotation-actions.ts | 16 ++++--- .../objects-side-bar/color-changer.tsx | 14 ++++--- .../objects-side-bar/label-item.tsx | 3 ++ .../objects-side-bar/object-item.tsx | 1 + .../objects-side-bar/label-item.tsx | 17 ++++---- .../objects-side-bar/object-item.tsx | 42 +++++++++---------- .../objects-side-bar/objects-list.tsx | 42 +++++++++++++++++-- 7 files changed, 89 insertions(+), 46 deletions(-) diff --git a/cvat-ui/src/actions/annotation-actions.ts b/cvat-ui/src/actions/annotation-actions.ts index b88b93123a0d..f6a46224f3c3 100644 --- a/cvat-ui/src/actions/annotation-actions.ts +++ b/cvat-ui/src/actions/annotation-actions.ts @@ -1288,19 +1288,23 @@ ThunkAction, {}, {}, AnyAction> { } export function changeLabelColorAsync( - sessionInstance: any, - frameNumber: number, label: any, color: string, ): ThunkAction, {}, {}, AnyAction> { return async (dispatch: ActionCreator): Promise => { 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 index 89ef8a15cb5c..133f41474600 100644 --- 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 ( - <> +
+ + {`Press ${shortcut} to set a random color`} + {antdRows} - +
); } 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 index ca712907a6d9..96a99a7ef298 100644 --- 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={( 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 index bc21a3fa74f0..da2bf9572669 100644 --- 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={( 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 index e795eb8d6389..955df16dabe5 100644 --- 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,6 +23,7 @@ interface StateToProps { labelName: string; labelColor: string; labelColors: string[]; + changeColorShortcut: string; objectStates: any[]; jobInstance: any; frameNumber: any; @@ -30,7 +31,7 @@ interface StateToProps { 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 { 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 { labelName, labelColor, labelColors, + changeColorShortcut, } = this.props; return ( @@ -206,6 +208,7 @@ class LabelItemContainer extends React.PureComponent { 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 index b22a382a9171..0f3bf9efa263 100644 --- 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 { 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 { } 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,19 +394,13 @@ class ObjectItemContainer extends React.PureComponent { 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); @@ -419,19 +408,19 @@ class ObjectItemContainer extends React.PureComponent { 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 { 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 { diff --git a/cvat-ui/src/containers/annotation-page/standard-workspace/objects-side-bar/objects-list.tsx b/cvat-ui/src/containers/annotation-page/standard-workspace/objects-side-bar/objects-list.tsx index 7616caadb19b..f0603a2e417b 100644 --- a/cvat-ui/src/containers/annotation-page/standard-workspace/objects-side-bar/objects-list.tsx +++ b/cvat-ui/src/containers/annotation-page/standard-workspace/objects-side-bar/objects-list.tsx @@ -14,9 +14,16 @@ import { collapseObjectItems, copyShape as copyShapeAction, propagateObject as propagateObjectAction, + changeGroupColorAsync, + changeLabelColorAsync, } from 'actions/annotation-actions'; import { Canvas, isAbleToChangeFrame } from 'cvat-canvas-wrapper'; -import { CombinedState, StatesOrdering, ObjectType } from 'reducers/interfaces'; +import { + CombinedState, + StatesOrdering, + ObjectType, + ColorBy, +} from 'reducers/interfaces'; interface StateToProps { jobInstance: any; @@ -28,6 +35,7 @@ interface StateToProps { objectStates: any[]; annotationsFilters: string[]; colors: string[]; + colorBy: ColorBy; activatedStateID: number | null; minZLayer: number; maxZLayer: number; @@ -44,6 +52,8 @@ interface DispatchToProps { copyShape: (objectState: any) => void; propagateObject: (objectState: any) => void; changeFrame(frame: number): void; + changeGroupColor(group: number, color: string): void; + changeLabelColor(label: any, color: string): void; } function mapStateToProps(state: CombinedState): StateToProps { @@ -74,6 +84,11 @@ function mapStateToProps(state: CombinedState): StateToProps { tabContentHeight: listHeight, colors, }, + settings: { + shapes: { + colorBy, + }, + }, shortcuts: { keyMap, normalizedKeyMap, @@ -106,6 +121,7 @@ function mapStateToProps(state: CombinedState): StateToProps { jobInstance, annotationsFilters, colors, + colorBy, activatedStateID, minZLayer, maxZLayer, @@ -136,6 +152,12 @@ function mapDispatchToProps(dispatch: any): DispatchToProps { changeFrame(frame: number): void { dispatch(changeFrameAsync(frame)); }, + changeGroupColor(group: number, color: string): void { + dispatch(changeGroupColorAsync(group, color)); + }, + changeLabelColor(label: any, color: string): void { + dispatch(changeLabelColorAsync(label, color)); + }, }; } @@ -255,6 +277,8 @@ class ObjectsListContainer extends React.PureComponent { objectStates, jobInstance, updateAnnotations, + changeGroupColor, + changeLabelColor, removeObject, copyShape, propagateObject, @@ -265,6 +289,7 @@ class ObjectsListContainer extends React.PureComponent { normalizedKeyMap, canvasInstance, colors, + colorBy, } = this.props; const { sortedStatesID, @@ -368,10 +393,19 @@ class ObjectsListContainer extends React.PureComponent { preventDefault(event); const state = activatedStated(); if (state) { - let colorID = colors.indexOf(state.color) + 1; - if (colorID >= colors.length) { - colorID = 0; + if (colorBy === ColorBy.GROUP) { + const colorID = (colors.indexOf(state.group.color) + 1) % colors.length; + changeGroupColor(state.group.id, colors[colorID]); + return; + } + + if (colorBy === ColorBy.LABEL) { + const colorID = (colors.indexOf(state.label.color) + 1) % colors.length; + changeLabelColor(state.label, colors[colorID]); + return; } + + const colorID = (colors.indexOf(state.color) + 1) % colors.length; state.color = colors[colorID]; updateAnnotations([state]); }