Added fixes from PR cvat-ai#1370 of opencv/cvat

cvat-canvas/src/typescript/canvasModel.ts

@@ -304,6 +304,10 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
     }
 
     public setup(frameData: any, objectStates: any[]): void {
+        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.objects = objectStates;
             this.notify(UpdateReasons.OBJECTS_UPDATED);

cvat-canvas/src/typescript/canvasView.ts

@@ -799,7 +799,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
             const shape = this.svgShapes[this.activeElement.clientID];
 
             if (trackStart === 0) {
-                console.log('not tracking');
+                trackStart = 0
             } else if (trackStart === 1) {
                 // startX = e.clientX
                 // startY = e.clientY
@@ -1202,7 +1202,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
                     (this.svgShapes[clientID] as any).clear();
                     this.svgShapes[clientID].attr('points', stringified);
 
-                    if (state.shapeType === 'points') {
+                    if (state.shapeType === 'points' && !state.hidden) {
                         this.selectize(false, this.svgShapes[clientID]);
                         this.setupPoints(this.svgShapes[clientID] as SVG.PolyLine, state);
                     }
@@ -1350,7 +1350,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
             (shape as any).off('resizestart');
             (shape as any).off('resizing');
             (shape as any).off('resizedone');
-            (shape as any).resize(false);
+            (shape as any).resize('stop');
 
             // TODO: Hide text only if it is hidden by settings
             const text = this.svgTexts[clientID];
@@ -1730,6 +1730,8 @@ export class CanvasViewImpl implements CanvasView, Listener {
         group.on('click.canvas', (event: MouseEvent): void => {
             // Need to redispatch the event on another element
             basicPolyline.fire(new MouseEvent('click', event));
+            // redispatch event to canvas to be able merge points clicking them
+            this.content.dispatchEvent(new MouseEvent('click', event));
         });
 
         group.bbox = basicPolyline.bbox.bind(basicPolyline);

cvat-core/src/annotations-collection.js

@@ -46,22 +46,22 @@
 
         let shapeModel = null;
         switch (type) {
-        case 'rectangle':
-            shapeModel = new RectangleShape(shapeData, clientID, color, injection);
-            break;
-        case 'polygon':
-            shapeModel = new PolygonShape(shapeData, clientID, color, injection);
-            break;
-        case 'polyline':
-            shapeModel = new PolylineShape(shapeData, clientID, color, injection);
-            break;
-        case 'points':
-            shapeModel = new PointsShape(shapeData, clientID, color, injection);
-            break;
-        default:
-            throw new DataError(
-                `An unexpected type of shape "${type}"`,
-            );
+            case 'rectangle':
+                shapeModel = new RectangleShape(shapeData, clientID, color, injection);
+                break;
+            case 'polygon':
+                shapeModel = new PolygonShape(shapeData, clientID, color, injection);
+                break;
+            case 'polyline':
+                shapeModel = new PolylineShape(shapeData, clientID, color, injection);
+                break;
+            case 'points':
+                shapeModel = new PointsShape(shapeData, clientID, color, injection);
+                break;
+            default:
+                throw new DataError(
+                    `An unexpected type of shape "${type}"`,
+                );
         }
 
         return shapeModel;
@@ -75,22 +75,22 @@
 
             let trackModel = null;
             switch (type) {
-            case 'rectangle':
-                trackModel = new RectangleTrack(trackData, clientID, color, injection);
-                break;
-            case 'polygon':
-                trackModel = new PolygonTrack(trackData, clientID, color, injection);
-                break;
-            case 'polyline':
-                trackModel = new PolylineTrack(trackData, clientID, color, injection);
-                break;
-            case 'points':
-                trackModel = new PointsTrack(trackData, clientID, color, injection);
-                break;
-            default:
-                throw new DataError(
-                    `An unexpected type of track "${type}"`,
-                );
+                case 'rectangle':
+                    trackModel = new RectangleTrack(trackData, clientID, color, injection);
+                    break;
+                case 'polygon':
+                    trackModel = new PolygonTrack(trackData, clientID, color, injection);
+                    break;
+                case 'polyline':
+                    trackModel = new PolylineTrack(trackData, clientID, color, injection);
+                    break;
+                case 'points':
+                    trackModel = new PointsTrack(trackData, clientID, color, injection);
+                    break;
+                default:
+                    throw new DataError(
+                        `An unexpected type of track "${type}"`,
+                    );
             }
 
             return trackModel;
@@ -373,7 +373,7 @@
                 } else {
                     throw new ArgumentError(
                         `Trying to merge unknown object type: ${object.constructor.name}. `
-                            + 'Only shapes and tracks are expected.',
+                        + 'Only shapes and tracks are expected.',
                     );
                 }
             }
@@ -737,7 +737,7 @@
                     if (!Object.values(ObjectShape).includes(state.shapeType)) {
                         throw new ArgumentError(
                             'Object shape must be one of: '
-                                + `${JSON.stringify(Object.values(ObjectShape))}`,
+                            + `${JSON.stringify(Object.values(ObjectShape))}`,
                         );
                     }
 
@@ -773,7 +773,7 @@
                     } else {
                         throw new ArgumentError(
                             'Object type must be one of: '
-                                + `${JSON.stringify(Object.values(ObjectType))}`,
+                            + `${JSON.stringify(Object.values(ObjectType))}`,
                         );
                     }
                 }
@@ -871,16 +871,18 @@
                 // In particular consider first and last frame as keyframes for all frames
                 const statesData = [].concat(
                     (frame in this.shapes ? this.shapes[frame] : [])
+                        .filter((shape) => !shape.removed)
                         .map((shape) => shape.get(frame)),
                     (frame in this.tags ? this.tags[frame] : [])
+                        .filter((tag) => !tag.removed)
                         .map((tag) => tag.get(frame)),
                 );
                 const tracks = Object.values(this.tracks)
                     .filter((track) => (
                         frame in track.shapes
                         || frame === frameFrom
                         || frame === frameTo
-                    ));
+                    )).filter((track) => !track.removed);
                 statesData.push(
                     ...tracks.map((track) => track.get(frame))
                         .filter((state) => !state.outside),

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

@@ -36,7 +36,17 @@ export default function AnnotationPageComponent(props: Props): JSX.Element {
 
     useEffect(() => {
         saveLogs();
-        return saveLogs;
+        const root = window.document.getElementById('root');
+        if (root) {
+            root.style.minHeight = '768px';
+        }
+
+        return () => {
+            saveLogs();
+            if (root) {
+                root.style.minHeight = '';
+            }
+        };
     }, []);
 
     if (job === null) {
@@ -63,15 +73,15 @@ export default function AnnotationPageComponent(props: Props): JSX.Element {
             <Layout.Header className='cvat-annotation-header'>
                 <AnnotationTopBarContainer />
             </Layout.Header>
-            { workspace === Workspace.STANDARD ? (
+            {workspace === Workspace.STANDARD ? (
                 <Layout.Content>
                     <StandardWorkspaceComponent />
                 </Layout.Content>
             ) : (
-                <Layout.Content>
-                    <AttributeAnnotationWorkspace />
-                </Layout.Content>
-            )}
+                    <Layout.Content>
+                        <AttributeAnnotationWorkspace />
+                    </Layout.Content>
+                )}
             <StatisticsModalContainer />
         </Layout>
     );

cvat-ui/src/components/create-task-page/styles.scss

@@ -15,7 +15,7 @@
     }
 
     .cvat-create-task-content {
-        margin-top: 20px;
+        padding-top: 20px;
         width: 100%;
         height: auto;
         border: 1px solid $border-color-1;

cvat-ui/src/components/tasks-page/styles.scss

@@ -9,7 +9,7 @@
     height: 100%;
 
     > div:nth-child(1) {
-        margin-bottom: 10px;
+        padding-bottom: 10px;
 
         div > {
             span {
@@ -36,11 +36,11 @@
 
     > div:nth-child(3) {
         height: 83%;
-        margin-top: 10px;
+        padding-top: 10px;
     }
 
     > div:nth-child(4) {
-        margin-top: 10px;
+        padding-top: 10px;
     }
 }
 

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

@@ -7,6 +7,7 @@ import copy from 'copy-to-clipboard';
 import { connect } from 'react-redux';
 
 import { LogType } from 'cvat-logger';
+import { Canvas, isAbleToChangeFrame } from 'cvat-canvas';
 import { ActiveControl, CombinedState, ColorBy } from 'reducers/interfaces';
 import {
     collapseObjectItems,
@@ -24,7 +25,6 @@ import {
 
 import ObjectStateItemComponent from 'components/annotation-page/standard-workspace/objects-side-bar/object-item';
 
-
 interface OwnProps {
     clientID: number;
 }
@@ -44,6 +44,7 @@ interface StateToProps {
     minZLayer: number;
     maxZLayer: number;
     normalizedKeyMap: Record<string, string>;
+    canvasInstance: Canvas;
 }
 
 interface DispatchToProps {
@@ -84,6 +85,7 @@ function mapStateToProps(state: CombinedState, own: OwnProps): StateToProps {
             canvas: {
                 ready,
                 activeControl,
+                instance: canvasInstance,
             },
             colors,
         },
@@ -119,6 +121,7 @@ function mapStateToProps(state: CombinedState, own: OwnProps): StateToProps {
         minZLayer,
         maxZLayer,
         normalizedKeyMap,
+        canvasInstance,
     };
 }
 
@@ -166,71 +169,47 @@ function mapDispatchToProps(dispatch: any): DispatchToProps {
 type Props = StateToProps & DispatchToProps;
 class ObjectItemContainer extends React.PureComponent<Props> {
     private navigateFirstKeyframe = (): void => {
-        const {
-            objectState,
-            changeFrame,
-            frameNumber,
-        } = this.props;
+        const { objectState, frameNumber } = this.props;
 
         const { first } = objectState.keyframes;
         if (first !== frameNumber) {
-            changeFrame(first);
+            this.changeFrame(first);
         }
     };
 
     private navigatePrevKeyframe = (): void => {
-        const {
-            objectState,
-            changeFrame,
-            frameNumber,
-        } = this.props;
+        const { objectState, frameNumber } = this.props;
 
         const { prev } = objectState.keyframes;
         if (prev !== null && prev !== frameNumber) {
-            changeFrame(prev);
+            this.changeFrame(prev);
         }
     };
 
     private navigateNextKeyframe = (): void => {
-        const {
-            objectState,
-            changeFrame,
-            frameNumber,
-        } = this.props;
-
+        const { objectState, frameNumber } = this.props;
         const { next } = objectState.keyframes;
         if (next !== null && next !== frameNumber) {
-            changeFrame(next);
+            this.changeFrame(next);
         }
     };
 
     private navigateLastKeyframe = (): void => {
-        const {
-            objectState,
-            changeFrame,
-            frameNumber,
-        } = this.props;
-
+        const { objectState, frameNumber } = this.props;
         const { last } = objectState.keyframes;
         if (last !== frameNumber) {
-            changeFrame(last);
+            this.changeFrame(last);
         }
     };
 
     private copy = (): void => {
-        const {
-            objectState,
-            copyShape,
-        } = this.props;
+        const { objectState, copyShape } = this.props;
 
         copyShape(objectState);
     };
 
     private propagate = (): void => {
-        const {
-            objectState,
-            propagateObject,
-        } = this.props;
+        const { objectState, propagateObject } = this.props;
 
         propagateObject(objectState);
     };
@@ -422,14 +401,21 @@ class ObjectItemContainer extends React.PureComponent<Props> {
         this.commit();
     };
 
+    private changeFrame(frame: number): void {
+        const { changeFrame, canvasInstance } = this.props;
+        if (isAbleToChangeFrame(canvasInstance)) {
+            changeFrame(frame);
+        }
+    }
+
     // EDITED FOR INTEGRATION
     private autoSnap = (): void => {
         const {
             objectState,
             jobInstance,
             frameNumber,
         } = this.props;
-        
+
         let result = jobInstance.annotations.snap(objectState.serverID, frameNumber, objectState.points);
         result.then((data: any) => {
             objectState.points = data.points;
@@ -544,7 +530,7 @@ class ObjectItemContainer extends React.PureComponent<Props> {
                 collapse={this.collapse}
                 // EDITED FOR INTEGRATION
                 autoSnap={this.autoSnap}
-                // EDITED END
+            // EDITED END
             />
         );
     }