Merge branch 'develop' into dk/project-preformance

cvat-ai · Nov 24, 2021 · d8bde56 · d8bde56
2 parents 7e8fb3a + c6ed6d1
commit d8bde56
Show file tree

Hide file tree

Showing 23 changed files with 147 additions and 40 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add Cityscapes format (<https://github.com/openvinotoolkit/cvat/pull/3758>)
 - Add Open Images V6 format (<https://github.com/openvinotoolkit/cvat/pull/3679>)
 - Rotated bounding boxes (<https://github.com/openvinotoolkit/cvat/pull/3832>)
+- Player option: Smooth image when zoom-in, enabled by default (<https://github.com/openvinotoolkit/cvat/pull/3933>)
 - Add project tasks paginations (<https://github.com/openvinotoolkit/cvat/pull/3910>)
 
 ### Changed
@@ -27,6 +28,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 - Fixed Interaction handler keyboard handlers (<https://github.com/openvinotoolkit/cvat/pull/3881>)
+- Points of invisible shapes are visible in autobordering (<https://github.com/openvinotoolkit/cvat/pull/3931>)
 
 ### Security
 - TDB

diff --git a/README.md b/README.md
@@ -142,6 +142,10 @@ connection with your use of FFmpeg.
 - [Human Protocol](https://hmt.ai) uses CVAT as a way of adding annotation service to the human protocol.
 - [Cogito Tech LLC](https://bit.ly/3klT0h6), a Human-in-the-Loop Workforce Solutions Provider, used CVAT
   in annotation of about 5,000 images for a brand operating in the fashion segment.
+- [FiftyOne](https://fiftyone.ai) is an open-source dataset curation and model analysis
+tool for visualizing, exploring, and improving computer vision datasets and models that is
+[tightly integrated](https://voxel51.com/docs/fiftyone/integrations/cvat.html) with CVAT
+for annotation and label refinement.
 
 ## Questions
 

diff --git a/cvat-canvas/package-lock.json b/cvat-canvas/package-lock.json
diff --git a/cvat-canvas/package.json b/cvat-canvas/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cvat-canvas",
-  "version": "2.9.0",
+  "version": "2.10.0",
   "description": "Part of Computer Vision Annotation Tool which presents its canvas library",
   "main": "src/canvas.ts",
   "scripts": {

diff --git a/cvat-canvas/src/scss/canvas.scss b/cvat-canvas/src/scss/canvas.scss
@@ -229,6 +229,17 @@ polyline.cvat_canvas_shape_splitting {
     }
 }
 
+.cvat_canvas_pixelized {
+    image-rendering: optimizeSpeed;             /* Legal fallback */
+    image-rendering: -moz-crisp-edges;          /* Firefox        */
+    image-rendering: -o-crisp-edges;            /* Opera          */
+    image-rendering: -webkit-optimize-contrast; /* Safari         */
+    image-rendering: optimize-contrast;         /* CSS3 Proposed  */
+    image-rendering: crisp-edges;               /* CSS4 Proposed  */
+    image-rendering: pixelated;                 /* CSS4 Proposed  */
+    -ms-interpolation-mode: nearest-neighbor;   /* IE8+           */
+}
+
 #cvat_canvas_wrapper {
     width: calc(100% - 10px);
     height: calc(100% - 10px);
@@ -273,6 +284,8 @@ polyline.cvat_canvas_shape_splitting {
 }
 
 #cvat_canvas_bitmap {
+    @extend .cvat_canvas_pixelized;
+
     pointer-events: none;
     position: absolute;
     z-index: 4;

diff --git a/cvat-canvas/src/typescript/autoborderHandler.ts b/cvat-canvas/src/typescript/autoborderHandler.ts
@@ -237,7 +237,8 @@ export class AutoborderHandlerImpl implements AutoborderHandler {
 
         const currentClientID = this.currentShape.node.dataset.originClientId;
         const shapes = Array.from(this.frameContent.getElementsByClassName('cvat_canvas_shape')).filter(
-            (shape: HTMLElement): boolean => +shape.getAttribute('clientID') !== this.currentID,
+            (shape: HTMLElement): boolean => +shape.getAttribute('clientID') !== this.currentID &&
+                !shape.classList.contains('cvat_canvas_hidden'),
         );
         const transformedShapes = shapes
             .map((shape: HTMLElement): TransformedShape | null => {

diff --git a/cvat-canvas/src/typescript/canvasModel.ts b/cvat-canvas/src/typescript/canvasModel.ts
@@ -52,6 +52,7 @@ export enum CuboidDrawingMethod {
 }
 
 export interface Configuration {
+    smoothImage?: boolean;
     autoborders?: boolean;
     displayAllText?: boolean;
     undefinedAttrValue?: string;
@@ -652,23 +653,21 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
         if (typeof configuration.autoborders === 'boolean') {
             this.data.configuration.autoborders = configuration.autoborders;
         }
-
+        if (typeof configuration.smoothImage === 'boolean') {
+            this.data.configuration.smoothImage = configuration.smoothImage;
+        }
         if (typeof configuration.undefinedAttrValue === 'string') {
             this.data.configuration.undefinedAttrValue = configuration.undefinedAttrValue;
         }
-
         if (typeof configuration.forceDisableEditing === 'boolean') {
             this.data.configuration.forceDisableEditing = configuration.forceDisableEditing;
         }
-
         if (typeof configuration.intelligentPolygonCrop === 'boolean') {
             this.data.configuration.intelligentPolygonCrop = configuration.intelligentPolygonCrop;
         }
-
         if (typeof configuration.forceFrameUpdate === 'boolean') {
             this.data.configuration.forceFrameUpdate = configuration.forceFrameUpdate;
         }
-
         if (typeof configuration.creationOpacity === 'number') {
             this.data.configuration.creationOpacity = configuration.creationOpacity;
         }

diff --git a/cvat-canvas/src/typescript/canvasView.ts b/cvat-canvas/src/typescript/canvasView.ts
@@ -1169,15 +1169,16 @@ export class CanvasViewImpl implements CanvasView, Listener {
         if (reason === UpdateReasons.CONFIG_UPDATED) {
             const { activeElement } = this;
             this.deactivate();
+            const { configuration } = model;
 
-            if (model.configuration.displayAllText && !this.configuration.displayAllText) {
+            if (configuration.displayAllText && !this.configuration.displayAllText) {
                 for (const i in this.drawnStates) {
                     if (!(i in this.svgTexts)) {
                         this.svgTexts[i] = this.addText(this.drawnStates[i]);
                         this.updateTextPosition(this.svgTexts[i], this.svgShapes[i]);
                     }
                 }
-            } else if (model.configuration.displayAllText === false && this.configuration.displayAllText) {
+            } else if (configuration.displayAllText === false && this.configuration.displayAllText) {
                 for (const i in this.drawnStates) {
                     if (i in this.svgTexts && Number.parseInt(i, 10) !== activeElement.clientID) {
                         this.svgTexts[i].remove();
@@ -1186,7 +1187,15 @@ export class CanvasViewImpl implements CanvasView, Listener {
                 }
             }
 
-            this.configuration = model.configuration;
+            if ('smoothImage' in configuration) {
+                if (configuration.smoothImage) {
+                    this.background.classList.remove('cvat_canvas_pixelized');
+                } else {
+                    this.background.classList.add('cvat_canvas_pixelized');
+                }
+            }
+
+            this.configuration = configuration;
             this.activate(activeElement);
             this.editHandler.configurate(this.configuration);
             this.drawHandler.configurate(this.configuration);

diff --git a/cvat-ui/package-lock.json b/cvat-ui/package-lock.json
diff --git a/cvat-ui/package.json b/cvat-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cvat-ui",
-  "version": "1.26.1",
+  "version": "1.27.1",
   "description": "CVAT single-page application",
   "main": "src/index.tsx",
   "scripts": {

diff --git a/cvat-ui/src/actions/settings-actions.ts b/cvat-ui/src/actions/settings-actions.ts
@@ -22,6 +22,7 @@ export enum SettingsActionTypes {
     CHANGE_FRAME_STEP = 'CHANGE_FRAME_STEP',
     CHANGE_FRAME_SPEED = 'CHANGE_FRAME_SPEED',
     SWITCH_RESET_ZOOM = 'SWITCH_RESET_ZOOM',
+    SWITCH_SMOOTH_IMAGE = 'SWITCH_SMOOTH_IMAGE',
     CHANGE_BRIGHTNESS_LEVEL = 'CHANGE_BRIGHTNESS_LEVEL',
     CHANGE_CONTRAST_LEVEL = 'CHANGE_CONTRAST_LEVEL',
     CHANGE_SATURATION_LEVEL = 'CHANGE_SATURATION_LEVEL',
@@ -166,6 +167,15 @@ export function switchResetZoom(resetZoom: boolean): AnyAction {
     };
 }
 
+export function switchSmoothImage(enabled: boolean): AnyAction {
+    return {
+        type: SettingsActionTypes.SWITCH_SMOOTH_IMAGE,
+        payload: {
+            smoothImage: enabled,
+        },
+    };
+}
+
 export function changeBrightnessLevel(level: number): AnyAction {
     return {
         type: SettingsActionTypes.CHANGE_BRIGHTNESS_LEVEL,

diff --git a/cvat-ui/src/components/annotation-page/canvas/canvas-wrapper.tsx b/cvat-ui/src/components/annotation-page/canvas/canvas-wrapper.tsx
@@ -27,7 +27,7 @@ const MAX_DISTANCE_TO_OPEN_SHAPE = 50;
 
 interface Props {
     sidebarCollapsed: boolean;
-    canvasInstance: Canvas | Canvas3d;
+    canvasInstance: Canvas | Canvas3d | null;
     jobInstance: any;
     activatedStateID: number | null;
     activatedAttributeID: number | null;
@@ -57,6 +57,7 @@ interface Props {
     contrastLevel: number;
     saturationLevel: number;
     resetZoom: boolean;
+    smoothImage: boolean;
     aamZoomMargin: number;
     showObjectsTextAlways: boolean;
     showAllInterpolationTracks: boolean;
@@ -105,6 +106,7 @@ export default class CanvasWrapperComponent extends React.PureComponent<Props> {
             workspace,
             showProjections,
             selectedOpacity,
+            smoothImage,
         } = this.props;
         const { canvasInstance } = this.props as { canvasInstance: Canvas };
 
@@ -114,6 +116,7 @@ export default class CanvasWrapperComponent extends React.PureComponent<Props> {
         wrapper.appendChild(canvasInstance.html());
 
         canvasInstance.configure({
+            smoothImage,
             autoborders: automaticBordering,
             undefinedAttrValue: consts.UNDEFINED_ATTRIBUTE_VALUE,
             displayAllText: showObjectsTextAlways,
@@ -144,6 +147,7 @@ export default class CanvasWrapperComponent extends React.PureComponent<Props> {
             activatedStateID,
             curZLayer,
             resetZoom,
+            smoothImage,
             grid,
             gridSize,
             gridOpacity,
@@ -167,7 +171,8 @@ export default class CanvasWrapperComponent extends React.PureComponent<Props> {
             prevProps.automaticBordering !== automaticBordering ||
             prevProps.showProjections !== showProjections ||
             prevProps.intelligentPolygonCrop !== intelligentPolygonCrop ||
-            prevProps.selectedOpacity !== selectedOpacity
+            prevProps.selectedOpacity !== selectedOpacity ||
+            prevProps.smoothImage !== smoothImage
         ) {
             canvasInstance.configure({
                 undefinedAttrValue: consts.UNDEFINED_ATTRIBUTE_VALUE,
@@ -176,6 +181,7 @@ export default class CanvasWrapperComponent extends React.PureComponent<Props> {
                 showProjections,
                 intelligentPolygonCrop,
                 creationOpacity: selectedOpacity,
+                smoothImage,
             });
         }
 
@@ -418,7 +424,9 @@ export default class CanvasWrapperComponent extends React.PureComponent<Props> {
 
     private fitCanvas = (): void => {
         const { canvasInstance } = this.props;
-        canvasInstance.fitCanvas();
+        if (canvasInstance) {
+            canvasInstance.fitCanvas();
+        }
     };
 
     private onCanvasMouseDown = (e: MouseEvent): void => {
@@ -677,7 +685,7 @@ export default class CanvasWrapperComponent extends React.PureComponent<Props> {
             curZLayer, annotations, frameData, canvasInstance,
         } = this.props;
 
-        if (frameData !== null) {
+        if (frameData !== null && canvasInstance) {
             canvasInstance.setup(
                 frameData,
                 annotations.filter((e) => e.objectType !== ObjectType.TAG),

diff --git a/cvat-ui/src/components/header/settings-modal/player-settings.tsx b/cvat-ui/src/components/header/settings-modal/player-settings.tsx
@@ -24,12 +24,14 @@ interface Props {
     frameSpeed: FrameSpeed;
     resetZoom: boolean;
     rotateAll: boolean;
+    smoothImage: boolean;
     canvasBackgroundColor: string;
     onChangeFrameStep(step: number): void;
     onChangeFrameSpeed(speed: FrameSpeed): void;
     onSwitchResetZoom(enabled: boolean): void;
     onSwitchRotateAll(rotateAll: boolean): void;
     onChangeCanvasBackgroundColor(color: string): void;
+    onSwitchSmoothImage(enabled: boolean): void;
 }
 
 export default function PlayerSettingsComponent(props: Props): JSX.Element {
@@ -38,11 +40,13 @@ export default function PlayerSettingsComponent(props: Props): JSX.Element {
         frameSpeed,
         resetZoom,
         rotateAll,
+        smoothImage,
         canvasBackgroundColor,
         onChangeFrameStep,
         onChangeFrameSpeed,
         onSwitchResetZoom,
         onSwitchRotateAll,
+        onSwitchSmoothImage,
         onChangeCanvasBackgroundColor,
     } = props;
 
@@ -176,6 +180,26 @@ export default function PlayerSettingsComponent(props: Props): JSX.Element {
                     </Row>
                 </Col>
             </Row>
+            <Row justify='start'>
+                <Col span={7}>
+                    <Row className='cvat-player-settings-smooth-image'>
+                        <Col span={24} className='cvat-player-settings-smooth-image-checkbox'>
+                            <Checkbox
+                                className='cvat-text-color'
+                                checked={smoothImage}
+                                onChange={(event: CheckboxChangeEvent): void => {
+                                    onSwitchSmoothImage(event.target.checked);
+                                }}
+                            >
+                                Smooth image
+                            </Checkbox>
+                        </Col>
+                        <Col span={24}>
+                            <Text type='secondary'> Smooth image when zoom-in it </Text>
+                        </Col>
+                    </Row>
+                </Col>
+            </Row>
         </div>
     );
 }
diff --git a/cvat-ui/src/containers/annotation-page/canvas/canvas-wrapper.tsx b/cvat-ui/src/containers/annotation-page/canvas/canvas-wrapper.tsx
@@ -53,7 +53,7 @@ import { Canvas3d } from 'cvat-canvas3d-wrapper';
 
 interface StateToProps {
     sidebarCollapsed: boolean;
-    canvasInstance: Canvas | Canvas3d;
+    canvasInstance: Canvas | Canvas3d | null;
     jobInstance: any;
     activatedStateID: number | null;
     activatedAttributeID: number | null;
@@ -80,6 +80,7 @@ interface StateToProps {
     contrastLevel: number;
     saturationLevel: number;
     resetZoom: boolean;
+    smoothImage: boolean;
     aamZoomMargin: number;
     showObjectsTextAlways: boolean;
     showAllInterpolationTracks: boolean;
@@ -155,6 +156,7 @@ function mapStateToProps(state: CombinedState): StateToProps {
                 contrastLevel,
                 saturationLevel,
                 resetZoom,
+                smoothImage,
             },
             workspace: {
                 aamZoomMargin,
@@ -201,6 +203,7 @@ function mapStateToProps(state: CombinedState): StateToProps {
         contrastLevel: contrastLevel / 100,
         saturationLevel: saturationLevel / 100,
         resetZoom,
+        smoothImage,
         aamZoomMargin,
         showObjectsTextAlways,
         showAllInterpolationTracks,