From 2b4320fc155e1acfd62006cbd6e014756289ec0e Mon Sep 17 00:00:00 2001 From: Dmitry Kalinin Date: Wed, 19 Aug 2020 15:39:15 +0300 Subject: [PATCH 1/6] fixed object item border color --- cvat-ui/src/base.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cvat-ui/src/base.scss b/cvat-ui/src/base.scss index 75b561ca0245..86bae7310c1a 100644 --- a/cvat-ui/src/base.scss +++ b/cvat-ui/src/base.scss @@ -22,7 +22,7 @@ $info-icon-color: #0074d9; $objects-bar-tabs-color: #bebebe; $objects-bar-icons-color: #242424; // #6e6e6e $active-label-background-color: #d8ecff; -$object-item-border-color: #000; +$object-item-border-color: rgba(0, 0, 0, 0.7); $slider-color: #1890ff; $monospaced-fonts-stack: Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace; From e46541fab24f62c121bf809154696cf618d77808 Mon Sep 17 00:00:00 2001 From: Dmitry Kalinin Date: Wed, 19 Aug 2020 16:06:30 +0300 Subject: [PATCH 2/6] Fixed default collapsed prop in object item --- .../standard-workspace/objects-side-bar/objects-list.tsx | 2 +- .../standard-workspace/objects-side-bar/object-item.tsx | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/objects-list.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/objects-list.tsx index f91989ad3363..ca436d4787c7 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/objects-list.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/objects-list.tsx @@ -64,7 +64,7 @@ function ObjectListComponent(props: Props): JSX.Element { />
{ sortedStatesID.map((id: number): JSX.Element => ( - + ))}
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 34e8facf9948..d015544f2c8b 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 @@ -31,6 +31,7 @@ import { shift } from 'utils/math'; interface OwnProps { clientID: number; + initialCollapsed: boolean; } interface StateToProps { @@ -105,7 +106,7 @@ function mapStateToProps(state: CombinedState, own: OwnProps): StateToProps { .indexOf(own.clientID); const collapsedState = typeof (statesCollapsed[own.clientID]) === 'undefined' - ? true : statesCollapsed[own.clientID]; + ? own.initialCollapsed : statesCollapsed[own.clientID]; return { objectState: states[index], From 84dbb7465bb7d7cb3edb33d74e534292137a2b73 Mon Sep 17 00:00:00 2001 From: Dmitry Kalinin Date: Tue, 25 Aug 2020 18:32:43 +0300 Subject: [PATCH 3/6] Added color picker for shape outline --- cvat-ui/src/actions/settings-actions.ts | 9 ++-- .../annotation-page/appearance-block.tsx | 43 +++++++++++++------ .../standard-workspace/canvas-wrapper.tsx | 14 +++--- .../standard-workspace/canvas-wrapper.tsx | 9 ++-- cvat-ui/src/reducers/interfaces.ts | 3 +- cvat-ui/src/reducers/settings-reducer.ts | 8 ++-- 6 files changed, 58 insertions(+), 28 deletions(-) diff --git a/cvat-ui/src/actions/settings-actions.ts b/cvat-ui/src/actions/settings-actions.ts index 9108b02a21a8..737baa267a11 100644 --- a/cvat-ui/src/actions/settings-actions.ts +++ b/cvat-ui/src/actions/settings-actions.ts @@ -17,7 +17,7 @@ export enum SettingsActionTypes { CHANGE_SHAPES_OPACITY = 'CHANGE_SHAPES_OPACITY', CHANGE_SELECTED_SHAPES_OPACITY = 'CHANGE_SELECTED_SHAPES_OPACITY', CHANGE_SHAPES_COLOR_BY = 'CHANGE_SHAPES_COLOR_BY', - CHANGE_SHAPES_BLACK_BORDERS = 'CHANGE_SHAPES_BLACK_BORDERS', + CHANGE_SHAPES_OUTLINED_BORDERS = 'CHANGE_SHAPES_OUTLINED_BORDERS', CHANGE_SHAPES_SHOW_PROJECTIONS = 'CHANGE_SHAPES_SHOW_PROJECTIONS', CHANGE_SHOW_UNLABELED_REGIONS = 'CHANGE_SHOW_UNLABELED_REGIONS', CHANGE_FRAME_STEP = 'CHANGE_FRAME_STEP', @@ -63,11 +63,12 @@ export function changeShapesColorBy(colorBy: ColorBy): AnyAction { }; } -export function changeShapesBlackBorders(blackBorders: boolean): AnyAction { +export function changeShapesOutlinedBorders(outlined: boolean, color: string): AnyAction { return { - type: SettingsActionTypes.CHANGE_SHAPES_BLACK_BORDERS, + type: SettingsActionTypes.CHANGE_SHAPES_OUTLINED_BORDERS, payload: { - blackBorders, + outlined, + color, }, }; } diff --git a/cvat-ui/src/components/annotation-page/appearance-block.tsx b/cvat-ui/src/components/annotation-page/appearance-block.tsx index 06a060fa72a4..42e8fc201c61 100644 --- a/cvat-ui/src/components/annotation-page/appearance-block.tsx +++ b/cvat-ui/src/components/annotation-page/appearance-block.tsx @@ -11,6 +11,8 @@ import Slider, { SliderValue } from 'antd/lib/slider'; import Checkbox, { CheckboxChangeEvent } from 'antd/lib/checkbox'; import Collapse from 'antd/lib/collapse'; +import ColorPicker from 'components/annotation-page/standard-workspace/objects-side-bar/color-picker'; +import { ColorizeIcon } from 'icons'; import { ColorBy, CombinedState } from 'reducers/interfaces'; import { collapseAppearance as collapseAppearanceAction, @@ -20,17 +22,19 @@ import { changeShapesColorBy as changeShapesColorByAction, changeShapesOpacity as changeShapesOpacityAction, changeSelectedShapesOpacity as changeSelectedShapesOpacityAction, - changeShapesBlackBorders as changeShapesBlackBordersAction, + changeShapesOutlinedBorders as changeShapesOutlinedBordersAction, changeShowBitmap as changeShowBitmapAction, changeShowProjections as changeShowProjectionsAction, } from 'actions/settings-actions'; +import Button from 'antd/lib/button'; interface StateToProps { appearanceCollapsed: boolean; colorBy: ColorBy; opacity: number; selectedOpacity: number; - blackBorders: boolean; + outlined: boolean; + outlineColor: string; showBitmap: boolean; showProjections: boolean; } @@ -40,7 +44,7 @@ interface DispatchToProps { changeShapesColorBy(event: RadioChangeEvent): void; changeShapesOpacity(event: SliderValue): void; changeSelectedShapesOpacity(event: SliderValue): void; - changeShapesBlackBorders(event: CheckboxChangeEvent): void; + changeShapesOutlinedBorders(outlined: boolean, color: string): void; changeShowBitmap(event: CheckboxChangeEvent): void; changeShowProjections(event: CheckboxChangeEvent): void; } @@ -72,7 +76,8 @@ function mapStateToProps(state: CombinedState): StateToProps { colorBy, opacity, selectedOpacity, - blackBorders, + outlined, + outlineColor, showBitmap, showProjections, }, @@ -84,7 +89,8 @@ function mapStateToProps(state: CombinedState): StateToProps { colorBy, opacity, selectedOpacity, - blackBorders, + outlined, + outlineColor, showBitmap, showProjections, }; @@ -119,8 +125,8 @@ function mapDispatchToProps(dispatch: Dispatch): DispatchToProps { changeSelectedShapesOpacity(value: SliderValue): void { dispatch(changeSelectedShapesOpacityAction(value as number)); }, - changeShapesBlackBorders(event: CheckboxChangeEvent): void { - dispatch(changeShapesBlackBordersAction(event.target.checked)); + changeShapesOutlinedBorders(outlined: boolean, color: string): void { + dispatch(changeShapesOutlinedBordersAction(outlined, color)); }, changeShowBitmap(event: CheckboxChangeEvent): void { dispatch(changeShowBitmapAction(event.target.checked)); @@ -139,14 +145,15 @@ function AppearanceBlock(props: Props): JSX.Element { colorBy, opacity, selectedOpacity, - blackBorders, + outlined, + outlineColor, showBitmap, showProjections, collapseAppearance, changeShapesColorBy, changeShapesOpacity, changeSelectedShapesOpacity, - changeShapesBlackBorders, + changeShapesOutlinedBorders, changeShowBitmap, changeShowProjections, } = props; @@ -185,10 +192,22 @@ function AppearanceBlock(props: Props): JSX.Element { max={100} /> { + changeShapesOutlinedBorders(event.target.checked, outlineColor); + }} + checked={outlined} > - Black borders + Outlined borders + changeShapesOutlinedBorders(outlined, color)} + value={outlineColor} + placement='top' + resetVisible={false} + > + + { opacity, colorBy, selectedOpacity, - blackBorders, + outlined, + outlineColor, showBitmap, frameData, frameAngle, @@ -230,7 +232,8 @@ export default class CanvasWrapperComponent extends React.PureComponent { }, { once: true }); } - if (prevProps.opacity !== opacity || prevProps.blackBorders !== blackBorders + if (prevProps.opacity !== opacity || prevProps.outlined !== outlined + || prevProps.outlineColor !== outlineColor || prevProps.selectedOpacity !== selectedOpacity || prevProps.colorBy !== colorBy ) { this.updateShapesView(); @@ -602,7 +605,8 @@ export default class CanvasWrapperComponent extends React.PureComponent { annotations, opacity, colorBy, - blackBorders, + outlined, + outlineColor, } = this.props; for (const state of annotations) { @@ -625,7 +629,7 @@ export default class CanvasWrapperComponent extends React.PureComponent { } (shapeView as any).instance.fill({ color: shapeColor, opacity: opacity / 100 }); - (shapeView as any).instance.stroke({ color: blackBorders ? 'black' : shapeColor }); + (shapeView as any).instance.stroke({ color: outlined ? outlineColor : shapeColor }); } } } 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 4591ad5a1600..513b289a1ef8 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 @@ -64,7 +64,8 @@ interface StateToProps { opacity: number; colorBy: ColorBy; selectedOpacity: number; - blackBorders: boolean; + outlined: boolean; + outlineColor: string; showBitmap: boolean; showProjections: boolean; grid: boolean; @@ -179,7 +180,8 @@ function mapStateToProps(state: CombinedState): StateToProps { opacity, colorBy, selectedOpacity, - blackBorders, + outlined, + outlineColor, showBitmap, showProjections, }, @@ -204,7 +206,8 @@ function mapStateToProps(state: CombinedState): StateToProps { opacity, colorBy, selectedOpacity, - blackBorders, + outlined, + outlineColor, showBitmap, showProjections, grid, diff --git a/cvat-ui/src/reducers/interfaces.ts b/cvat-ui/src/reducers/interfaces.ts index cd971cff264e..30cf3404cb91 100644 --- a/cvat-ui/src/reducers/interfaces.ts +++ b/cvat-ui/src/reducers/interfaces.ts @@ -444,7 +444,8 @@ export interface ShapesSettingsState { colorBy: ColorBy; opacity: number; selectedOpacity: number; - blackBorders: boolean; + outlined: boolean; + outlineColor: string; showBitmap: boolean; showProjections: boolean; } diff --git a/cvat-ui/src/reducers/settings-reducer.ts b/cvat-ui/src/reducers/settings-reducer.ts index eb4fd7555552..bb71a700a580 100644 --- a/cvat-ui/src/reducers/settings-reducer.ts +++ b/cvat-ui/src/reducers/settings-reducer.ts @@ -21,7 +21,8 @@ const defaultState: SettingsState = { colorBy: ColorBy.LABEL, opacity: 3, selectedOpacity: 30, - blackBorders: false, + outlined: false, + outlineColor: '#000000', showBitmap: false, showProjections: false, }, @@ -124,12 +125,13 @@ export default (state = defaultState, action: AnyAction): SettingsState => { }, }; } - case SettingsActionTypes.CHANGE_SHAPES_BLACK_BORDERS: { + case SettingsActionTypes.CHANGE_SHAPES_OUTLINED_BORDERS: { return { ...state, shapes: { ...state.shapes, - blackBorders: action.payload.blackBorders, + outlined: action.payload.outlined, + outlineColor: action.payload.color, }, }; } From 664c30f092b06f8cd60281cfde0eb6d8261ba84f Mon Sep 17 00:00:00 2001 From: Dmitry Kalinin Date: Tue, 25 Aug 2020 20:58:58 +0300 Subject: [PATCH 4/6] Added CHANGELOG, increased npm version --- CHANGELOG.md | 3 +++ cvat-ui/package-lock.json | 2 +- cvat-ui/package.json | 2 +- 3 files changed, 5 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ca2dea56536a..4ef226e265bb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - [Datumaro] Multi-dataset merge (https://github.com/opencv/cvat/pull/1695) - Link to django admin page from UI () - Notification message when users use wrong browser () +- Annotation in process outline color wheel () ### Changed - Shape coordinates are rounded to 2 digits in dumped annotations () @@ -29,6 +30,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Basic functions of CVAT works without activated nuclio dashboard - Fixed error with creating task with labels with the same name () - Django RQ dashboard view () +- Object's details menu settings () +- ### Security - diff --git a/cvat-ui/package-lock.json b/cvat-ui/package-lock.json index e2ac4ffd3fec..5ca22abcaec7 100644 --- a/cvat-ui/package-lock.json +++ b/cvat-ui/package-lock.json @@ -1,6 +1,6 @@ { "name": "cvat-ui", - "version": "1.8.2", + "version": "1.8.3", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/cvat-ui/package.json b/cvat-ui/package.json index d9c0229dba9e..c2705de84fba 100644 --- a/cvat-ui/package.json +++ b/cvat-ui/package.json @@ -1,6 +1,6 @@ { "name": "cvat-ui", - "version": "1.8.2", + "version": "1.8.3", "description": "CVAT single-page application", "main": "src/index.tsx", "scripts": { From 5810bc01c7f2fd5f575f14c8cdbe2716268185c4 Mon Sep 17 00:00:00 2001 From: Dmitry Kalinin Date: Fri, 28 Aug 2020 10:51:21 +0300 Subject: [PATCH 5/6] Fixed object details collapsing --- .../standard-workspace/canvas-context-menu.tsx | 6 +++++- .../standard-workspace/objects-side-bar/objects-list.tsx | 9 +++++++++ 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/canvas-context-menu.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/canvas-context-menu.tsx index 9293318f472c..635addfad0b9 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/canvas-context-menu.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/canvas-context-menu.tsx @@ -28,7 +28,11 @@ export default function CanvasContextMenu(props: Props): JSX.Element | null { return ReactDOM.createPortal(
- +
, window.document.body, ); 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 14e445deee97..fa99261df5ec 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 @@ -31,6 +31,7 @@ interface StateToProps { statesHidden: boolean; statesLocked: boolean; statesCollapsed: boolean; + collapsedStates: Record; objectStates: any[]; annotationsFilters: string[]; colors: string[]; @@ -114,6 +115,7 @@ function mapStateToProps(state: CombinedState): StateToProps { statesHidden, statesLocked, statesCollapsed, + collapsedStates: collapsed, objectStates, frameNumber, jobInstance, @@ -199,6 +201,13 @@ class ObjectsListContainer extends React.PureComponent { }; } + public componentDidMount(): void { + const { collapsedStates } = this.props; + if (!Object.keys(collapsedStates).length) { + this.collapseAllStates(true); + } + } + private onChangeStatesOrdering = (statesOrdering: StatesOrdering): void => { const { objectStates } = this.props; this.setState({ From 8628ff397301783816a101ddd65458e43d57b265 Mon Sep 17 00:00:00 2001 From: Dmitry Kalinin Date: Tue, 1 Sep 2020 12:19:52 +0300 Subject: [PATCH 6/6] Fixed default collapsed --- cvat-ui/src/actions/auth-actions.ts | 4 ++-- .../objects-side-bar/objects-list.tsx | 12 ++++++++---- .../objects-side-bar/objects-list.tsx | 17 ++++------------- cvat-ui/src/reducers/annotation-reducer.ts | 4 ++++ cvat-ui/src/reducers/interfaces.ts | 1 + 5 files changed, 19 insertions(+), 19 deletions(-) diff --git a/cvat-ui/src/actions/auth-actions.ts b/cvat-ui/src/actions/auth-actions.ts index f12049fa93ab..6b2164fe7423 100644 --- a/cvat-ui/src/actions/auth-actions.ts +++ b/cvat-ui/src/actions/auth-actions.ts @@ -75,8 +75,8 @@ export const registerAsync = ( dispatch(authActions.register()); try { - const user = await cvat.server.register(username, firstName, lastName, email, password1, password2, - confirmations); + const user = await cvat.server.register(username, firstName, lastName, email, password1, + password2, confirmations); dispatch(authActions.registerSuccess(user)); } catch (error) { diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/objects-list.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/objects-list.tsx index ca436d4787c7..456826264d88 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/objects-list.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/objects-list.tsx @@ -12,7 +12,7 @@ interface Props { listHeight: number; statesHidden: boolean; statesLocked: boolean; - statesCollapsed: boolean; + statesCollapsedAll: boolean; statesOrdering: StatesOrdering; sortedStatesID: number[]; switchLockAllShortcut: string; @@ -31,7 +31,7 @@ function ObjectListComponent(props: Props): JSX.Element { listHeight, statesHidden, statesLocked, - statesCollapsed, + statesCollapsedAll, statesOrdering, sortedStatesID, switchLockAllShortcut, @@ -50,7 +50,7 @@ function ObjectListComponent(props: Props): JSX.Element {
{ sortedStatesID.map((id: number): JSX.Element => ( - + ))}
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 fa99261df5ec..58204bc282f1 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 @@ -30,7 +30,7 @@ interface StateToProps { listHeight: number; statesHidden: boolean; statesLocked: boolean; - statesCollapsed: boolean; + statesCollapsedAll: boolean; collapsedStates: Record; objectStates: any[]; annotationsFilters: string[]; @@ -63,6 +63,7 @@ function mapStateToProps(state: CombinedState): StateToProps { filters: annotationsFilters, filtersHistory: annotationsFiltersHistory, collapsed, + collapsedAll, activatedStateID, zLayer: { min: minZLayer, @@ -96,25 +97,22 @@ function mapStateToProps(state: CombinedState): StateToProps { let statesHidden = true; let statesLocked = true; - let statesCollapsed = true; objectStates.forEach((objectState: any) => { - const { clientID, lock } = objectState; + const { lock } = objectState; if (!lock) { if (objectState.objectType !== ObjectType.TAG) { statesHidden = statesHidden && objectState.hidden; } statesLocked = statesLocked && objectState.lock; } - const stateCollapsed = clientID in collapsed ? collapsed[clientID] : true; - statesCollapsed = statesCollapsed && stateCollapsed; }); return { listHeight, statesHidden, statesLocked, - statesCollapsed, + statesCollapsedAll: collapsedAll, collapsedStates: collapsed, objectStates, frameNumber, @@ -201,13 +199,6 @@ class ObjectsListContainer extends React.PureComponent { }; } - public componentDidMount(): void { - const { collapsedStates } = this.props; - if (!Object.keys(collapsedStates).length) { - this.collapseAllStates(true); - } - } - private onChangeStatesOrdering = (statesOrdering: StatesOrdering): void => { const { objectStates } = this.props; this.setState({ diff --git a/cvat-ui/src/reducers/annotation-reducer.ts b/cvat-ui/src/reducers/annotation-reducer.ts index 4976977dcdc6..aeed1d3465e3 100644 --- a/cvat-ui/src/reducers/annotation-reducer.ts +++ b/cvat-ui/src/reducers/annotation-reducer.ts @@ -67,6 +67,7 @@ const defaultState: AnnotationState = { statuses: [], }, collapsed: {}, + collapsedAll: true, states: [], filters: [], filtersHistory: JSON.parse( @@ -352,6 +353,7 @@ export default (state = defaultState, action: AnyAction): AnnotationState => { } = action.payload; const updatedCollapsedStates = { ...state.annotations.collapsed }; + const totalStatesCount = state.annotations.states.length; for (const objectState of states) { updatedCollapsedStates[objectState.clientID] = collapsed; } @@ -361,6 +363,8 @@ export default (state = defaultState, action: AnyAction): AnnotationState => { annotations: { ...state.annotations, collapsed: updatedCollapsedStates, + collapsedAll: states.length === totalStatesCount + ? collapsed : state.annotations.collapsedAll, }, }; } diff --git a/cvat-ui/src/reducers/interfaces.ts b/cvat-ui/src/reducers/interfaces.ts index 95bbfca73f50..3f1919552dd9 100644 --- a/cvat-ui/src/reducers/interfaces.ts +++ b/cvat-ui/src/reducers/interfaces.ts @@ -354,6 +354,7 @@ export interface AnnotationState { activatedStateID: number | null; activatedAttributeID: number | null; collapsed: Record; + collapsedAll: boolean; states: any[]; filters: string[]; filtersHistory: string[];