[CVAT-UI] Critical fixes

cvat-canvas/package.json

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

cvat-canvas/src/typescript/canvas.ts

@@ -36,8 +36,7 @@ const CanvasVersion = pjson.version;
 
 interface Canvas {
     html(): HTMLDivElement;
-    setZLayer(zLayer: number | null): void;
-    setup(frameData: any, objectStates: any[]): void;
+    setup(frameData: any, objectStates: any[], zLayer?: number): void;
     activate(clientID: number | null, attributeID?: number): void;
     rotate(rotationAngle: number): void;
     focus(clientID: number, padding?: number): void;
@@ -76,12 +75,8 @@ class CanvasImpl implements Canvas {
         return this.view.html();
     }
 
-    public setZLayer(zLayer: number | null): void {
-        this.model.setZLayer(zLayer);
-    }
-
-    public setup(frameData: any, objectStates: any[]): void {
-        this.model.setup(frameData, objectStates);
+    public setup(frameData: any, objectStates: any[], zLayer = 0): void {
+        this.model.setup(frameData, objectStates, zLayer);
     }
 
     public fitCanvas(): void {

cvat-canvas/src/typescript/canvasModel.ts

@@ -98,7 +98,6 @@ export enum UpdateReasons {
     IMAGE_FITTED = 'image_fitted',
     IMAGE_MOVED = 'image_moved',
     GRID_UPDATED = 'grid_updated',
-    SET_Z_LAYER = 'set_z_layer',
 
     OBJECTS_UPDATED = 'objects_updated',
     SHAPE_ACTIVATED = 'shape_activated',
@@ -148,11 +147,10 @@ export interface CanvasModel {
     geometry: Geometry;
     mode: Mode;
 
-    setZLayer(zLayer: number | null): void;
     zoom(x: number, y: number, direction: number): void;
     move(topOffset: number, leftOffset: number): void;
 
-    setup(frameData: any, objectStates: any[]): void;
+    setup(frameData: any, objectStates: any[], zLayer: number): void;
     activate(clientID: number | null, attributeID: number | null): void;
     rotate(rotationAngle: number): void;
     focus(clientID: number, padding: number): void;
@@ -258,11 +256,6 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
         };
     }
 
-    public setZLayer(zLayer: number | null): void {
-        this.data.zLayer = zLayer;
-        this.notify(UpdateReasons.SET_Z_LAYER);
-    }
-
     public zoom(x: number, y: number, direction: number): void {
         const oldScale: number = this.data.scale;
         const newScale: number = direction > 0 ? oldScale * 6 / 5 : oldScale * 5 / 6;
@@ -337,14 +330,15 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
         this.notify(UpdateReasons.ZOOM_CANVAS);
     }
 
-    public setup(frameData: any, objectStates: any[]): void {
+    public setup(frameData: any, objectStates: any[], zLayer: number): void {
         if (this.data.imageID !== frameData.number) {
             if ([Mode.EDIT, Mode.DRAG, Mode.RESIZE].includes(this.data.mode)) {
                 throw Error(`Canvas is busy. Action: ${this.data.mode}`);
             }
         }
 
         if (frameData.number === this.data.imageID) {
+            this.data.zLayer = zLayer;
             this.data.objects = objectStates;
             this.notify(UpdateReasons.OBJECTS_UPDATED);
             return;
@@ -369,6 +363,7 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
 
             this.data.image = data;
             this.notify(UpdateReasons.IMAGE_CHANGED);
+            this.data.zLayer = zLayer;
             this.data.objects = objectStates;
             this.notify(UpdateReasons.OBJECTS_UPDATED);
         }).catch((exception: any): void => {
@@ -388,9 +383,9 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
         }
 
         if (typeof (clientID) === 'number') {
-            const [state] = this.data.objects
+            const [state] = this.objects
                 .filter((_state: any): boolean => _state.clientID === clientID);
-            if (!['rectangle', 'polygon', 'polyline', 'points', 'cuboid'].includes(state.shapeType)) {
+            if (!state || state.objectType === 'tag') {
                 return;
             }
         }

cvat-canvas/src/typescript/canvasView.ts

@@ -991,7 +991,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
             }
         } else if (reason === UpdateReasons.IMAGE_MOVED) {
             this.moveCanvas();
-        } else if ([UpdateReasons.OBJECTS_UPDATED, UpdateReasons.SET_Z_LAYER].includes(reason)) {
+        } else if ([UpdateReasons.OBJECTS_UPDATED].includes(reason)) {
             if (this.mode === Mode.GROUP) {
                 this.groupHandler.resetSelectedObjects();
             }
@@ -1128,7 +1128,6 @@ export class CanvasViewImpl implements CanvasView, Listener {
         if (model.imageBitmap
             && [UpdateReasons.IMAGE_CHANGED,
                 UpdateReasons.OBJECTS_UPDATED,
-                UpdateReasons.SET_Z_LAYER,
             ].includes(reason)
         ) {
             this.redrawBitmap();

cvat-canvas/src/typescript/groupHandler.ts

@@ -95,7 +95,9 @@ export class GroupHandlerImpl implements GroupHandler {
             this.selectionRect = null;
 
             const box = this.getSelectionBox(event);
-            const shapes = (this.canvas.select('.cvat_canvas_shape') as any).members;
+            const shapes = (this.canvas.select('.cvat_canvas_shape') as any).members.filter(
+                (shape: SVG.Shape): boolean => !shape.hasClass('cvat_canvas_hidden'),
+            );
             for (const shape of shapes) {
                 // TODO: Doesn't work properly for groups
                 const bbox = shape.bbox();

cvat-ui/package.json

@@ -1,11 +1,11 @@
 {
   "name": "cvat-ui",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "description": "CVAT single-page application",
   "main": "src/index.tsx",
   "scripts": {
     "build": "webpack --config ./webpack.config.js",
-    "start": "REACT_APP_API_URL=http://localhost:7000 webpack-dev-server --config ./webpack.config.js --mode=development",
+    "start": "REACT_APP_API_URL=http://192.168.0.12:7000 webpack-dev-server --config ./webpack.config.js --mode=development",
     "type-check": "tsc --noEmit",
     "type-check:watch": "npm run type-check -- --watch",
     "lint": "eslint './src/**/*.{ts,tsx}'",

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

@@ -4,6 +4,7 @@
 
 import './styles.scss';
 import React, { useEffect } from 'react';
+import { useHistory } from 'react-router';
 import Layout from 'antd/lib/layout';
 import Spin from 'antd/lib/spin';
 import Result from 'antd/lib/result';
@@ -20,6 +21,7 @@ interface Props {
     fetching: boolean;
     getJob(): void;
     saveLogs(): void;
+    closeJob(): void;
     workspace: Workspace;
 }
 
@@ -28,10 +30,12 @@ export default function AnnotationPageComponent(props: Props): JSX.Element {
         job,
         fetching,
         getJob,
+        closeJob,
         saveLogs,
         workspace,
     } = props;
 
+    const history = useHistory();
     useEffect(() => {
         saveLogs();
         const root = window.document.getElementById('root');
@@ -44,6 +48,10 @@ export default function AnnotationPageComponent(props: Props): JSX.Element {
             if (root) {
                 root.style.minHeight = '';
             }
+
+            if (!history.location.pathname.includes('/jobs')) {
+                closeJob();
+            }
         };
     }, []);
 

cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-annotation-sidebar.tsx

@@ -40,6 +40,7 @@ interface StateToProps {
     normalizedKeyMap: Record<string, string>;
     canvasInstance: Canvas;
     canvasIsReady: boolean;
+    curZLayer: number;
 }
 
 interface DispatchToProps {
@@ -59,6 +60,9 @@ function mapStateToProps(state: CombinedState): StateToProps {
                 activatedStateID,
                 activatedAttributeID,
                 states,
+                zLayer: {
+                    cur,
+                },
             },
             job: {
                 instance: jobInstance,
@@ -85,6 +89,7 @@ function mapStateToProps(state: CombinedState): StateToProps {
         normalizedKeyMap,
         canvasInstance,
         canvasIsReady,
+        curZLayer: cur,
     };
 }
 
@@ -116,9 +121,12 @@ function AttributeAnnotationSidebar(props: StateToProps & DispatchToProps): JSX.
         normalizedKeyMap,
         canvasInstance,
         canvasIsReady,
+        curZLayer,
     } = props;
 
-    const filteredStates = states.filter((state) => !state.outside && !state.hidden);
+    const filteredStates = states.filter((state) => !state.outside
+        && !state.hidden
+        && state.zOrder <= curZLayer);
     const [labelAttrMap, setLabelAttrMap] = useState(
         labels.reduce((acc, label): LabelAttrMap => {
             acc[label.id] = label.attributes.length ? label.attributes[0] : null;

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

@@ -102,7 +102,6 @@ export default class CanvasWrapperComponent extends React.PureComponent<Props> {
             automaticBordering,
             showObjectsTextAlways,
             canvasInstance,
-            curZLayer,
         } = this.props;
 
         // It's awful approach from the point of view React
@@ -116,7 +115,6 @@ export default class CanvasWrapperComponent extends React.PureComponent<Props> {
             undefinedAttrValue: consts.UNDEFINED_ATTRIBUTE_VALUE,
             displayAllText: showObjectsTextAlways,
         });
-        canvasInstance.setZLayer(curZLayer);
 
         this.initialSetup();
         this.updateCanvas();
@@ -217,17 +215,15 @@ export default class CanvasWrapperComponent extends React.PureComponent<Props> {
             }
         }
 
-        if (prevProps.curZLayer !== curZLayer) {
-            canvasInstance.setZLayer(curZLayer);
-        }
-
-        if (prevProps.annotations !== annotations || prevProps.frameData !== frameData) {
+        if (prevProps.annotations !== annotations
+            || prevProps.frameData !== frameData
+            || prevProps.curZLayer !== curZLayer) {
             this.updateCanvas();
         }
 
         if (prevProps.frame !== frameData.number
-            && ((resetZoom && workspace !== Workspace.ATTRIBUTE_ANNOTATION) ||
-            workspace === Workspace.TAG_ANNOTATION)
+            && ((resetZoom && workspace !== Workspace.ATTRIBUTE_ANNOTATION)
+            || workspace === Workspace.TAG_ANNOTATION)
         ) {
             canvasInstance.html().addEventListener('canvas.setup', () => {
                 canvasInstance.fit();
@@ -636,14 +632,15 @@ export default class CanvasWrapperComponent extends React.PureComponent<Props> {
 
     private updateCanvas(): void {
         const {
+            curZLayer,
             annotations,
             frameData,
             canvasInstance,
         } = this.props;
 
         if (frameData !== null) {
             canvasInstance.setup(frameData, annotations
-                .filter((e) => e.objectType !== ObjectType.TAG));
+                .filter((e) => e.objectType !== ObjectType.TAG), curZLayer);
         }
     }
 

cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item-attribute.tsx

@@ -164,7 +164,7 @@ function ItemAttributeComponent(props: Props): JSX.Element {
                     onChange={(event: React.ChangeEvent<HTMLInputElement>): void => {
                         changeAttribute(attrID, event.target.value);
                     }}
-                    value={attrValue}
+                    defaultValue={attrValue}
                     className='cvat-object-item-text-attribute'
                 />
             </Col>

cvat-ui/src/containers/annotation-page/annotation-page.tsx

@@ -7,7 +7,7 @@ import { withRouter } from 'react-router-dom';
 import { RouteComponentProps } from 'react-router';
 
 import AnnotationPageComponent from 'components/annotation-page/annotation-page';
-import { getJobAsync, saveLogsAsync } from 'actions/annotation-actions';
+import { getJobAsync, saveLogsAsync, closeJob as closeJobAction } from 'actions/annotation-actions';
 
 import { CombinedState, Workspace } from 'reducers/interfaces';
 
@@ -25,6 +25,7 @@ interface StateToProps {
 interface DispatchToProps {
     getJob(): void;
     saveLogs(): void;
+    closeJob(): void;
 }
 
 function mapStateToProps(state: CombinedState, own: OwnProps): StateToProps {
@@ -83,6 +84,9 @@ function mapDispatchToProps(dispatch: any, own: OwnProps): DispatchToProps {
         saveLogs(): void {
             dispatch(saveLogsAsync());
         },
+        closeJob(): void {
+            dispatch(closeJobAction());
+        },
     };
 }
 

cvat-ui/src/containers/annotation-page/top-bar/top-bar.tsx

@@ -22,7 +22,6 @@ import {
     searchAnnotationsAsync,
     changeWorkspace as changeWorkspaceAction,
     activateObject,
-    closeJob as closeJobAction,
 } from 'actions/annotation-actions';
 import { Canvas } from 'cvat-canvas-wrapper';
 
@@ -59,7 +58,6 @@ interface DispatchToProps {
     redo(sessionInstance: any, frameNumber: any): void;
     searchAnnotations(sessionInstance: any, frameFrom: any, frameTo: any): void;
     changeWorkspace(workspace: Workspace): void;
-    closeJob(): void;
 }
 
 function mapStateToProps(state: CombinedState): StateToProps {
@@ -155,9 +153,6 @@ function mapDispatchToProps(dispatch: any): DispatchToProps {
             dispatch(activateObject(null, null));
             dispatch(changeWorkspaceAction(workspace));
         },
-        closeJob(): void {
-            dispatch(closeJobAction());
-        },
     };
 }
 
@@ -246,11 +241,9 @@ class AnnotationTopBarContainer extends React.PureComponent<Props> {
     }
 
     public componentWillUnmount(): void {
-        const { closeJob } = this.props;
         window.clearInterval(this.autoSaveInterval);
         window.removeEventListener('beforeunload', this.beforeUnloadCallback);
         this.unblock();
-        closeJob();
     }
 
     private undo = (): void => {

cvat-ui/src/utils/redux.ts

@@ -20,7 +20,7 @@ export function createAction<T extends string, P>(
 
 export type ActionUnion<A extends ActionCreatorsMapObject> = ReturnType<A[keyof A]>;
 
-export type ThunkAction<R = void, A extends Action = AnyAction>
+export type ThunkAction<R = {}, A extends Action = AnyAction>
     = _ThunkAction<R, CombinedState, {}, A>;
 
 export type ThunkDispatch<E = {}, A extends Action = AnyAction>