Merge branch 'develop' into az/fix_crop

CHANGELOG.md

@@ -30,7 +30,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - [Market-1501](https://www.aitribune.com/dataset/2018051063) format support (<https://github.com/openvinotoolkit/cvat/pull/2869>)
 - Ability of upload manifest for dataset with images (<https://github.com/openvinotoolkit/cvat/pull/2763>)
 - Annotations filters UI using react-awesome-query-builder (https://github.com/openvinotoolkit/cvat/issues/1418)
+- Storing settings in local storage to keep them between browser sessions (<https://github.com/openvinotoolkit/cvat/pull/3017>)
 - [ICDAR](https://rrc.cvc.uab.es/?ch=2) format support (<https://github.com/openvinotoolkit/cvat/pull/2866>)
+- Added switcher to maintain poylgon crop behaviour (<https://github.com/openvinotoolkit/cvat/pull/3021>)
 
 ### Changed
 

cvat-canvas/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cvat-canvas",
-  "version": "2.3.3",
+  "version": "2.4.1",
   "description": "Part of Computer Vision Annotation Tool which presents its canvas library",
   "main": "src/canvas.ts",
   "scripts": {

cvat-canvas/src/typescript/canvasModel.ts

@@ -57,6 +57,7 @@ export interface Configuration {
     undefinedAttrValue?: string;
     showProjections?: boolean;
     forceDisableEditing?: boolean;
+    intelligentPolygonCrop?: boolean;
 }
 
 export interface DrawData {
@@ -621,25 +622,29 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
     }
 
     public configure(configuration: Configuration): void {
-        if (typeof configuration.displayAllText !== 'undefined') {
+        if (typeof configuration.displayAllText === 'boolean') {
             this.data.configuration.displayAllText = configuration.displayAllText;
         }
 
-        if (typeof configuration.showProjections !== 'undefined') {
+        if (typeof configuration.showProjections === 'boolean') {
             this.data.configuration.showProjections = configuration.showProjections;
         }
-        if (typeof configuration.autoborders !== 'undefined') {
+        if (typeof configuration.autoborders === 'boolean') {
             this.data.configuration.autoborders = configuration.autoborders;
         }
 
-        if (typeof configuration.undefinedAttrValue !== 'undefined') {
+        if (typeof configuration.undefinedAttrValue === 'string') {
             this.data.configuration.undefinedAttrValue = configuration.undefinedAttrValue;
         }
 
-        if (typeof configuration.forceDisableEditing !== 'undefined') {
+        if (typeof configuration.forceDisableEditing === 'boolean') {
             this.data.configuration.forceDisableEditing = configuration.forceDisableEditing;
         }
 
+        if (typeof configuration.intelligentPolygonCrop === 'boolean') {
+            this.data.configuration.intelligentPolygonCrop = configuration.intelligentPolygonCrop;
+        }
+
         this.notify(UpdateReasons.CONFIG_UPDATED);
     }
 

cvat-canvas/src/typescript/editHandler.ts

@@ -27,6 +27,7 @@ export class EditHandlerImpl implements EditHandler {
     private editLine: SVG.PolyLine;
     private clones: SVG.Polygon[];
     private autobordersEnabled: boolean;
+    private intelligentCutEnabled: boolean;
 
     private setupTrailingPoint(circle: SVG.Circle): void {
         const head = this.editedShape.attr('points').split(' ').slice(0, this.editData.pointID).join(' ');
@@ -259,11 +260,11 @@ export class EditHandlerImpl implements EditHandler {
         this.editLine.remove();
         this.editLine = null;
 
-        if (pointsCriteria && lengthCriteria) {
+        if (pointsCriteria && lengthCriteria && this.intelligentCutEnabled) {
             this.clones.push(this.canvas.polygon(firstPart.join(' ')));
             this.selectPolygon(this.clones[0]);
             // left indexes1 and
-        } else if (!pointsCriteria && !lengthCriteria) {
+        } else if (!pointsCriteria && !lengthCriteria && this.intelligentCutEnabled) {
             this.clones.push(this.canvas.polygon(secondPart.join(' ')));
             this.selectPolygon(this.clones[0]);
         } else {
@@ -384,6 +385,7 @@ export class EditHandlerImpl implements EditHandler {
     ) {
         this.autoborderHandler = autoborderHandler;
         this.autobordersEnabled = false;
+        this.intelligentCutEnabled = false;
         this.onEditDone = onEditDone;
         this.canvas = canvas;
         this.editData = null;
@@ -423,6 +425,10 @@ export class EditHandlerImpl implements EditHandler {
                 }
             }
         }
+
+        if (typeof configuration.intelligentPolygonCrop === 'boolean') {
+            this.intelligentCutEnabled = configuration.intelligentPolygonCrop;
+        }
     }
 
     public transform(geometry: Geometry): void {

cvat-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cvat-ui",
-  "version": "1.16.1",
+  "version": "1.17.0",
   "description": "CVAT single-page application",
   "main": "src/index.tsx",
   "scripts": {

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

@@ -1,9 +1,9 @@
-// Copyright (C) 2020 Intel Corporation
+// Copyright (C) 2020-2021 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 
 import { AnyAction } from 'redux';
-import { GridColor, ColorBy } from 'reducers/interfaces';
+import { GridColor, ColorBy, SettingsState } from 'reducers/interfaces';
 
 export enum SettingsActionTypes {
     SWITCH_ROTATE_ALL = 'SWITCH_ROTATE_ALL',
@@ -27,10 +27,12 @@ export enum SettingsActionTypes {
     CHANGE_AUTO_SAVE_INTERVAL = 'CHANGE_AUTO_SAVE_INTERVAL',
     CHANGE_AAM_ZOOM_MARGIN = 'CHANGE_AAM_ZOOM_MARGIN',
     SWITCH_AUTOMATIC_BORDERING = 'SWITCH_AUTOMATIC_BORDERING',
+    SWITCH_INTELLIGENT_POLYGON_CROP = 'SWITCH_INTELLIGENT_POLYGON_CROP',
     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',
     SWITCH_SETTINGS_DIALOG = 'SWITCH_SETTINGS_DIALOG',
+    SET_SETTINGS = 'SET_SETTINGS',
 }
 
 export function changeShapesOpacity(opacity: number): AnyAction {
@@ -241,6 +243,15 @@ export function switchAutomaticBordering(automaticBordering: boolean): AnyAction
     };
 }
 
+export function switchIntelligentPolygonCrop(intelligentPolygonCrop: boolean): AnyAction {
+    return {
+        type: SettingsActionTypes.SWITCH_INTELLIGENT_POLYGON_CROP,
+        payload: {
+            intelligentPolygonCrop,
+        },
+    };
+}
+
 export function changeCanvasBackgroundColor(color: string): AnyAction {
     return {
         type: SettingsActionTypes.CHANGE_CANVAS_BACKGROUND_COLOR,
@@ -258,3 +269,12 @@ export function switchSettingsDialog(show?: boolean): AnyAction {
         },
     };
 }
+
+export function setSettings(settings: Partial<SettingsState>): AnyAction {
+    return {
+        type: SettingsActionTypes.SET_SETTINGS,
+        payload: {
+            settings,
+        },
+    };
+}

cvat-ui/src/components/annotation-page/canvas/canvas-wrapper.tsx

@@ -3,12 +3,12 @@
 // SPDX-License-Identifier: MIT
 
 import React from 'react';
-import GlobalHotKeys, { KeyMap } from 'utils/mousetrap-react';
 import Layout from 'antd/lib/layout';
 import Slider from 'antd/lib/slider';
 import Dropdown from 'antd/lib/dropdown';
 import { PlusCircleOutlined, UpOutlined } from '@ant-design/icons';
 
+import GlobalHotKeys, { KeyMap } from 'utils/mousetrap-react';
 import {
     ColorBy, GridColor, ObjectType, ContextMenuType, Workspace, ShapeType,
 } from 'reducers/interfaces';
@@ -61,6 +61,7 @@ interface Props {
     showAllInterpolationTracks: boolean;
     workspace: Workspace;
     automaticBordering: boolean;
+    intelligentPolygonCrop: boolean;
     keyMap: KeyMap;
     canvasBackgroundColor: string;
     switchableAutomaticBordering: boolean;
@@ -98,7 +99,12 @@ interface Props {
 export default class CanvasWrapperComponent extends React.PureComponent<Props> {
     public componentDidMount(): void {
         const {
-            automaticBordering, showObjectsTextAlways, canvasInstance, workspace,
+            automaticBordering,
+            intelligentPolygonCrop,
+            showObjectsTextAlways,
+            canvasInstance,
+            workspace,
+            showProjections,
         } = this.props;
 
         // It's awful approach from the point of view React
@@ -111,6 +117,8 @@ export default class CanvasWrapperComponent extends React.PureComponent<Props> {
             undefinedAttrValue: consts.UNDEFINED_ATTRIBUTE_VALUE,
             displayAllText: showObjectsTextAlways,
             forceDisableEditing: workspace === Workspace.REVIEW_WORKSPACE,
+            intelligentPolygonCrop,
+            showProjections,
         });
 
         this.initialSetup();
@@ -147,6 +155,7 @@ export default class CanvasWrapperComponent extends React.PureComponent<Props> {
             showObjectsTextAlways,
             showAllInterpolationTracks,
             automaticBordering,
+            intelligentPolygonCrop,
             showProjections,
             canvasBackgroundColor,
             onFetchAnnotation,
@@ -155,13 +164,15 @@ export default class CanvasWrapperComponent extends React.PureComponent<Props> {
         if (
             prevProps.showObjectsTextAlways !== showObjectsTextAlways ||
             prevProps.automaticBordering !== automaticBordering ||
-            prevProps.showProjections !== showProjections
+            prevProps.showProjections !== showProjections ||
+            prevProps.intelligentPolygonCrop !== intelligentPolygonCrop
         ) {
             canvasInstance.configure({
                 undefinedAttrValue: consts.UNDEFINED_ATTRIBUTE_VALUE,
                 displayAllText: showObjectsTextAlways,
                 autoborders: automaticBordering,
                 showProjections,
+                intelligentPolygonCrop,
             });
         }
 

cvat-ui/src/components/header/settings-modal/settings-modal.tsx

@@ -1,17 +1,22 @@
-// Copyright (C) 2020 Intel Corporation
+// Copyright (C) 2020-2021 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 
 import './styles.scss';
-import React from 'react';
+import React, { useEffect } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
 import Tabs from 'antd/lib/tabs';
 import Text from 'antd/lib/typography/Text';
 import Modal from 'antd/lib/modal/Modal';
+import Button from 'antd/lib/button';
+import notification from 'antd/lib/notification';
+import Tooltip from 'antd/lib/tooltip';
 import { PlayCircleOutlined, LaptopOutlined } from '@ant-design/icons';
 
+import { setSettings } from 'actions/settings-actions';
 import WorkspaceSettingsContainer from 'containers/header/settings-modal/workspace-settings';
 import PlayerSettingsContainer from 'containers/header/settings-modal/player-settings';
-import Button from 'antd/lib/button';
+import { CombinedState } from 'reducers/interfaces';
 
 interface SettingsModalProps {
     visible: boolean;
@@ -21,6 +26,44 @@ interface SettingsModalProps {
 const SettingsModal = (props: SettingsModalProps): JSX.Element => {
     const { visible, onClose } = props;
 
+    const settings = useSelector((state: CombinedState) => state.settings);
+    const dispatch = useDispatch();
+
+    const onSaveSettings = (): void => {
+        const settingsForSaving: any = {};
+        for (const [key, value] of Object.entries(settings)) {
+            if (typeof value === 'object') {
+                settingsForSaving[key] = value;
+            }
+        }
+        localStorage.setItem('clientSettings', JSON.stringify(settingsForSaving));
+        notification.success({
+            message: 'Settings was successfully saved',
+        });
+    };
+
+    useEffect(() => {
+        try {
+            const newSettings: any = {};
+            const loadedSettings = JSON.parse(localStorage.getItem('clientSettings') as string);
+            for (const [sectionKey, section] of Object.entries(settings)) {
+                for (const [key, value] of Object.entries(section)) {
+                    let settedValue = value;
+                    if (sectionKey in loadedSettings && key in loadedSettings[sectionKey]) {
+                        settedValue = loadedSettings[sectionKey][key];
+                    }
+                    if (!(sectionKey in newSettings)) newSettings[sectionKey] = {};
+                    newSettings[sectionKey][key] = settedValue;
+                }
+            }
+            dispatch(setSettings(newSettings));
+        } catch {
+            notification.error({
+                message: 'Failed to load settings from local storage',
+            });
+        }
+    }, []);
+
     return (
         <Modal
             title='Settings'
@@ -29,9 +72,16 @@ const SettingsModal = (props: SettingsModalProps): JSX.Element => {
             width={800}
             className='cvat-settings-modal'
             footer={(
-                <Button type='primary' onClick={onClose}>
-                    Close
-                </Button>
+                <>
+                    <Tooltip title='Will save settings from this page and appearance settings on standard workspace page in browser'>
+                        <Button type='primary' onClick={onSaveSettings}>
+                            Save
+                        </Button>
+                    </Tooltip>
+                    <Button type='default' onClick={onClose}>
+                        Close
+                    </Button>
+                </>
             )}
         >
             <div className='cvat-settings-tabs'>

cvat-ui/src/components/header/settings-modal/styles.scss

@@ -25,6 +25,7 @@
 
 .cvat-workspace-settings-auto-save,
 .cvat-workspace-settings-autoborders,
+.cvat-workspace-settings-intelligent-polygon-cropping,
 .cvat-workspace-settings-show-text-always,
 .cvat-workspace-settings-show-interpolated {
     margin-bottom: 25px;