Do not block canvas navigation when frame is being fetched (cvat-ai#8284)

bsekachev · web-flow · commit 26f1f7887747 · 2024-08-09T14:44:10.000+03:00
diff --git a/changelog.d/20240809_110106_boris_do_not_block_canvas.md b/changelog.d/20240809_110106_boris_do_not_block_canvas.md
@@ -0,0 +1,4 @@
+### Changed
+
+- Player navigation not blocked anymore if a frame is being loaded from the server
+  (<https://github.com/cvat-ai/cvat/pull/8284>)
diff --git a/cvat-canvas/package.json b/cvat-canvas/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cvat-canvas",
-  "version": "2.20.6",
+  "version": "2.20.7",
   "type": "module",
   "description": "Part of Computer Vision Annotation Tool which presents its canvas library",
   "main": "src/canvas.ts",
diff --git a/cvat-canvas/src/typescript/canvasModel.ts b/cvat-canvas/src/typescript/canvasModel.ts
@@ -549,14 +549,24 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
         ) {
             this.data.zLayer = zLayer;
             this.data.objects = objectStates;
-            this.notify(UpdateReasons.OBJECTS_UPDATED);
+            if (this.data.image) {
+                // display objects only if there is a drawn image
+                // if there is not, UpdateReasons.OBJECTS_UPDATED will be triggered after image is set
+                // it covers cases when annotations are changed while image is being received from the server
+                // e.g. with UI buttons (lock, unlock), shortcuts, delete/restore frames,
+                // and anytime when a list of objects updated in cvat-ui
+                this.notify(UpdateReasons.OBJECTS_UPDATED);
+            }
             return;
         }
 
         this.data.imageID = frameData.number;
+        this.data.imageIsDeleted = frameData.deleted;
+        if (this.data.imageIsDeleted) {
+            this.data.angle = 0;
+        }
 
         const { zLayer: prevZLayer, objects: prevObjects } = this.data;
-
         frameData
             .data((): void => {
                 this.data.image = null;
@@ -580,11 +590,6 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
                 };
 
                 this.data.image = data;
-                this.data.imageIsDeleted = frameData.deleted;
-                if (this.data.imageIsDeleted) {
-                    this.data.angle = 0;
-                }
-
                 this.fit();
 
                 // restore correct image position after switching to a new frame
diff --git a/cvat-canvas/src/typescript/canvasView.ts b/cvat-canvas/src/typescript/canvasView.ts
@@ -62,6 +62,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
     private controller: CanvasController;
     private svgShapes: Record<number, SVG.Shape>;
     private svgTexts: Record<number, SVG.Text>;
+    private isImageLoading: boolean;
     private issueRegionPattern_1: SVG.Pattern;
     private issueRegionPattern_2: SVG.Pattern;
     private drawnStates: Record<number, DrawnState>;
@@ -1437,6 +1438,8 @@ export class CanvasViewImpl implements CanvasView, Listener {
             editHidden: {},
             sliceHidden: {},
         };
+
+        this.isImageLoading = true;
         this.draggableShape = null;
         this.resizableShape = null;
 
@@ -1643,19 +1646,21 @@ export class CanvasViewImpl implements CanvasView, Listener {
             if (this.mode !== Mode.IDLE) return;
             if (e.ctrlKey || e.altKey) return;
 
-            const { offset } = this.controller.geometry;
-            const [x, y] = translateToSVG(this.content, [e.clientX, e.clientY]);
-            const event: CustomEvent = new CustomEvent('canvas.moved', {
-                bubbles: false,
-                cancelable: true,
-                detail: {
-                    x: x - offset,
-                    y: y - offset,
-                    states: this.controller.objects,
-                },
-            });
+            if (!this.isImageLoading) {
+                const { offset } = this.controller.geometry;
+                const [x, y] = translateToSVG(this.content, [e.clientX, e.clientY]);
+                const event: CustomEvent = new CustomEvent('canvas.moved', {
+                    bubbles: false,
+                    cancelable: true,
+                    detail: {
+                        x: x - offset,
+                        y: y - offset,
+                        states: this.controller.objects,
+                    },
+                });
 
-            this.canvas.dispatchEvent(event);
+                this.canvas.dispatchEvent(event);
+            }
         });
 
         this.content.oncontextmenu = (): boolean => false;
@@ -1787,6 +1792,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
         } else if (reason === UpdateReasons.IMAGE_CHANGED) {
             const { image } = model;
             if (image) {
+                this.isImageLoading = false;
                 const ctx = this.background.getContext('2d');
                 this.background.setAttribute('width', `${image.renderWidth}px`);
                 this.background.setAttribute('height', `${image.renderHeight}px`);
@@ -1819,6 +1825,8 @@ export class CanvasViewImpl implements CanvasView, Listener {
                 this.moveCanvas();
                 this.resizeCanvas();
                 this.transformCanvas();
+            } else {
+                this.isImageLoading = true;
             }
         } else if (reason === UpdateReasons.FITTED_CANVAS) {
             // Canvas geometry is going to be changed. Old object positions aren't valid any more
diff --git a/cvat-ui/package.json b/cvat-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cvat-ui",
-  "version": "1.64.3",
+  "version": "1.64.4",
   "description": "CVAT single-page application",
   "main": "src/index.tsx",
   "scripts": {
diff --git a/cvat-ui/src/components/annotation-page/canvas/views/canvas2d/canvas-wrapper.tsx b/cvat-ui/src/components/annotation-page/canvas/views/canvas2d/canvas-wrapper.tsx
@@ -926,7 +926,7 @@ class CanvasWrapperComponent extends React.PureComponent<Props> {
 
         if (activatedStateID !== null) {
             const [activatedState] = annotations.filter((state: any): boolean => state.clientID === activatedStateID);
-            if (workspace === Workspace.ATTRIBUTES) {
+            if (activatedState && workspace === Workspace.ATTRIBUTES) {
                 if (activatedState.objectType !== ObjectType.TAG) {
                     canvasInstance.focus(activatedStateID, aamZoomMargin);
                 } else {
@@ -959,8 +959,8 @@ class CanvasWrapperComponent extends React.PureComponent<Props> {
             const proxy = new Proxy(frameData, {
                 get: (_frameData, prop, receiver) => {
                     if (prop === 'data') {
-                        return async () => {
-                            const originalImage = await _frameData.data();
+                        return async (...args: any[]) => {
+                            const originalImage = await _frameData.data(...args);
                             const imageIsNotProcessed = imageFilters.some((imageFilter: ImageFilter) => (
                                 imageFilter.modifier.currentProcessedImage !== frame
                             ));
diff --git a/cvat-ui/src/containers/annotation-page/top-bar/top-bar.tsx b/cvat-ui/src/containers/annotation-page/top-bar/top-bar.tsx
@@ -295,17 +295,17 @@ class AnnotationTopBarContainer extends React.PureComponent<Props> {
     }
 
     private undo = (): void => {
-        const { undo, canvasIsReady, undoAction } = this.props;
+        const { undo, undoAction } = this.props;
 
-        if (isAbleToChangeFrame() && canvasIsReady && undoAction) {
+        if (isAbleToChangeFrame() && undoAction) {
             undo();
         }
     };
 
     private redo = (): void => {
-        const { redo, canvasIsReady, redoAction } = this.props;
+        const { redo, redoAction } = this.props;
 
-        if (isAbleToChangeFrame() && canvasIsReady && redoAction) {
+        if (isAbleToChangeFrame() && redoAction) {
             redo();
         }
     };
@@ -335,12 +335,12 @@ class AnnotationTopBarContainer extends React.PureComponent<Props> {
     private onFirstFrame = async (): Promise<void> => {
         const {
             frameNumber, jobInstance, playing,
-            onSwitchPlay, showDeletedFrames, canvasIsReady,
+            onSwitchPlay, showDeletedFrames,
         } = this.props;
 
         const newFrame =
             await jobInstance.frames.search({ notDeleted: !showDeletedFrames }, jobInstance.startFrame, frameNumber);
-        if (newFrame !== frameNumber && newFrame !== null && canvasIsReady) {
+        if (newFrame !== frameNumber && newFrame !== null) {
             if (playing) {
                 onSwitchPlay(false);
             }
@@ -351,7 +351,7 @@ class AnnotationTopBarContainer extends React.PureComponent<Props> {
     private onBackward = async (): Promise<void> => {
         const {
             frameNumber, frameStep, jobInstance, playing,
-            onSwitchPlay, showDeletedFrames, canvasIsReady,
+            onSwitchPlay, showDeletedFrames,
         } = this.props;
 
         const newFrame = await jobInstance.frames.search(
@@ -360,7 +360,7 @@ class AnnotationTopBarContainer extends React.PureComponent<Props> {
             jobInstance.startFrame,
         );
 
-        if (newFrame !== frameNumber && newFrame !== null && canvasIsReady) {
+        if (newFrame !== frameNumber && newFrame !== null) {
             if (playing) {
                 onSwitchPlay(false);
             }
@@ -371,7 +371,7 @@ class AnnotationTopBarContainer extends React.PureComponent<Props> {
     private onPrevFrame = async (): Promise<void> => {
         const {
             frameNumber, jobInstance, playing, searchAnnotations,
-            onSwitchPlay, showDeletedFrames, canvasIsReady, navigationType,
+            onSwitchPlay, showDeletedFrames, navigationType,
         } = this.props;
         const { startFrame } = jobInstance;
 
@@ -382,7 +382,7 @@ class AnnotationTopBarContainer extends React.PureComponent<Props> {
             jobInstance.startFrame,
         );
 
-        if (newFrame !== frameNumber && newFrame !== null && canvasIsReady && isAbleToChangeFrame()) {
+        if (newFrame !== frameNumber && newFrame !== null && isAbleToChangeFrame()) {
             if (playing) {
                 onSwitchPlay(false);
             }
@@ -400,7 +400,7 @@ class AnnotationTopBarContainer extends React.PureComponent<Props> {
     private onNextFrame = async (): Promise<void> => {
         const {
             frameNumber, jobInstance, playing, searchAnnotations,
-            onSwitchPlay, showDeletedFrames, canvasIsReady, navigationType,
+            onSwitchPlay, showDeletedFrames, navigationType,
         } = this.props;
         const { stopFrame } = jobInstance;
 
@@ -410,7 +410,7 @@ class AnnotationTopBarContainer extends React.PureComponent<Props> {
             frameFrom,
             jobInstance.stopFrame,
         );
-        if (newFrame !== frameNumber && newFrame !== null && canvasIsReady && isAbleToChangeFrame()) {
+        if (newFrame !== frameNumber && newFrame !== null && isAbleToChangeFrame()) {
             if (playing) {
                 onSwitchPlay(false);
             }
@@ -428,7 +428,7 @@ class AnnotationTopBarContainer extends React.PureComponent<Props> {
     private onForward = async (): Promise<void> => {
         const {
             frameNumber, frameStep, jobInstance, playing,
-            onSwitchPlay, showDeletedFrames, canvasIsReady,
+            onSwitchPlay, showDeletedFrames,
         } = this.props;
 
         const newFrame = await jobInstance.frames.search(
@@ -437,7 +437,7 @@ class AnnotationTopBarContainer extends React.PureComponent<Props> {
             jobInstance.stopFrame,
         );
 
-        if (newFrame !== frameNumber && newFrame !== null && canvasIsReady) {
+        if (newFrame !== frameNumber && newFrame !== null) {
             if (playing) {
                 onSwitchPlay(false);
             }
@@ -448,12 +448,12 @@ class AnnotationTopBarContainer extends React.PureComponent<Props> {
     private onLastFrame = async (): Promise<void> => {
         const {
             frameNumber, jobInstance, playing,
-            onSwitchPlay, showDeletedFrames, canvasIsReady,
+            onSwitchPlay, showDeletedFrames,
         } = this.props;
 
         const newFrame =
             await jobInstance.frames.search({ notDeleted: !showDeletedFrames }, jobInstance.stopFrame, frameNumber);
-        if (newFrame !== frameNumber && frameNumber !== null && canvasIsReady) {
+        if (newFrame !== frameNumber && newFrame !== null) {
             if (playing) {
                 onSwitchPlay(false);
             }
@@ -463,12 +463,11 @@ class AnnotationTopBarContainer extends React.PureComponent<Props> {
 
     private searchAnnotations = (direction: 'forward' | 'backward'): void => {
         const {
-            frameNumber, jobInstance,
-            canvasIsReady, searchAnnotations,
+            frameNumber, jobInstance, searchAnnotations,
         } = this.props;
         const { startFrame, stopFrame } = jobInstance;
 
-        if (isAbleToChangeFrame() && canvasIsReady) {
+        if (isAbleToChangeFrame()) {
             if (direction === 'forward' && frameNumber + 1 <= stopFrame) {
                 searchAnnotations(jobInstance, frameNumber + 1, stopFrame);
             } else if (direction === 'backward' && frameNumber - 1 >= startFrame) {
@@ -557,9 +556,11 @@ class AnnotationTopBarContainer extends React.PureComponent<Props> {
 
     private onDeleteFrame = (): void => {
         const {
-            deleteFrame, frameNumber, jobInstance, canvasIsReady,
+            deleteFrame, frameNumber, jobInstance,
         } = this.props;
-        if (canvasIsReady && jobInstance.type !== JobType.GROUND_TRUTH) deleteFrame(frameNumber);
+        if (jobInstance.type !== JobType.GROUND_TRUTH) {
+            deleteFrame(frameNumber);
+        }
     };
 
     private onRestoreFrame = (): void => {
diff --git a/cvat-ui/src/reducers/annotation-reducer.ts b/cvat-ui/src/reducers/annotation-reducer.ts
@@ -587,15 +587,17 @@ export default (state = defaultState, action: AnyAction): AnnotationState => {
         }
         case AnnotationActionTypes.ACTIVATE_OBJECT: {
             const { activatedStateID, activatedElementID, activatedAttributeID } = action.payload;
-
             const {
                 canvas: { activeControl, instance },
-                annotations: { highlightedConflict },
+                annotations: { highlightedConflict, states },
             } = state;
 
-            if (activeControl !== ActiveControl.CURSOR ||
-                (instance as Canvas | Canvas3d).mode() !== CanvasMode.IDLE ||
-                highlightedConflict) {
+            const objectDoesNotExist = activatedStateID !== null &&
+                !states.some((_state) => _state.clientID === activatedStateID);
+            const canvasIsNotReady = (instance as Canvas | Canvas3d)
+                .mode() !== CanvasMode.IDLE || activeControl !== ActiveControl.CURSOR;
+
+            if (objectDoesNotExist || canvasIsNotReady || highlightedConflict) {
                 return state;
             }
 
@@ -1008,56 +1010,19 @@ export default (state = defaultState, action: AnyAction): AnnotationState => {
                 },
             };
         }
-        case AnnotationActionTypes.DELETE_FRAME:
-        case AnnotationActionTypes.RESTORE_FRAME: {
-            return {
-                ...state,
-                player: {
-                    ...state.player,
-                    frame: {
-                        ...state.player.frame,
-                        fetching: true,
-                    },
-                },
-                canvas: {
-                    ...state.canvas,
-                    ready: false,
-                },
-            };
-        }
-        case AnnotationActionTypes.DELETE_FRAME_FAILED:
-        case AnnotationActionTypes.RESTORE_FRAME_FAILED: {
-            return {
-                ...state,
-                player: {
-                    ...state.player,
-                    frame: {
-                        ...state.player.frame,
-                        fetching: false,
-                    },
-                },
-                canvas: {
-                    ...state.canvas,
-                    ready: true,
-                },
-            };
-        }
         case AnnotationActionTypes.DELETE_FRAME_SUCCESS:
         case AnnotationActionTypes.RESTORE_FRAME_SUCCESS: {
+            const { data } = action.payload;
+
             return {
                 ...state,
                 player: {
                     ...state.player,
                     frame: {
                         ...state.player.frame,
-                        data: action.payload.data,
-                        fetching: false,
+                        data,
                     },
                 },
-                canvas: {
-                    ...state.canvas,
-                    ready: true,
-                },
             };
         }
         case AnnotationActionTypes.HIGHLIGHT_CONFLICT: {

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "cvat-canvas",`
`3`		`- "version": "2.20.6",`
	`3`	`+ "version": "2.20.7",`
`4`	`4`	`"type": "module",`
`5`	`5`	`"description": "Part of Computer Vision Annotation Tool which presents its canvas library",`
`6`	`6`	`"main": "src/canvas.ts",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "cvat-ui",`
`3`		`- "version": "1.64.3",`
	`3`	`+ "version": "1.64.4",`
`4`	`4`	`"description": "CVAT single-page application",`
`5`	`5`	`"main": "src/index.tsx",`
`6`	`6`	`"scripts": {`