Fixed issue 5256, improved 'occluded' visualization (#5259)

* Fixed issue 5256, improved 'occluded' visualization

* Updated version & added test

* Updated changelog

* Fixed tests

CHANGELOG.md

@@ -69,6 +69,7 @@ non-ascii paths while adding files from "Connected file share" (issue #4428)
 - Job assignee can not resolve an issue (<https://github.com/opencv/cvat/pull/5167>)
 - Create manifest with cvat/server docker container command (<https://github.com/opencv/cvat/pull/5172>)
 - Cannot assign a resource to a user who has an organization (<https://github.com/opencv/cvat/pull/5218>)
+- Occluded not applied on canvas instantly for a skeleton elements (<https://github.com/opencv/cvat/pull/5259>)
 - Oriented bounding boxes broken with COCO format ss(<https://github.com/opencv/cvat/pull/5219>)
 - Fixed upload resumption in production environments
   (<https://github.com/opencv/cvat/issues/4839>)

cvat-canvas/package.json

 {
   "name": "cvat-canvas",
-  "version": "2.16.0",
+  "version": "2.16.1",
   "description": "Part of Computer Vision Annotation Tool which presents its canvas library",
   "main": "src/canvas.ts",
   "scripts": {

cvat-canvas/src/scss/canvas.scss

@@ -148,10 +148,23 @@ polyline.cvat_canvas_shape_splitting {
     stroke-dasharray: 5;
 }
 
+.cvat_canvas_shape_occluded_point {
+    stroke-dasharray: 1 !important;
+    stroke: white;
+}
+
+circle.cvat_canvas_shape_occluded {
+    @extend .cvat_canvas_shape_occluded_point;
+}
+
 g.cvat_canvas_shape_occluded {
     > rect {
         stroke-dasharray: 5;
     }
+
+    > circle {
+        @extend .cvat_canvas_shape_occluded_point;
+    }
 }
 
 .svg_select_points_rot {

cvat-canvas/src/typescript/canvasView.ts

@@ -1916,10 +1916,11 @@ export class CanvasViewImpl implements CanvasView, Listener {
             }
 
             if (drawnState.occluded !== state.occluded) {
+                const instance = state.shapeType === 'points' ? this.svgShapes[clientID].remember('_selectHandler').nested : shape;
                 if (state.occluded) {
-                    shape.addClass('cvat_canvas_shape_occluded');
+                    instance.addClass('cvat_canvas_shape_occluded');
                 } else {
-                    shape.removeClass('cvat_canvas_shape_occluded');
+                    instance.removeClass('cvat_canvas_shape_occluded');
                 }
             }
 
@@ -3388,6 +3389,10 @@ export class CanvasViewImpl implements CanvasView, Listener {
             group.addClass('cvat_canvas_hidden');
         }
 
+        if (state.occluded) {
+            group.addClass('cvat_canvas_shape_occluded');
+        }
+
         shape.remove = (): SVG.PolyLine => {
             this.selectize(false, shape);
             shape.constructor.prototype.remove.call(shape);

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

@@ -1223,7 +1223,7 @@ export function updateAnnotationsAsync(statesToUpdate: any[]): ThunkAction {
             const states = await Promise.all(promises);
 
             const needToUpdateAll = states
-                .some((state: any) => [ShapeType.MASK, ShapeType.SKELETON].includes(state.shapeType));
+                .some((state: any) => state.shapeType === ShapeType.MASK || state.parentID !== null);
             if (needToUpdateAll) {
                 dispatch(fetchAnnotationsAsync());
                 return;

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

@@ -319,12 +319,12 @@ class ObjectsListContainer extends React.PureComponent<Props, State> {
             }
         };
 
-        const activatedState = (): ObjectState | null => {
+        const activatedState = (ignoreElements = false): ObjectState | null => {
             if (activatedStateID !== null) {
                 const state = objectStates
                     .find((objectState: ObjectState): boolean => objectState.clientID === activatedStateID);
 
-                if (state && activatedElementID !== null) {
+                if (state && activatedElementID !== null && !ignoreElements) {
                     const element = state.elements
                         .find((_element: ObjectState): boolean => _element.clientID === activatedElementID);
                     return element || null;
@@ -399,7 +399,7 @@ class ObjectsListContainer extends React.PureComponent<Props, State> {
             },
             DELETE_OBJECT: (event: KeyboardEvent | undefined) => {
                 preventDefault(event);
-                const state = activatedState();
+                const state = activatedState(true);
                 if (state && !readonly) {
                     removeObject(state, event ? event.shiftKey : false);
                 }

tests/cypress/integration/masks/masks_basics.js

@@ -4,7 +4,7 @@
 
 /// <reference types="cypress" />
 
-context('Manipulations with masks', () => {
+context('Manipulations with masks', { scrollBehavior: false }, () => {
     const taskName = 'Basic actions with masks';
     const serverFiles = ['images/image_1.jpg', 'images/image_2.jpg', 'images/image_3.jpg'];
     const drawingActions = [{

tests/cypress/integration/skeletons/skeletons_pipeline.js

@@ -4,7 +4,7 @@
 
 /// <reference types="cypress" />
 
-context('Manipulations with skeletons', () => {
+context('Manipulations with skeletons', { scrollBehavior: false }, () => {
     const skeletonSize = 5;
     const labelName = 'skeleton';
     const taskName = 'skeletons main pipeline';
@@ -169,8 +169,14 @@ context('Manipulations with skeletons', () => {
             cy.get(selector).should('not.exist');
         }
 
-        it('Creating and removing a skeleton shape', () => {
+        it('Creating, checking occluded for a single point, and removing a skeleton shape', () => {
             createSkeletonObject('shape');
+
+            cy.get('#cvat-objects-sidebar-state-item-element-2').within(() => {
+                cy.get('span[aria-label="user"]').click();
+            });
+            cy.get('#cvat_canvas_shape_2').should('have.class', 'cvat_canvas_shape_occluded');
+
             deleteSkeleton('#cvat_canvas_shape_1', 'shape', false);
             cy.removeAnnotations();
         });