From 07c5b81a424b0d8634016a936d01ba9d78ad085a Mon Sep 17 00:00:00 2001 From: Dmitry Kalinin Date: Mon, 1 Jun 2020 16:13:26 +0300 Subject: [PATCH 01/17] Added image preview on settings page and fixed bugtracker input --- .../settings-page/player-settings.tsx | 141 +++++++++++------- .../src/components/settings-page/styles.scss | 6 + cvat-ui/src/components/task-page/details.tsx | 15 +- .../settings-page/player-settings.tsx | 14 +- 4 files changed, 117 insertions(+), 59 deletions(-) diff --git a/cvat-ui/src/components/settings-page/player-settings.tsx b/cvat-ui/src/components/settings-page/player-settings.tsx index 6b834122ccb1..bb96d8fa900b 100644 --- a/cvat-ui/src/components/settings-page/player-settings.tsx +++ b/cvat-ui/src/components/settings-page/player-settings.tsx @@ -2,7 +2,7 @@ // // SPDX-License-Identifier: MIT -import React from 'react'; +import React, {useRef, useEffect} from 'react'; import { Row, Col } from 'antd/lib/grid'; import Checkbox, { CheckboxChangeEvent } from 'antd/lib/checkbox'; @@ -30,6 +30,7 @@ interface Props { brightnessLevel: number; contrastLevel: number; saturationLevel: number; + previewImage: string | null; onChangeFrameStep(step: number): void; onChangeFrameSpeed(speed: FrameSpeed): void; onSwitchResetZoom(enabled: boolean): void; @@ -56,6 +57,7 @@ export default function PlayerSettingsComponent(props: Props): JSX.Element { brightnessLevel, contrastLevel, saturationLevel, + previewImage, onChangeFrameStep, onChangeFrameSpeed, onSwitchResetZoom, @@ -74,6 +76,15 @@ export default function PlayerSettingsComponent(props: Props): JSX.Element { const minGridSize = 5; const maxGridSize = 1000; + const imageRef = useRef(null); + + useEffect(() => { + if (imageRef.current) { + imageRef.current.style.filter = `brightness(${brightnessLevel / 100})` + + `contrast(${contrastLevel / 100})` + + `saturate(${saturationLevel / 100})`; + } + }, [imageRef, brightnessLevel, contrastLevel, saturationLevel]) return (
@@ -220,62 +231,80 @@ export default function PlayerSettingsComponent(props: Props): JSX.Element { - - - Brightness - - - { - onChangeBrightnessLevel(value as number); - }} - /> - - - - - Contrast - - - { - onChangeContrastLevel(value as number); - }} - /> - - - - - Saturation - - - { - onChangeSaturationLevel(value as number); - }} - /> + + + + + Brightness + + + { + onChangeBrightnessLevel(value as number); + }} + /> + + + + + Contrast + + + { + onChangeContrastLevel(value as number); + }} + /> + + + + + Saturation + + + { + onChangeSaturationLevel(value as number); + }} + /> + + + + + + + - - - - + + { + previewImage && ( + <> + Preview: +
+ + + ) + }
diff --git a/cvat-ui/src/components/settings-page/styles.scss b/cvat-ui/src/components/settings-page/styles.scss index 4858af603834..f5a4388e7ceb 100644 --- a/cvat-ui/src/components/settings-page/styles.scss +++ b/cvat-ui/src/components/settings-page/styles.scss @@ -104,3 +104,9 @@ display: flex; justify-content: flex-end; } + +.cvat-player-settings-image-preview { + width: 100%; + max-height: 180px; + object-fit: cover; +} diff --git a/cvat-ui/src/components/task-page/details.tsx b/cvat-ui/src/components/task-page/details.tsx index 504c92adad0c..91b98356bf57 100644 --- a/cvat-ui/src/components/task-page/details.tsx +++ b/cvat-ui/src/components/task-page/details.tsx @@ -32,6 +32,7 @@ interface Props { interface State { name: string; bugTracker: string; + bugTrackerEditing: boolean; repository: string; repositoryStatus: string; } @@ -52,6 +53,7 @@ export default class DetailsComponent extends React.PureComponent this.state = { name: taskInstance.name, bugTracker: taskInstance.bugTracker, + bugTrackerEditing: false, repository: '', repositoryStatus: '', }; @@ -323,9 +325,14 @@ export default class DetailsComponent extends React.PureComponent taskInstance, onTaskUpdate, } = this.props; - const { bugTracker } = this.state; + const { bugTracker, bugTrackerEditing } = this.state; let shown = false; + const onStart = (): void => { + this.setState({ + bugTrackerEditing: true, + }) + }; const onChangeValue = (value: string): void => { if (value && !patterns.validateURL.pattern.test(value)) { if (!shown) { @@ -341,6 +348,7 @@ export default class DetailsComponent extends React.PureComponent } else { this.setState({ bugTracker: value, + bugTrackerEditing: false }); taskInstance.bugTracker = value; @@ -377,7 +385,10 @@ export default class DetailsComponent extends React.PureComponent Issue Tracker
- Not specified + {bugTrackerEditing ? '' : 'Not specified'} ); diff --git a/cvat-ui/src/containers/settings-page/player-settings.tsx b/cvat-ui/src/containers/settings-page/player-settings.tsx index 8903e209fd31..f253ff90af69 100644 --- a/cvat-ui/src/containers/settings-page/player-settings.tsx +++ b/cvat-ui/src/containers/settings-page/player-settings.tsx @@ -39,6 +39,7 @@ interface StateToProps { brightnessLevel: number; contrastLevel: number; saturationLevel: number; + previewImage: string | null; } interface DispatchToProps { @@ -56,9 +57,20 @@ interface DispatchToProps { } function mapStateToProps(state: CombinedState): StateToProps { - const { player } = state.settings; + const { + settings: { + player, + }, + tasks: { + current: tasks, + }, + } = state; + + const previewImage = tasks.length ? tasks[0].preview : null; + return { ...player, + previewImage, }; } From 580e5af77e8117607a8846335f825a5d77000c7d Mon Sep 17 00:00:00 2001 From: Dmitry Kalinin Date: Mon, 8 Jun 2020 11:55:09 +0300 Subject: [PATCH 02/17] A --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9b1421970104..bb9ef7e009f0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -25,6 +25,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Fixed dataset filter item representation for imageless dataset items (https://github.com/opencv/cvat/pull/1593) - Fixed interpreter crash when trying to import `tensorflow` with no AVX instructions available (https://github.com/opencv/cvat/pull/1567) - Kibana wrong working time calculation with new annotation UI use () +- Fixed wrong activation on frame change () ### Security - SQL injection in Django `CVE-2020-9402` (https://github.com/opencv/cvat/pull/1657) From 5e85f4763265e8b0a8ca357cbf3eed319bb8a706 Mon Sep 17 00:00:00 2001 From: Dmitry Kalinin Date: Tue, 9 Jun 2020 15:39:14 +0300 Subject: [PATCH 03/17] added colorpicker library and canvas fix on sidebar closing --- cvat-ui/package-lock.json | 39 +++++++++++++++++++ cvat-ui/package.json | 6 ++- .../objects-side-bar/object-item.tsx | 4 +- .../objects-side-bar/objects-side-bar.tsx | 7 ++++ .../settings-page/player-settings.tsx | 6 +++ .../objects-side-bar/objects-side-bar.tsx | 8 ++++ 6 files changed, 66 insertions(+), 4 deletions(-) diff --git a/cvat-ui/package-lock.json b/cvat-ui/package-lock.json index 997999348d8a..03e7a0de6d9f 100644 --- a/cvat-ui/package-lock.json +++ b/cvat-ui/package-lock.json @@ -975,6 +975,11 @@ "integrity": "sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw==", "dev": true }, + "@icons/material": { + "version": "0.2.4", + "resolved": "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz", + "integrity": "sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==" + }, "@types/eslint-visitor-keys": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz", @@ -1056,6 +1061,14 @@ "csstype": "^2.2.0" } }, + "@types/react-color": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/@types/react-color/-/react-color-3.0.2.tgz", + "integrity": "sha512-FhrRy0xEYEpysl1iKL11ynJc79H6ztyYc4xD1pliZyygEChleTlHGohb/bClTYPN8XeSw6yaz45l3YW5SGYftQ==", + "requires": { + "@types/react": "*" + } + }, "@types/react-dom": { "version": "16.9.3", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.3.tgz", @@ -24914,6 +24927,11 @@ "object-visit": "^1.0.0" } }, + "material-colors": { + "version": "1.2.6", + "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz", + "integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==" + }, "md5.js": { "version": "1.3.5", "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz", @@ -27516,6 +27534,19 @@ "prop-types": "^15.6.2" } }, + "react-color": { + "version": "2.18.1", + "resolved": "https://registry.npmjs.org/react-color/-/react-color-2.18.1.tgz", + "integrity": "sha512-X5XpyJS6ncplZs74ak0JJoqPi+33Nzpv5RYWWxn17bslih+X7OlgmfpmGC1fNvdkK7/SGWYf1JJdn7D2n5gSuQ==", + "requires": { + "@icons/material": "^0.2.4", + "lodash": "^4.17.11", + "material-colors": "^1.2.1", + "prop-types": "^15.5.10", + "reactcss": "^1.2.0", + "tinycolor2": "^1.4.1" + } + }, "react-dom": { "version": "16.11.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.11.0.tgz", @@ -27648,6 +27679,14 @@ "react-svg-core": "^3.0.3" } }, + "reactcss": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/reactcss/-/reactcss-1.2.3.tgz", + "integrity": "sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==", + "requires": { + "lodash": "^4.0.1" + } + }, "read-pkg": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz", diff --git a/cvat-ui/package.json b/cvat-ui/package.json index d9c4c6e6d538..627a2c53e2db 100644 --- a/cvat-ui/package.json +++ b/cvat-ui/package.json @@ -47,9 +47,8 @@ "worker-loader": "^2.0.0" }, "dependencies": { - "cvat-core": "file:../cvat-core", - "cvat-canvas": "file:../cvat-canvas", "@types/react": "^16.9.2", + "@types/react-color": "^3.0.2", "@types/react-dom": "^16.9.0", "@types/react-redux": "^7.1.2", "@types/react-router": "^5.0.5", @@ -58,11 +57,14 @@ "@types/redux-logger": "^3.0.7", "antd": "^3.25.2", "copy-to-clipboard": "^3.2.0", + "cvat-canvas": "file:../cvat-canvas", + "cvat-core": "file:../cvat-core", "dotenv-webpack": "^1.7.0", "error-stack-parser": "^2.0.6", "moment": "^2.24.0", "prop-types": "^15.7.2", "react": "^16.9.0", + "react-color": "^2.18.1", "react-dom": "^16.9.0", "react-hotkeys": "^2.0.0", "react-redux": "^7.1.1", 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 88a4b83f639b..690aa1f82d12 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 @@ -366,7 +366,7 @@ function ItemButtonsComponent(props: ItemButtonsComponentProps): JSX.Element { { locked - ? + ? : } @@ -380,7 +380,7 @@ function ItemButtonsComponent(props: ItemButtonsComponentProps): JSX.Element { diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/objects-side-bar.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/objects-side-bar.tsx index eb3194e3db7a..b2f95a220216 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/objects-side-bar.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/objects-side-bar.tsx @@ -17,6 +17,8 @@ import ObjectsListContainer from 'containers/annotation-page/standard-workspace/ import LabelsListContainer from 'containers/annotation-page/standard-workspace/objects-side-bar/labels-list'; import AppearanceBlock from './appearance-block'; +import { Canvas } from 'cvat-canvas-wrapper'; + interface Props { sidebarCollapsed: boolean; appearanceCollapsed: boolean; @@ -26,6 +28,7 @@ interface Props { blackBorders: boolean; showBitmap: boolean; showProjections: boolean; + canvasInstance: Canvas; collapseSidebar(): void; collapseAppearance(): void; @@ -48,6 +51,7 @@ function ObjectsSideBar(props: Props): JSX.Element { blackBorders, showBitmap, showProjections, + canvasInstance, collapseSidebar, collapseAppearance, changeShapesColorBy, @@ -86,6 +90,9 @@ function ObjectsSideBar(props: Props): JSX.Element { collapsible trigger={null} collapsed={sidebarCollapsed} + onTransitionEnd={() => { + canvasInstance.fit(); + }} > {/* eslint-disable-next-line */} + + + + + { blackBorders, showBitmap, showProjections, + canvasInstance, collapseSidebar, collapseAppearance, } = this.props; @@ -227,6 +234,7 @@ class ObjectsSideBarContainer extends React.PureComponent { blackBorders={blackBorders} showBitmap={showBitmap} showProjections={showProjections} + canvasInstance={canvasInstance} collapseSidebar={collapseSidebar} collapseAppearance={collapseAppearance} changeShapesColorBy={this.changeShapesColorBy} From b050eedb4f77b69d688a03f164192bdd6c173f6d Mon Sep 17 00:00:00 2001 From: Dmitry Kalinin Date: Mon, 15 Jun 2020 00:58:59 +0300 Subject: [PATCH 04/17] added canvas background color picker, settings moved from page to modal --- cvat-canvas/src/scss/canvas.scss | 2 +- cvat-ui/package-lock.json | 265 +++++++++--------- cvat-ui/package.json | 2 +- cvat-ui/src/actions/settings-actions.ts | 10 + .../standard-workspace/canvas-wrapper.tsx | 15 + .../standard-workspace/styles.scss | 4 - cvat-ui/src/components/cvat-app.tsx | 2 - cvat-ui/src/components/header/header.tsx | 11 +- .../settings-modal}/player-settings.tsx | 24 +- .../header/settings-modal/settings-modal.tsx | 73 +++++ .../settings-modal}/styles.scss | 27 +- .../settings-modal}/workspace-settings.tsx | 0 .../settings-page/settings-page.tsx | 78 ------ cvat-ui/src/consts.ts | 2 + .../standard-workspace/canvas-wrapper.tsx | 3 + .../settings-page/player-settings.tsx | 6 + cvat-ui/src/reducers/interfaces.ts | 1 + cvat-ui/src/reducers/settings-reducer.ts | 10 + 18 files changed, 299 insertions(+), 236 deletions(-) rename cvat-ui/src/components/{settings-page => header/settings-modal}/player-settings.tsx (92%) create mode 100644 cvat-ui/src/components/header/settings-modal/settings-modal.tsx rename cvat-ui/src/components/{settings-page => header/settings-modal}/styles.scss (86%) rename cvat-ui/src/components/{settings-page => header/settings-modal}/workspace-settings.tsx (100%) delete mode 100644 cvat-ui/src/components/settings-page/settings-page.tsx diff --git a/cvat-canvas/src/scss/canvas.scss b/cvat-canvas/src/scss/canvas.scss index b7d6c56d12c9..1d217f80aaab 100644 --- a/cvat-canvas/src/scss/canvas.scss +++ b/cvat-canvas/src/scss/canvas.scss @@ -156,7 +156,7 @@ polyline.cvat_canvas_shape_splitting { height: calc(100% - 10px); margin: 5px; border-radius: 5px; - background-color: white; + background-color: inherit; overflow: hidden; position: relative; } diff --git a/cvat-ui/package-lock.json b/cvat-ui/package-lock.json index 03e7a0de6d9f..5a31decc72f2 100644 --- a/cvat-ui/package-lock.json +++ b/cvat-ui/package-lock.json @@ -13,14 +13,19 @@ } }, "@ant-design/create-react-context": { - "version": "0.2.4", - "resolved": "https://registry.npmjs.org/@ant-design/create-react-context/-/create-react-context-0.2.4.tgz", - "integrity": "sha512-8sw+/w6r+aEbd+OJ62ojoSE4zDt/3yfQydmbWFznoftjr8v/opOswGjM+/MU0rSaREbluqzOmZ6xdecHpSaS2w==", + "version": "0.2.5", + "resolved": "https://registry.npmjs.org/@ant-design/create-react-context/-/create-react-context-0.2.5.tgz", + "integrity": "sha512-1rMAa4qgP2lfl/QBH9i78+Gjxtj9FTMpMyDGZsEBW5Kih72EuUo9958mV8PgpRkh4uwPSQ7vVZWXeyNZXVAFDg==", "requires": { "gud": "^1.0.0", "warning": "^4.0.3" } }, + "@ant-design/css-animation": { + "version": "1.7.2", + "resolved": "https://registry.npmjs.org/@ant-design/css-animation/-/css-animation-1.7.2.tgz", + "integrity": "sha512-bvVOe7A+r7lws58B7r+fgnQDK90cV45AXuvGx6i5CCSX1W/M3AJnHsNggDANBxEtWdNdFWcDd5LorB+RdSIlBw==" + }, "@ant-design/icons": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/@ant-design/icons/-/icons-2.1.1.tgz", @@ -1519,9 +1524,9 @@ } }, "antd": { - "version": "3.25.2", - "resolved": "https://registry.npmjs.org/antd/-/antd-3.25.2.tgz", - "integrity": "sha512-+qF1bgU7rUkPIkggIIV0fmm+9pPacl50BBd6NNUR2+kKJOFYjwrnP39ZqJRsYNy5bX9VgR454fz9KEuW7HPjog==", + "version": "3.26.17", + "resolved": "https://registry.npmjs.org/antd/-/antd-3.26.17.tgz", + "integrity": "sha512-P9uSK8SZ/1AvhQCC6aaLEkVrQhjbfZyUnqNV+lDnPqtudnZD2Ycy7Og+/EhuOBsQpYQvVT2aPLMgQWFv8tdJkA==", "requires": { "@ant-design/create-react-context": "^0.2.4", "@ant-design/icons": "~2.1.1", @@ -1534,18 +1539,19 @@ "css-animation": "^1.5.0", "dom-closest": "^0.2.0", "enquire.js": "^2.1.6", + "is-mobile": "^2.1.0", "lodash": "^4.17.13", "moment": "^2.24.0", "omit.js": "^1.0.2", "prop-types": "^15.7.2", "raf": "^3.4.1", "rc-animate": "^2.10.2", - "rc-calendar": "~9.15.5", + "rc-calendar": "~9.15.7", "rc-cascader": "~0.17.4", "rc-checkbox": "~2.1.6", "rc-collapse": "~1.11.3", - "rc-dialog": "~7.5.2", - "rc-drawer": "~3.0.0", + "rc-dialog": "~7.6.0", + "rc-drawer": "~3.1.1", "rc-dropdown": "~2.4.1", "rc-editor-mention": "^1.1.13", "rc-form": "^2.4.10", @@ -1553,7 +1559,7 @@ "rc-mentions": "~0.4.0", "rc-menu": "~7.5.1", "rc-notification": "~3.3.1", - "rc-pagination": "~1.20.5", + "rc-pagination": "~1.20.11", "rc-progress": "~2.5.0", "rc-rate": "~2.5.0", "rc-resize-observer": "^0.1.0", @@ -1561,15 +1567,15 @@ "rc-slider": "~8.7.1", "rc-steps": "~3.5.0", "rc-switch": "~1.9.0", - "rc-table": "~6.9.4", - "rc-tabs": "~9.6.4", + "rc-table": "~6.10.5", + "rc-tabs": "~9.7.0", "rc-time-picker": "~3.7.1", "rc-tooltip": "~3.7.3", "rc-tree": "~2.1.0", "rc-tree-select": "~2.9.1", "rc-trigger": "^2.6.2", "rc-upload": "~2.9.1", - "rc-util": "^4.10.0", + "rc-util": "^4.16.1", "react-lazy-load": "^3.0.13", "react-lifecycles-compat": "^3.0.4", "react-slick": "~0.25.2", @@ -21355,9 +21361,9 @@ } }, "dom-align": { - "version": "1.10.2", - "resolved": "https://registry.npmjs.org/dom-align/-/dom-align-1.10.2.tgz", - "integrity": "sha512-AYZUzLepy05E9bCY4ExoqHrrIlM49PEak9oF93JEFoibqKL0F7w5DLM70/rosLOawerWZ3MlepQcl+EmHskOyw==" + "version": "1.12.0", + "resolved": "https://registry.npmjs.org/dom-align/-/dom-align-1.12.0.tgz", + "integrity": "sha512-YkoezQuhp3SLFGdOlr5xkqZ640iXrnHAwVYcDg8ZKRUtO7mSzSC2BA5V0VuyAwPSJA4CLIc6EDDJh4bEsD2+zA==" }, "dom-closest": { "version": "0.2.0", @@ -24424,6 +24430,11 @@ "is-extglob": "^2.1.1" } }, + "is-mobile": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/is-mobile/-/is-mobile-2.2.1.tgz", + "integrity": "sha512-6zELsfVFr326eq2CI53yvqq6YBanOxKBybwDT+MbMS2laBnK6Ez8m5XHSuTQQbnKRfpDzCod1CMWW5q3wZYMvA==" + }, "is-number": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz", @@ -25330,9 +25341,9 @@ "dev": true }, "mutationobserver-shim": { - "version": "0.3.3", - "resolved": "https://registry.npmjs.org/mutationobserver-shim/-/mutationobserver-shim-0.3.3.tgz", - "integrity": "sha512-gciOLNN8Vsf7YzcqRjKzlAJ6y7e+B86u7i3KXes0xfxx/nfLmozlW1Vn+Sc9x3tPIePFgc1AeIFhtRgkqTjzDQ==" + "version": "0.3.7", + "resolved": "https://registry.npmjs.org/mutationobserver-shim/-/mutationobserver-shim-0.3.7.tgz", + "integrity": "sha512-oRIDTyZQU96nAiz2AQyngwx1e89iApl2hN5AOYwyxLUB47UYsU3Wv9lJWqH5y/QdiYkc5HQLi23ZNB3fELdHcQ==" }, "mute-stream": { "version": "0.0.8", @@ -27040,9 +27051,9 @@ } }, "rc-animate": { - "version": "2.10.2", - "resolved": "https://registry.npmjs.org/rc-animate/-/rc-animate-2.10.2.tgz", - "integrity": "sha512-cE/A7piAzoWFSgUD69NmmMraqCeqVBa51UErod8NS3LUEqWfppSVagHfa0qHAlwPVPiIBg3emRONyny3eiH0Dg==", + "version": "2.11.1", + "resolved": "https://registry.npmjs.org/rc-animate/-/rc-animate-2.11.1.tgz", + "integrity": "sha512-1NyuCGFJG/0Y+9RKh5y/i/AalUCA51opyyS/jO2seELpgymZm2u9QV3xwODwEuzkmeQ1BDPxMLmYLcTJedPlkQ==", "requires": { "babel-runtime": "6.x", "classnames": "^2.2.6", @@ -27054,9 +27065,9 @@ } }, "rc-calendar": { - "version": "9.15.8", - "resolved": "https://registry.npmjs.org/rc-calendar/-/rc-calendar-9.15.8.tgz", - "integrity": "sha512-x3zVaZSRX7FkRNKw7nz3tutwrlIrU1aqMn5GtRUmlf84GnXLtd9fuuydxeNkFWfcHry3BPSto7+r9TK2al0h+g==", + "version": "9.15.11", + "resolved": "https://registry.npmjs.org/rc-calendar/-/rc-calendar-9.15.11.tgz", + "integrity": "sha512-qv0VXfAAnysMWJigxaP6se4bJHvr17D9qsLbi8BOpdgEocsS0RkgY1IUiFaOVYKJDy/EyLC447O02sV/y5YYBg==", "requires": { "babel-runtime": "6.x", "classnames": "2.x", @@ -27093,9 +27104,9 @@ } }, "rc-collapse": { - "version": "1.11.7", - "resolved": "https://registry.npmjs.org/rc-collapse/-/rc-collapse-1.11.7.tgz", - "integrity": "sha512-ge3EEzIFtrDGuPX4bxXdQqwb91JnPIdj3B+FU88yNOUeOroNuA2q9kVK+UatpQ1Eft5hNo/ICTDrVFi8+685ng==", + "version": "1.11.8", + "resolved": "https://registry.npmjs.org/rc-collapse/-/rc-collapse-1.11.8.tgz", + "integrity": "sha512-8EhfPyScTYljkbRuIoHniSwZagD5UPpZ3CToYgoNYWC85L2qCbPYF7+OaC713FOrIkp6NbfNqXsITNxmDAmxog==", "requires": { "classnames": "2.x", "css-animation": "1.x", @@ -27107,23 +27118,22 @@ } }, "rc-dialog": { - "version": "7.5.13", - "resolved": "https://registry.npmjs.org/rc-dialog/-/rc-dialog-7.5.13.tgz", - "integrity": "sha512-tmubIipW/qoCmRlHHV8tpepDaFhuhk+SeSFSyRhNKW4mYgflsEYQmYWilyCJHy6UzKl84bSyFvJskhc1z1Hniw==", + "version": "7.6.1", + "resolved": "https://registry.npmjs.org/rc-dialog/-/rc-dialog-7.6.1.tgz", + "integrity": "sha512-KUKf+2eZ4YL+lnXMG3hR4ZtIhC9glfH27NtTVz3gcoDIPAf3uUvaXVRNoDCiSi+OGKLyIb/b6EoidFh6nQC5Wg==", "requires": { "babel-runtime": "6.x", "rc-animate": "2.x", - "rc-util": "^4.8.1" + "rc-util": "^4.16.1" } }, "rc-drawer": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/rc-drawer/-/rc-drawer-3.0.2.tgz", - "integrity": "sha512-oPScGXB/8/ov9gEFLxPH8RBv/9jLTZboZtyF/GgrrnCAvbFwUxXdELH6n6XIowmuDKKvTGIMgZdnao0T46Yv3A==", + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/rc-drawer/-/rc-drawer-3.1.3.tgz", + "integrity": "sha512-2z+RdxmzXyZde/1OhVMfDR1e/GBswFeWSZ7FS3Fdd0qhgVdpV1wSzILzzxRaT481ItB5hOV+e8pZT07vdJE8kg==", "requires": { - "babel-runtime": "^6.26.0", "classnames": "^2.2.6", - "rc-util": "^4.11.2", + "rc-util": "^4.16.1", "react-lifecycles-compat": "^3.0.4" } }, @@ -27169,9 +27179,9 @@ } }, "rc-form": { - "version": "2.4.10", - "resolved": "https://registry.npmjs.org/rc-form/-/rc-form-2.4.10.tgz", - "integrity": "sha512-h6a5Nvn6fMe3BfLpIWwL2RUkfXs1tvtifblTgGgH0UfzGgiQ5M12jiMJaAXek7TDDBUw90/c5vlZ6wFZjW0IgQ==", + "version": "2.4.11", + "resolved": "https://registry.npmjs.org/rc-form/-/rc-form-2.4.11.tgz", + "integrity": "sha512-8BL+FNlFLTOY/A5X6tU35GQJLSIpsmqpwn/tFAYQTczXc4dMJ33ggtH248Cum8+LS0jLTsJKG2L4Qp+1CkY+sA==", "requires": { "async-validator": "~1.11.3", "babel-runtime": "6.x", @@ -27184,9 +27194,9 @@ } }, "rc-hammerjs": { - "version": "0.6.9", - "resolved": "https://registry.npmjs.org/rc-hammerjs/-/rc-hammerjs-0.6.9.tgz", - "integrity": "sha512-4llgWO3RgLyVbEqUdGsDfzUDqklRlQW5VEhE3x35IvhV+w//VPRG34SBavK3D2mD/UaLKaohgU41V4agiftC8g==", + "version": "0.6.10", + "resolved": "https://registry.npmjs.org/rc-hammerjs/-/rc-hammerjs-0.6.10.tgz", + "integrity": "sha512-Vgh9qIudyN5CHRop4M+v+xUniQBFWXKrsJxQRVtJOi2xgRrCeI52/bkpaL5HWwUhqTK9Ayq0n7lYTItT6ld5rg==", "requires": { "babel-runtime": "6.x", "hammerjs": "^2.0.8", @@ -27194,9 +27204,9 @@ } }, "rc-input-number": { - "version": "4.5.1", - "resolved": "https://registry.npmjs.org/rc-input-number/-/rc-input-number-4.5.1.tgz", - "integrity": "sha512-grO7/Lau7iv3NyHVyCajE1LuGLqGkG1tEAAZSwm9M0esYfrwXVSip4qhb5sF+8g6ACsiI20sOVLIihXuhSoifA==", + "version": "4.5.7", + "resolved": "https://registry.npmjs.org/rc-input-number/-/rc-input-number-4.5.7.tgz", + "integrity": "sha512-99PrQ90sTOKyyj7eu0VzwxY17xQ+bwG1XTQd+bTwFQ+IOUkIw7L4qSAYxt58sVYL+Cw+bu/RAtT2IpT9yC2pCQ==", "requires": { "babel-runtime": "6.x", "classnames": "^2.2.0", @@ -27206,9 +27216,9 @@ } }, "rc-mentions": { - "version": "0.4.1", - "resolved": "https://registry.npmjs.org/rc-mentions/-/rc-mentions-0.4.1.tgz", - "integrity": "sha512-XSJp6kcEPydUaM0I/gnxpXggiKgA5FjgFPKZCMQBDQJYUjXpQNyg5ogNkOJt1/4B2P7pwbYPZXgxP/30yZVahA==", + "version": "0.4.2", + "resolved": "https://registry.npmjs.org/rc-mentions/-/rc-mentions-0.4.2.tgz", + "integrity": "sha512-DTZurQzacLXOfVuiHydGzqkq7cFMHXF18l2jZ9PhWUn2cqvOSY3W4osN0Pq29AOMOBpcxdZCzgc7Lb0r/bgkDw==", "requires": { "@ant-design/create-react-context": "^0.2.4", "classnames": "^2.2.6", @@ -27219,9 +27229,9 @@ } }, "rc-menu": { - "version": "7.5.3", - "resolved": "https://registry.npmjs.org/rc-menu/-/rc-menu-7.5.3.tgz", - "integrity": "sha512-H/jUyGbJxZI/iuVdC6Iu9KHfz7tucoqK0Vn8ahDnv+ppc1PnKb4SkBbXn5LrmUyaj7thCBiaktBxVnUXSmNE2g==", + "version": "7.5.5", + "resolved": "https://registry.npmjs.org/rc-menu/-/rc-menu-7.5.5.tgz", + "integrity": "sha512-4YJXJgrpUGEA1rMftXN7bDhrV5rPB8oBJoHqT+GVXtIWCanfQxEnM3fmhHQhatL59JoAFMZhJaNzhJIk4FUWCQ==", "requires": { "classnames": "2.x", "dom-scroll-into-view": "1.x", @@ -27247,9 +27257,9 @@ } }, "rc-pagination": { - "version": "1.20.11", - "resolved": "https://registry.npmjs.org/rc-pagination/-/rc-pagination-1.20.11.tgz", - "integrity": "sha512-2wKO5kO+ELx1/zlqTY8TwGBruzofi+1BcZ7Z4xalMlLbDMTuUU4FDljbBBP/n9D2llK+NtgWA619PMBhInozZw==", + "version": "1.20.15", + "resolved": "https://registry.npmjs.org/rc-pagination/-/rc-pagination-1.20.15.tgz", + "integrity": "sha512-/Xr4/3GOa1DtL8iCYl7qRUroEMrRDhZiiuHwcVFfSiwa9LYloMlUWcOJsnr8LN6A7rLPdm3/CHStUNeYd+2pKw==", "requires": { "babel-runtime": "6.x", "classnames": "^2.2.6", @@ -27258,18 +27268,18 @@ } }, "rc-progress": { - "version": "2.5.2", - "resolved": "https://registry.npmjs.org/rc-progress/-/rc-progress-2.5.2.tgz", - "integrity": "sha512-ajI+MJkbBz9zYDuE9GQsY5gsyqPF7HFioZEDZ9Fmc+ebNZoiSeSJsTJImPFCg0dW/5WiRGUy2F69SX1aPtSJgA==", + "version": "2.5.3", + "resolved": "https://registry.npmjs.org/rc-progress/-/rc-progress-2.5.3.tgz", + "integrity": "sha512-K2fa4CnqGehLZoMrdmBeZ86ONSTVcdk5FlqetbwJ3R/+42XfqhwQVOjWp2MH4P7XSQOMAGcNOy1SFfCP3415sg==", "requires": { "babel-runtime": "6.x", "prop-types": "^15.5.8" } }, "rc-rate": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/rc-rate/-/rc-rate-2.5.0.tgz", - "integrity": "sha512-aXX5klRqbVZxvLghcKnLqqo7LvLVCHswEDteWsm5Gb7NBIPa1YKTcAbvb5SZ4Z4i4EeRoZaPwygRAWsQgGtbKw==", + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/rc-rate/-/rc-rate-2.5.1.tgz", + "integrity": "sha512-3iJkNJT8xlHklPCdeZtUZmJmRVUbr6AHRlfSsztfYTXVlHrv2TcPn3XkHsH+12j812WVB7gvilS2j3+ffjUHXg==", "requires": { "classnames": "^2.2.5", "prop-types": "^15.5.8", @@ -27288,9 +27298,9 @@ } }, "rc-select": { - "version": "9.2.1", - "resolved": "https://registry.npmjs.org/rc-select/-/rc-select-9.2.1.tgz", - "integrity": "sha512-nW/Zr2OCgxN26OX8ff3xcO1wK0e1l5ixnEfyN15Rbdk7TNI/rIPJIjPCQAoihRpk9A2C/GH8pahjlvKV1Vj++g==", + "version": "9.2.3", + "resolved": "https://registry.npmjs.org/rc-select/-/rc-select-9.2.3.tgz", + "integrity": "sha512-WhswxOMWiNnkXRbxyrj0kiIvyCfo/BaRPaYbsDetSIAU2yEDwKHF798blCP5u86KLOBKBvtxWLFCkSsQw1so5w==", "requires": { "babel-runtime": "^6.23.0", "classnames": "2.x", @@ -27343,9 +27353,9 @@ } }, "rc-table": { - "version": "6.9.5", - "resolved": "https://registry.npmjs.org/rc-table/-/rc-table-6.9.5.tgz", - "integrity": "sha512-STL6387A/izVh6r9F1WDiIIZ0QeubCdTgIlzMeGTSl/bXhB0VqjAZEikvoijPoauTjJIkIzVuQEIDjOhAWbpkQ==", + "version": "6.10.15", + "resolved": "https://registry.npmjs.org/rc-table/-/rc-table-6.10.15.tgz", + "integrity": "sha512-LAr0M/gqt+irOjvPNBLApmQ0CUHNOfKsEBhu1uIuB3OlN1ynA9z+sdoTQyNd9+8NSl0MYnQOOfhtLChAY7nU0A==", "requires": { "classnames": "^2.2.5", "component-classes": "^1.2.6", @@ -27358,9 +27368,9 @@ } }, "rc-tabs": { - "version": "9.6.7", - "resolved": "https://registry.npmjs.org/rc-tabs/-/rc-tabs-9.6.7.tgz", - "integrity": "sha512-OXbDOgaqv2MGK9QaDi6cdva6bNz3XGw+M9BHQpm1gTGmVQEGx5VcclDClH/3xobIzooxy8hrxg/s0rTlgDnC2w==", + "version": "9.7.0", + "resolved": "https://registry.npmjs.org/rc-tabs/-/rc-tabs-9.7.0.tgz", + "integrity": "sha512-kvmgp8/MfLzFZ06hWHignqomFQ5nF7BqKr5O1FfhE4VKsGrep52YSF/1MvS5oe0NPcI9XGNS2p751C5v6cYDpQ==", "requires": { "@ant-design/create-react-context": "^0.2.4", "babel-runtime": "6.x", @@ -27376,9 +27386,9 @@ } }, "rc-time-picker": { - "version": "3.7.2", - "resolved": "https://registry.npmjs.org/rc-time-picker/-/rc-time-picker-3.7.2.tgz", - "integrity": "sha512-UVWO9HXGyZoM4I2THlJsEAFcZQz+tYwdcpoHXCEFZsRLz9L2+7vV4EMp9Wa3UrtzMFEt83qSAX/90dCJeKl9sg==", + "version": "3.7.3", + "resolved": "https://registry.npmjs.org/rc-time-picker/-/rc-time-picker-3.7.3.tgz", + "integrity": "sha512-Lv1Mvzp9fRXhXEnRLO4nW6GLNxUkfAZ3RsiIBsWjGjXXvMNjdr4BX/ayElHAFK0DoJqOhm7c5tjmIYpEOwcUXg==", "requires": { "classnames": "2.x", "moment": "2.x", @@ -27399,9 +27409,9 @@ } }, "rc-tree": { - "version": "2.1.3", - "resolved": "https://registry.npmjs.org/rc-tree/-/rc-tree-2.1.3.tgz", - "integrity": "sha512-COvV65spQ6omrHBUhHRKqKNL5+ddXjlS+qWZchaL9FFuQNvjM5pjp9RnmMWK4fJJ5kBhhpLneh6wh9Vh3kSMXQ==", + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/rc-tree/-/rc-tree-2.1.4.tgz", + "integrity": "sha512-Xey794Iavgs8YldFlXcZLOhfcIhlX5Oz/yfKufknBXf2AlZCOkc7aHqSM9uTF7fBPtTGPhPxNEfOqHfY7b7xng==", "requires": { "@ant-design/create-react-context": "^0.2.4", "classnames": "2.x", @@ -27413,51 +27423,27 @@ } }, "rc-tree-select": { - "version": "2.9.1", - "resolved": "https://registry.npmjs.org/rc-tree-select/-/rc-tree-select-2.9.1.tgz", - "integrity": "sha512-AfJQC1ZzaeH+Onmx84TtVLUL2guBZe7exA8XSfj1RRB1doDbYGTtybzpP3CEw/tuSftSRnz+iPt+iaxRTrgXRw==", + "version": "2.9.4", + "resolved": "https://registry.npmjs.org/rc-tree-select/-/rc-tree-select-2.9.4.tgz", + "integrity": "sha512-0HQkXAN4XbfBW20CZYh3G+V+VMrjX42XRtDCpyv6PDUm5vikC0Ob682ZBCVS97Ww2a5Hf6Ajmu0ahWEdIEpwhg==", "requires": { "classnames": "^2.2.1", "dom-scroll-into-view": "^1.2.1", "prop-types": "^15.5.8", "raf": "^3.4.0", "rc-animate": "^2.8.2", - "rc-tree": "~2.0.0", - "rc-trigger": "^3.0.0-rc.2", + "rc-tree": "~2.1.0", + "rc-trigger": "^3.0.0", "rc-util": "^4.5.0", "react-lifecycles-compat": "^3.0.4", "shallowequal": "^1.0.2", "warning": "^4.0.1" }, "dependencies": { - "rc-tree": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/rc-tree/-/rc-tree-2.0.0.tgz", - "integrity": "sha512-DAT/jsbnFbHqG9Df9OaVG93CAVtTsJVnJiwKX+wqsG8TChpty3s6QX3zJZ+gBgjkq4ikLbu1kuFJtX63EKhSAA==", - "requires": { - "babel-runtime": "^6.23.0", - "classnames": "2.x", - "prop-types": "^15.5.8", - "rc-animate": "^2.6.0", - "rc-util": "^4.5.1", - "react-lifecycles-compat": "^3.0.4", - "warning": "^3.0.0" - }, - "dependencies": { - "warning": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz", - "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=", - "requires": { - "loose-envify": "^1.0.0" - } - } - } - }, "rc-trigger": { - "version": "3.0.0-rc.3", - "resolved": "https://registry.npmjs.org/rc-trigger/-/rc-trigger-3.0.0-rc.3.tgz", - "integrity": "sha512-4vB6cpxcUdm2qO5VtB9q1TZz0MoWm9BzFLvGknulphGrl1qI6uxUsPDCvqnmujdpDdAKGGfjxntFpA7RtAwkFQ==", + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/rc-trigger/-/rc-trigger-3.0.0.tgz", + "integrity": "sha512-hQxbbJpo23E2QnYczfq3Ec5J5tVl2mUDhkqxrEsQAqk16HfADQg+iKNWzEYXyERSncdxfnzYuaBgy764mNRzTA==", "requires": { "babel-runtime": "6.x", "classnames": "^2.2.6", @@ -27465,25 +27451,37 @@ "raf": "^3.4.0", "rc-align": "^2.4.1", "rc-animate": "^3.0.0-rc.1", - "rc-util": "^4.4.0" + "rc-util": "^4.15.7" }, "dependencies": { "rc-animate": { - "version": "3.0.0-rc.6", - "resolved": "https://registry.npmjs.org/rc-animate/-/rc-animate-3.0.0-rc.6.tgz", - "integrity": "sha512-oBLPpiT6Q4t6YvD/pkLcmofBP1p01TX0Otse8Q4+Mxt8J+VSDflLZGIgf62EwkvRwsQUkLPjZVFBsldnPKLzjg==", - "requires": { - "babel-runtime": "6.x", - "classnames": "^2.2.5", - "component-classes": "^1.2.6", - "fbjs": "^0.8.16", - "prop-types": "15.x", + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/rc-animate/-/rc-animate-3.1.0.tgz", + "integrity": "sha512-8FsM+3B1H+0AyTyGggY6JyVldHTs1CyYT8CfTmG/nGHHXlecvSLeICJhcKgRLjUiQlctNnRtB1rwz79cvBVmrw==", + "requires": { + "@ant-design/css-animation": "^1.7.2", + "classnames": "^2.2.6", "raf": "^3.4.0", - "rc-util": "^4.5.0", - "react-lifecycles-compat": "^3.0.4" + "rc-util": "^5.0.1" + }, + "dependencies": { + "rc-util": { + "version": "5.0.4", + "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.0.4.tgz", + "integrity": "sha512-cd19RCrE0DJH6UcJ9+V3eaXA/5sNWyVKOKkWl8ZM2OqgNzVb8fv0obf/TkuvSN43tmTsgqY8k7OqpFYHhmef8g==", + "requires": { + "react-is": "^16.12.0", + "shallowequal": "^1.1.0" + } + } } } } + }, + "react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" } } }, @@ -27502,9 +27500,9 @@ } }, "rc-upload": { - "version": "2.9.2", - "resolved": "https://registry.npmjs.org/rc-upload/-/rc-upload-2.9.2.tgz", - "integrity": "sha512-USjuWpTRJl3my32G5woysTaGrAld+S4dvvZ9kW6RX/RkekfmLDjvWc5ho8Mj/+6B6/tDRJnyGyvMxMQNkW7cvw==", + "version": "2.9.4", + "resolved": "https://registry.npmjs.org/rc-upload/-/rc-upload-2.9.4.tgz", + "integrity": "sha512-WXt0HGxXyzLrPV6iec/96Rbl/6dyrAW8pKuY6wwD7yFYwfU5bjgKjv7vC8KNMJ6wzitFrZjnoiogNL3dF9dj3Q==", "requires": { "babel-runtime": "6.x", "classnames": "^2.2.5", @@ -27513,15 +27511,22 @@ } }, "rc-util": { - "version": "4.15.6", - "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-4.15.6.tgz", - "integrity": "sha512-W6HB1gIn+xZLxmQfLkhMnAtaZY9RktcOH2I0Tbam4D4ZDFrkO33f3M7IolN0EPtLMpf4Mv/dEQNclY77/PtBpg==", + "version": "4.21.1", + "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-4.21.1.tgz", + "integrity": "sha512-Z+vlkSQVc1l8O2UjR3WQ+XdWlhj5q9BMQNLk2iOBch75CqPfrJyGtcWMcnhRlNuDu0Ndtt4kLVO8JI8BrABobg==", "requires": { "add-dom-event-listener": "^1.1.0", - "babel-runtime": "6.x", "prop-types": "^15.5.10", + "react-is": "^16.12.0", "react-lifecycles-compat": "^3.0.4", "shallowequal": "^1.1.0" + }, + "dependencies": { + "react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + } } }, "react": { @@ -28681,9 +28686,9 @@ } }, "shallow-equal": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.0.tgz", - "integrity": "sha512-Z21pVxR4cXsfwpMKMhCEIO1PCi5sp7KEp+CmOpBQ+E8GpHwKOw2sEzk7sgblM3d/j4z4gakoWEoPcjK0VJQogA==" + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz", + "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==" }, "shallowequal": { "version": "1.1.0", diff --git a/cvat-ui/package.json b/cvat-ui/package.json index 627a2c53e2db..39dc257a10dd 100644 --- a/cvat-ui/package.json +++ b/cvat-ui/package.json @@ -55,7 +55,7 @@ "@types/react-router-dom": "^5.1.0", "@types/react-share": "^3.0.1", "@types/redux-logger": "^3.0.7", - "antd": "^3.25.2", + "antd": "^3.26.17", "copy-to-clipboard": "^3.2.0", "cvat-canvas": "file:../cvat-canvas", "cvat-core": "file:../cvat-core", diff --git a/cvat-ui/src/actions/settings-actions.ts b/cvat-ui/src/actions/settings-actions.ts index d84434408e32..599ae60209c8 100644 --- a/cvat-ui/src/actions/settings-actions.ts +++ b/cvat-ui/src/actions/settings-actions.ts @@ -32,6 +32,7 @@ export enum SettingsActionTypes { SWITCH_AUTOMATIC_BORDERING = 'SWITCH_AUTOMATIC_BORDERING', SWITCH_SHOWNIG_INTERPOLATED_TRACKS = 'SWITCH_SHOWNIG_INTERPOLATED_TRACKS', SWITCH_SHOWING_OBJECTS_TEXT_ALWAYS = 'SWITCH_SHOWING_OBJECTS_TEXT_ALWAYS', + CHANGE_CANVAS_BACKGROUND_COLOR = 'CHANGE_CANVAS_BACKGROUND_COLOR', } export function changeShapesOpacity(opacity: number): AnyAction { @@ -240,3 +241,12 @@ export function switchAutomaticBordering(automaticBordering: boolean): AnyAction }, }; } + +export function changeCanvasBackgroundColor(color: string): AnyAction { + return { + type: SettingsActionTypes.CHANGE_CANVAS_BACKGROUND_COLOR, + payload: { + color, + }, + } +} 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 ef962c543d6f..155b5de988fc 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 @@ -65,6 +65,7 @@ interface Props { workspace: Workspace; automaticBordering: boolean; keyMap: Record; + canvasBackgroundColor: string; switchableAutomaticBordering: boolean; onSetupCanvas: () => void; onDragCanvas: (enabled: boolean) => void; @@ -147,6 +148,7 @@ export default class CanvasWrapperComponent extends React.PureComponent { showObjectsTextAlways, automaticBordering, showProjections, + canvasBackgroundColor, } = this.props; if (prevProps.showObjectsTextAlways !== showObjectsTextAlways @@ -243,6 +245,13 @@ export default class CanvasWrapperComponent extends React.PureComponent { } } + if (prevProps.canvasBackgroundColor !== canvasBackgroundColor) { + const canvasWrapperElement = window.document.getElementsByClassName('cvat-canvas-container').item(0) as HTMLElement | null; + if (canvasWrapperElement) { + canvasWrapperElement.style.backgroundColor = canvasBackgroundColor; + } + } + this.activateOnCanvas(); } @@ -639,6 +648,7 @@ export default class CanvasWrapperComponent extends React.PureComponent { brightnessLevel, contrastLevel, saturationLevel, + canvasBackgroundColor, } = this.props; // Size @@ -665,6 +675,11 @@ export default class CanvasWrapperComponent extends React.PureComponent { + `saturate(${saturationLevel / 100})`; } + const canvasWrapperElement = window.document.getElementsByClassName('cvat-canvas-container').item(0) as HTMLElement | null; + if (canvasWrapperElement) { + canvasWrapperElement.style.backgroundColor = canvasBackgroundColor; + } + // Events canvasInstance.html().addEventListener('canvas.setup', () => { const { activatedStateID, activatedAttributeID } = this.props; 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 83474bad3086..d333f03eddab 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/styles.scss +++ b/cvat-ui/src/components/annotation-page/standard-workspace/styles.scss @@ -8,10 +8,6 @@ height: 100% } -.cvat-canvas-container { - background-color: $background-color-1; -} - .cvat-objects-sidebar-filter-input { width: calc(100% - 35px); } diff --git a/cvat-ui/src/components/cvat-app.tsx b/cvat-ui/src/components/cvat-app.tsx index ad83d05bbbc2..8898addcc262 100644 --- a/cvat-ui/src/components/cvat-app.tsx +++ b/cvat-ui/src/components/cvat-app.tsx @@ -14,7 +14,6 @@ import notification from 'antd/lib/notification'; import GlobalErrorBoundary from 'components/global-error-boundary/global-error-boundary'; import ShorcutsDialog from 'components/shortcuts-dialog/shortcuts-dialog'; -import SettingsPageContainer from 'containers/settings-page/settings-page'; import TasksPageContainer from 'containers/tasks-page/tasks-page'; import CreateTaskPageContainer from 'containers/create-task-page/create-task-page'; import TaskPageContainer from 'containers/task-page/task-page'; @@ -273,7 +272,6 @@ class CVATApplication extends React.PureComponent - diff --git a/cvat-ui/src/components/header/header.tsx b/cvat-ui/src/components/header/header.tsx index 38925dbb834c..6c4a83f4a998 100644 --- a/cvat-ui/src/components/header/header.tsx +++ b/cvat-ui/src/components/header/header.tsx @@ -3,7 +3,7 @@ // SPDX-License-Identifier: MIT import './styles.scss'; -import React from 'react'; +import React, {useState} from 'react'; import { RouteComponentProps } from 'react-router'; import { withRouter } from 'react-router-dom'; import { Row, Col } from 'antd/lib/grid'; @@ -15,6 +15,7 @@ import Dropdown from 'antd/lib/dropdown'; import Modal from 'antd/lib/modal'; import Text from 'antd/lib/typography/Text'; +import SettingsModal from './settings-modal/settings-modal'; import { CVATLogo, AccountIcon } from 'icons'; import consts from 'consts'; @@ -69,6 +70,8 @@ function HeaderContainer(props: Props): JSX.Element { GITHUB_URL, } = consts; + const [settingsModalVisible, setSettingsModalVisible] = useState(false); + function aboutModal(): void { Modal.info({ title: `${toolName}`, @@ -131,7 +134,7 @@ function HeaderContainer(props: Props): JSX.Element { props.history.push('/settings') + (): void => setSettingsModalVisible(true) } > @@ -236,6 +239,10 @@ function HeaderContainer(props: Props): JSX.Element { + setSettingsModalVisible(false)} + /> ); } diff --git a/cvat-ui/src/components/settings-page/player-settings.tsx b/cvat-ui/src/components/header/settings-modal/player-settings.tsx similarity index 92% rename from cvat-ui/src/components/settings-page/player-settings.tsx rename to cvat-ui/src/components/header/settings-modal/player-settings.tsx index 3a41f178fe7c..db0c856df059 100644 --- a/cvat-ui/src/components/settings-page/player-settings.tsx +++ b/cvat-ui/src/components/header/settings-modal/player-settings.tsx @@ -2,21 +2,23 @@ // // SPDX-License-Identifier: MIT -import React, {useRef, useEffect} from 'react'; +import React, {useRef, useEffect, useState} from 'react'; import { Row, Col } from 'antd/lib/grid'; import Checkbox, { CheckboxChangeEvent } from 'antd/lib/checkbox'; import Button from 'antd/lib/button'; import Slider from 'antd/lib/slider'; import Select from 'antd/lib/select'; +import Popover from 'antd/lib/popover'; import InputNumber from 'antd/lib/input-number'; import Icon from 'antd/lib/icon'; import Text from 'antd/lib/typography/Text'; -import { SliderPicker } from 'react-color'; +import { CompactPicker } from 'react-color'; import { clamp } from 'utils/math'; import { BackJumpIcon, ForwardJumpIcon } from 'icons'; import { FrameSpeed, GridColor } from 'reducers/interfaces'; +import consts from 'consts'; interface Props { @@ -32,6 +34,7 @@ interface Props { contrastLevel: number; saturationLevel: number; previewImage: string | null; + canvasBackgroundColor: string; onChangeFrameStep(step: number): void; onChangeFrameSpeed(speed: FrameSpeed): void; onSwitchResetZoom(enabled: boolean): void; @@ -43,6 +46,7 @@ interface Props { onChangeBrightnessLevel(level: number): void; onChangeContrastLevel(level: number): void; onChangeSaturationLevel(level: number): void; + onChangeCanvasBackgroundColor(color: string): void; } export default function PlayerSettingsComponent(props: Props): JSX.Element { @@ -59,6 +63,7 @@ export default function PlayerSettingsComponent(props: Props): JSX.Element { contrastLevel, saturationLevel, previewImage, + canvasBackgroundColor, onChangeFrameStep, onChangeFrameSpeed, onSwitchResetZoom, @@ -70,6 +75,7 @@ export default function PlayerSettingsComponent(props: Props): JSX.Element { onChangeBrightnessLevel, onChangeContrastLevel, onChangeSaturationLevel, + onChangeCanvasBackgroundColor, } = props; const minFrameStep = 2; @@ -134,9 +140,19 @@ export default function PlayerSettingsComponent(props: Props): JSX.Element { - + - + onChangeCanvasBackgroundColor(e.hex)} /> + )} + overlayClassName='canvas-background-color-picker-popover' + trigger='click' + > + + diff --git a/cvat-ui/src/components/header/settings-modal/settings-modal.tsx b/cvat-ui/src/components/header/settings-modal/settings-modal.tsx new file mode 100644 index 000000000000..c43277417a3e --- /dev/null +++ b/cvat-ui/src/components/header/settings-modal/settings-modal.tsx @@ -0,0 +1,73 @@ +// Copyright (C) 2020 Intel Corporation +// +// SPDX-License-Identifier: MIT + +import './styles.scss'; +import React from 'react'; +import Tabs from 'antd/lib/tabs'; +import Icon from 'antd/lib/icon'; +import Text from 'antd/lib/typography/Text'; +import Modal from 'antd/lib/modal/Modal'; + +import WorkspaceSettingsContainer from 'containers/settings-page/workspace-settings'; +import PlayerSettingsContainer from 'containers/settings-page/player-settings'; +import Button from 'antd/lib/button'; + +interface SettingsModalProps { + visible: boolean; + onClose(): void; +} + +const SettingsModal = (props: SettingsModalProps): JSX.Element => { + const {visible, onClose} = props; + + return ( + + Close + + )} + > +
+ + + + Player + + ) + } + key='player' + > + + + + + Workspace + + ) + } + key='workspace' + > + + + +
+ + ) +} + +export default SettingsModal; diff --git a/cvat-ui/src/components/settings-page/styles.scss b/cvat-ui/src/components/header/settings-modal/styles.scss similarity index 86% rename from cvat-ui/src/components/settings-page/styles.scss rename to cvat-ui/src/components/header/settings-modal/styles.scss index f5a4388e7ceb..6035abb55f23 100644 --- a/cvat-ui/src/components/settings-page/styles.scss +++ b/cvat-ui/src/components/header/settings-modal/styles.scss @@ -2,15 +2,15 @@ // // SPDX-License-Identifier: MIT -@import '../../base.scss'; +@import '../../../base.scss'; -.cvat-settings-page { +.cvat-settings-tabs { height: 100%; overflow-y: auto; padding-bottom: 15px; > div:nth-child(1) { - margin-top: 30px; + margin-top: 10px; margin-bottom: 10px; } } @@ -19,7 +19,7 @@ width: 100%; height: max-content; background: $background-color-1; - padding: 50px; + padding: 24px; } .cvat-player-settings-grid, @@ -41,6 +41,7 @@ .cvat-player-settings-speed, .cvat-player-settings-reset-zoom, .cvat-player-settings-rotate-all, +.cvat-player-settings-canvas-background, .cvat-workspace-settings-aam-zoom-margin, .cvat-workspace-settings-auto-save-interval { margin-bottom: 25px; @@ -95,18 +96,16 @@ } } -.cvat-settings-page-back-button { - width: 100px; - margin-top: 15px; -} - -.cvat-settings-page-back-button-wrapper { - display: flex; - justify-content: flex-end; -} - .cvat-player-settings-image-preview { width: 100%; max-height: 180px; object-fit: cover; } + +.canvas-background-color-picker-popover .ant-popover-inner-content { + padding: 6px 12px; + + :first-child:first-child { + box-shadow: unset !important; + } +} diff --git a/cvat-ui/src/components/settings-page/workspace-settings.tsx b/cvat-ui/src/components/header/settings-modal/workspace-settings.tsx similarity index 100% rename from cvat-ui/src/components/settings-page/workspace-settings.tsx rename to cvat-ui/src/components/header/settings-modal/workspace-settings.tsx diff --git a/cvat-ui/src/components/settings-page/settings-page.tsx b/cvat-ui/src/components/settings-page/settings-page.tsx deleted file mode 100644 index 5347a063d79e..000000000000 --- a/cvat-ui/src/components/settings-page/settings-page.tsx +++ /dev/null @@ -1,78 +0,0 @@ -// Copyright (C) 2020 Intel Corporation -// -// SPDX-License-Identifier: MIT - -import './styles.scss'; -import React from 'react'; -import { Row, Col } from 'antd/lib/grid'; -import Tabs from 'antd/lib/tabs'; -import Icon from 'antd/lib/icon'; -import Button from 'antd/lib/button'; -import Text from 'antd/lib/typography/Text'; - -import { RouteComponentProps } from 'react-router'; - -import WorkspaceSettingsContainer from 'containers/settings-page/workspace-settings'; -import PlayerSettingsContainer from 'containers/settings-page/player-settings'; - -function SettingsPage(props: RouteComponentProps): JSX.Element { - return ( -
- - - Settings - - - - - - - - Player - - ) - } - key='player' - > - - - - - Workspace - - ) - } - key='workspace' - > - - - - - - - - - - -
- ); -} - -export default SettingsPage; diff --git a/cvat-ui/src/consts.ts b/cvat-ui/src/consts.ts index dfece0490468..e0a94454e8cf 100644 --- a/cvat-ui/src/consts.ts +++ b/cvat-ui/src/consts.ts @@ -13,6 +13,7 @@ const GITHUB_URL = 'https://github.com/opencv/cvat'; const GITHUB_IMAGE_URL = 'https://raw.githubusercontent.com/opencv/cvat/develop/cvat/apps/documentation/static/documentation/images/cvat.jpg'; const AUTO_ANNOTATION_GUIDE_URL = 'https://github.com/opencv/cvat/blob/develop/cvat/apps/auto_annotation/README.md'; const SHARE_MOUNT_GUIDE_URL = 'https://github.com/opencv/cvat/blob/master/cvat/apps/documentation/installation.md#share-path'; +const CANVAS_BACKGROUND_COLORS = ['#ffffff', '#f1f1f1', '#e5e5e5', '#d8d8d8', '#CCCCCC', '#B3B3B3', '#999999']; export default { UNDEFINED_ATTRIBUTE_VALUE, @@ -26,4 +27,5 @@ export default { GITHUB_IMAGE_URL, AUTO_ANNOTATION_GUIDE_URL, SHARE_MOUNT_GUIDE_URL, + CANVAS_BACKGROUND_COLORS, }; 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 f5c48061421b..c78838cede36 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 @@ -87,6 +87,7 @@ interface StateToProps { contextType: ContextMenuType; switchableAutomaticBordering: boolean; keyMap: Record; + canvasBackgroundColor: string; } interface DispatchToProps { @@ -161,6 +162,7 @@ function mapStateToProps(state: CombinedState): StateToProps { }, settings: { player: { + canvasBackgroundColor, grid, gridSize, gridColor, @@ -227,6 +229,7 @@ function mapStateToProps(state: CombinedState): StateToProps { contextType, workspace, keyMap, + canvasBackgroundColor, switchableAutomaticBordering: activeControl === ActiveControl.DRAW_POLYGON || activeControl === ActiveControl.DRAW_POLYLINE || activeControl === ActiveControl.EDIT, diff --git a/cvat-ui/src/containers/settings-page/player-settings.tsx b/cvat-ui/src/containers/settings-page/player-settings.tsx index f253ff90af69..5f5ba08a7e86 100644 --- a/cvat-ui/src/containers/settings-page/player-settings.tsx +++ b/cvat-ui/src/containers/settings-page/player-settings.tsx @@ -19,6 +19,7 @@ import { changeBrightnessLevel, changeContrastLevel, changeSaturationLevel, + changeCanvasBackgroundColor, } from 'actions/settings-actions'; import { @@ -40,6 +41,7 @@ interface StateToProps { contrastLevel: number; saturationLevel: number; previewImage: string | null; + canvasBackgroundColor: string; } interface DispatchToProps { @@ -54,6 +56,7 @@ interface DispatchToProps { onChangeBrightnessLevel(level: number): void; onChangeContrastLevel(level: number): void; onChangeSaturationLevel(level: number): void; + onChangeCanvasBackgroundColor(color: string): void; } function mapStateToProps(state: CombinedState): StateToProps { @@ -109,6 +112,9 @@ function mapDispatchToProps(dispatch: any): DispatchToProps { onChangeSaturationLevel(level: number): void { dispatch(changeSaturationLevel(level)); }, + onChangeCanvasBackgroundColor(color: string): void { + dispatch(changeCanvasBackgroundColor(color)); + } }; } diff --git a/cvat-ui/src/reducers/interfaces.ts b/cvat-ui/src/reducers/interfaces.ts index 6031435975ce..4788a5204ed2 100644 --- a/cvat-ui/src/reducers/interfaces.ts +++ b/cvat-ui/src/reducers/interfaces.ts @@ -430,6 +430,7 @@ export enum ColorBy { } export interface PlayerSettingsState { + canvasBackgroundColor: string, frameStep: number; frameSpeed: FrameSpeed; resetZoom: boolean; diff --git a/cvat-ui/src/reducers/settings-reducer.ts b/cvat-ui/src/reducers/settings-reducer.ts index 68d393682607..0fc624b64cd3 100644 --- a/cvat-ui/src/reducers/settings-reducer.ts +++ b/cvat-ui/src/reducers/settings-reducer.ts @@ -34,6 +34,7 @@ const defaultState: SettingsState = { showAllInterpolationTracks: false, }, player: { + canvasBackgroundColor: '#ffffff', frameStep: 10, frameSpeed: FrameSpeed.Usual, resetZoom: false, @@ -257,6 +258,15 @@ export default (state = defaultState, action: AnyAction): SettingsState => { }, }; } + case SettingsActionTypes.CHANGE_CANVAS_BACKGROUND_COLOR: { + return { + ...state, + player: { + ...state.player, + canvasBackgroundColor: action.payload.color, + } + } + } case BoundariesActionTypes.RESET_AFTER_ERROR: case AnnotationActionTypes.GET_JOB_SUCCESS: { const { job } = action.payload; From c9f00e14886b558e3e2dbff0cb1199b6dcdc8d34 Mon Sep 17 00:00:00 2001 From: Dmitry Kalinin Date: Mon, 15 Jun 2020 01:05:00 +0300 Subject: [PATCH 05/17] upgraded npm package version --- cvat-canvas/package-lock.json | 2 +- cvat-canvas/package.json | 2 +- cvat-ui/package-lock.json | 2 +- cvat-ui/package.json | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/cvat-canvas/package-lock.json b/cvat-canvas/package-lock.json index e42242226b14..083de4483c80 100644 --- a/cvat-canvas/package-lock.json +++ b/cvat-canvas/package-lock.json @@ -1,6 +1,6 @@ { "name": "cvat-canvas", - "version": "1.1.1", + "version": "1.1.2", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/cvat-canvas/package.json b/cvat-canvas/package.json index 73a7c98a3918..79e09d03084a 100644 --- a/cvat-canvas/package.json +++ b/cvat-canvas/package.json @@ -1,6 +1,6 @@ { "name": "cvat-canvas", - "version": "1.1.1", + "version": "1.1.2", "description": "Part of Computer Vision Annotation Tool which presents its canvas library", "main": "src/canvas.ts", "scripts": { diff --git a/cvat-ui/package-lock.json b/cvat-ui/package-lock.json index f41d6a3511ca..91b69b70c10b 100644 --- a/cvat-ui/package-lock.json +++ b/cvat-ui/package-lock.json @@ -1,6 +1,6 @@ { "name": "cvat-ui", - "version": "1.2.2", + "version": "1.3.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/cvat-ui/package.json b/cvat-ui/package.json index 78690ff24bfd..2527770da2c0 100644 --- a/cvat-ui/package.json +++ b/cvat-ui/package.json @@ -1,6 +1,6 @@ { "name": "cvat-ui", - "version": "1.2.2", + "version": "1.3.0", "description": "CVAT single-page application", "main": "src/index.tsx", "scripts": { From eefb7028078d1b3fbb7c0a364e7c6f76a8f75b96 Mon Sep 17 00:00:00 2001 From: Dmitry Kalinin Date: Mon, 15 Jun 2020 02:20:13 +0300 Subject: [PATCH 06/17] fixed paths --- .../header/settings-modal/settings-modal.tsx | 4 +- .../settings-modal}/player-settings.tsx | 2 +- .../settings-modal}/workspace-settings.tsx | 2 +- .../settings-page/settings-page.tsx | 83 ------------------- 4 files changed, 4 insertions(+), 87 deletions(-) rename cvat-ui/src/containers/{settings-page => header/settings-modal}/player-settings.tsx (97%) rename cvat-ui/src/containers/{settings-page => header/settings-modal}/workspace-settings.tsx (96%) delete mode 100644 cvat-ui/src/containers/settings-page/settings-page.tsx diff --git a/cvat-ui/src/components/header/settings-modal/settings-modal.tsx b/cvat-ui/src/components/header/settings-modal/settings-modal.tsx index c43277417a3e..59730da16ce4 100644 --- a/cvat-ui/src/components/header/settings-modal/settings-modal.tsx +++ b/cvat-ui/src/components/header/settings-modal/settings-modal.tsx @@ -9,8 +9,8 @@ import Icon from 'antd/lib/icon'; import Text from 'antd/lib/typography/Text'; import Modal from 'antd/lib/modal/Modal'; -import WorkspaceSettingsContainer from 'containers/settings-page/workspace-settings'; -import PlayerSettingsContainer from 'containers/settings-page/player-settings'; +import WorkspaceSettingsContainer from 'containers/header/settings-modal/workspace-settings'; +import PlayerSettingsContainer from 'containers/header/settings-modal/player-settings'; import Button from 'antd/lib/button'; interface SettingsModalProps { diff --git a/cvat-ui/src/containers/settings-page/player-settings.tsx b/cvat-ui/src/containers/header/settings-modal/player-settings.tsx similarity index 97% rename from cvat-ui/src/containers/settings-page/player-settings.tsx rename to cvat-ui/src/containers/header/settings-modal/player-settings.tsx index 5f5ba08a7e86..0065bb6d1990 100644 --- a/cvat-ui/src/containers/settings-page/player-settings.tsx +++ b/cvat-ui/src/containers/header/settings-modal/player-settings.tsx @@ -5,7 +5,7 @@ import React from 'react'; import { connect } from 'react-redux'; -import PlayerSettingsComponent from 'components/settings-page/player-settings'; +import PlayerSettingsComponent from 'components/header/settings-modal/player-settings'; import { changeFrameStep, diff --git a/cvat-ui/src/containers/settings-page/workspace-settings.tsx b/cvat-ui/src/containers/header/settings-modal/workspace-settings.tsx similarity index 96% rename from cvat-ui/src/containers/settings-page/workspace-settings.tsx rename to cvat-ui/src/containers/header/settings-modal/workspace-settings.tsx index 8f360b724a6a..d7e253473956 100644 --- a/cvat-ui/src/containers/settings-page/workspace-settings.tsx +++ b/cvat-ui/src/containers/header/settings-modal/workspace-settings.tsx @@ -16,7 +16,7 @@ import { import { CombinedState } from 'reducers/interfaces'; -import WorkspaceSettingsComponent from 'components/settings-page/workspace-settings'; +import WorkspaceSettingsComponent from 'components/header/settings-modal/workspace-settings'; interface StateToProps { autoSave: boolean; diff --git a/cvat-ui/src/containers/settings-page/settings-page.tsx b/cvat-ui/src/containers/settings-page/settings-page.tsx deleted file mode 100644 index 611d313dd808..000000000000 --- a/cvat-ui/src/containers/settings-page/settings-page.tsx +++ /dev/null @@ -1,83 +0,0 @@ -// Copyright (C) 2020 Intel Corporation -// -// SPDX-License-Identifier: MIT - -import React from 'react'; -import { connect } from 'react-redux'; - -import { RouteComponentProps } from 'react-router'; -import { withRouter } from 'react-router-dom'; - -import SettingsPageComponent from 'components/settings-page/settings-page'; - - -import { - CombinedState, -} from 'reducers/interfaces'; - -interface StateToProps { - jobInstance: any; -} - -function mapStateToProps(state: CombinedState): StateToProps { - const { - annotation: { - job: { - instance: jobInstance, - }, - }, - } = state; - return { - jobInstance, - }; -} - -type Props = StateToProps & RouteComponentProps; -class SettingsPageContainer extends React.PureComponent { - private unblock: any; - - public componentDidMount(): void { - const { - history, - jobInstance, - } = this.props; - - this.unblock = history.block((location: any) => { - if (jobInstance && jobInstance.annotations.hasUnsavedChanges() - && location.pathname !== `/tasks/${jobInstance.task.id}/jobs/${jobInstance.id}`) { - return 'You have unsaved changes, please confirm leaving this page.'; - } - return undefined; - }); - this.beforeUnloadCallback = this.beforeUnloadCallback.bind(this); - window.addEventListener('beforeunload', this.beforeUnloadCallback); - } - - public componentWillUnmount(): void { - window.removeEventListener('beforeunload', this.beforeUnloadCallback); - this.unblock(); - } - - private beforeUnloadCallback(event: BeforeUnloadEvent): any { - const { jobInstance } = this.props; - if (jobInstance.annotations.hasUnsavedChanges()) { - const confirmationMessage = 'You have unsaved changes, please confirm leaving this page.'; - // eslint-disable-next-line no-param-reassign - event.returnValue = confirmationMessage; - return confirmationMessage; - } - return undefined; - } - - public render(): JSX.Element { - return ( - - ); - } -} - -export default withRouter( - connect( - mapStateToProps, - )(SettingsPageContainer), -); From 410184431c6768f17d88c67ccc54b671675ded92 Mon Sep 17 00:00:00 2001 From: Dmitry Kalinin Date: Mon, 15 Jun 2020 02:23:37 +0300 Subject: [PATCH 07/17] Added CHANGELOG.md --- CHANGELOG.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index d4c4be6d8b50..3b3243568708 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,10 +10,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Added default label color table for mask export (https://github.com/opencv/cvat/pull/1549) - Added environment variables for Redis and Postgres hosts for Kubernetes deployment support () - Added visual identification for unavailable formats (https://github.com/opencv/cvat/pull/1567) +- Added canvas background color selector () +- Added image settings preview () ### Changed - Removed information about e-mail from the basic user information () - Update https install manual. Makes it easier and more robust. Includes automatic renewing of lets encrypt certificates. +- Settings page move to the modal. ### Deprecated - @@ -28,6 +31,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Wrong rexex for account name validation () - Wrong description on register view for the username field () - Wrong resolution for resizing a shape () +- Fixed issue tracker () +- Fixed canvas fit after sidebar open/close event () ### Security - SQL injection in Django `CVE-2020-9402` (https://github.com/opencv/cvat/pull/1657) From 564164e8619e9d6cab505cc497e395bd508bb3de Mon Sep 17 00:00:00 2001 From: Dmitry Kalinin Date: Mon, 15 Jun 2020 13:02:53 +0300 Subject: [PATCH 08/17] fixed eslint problems --- cvat-ui/src/actions/auth-actions.ts | 3 +- cvat-ui/src/actions/settings-actions.ts | 2 +- cvat-ui/src/actions/useragreements-actions.ts | 12 ++-- .../components/actions-menu/dump-submenu.tsx | 33 +++++----- .../actions-menu/export-submenu.tsx | 31 +++++----- .../components/actions-menu/load-submenu.tsx | 61 +++++++++---------- .../controls-side-bar/draw-cuboid-control.tsx | 2 +- .../objects-side-bar/object-item.tsx | 6 +- .../objects-side-bar/objects-side-bar.tsx | 2 +- cvat-ui/src/components/cvat-app.tsx | 10 +-- cvat-ui/src/components/header/header.tsx | 4 +- .../header/settings-modal/player-settings.tsx | 12 ++-- .../header/settings-modal/settings-modal.tsx | 6 +- .../login-page/cookie-policy-drawer.tsx | 18 +++--- .../register-page/register-page.tsx | 2 +- cvat-ui/src/components/task-page/details.tsx | 16 +++-- .../src/components/tasks-page/task-item.tsx | 2 +- .../objects-side-bar/object-item.tsx | 32 +++++----- .../objects-side-bar/objects-side-bar.tsx | 4 +- .../header/settings-modal/player-settings.tsx | 2 +- .../register-page/register-page.tsx | 3 +- .../src/containers/tasks-page/task-item.tsx | 1 - cvat-ui/src/reducers/interfaces.ts | 2 +- cvat-ui/src/reducers/notifications-reducer.ts | 2 +- cvat-ui/src/reducers/settings-reducer.ts | 4 +- cvat-ui/src/utils/enviroment.ts | 4 +- cvat-ui/src/utils/math.ts | 7 +-- 27 files changed, 145 insertions(+), 138 deletions(-) diff --git a/cvat-ui/src/actions/auth-actions.ts b/cvat-ui/src/actions/auth-actions.ts index ed6ecd30d723..f7a0f3e9f246 100644 --- a/cvat-ui/src/actions/auth-actions.ts +++ b/cvat-ui/src/actions/auth-actions.ts @@ -52,7 +52,8 @@ export const registerAsync = ( dispatch(authActions.register()); try { - await cvat.server.register(username, firstName, lastName, email, password1, password2, confirmations); + await cvat.server.register(username, firstName, lastName, email, password1, password2, + confirmations); const users = await cvat.users.get({ self: true }); dispatch(authActions.registerSuccess(users[0])); diff --git a/cvat-ui/src/actions/settings-actions.ts b/cvat-ui/src/actions/settings-actions.ts index 599ae60209c8..1164902f36e2 100644 --- a/cvat-ui/src/actions/settings-actions.ts +++ b/cvat-ui/src/actions/settings-actions.ts @@ -248,5 +248,5 @@ export function changeCanvasBackgroundColor(color: string): AnyAction { payload: { color, }, - } + }; } diff --git a/cvat-ui/src/actions/useragreements-actions.ts b/cvat-ui/src/actions/useragreements-actions.ts index 29645ddbf225..95ec7003829d 100644 --- a/cvat-ui/src/actions/useragreements-actions.ts +++ b/cvat-ui/src/actions/useragreements-actions.ts @@ -4,7 +4,7 @@ import { ActionUnion, createAction, ThunkAction } from 'utils/redux'; import getCore from 'cvat-core-wrapper'; -import { UserAgreement } from 'reducers/interfaces' +import { UserAgreement } from 'reducers/interfaces'; const core = getCore(); @@ -16,10 +16,12 @@ export enum UserAgreementsActionTypes { const userAgreementsActions = { getUserAgreements: () => createAction(UserAgreementsActionTypes.GET_USER_AGREEMENTS), - getUserAgreementsSuccess: (userAgreements: UserAgreement[]) => - createAction(UserAgreementsActionTypes.GET_USER_AGREEMENTS_SUCCESS, userAgreements), - getUserAgreementsFailed: (error: any) => - createAction(UserAgreementsActionTypes.GET_USER_AGREEMENTS_FAILED, { error }), + getUserAgreementsSuccess: (userAgreements: UserAgreement[]) => ( + createAction(UserAgreementsActionTypes.GET_USER_AGREEMENTS_SUCCESS, userAgreements) + ), + getUserAgreementsFailed: (error: any) => ( + createAction(UserAgreementsActionTypes.GET_USER_AGREEMENTS_FAILED, { error }) + ), }; export type UserAgreementsActions = ActionUnion; diff --git a/cvat-ui/src/components/actions-menu/dump-submenu.tsx b/cvat-ui/src/components/actions-menu/dump-submenu.tsx index 803a5db98927..f88cc62e534d 100644 --- a/cvat-ui/src/components/actions-menu/dump-submenu.tsx +++ b/cvat-ui/src/components/actions-menu/dump-submenu.tsx @@ -32,23 +32,22 @@ export default function DumpSubmenu(props: Props): JSX.Element { { dumpers .sort((a: any, b: any) => a.name.localeCompare(b.name)) - .map((dumper: any): JSX.Element => - { - const pending = (dumpActivities || []).includes(dumper.name); - const disabled = !dumper.enabled || pending; - const isDefault = isDefaultFormat(dumper.name, taskMode); - return ( - - - {dumper.name} - {pending && } - - ); - }) + .map((dumper: any): JSX.Element => { + const pending = (dumpActivities || []).includes(dumper.name); + const disabled = !dumper.enabled || pending; + const isDefault = isDefaultFormat(dumper.name, taskMode); + return ( + + + {dumper.name} + {pending && } + + ); + }) } ); diff --git a/cvat-ui/src/components/actions-menu/export-submenu.tsx b/cvat-ui/src/components/actions-menu/export-submenu.tsx index 045d682f85e0..8f6bb4f30a80 100644 --- a/cvat-ui/src/components/actions-menu/export-submenu.tsx +++ b/cvat-ui/src/components/actions-menu/export-submenu.tsx @@ -25,22 +25,21 @@ export default function ExportSubmenu(props: Props): JSX.Element { { exporters .sort((a: any, b: any) => a.name.localeCompare(b.name)) - .map((exporter: any): JSX.Element => - { - const pending = (exportActivities || []).includes(exporter.name); - const disabled = !exporter.enabled || pending; - return ( - - - {exporter.name} - {pending && } - - ); - }) + .map((exporter: any): JSX.Element => { + const pending = (exportActivities || []).includes(exporter.name); + const disabled = !exporter.enabled || pending; + return ( + + + {exporter.name} + {pending && } + + ); + }) } ); diff --git a/cvat-ui/src/components/actions-menu/load-submenu.tsx b/cvat-ui/src/components/actions-menu/load-submenu.tsx index 2db41d176499..c167a01b2ba9 100644 --- a/cvat-ui/src/components/actions-menu/load-submenu.tsx +++ b/cvat-ui/src/components/actions-menu/load-submenu.tsx @@ -29,39 +29,38 @@ export default function LoadSubmenu(props: Props): JSX.Element { { loaders .sort((a: any, b: any) => a.name.localeCompare(b.name)) - .map((loader: any): JSX.Element => - { - const accept = loader.format - .split(',') - .map((x: string) => '.' + x.trimStart()) - .join(', '); // add '.' to each extension in a list - const pending = loadActivity === loader.name; - const disabled = !loader.enabled || !!loadActivity; - return ( - - { - onFileUpload(file); - return false; - }} + .map((loader: any): JSX.Element => { + const accept = loader.format + .split(',') + .map((x: string) => `.${x.trimStart()}`) + .join(', '); // add '.' to each extension in a list + const pending = loadActivity === loader.name; + const disabled = !loader.enabled || !!loadActivity; + return ( + - - + { + onFileUpload(file); + return false; + }} + > + + - - ); - }) + + ); + }) } ); diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-cuboid-control.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-cuboid-control.tsx index 351ed192b7c5..dd3945ca3094 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-cuboid-control.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-cuboid-control.tsx @@ -6,7 +6,7 @@ import React from 'react'; import Popover from 'antd/lib/popover'; import Icon from 'antd/lib/icon'; -import { Canvas } from 'cvat-canvas'; +import { Canvas } from 'cvat-canvas-wrapper'; import { ShapeType } from 'reducers/interfaces'; import { CubeIcon } from 'icons'; 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 690aa1f82d12..13f6ddebadc4 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 @@ -86,7 +86,7 @@ function ItemMenu( {shapeType === ShapeType.CUBOID && ( @@ -366,7 +366,7 @@ function ItemButtonsComponent(props: ItemButtonsComponentProps): JSX.Element { { locked - ? + ? : } @@ -433,7 +433,7 @@ function ItemButtonsComponent(props: ItemButtonsComponentProps): JSX.Element { { locked - ? + ? : } diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/objects-side-bar.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/objects-side-bar.tsx index b2f95a220216..b6af111ba32f 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/objects-side-bar.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/objects-side-bar.tsx @@ -11,13 +11,13 @@ import Layout from 'antd/lib/layout'; import { RadioChangeEvent } from 'antd/lib/radio'; import { SliderValue } from 'antd/lib/slider'; import { CheckboxChangeEvent } from 'antd/lib/checkbox'; +import { Canvas } from 'cvat-canvas-wrapper'; import { ColorBy } from 'reducers/interfaces'; import ObjectsListContainer from 'containers/annotation-page/standard-workspace/objects-side-bar/objects-list'; import LabelsListContainer from 'containers/annotation-page/standard-workspace/objects-side-bar/labels-list'; import AppearanceBlock from './appearance-block'; -import { Canvas } from 'cvat-canvas-wrapper'; interface Props { sidebarCollapsed: boolean; diff --git a/cvat-ui/src/components/cvat-app.tsx b/cvat-ui/src/components/cvat-app.tsx index 8898addcc262..c1bda4646831 100644 --- a/cvat-ui/src/components/cvat-app.tsx +++ b/cvat-ui/src/components/cvat-app.tsx @@ -52,8 +52,8 @@ interface CVATAppProps { installedAutoAnnotation: boolean; installedTFAnnotation: boolean; installedTFSegmentation: boolean; - userAgreementsFetching: boolean, - userAgreementsInitialized: boolean, + userAgreementsFetching: boolean; + userAgreementsInitialized: boolean; notifications: NotificationsState; user: any; } @@ -61,7 +61,7 @@ interface CVATAppProps { class CVATApplication extends React.PureComponent { public componentDidMount(): void { const core = getCore(); - const { verifyAuthorized, history } = this.props; + const { verifyAuthorized, history, location } = this.props; configure({ ignoreRepeatedEventsWhenKeyHeldDown: false }); // Logger configuration @@ -72,8 +72,8 @@ class CVATApplication extends React.PureComponent window.document.hasFocus, userActivityCallback); customWaViewHit(location.pathname, location.search, location.hash); - history.listen((location) => { - customWaViewHit(location.pathname, location.search, location.hash); + history.listen((l) => { + customWaViewHit(l.pathname, l.search, l.hash); }); verifyAuthorized(); diff --git a/cvat-ui/src/components/header/header.tsx b/cvat-ui/src/components/header/header.tsx index 6c4a83f4a998..eb953a7a67ab 100644 --- a/cvat-ui/src/components/header/header.tsx +++ b/cvat-ui/src/components/header/header.tsx @@ -3,7 +3,7 @@ // SPDX-License-Identifier: MIT import './styles.scss'; -import React, {useState} from 'react'; +import React, { useState } from 'react'; import { RouteComponentProps } from 'react-router'; import { withRouter } from 'react-router-dom'; import { Row, Col } from 'antd/lib/grid'; @@ -15,9 +15,9 @@ import Dropdown from 'antd/lib/dropdown'; import Modal from 'antd/lib/modal'; import Text from 'antd/lib/typography/Text'; -import SettingsModal from './settings-modal/settings-modal'; import { CVATLogo, AccountIcon } from 'icons'; import consts from 'consts'; +import SettingsModal from './settings-modal/settings-modal'; interface HeaderContainerProps { onLogout: () => void; diff --git a/cvat-ui/src/components/header/settings-modal/player-settings.tsx b/cvat-ui/src/components/header/settings-modal/player-settings.tsx index db0c856df059..c0dcae76bb41 100644 --- a/cvat-ui/src/components/header/settings-modal/player-settings.tsx +++ b/cvat-ui/src/components/header/settings-modal/player-settings.tsx @@ -2,7 +2,7 @@ // // SPDX-License-Identifier: MIT -import React, {useRef, useEffect, useState} from 'react'; +import React, { useRef, useEffect } from 'react'; import { Row, Col } from 'antd/lib/grid'; import Checkbox, { CheckboxChangeEvent } from 'antd/lib/checkbox'; @@ -91,7 +91,7 @@ export default function PlayerSettingsComponent(props: Props): JSX.Element { + `contrast(${contrastLevel / 100})` + `saturate(${saturationLevel / 100})`; } - }, [imageRef, brightnessLevel, contrastLevel, saturationLevel]) + }, [imageRef, brightnessLevel, contrastLevel, saturationLevel]); return (
@@ -146,7 +146,9 @@ export default function PlayerSettingsComponent(props: Props): JSX.Element { content={( onChangeCanvasBackgroundColor(e.hex)} /> + color={canvasBackgroundColor} + onChange={(e) => onChangeCanvasBackgroundColor(e.hex)} + /> )} overlayClassName='canvas-background-color-picker-popover' trigger='click' @@ -321,9 +323,11 @@ export default function PlayerSettingsComponent(props: Props): JSX.Element { Preview:
preview + className='cvat-player-settings-image-preview' + /> ) } diff --git a/cvat-ui/src/components/header/settings-modal/settings-modal.tsx b/cvat-ui/src/components/header/settings-modal/settings-modal.tsx index 59730da16ce4..2803ca3433d7 100644 --- a/cvat-ui/src/components/header/settings-modal/settings-modal.tsx +++ b/cvat-ui/src/components/header/settings-modal/settings-modal.tsx @@ -19,7 +19,7 @@ interface SettingsModalProps { } const SettingsModal = (props: SettingsModalProps): JSX.Element => { - const {visible, onClose} = props; + const { visible, onClose } = props; return ( {
- ) -} + ); +}; export default SettingsModal; diff --git a/cvat-ui/src/components/login-page/cookie-policy-drawer.tsx b/cvat-ui/src/components/login-page/cookie-policy-drawer.tsx index 80a05122c574..6c765c94fcae 100644 --- a/cvat-ui/src/components/login-page/cookie-policy-drawer.tsx +++ b/cvat-ui/src/components/login-page/cookie-policy-drawer.tsx @@ -3,12 +3,12 @@ // // SPDX-License-Identifier: MIT -import React, {useState, useEffect} from 'react'; +import React, { useState, useEffect } from 'react'; import Drawer from 'antd/lib/drawer'; import Paragraph from 'antd/lib/typography/Paragraph'; import Button from 'antd/lib/button/button'; -import {isPublic} from 'utils/enviroment'; +import { isPublic } from 'utils/enviroment'; function CookieDrawer(): JSX.Element { @@ -19,12 +19,12 @@ function CookieDrawer(): JSX.Element { if (cookiePolicyAccepted === null && isPublic()) { setDrawerVisible(true); } - }, []) + }, []); - const onClose = () => { + const onClose = (): void => { localStorage.setItem('cookiePolicyAccepted', 'true'); setDrawerVisible(false); - } + }; return ( - This site uses cookies for functionality, analytics, and advertising purposes as described in our Cookie and Similar Technologies Notice. - To see what cookies we serve and set your preferences, please visit our Cookie Consent Tool. - By continuing to use our website, you agree to our use of cookies. + This site uses cookies for functionality, analytics, and advertising purposes + as described in our Cookie and Similar Technologies Notice. + To see what cookies we serve and set your preferences, please visit our + Cookie Consent Tool + . By continuing to use our website, you agree to our use of cookies.