Hide wrapping box for skeleton when not activated

CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 - Moving a task from a project to another project is disabled (<https://github.com/opencv/cvat/pull/5901>)
+- In skeleton annotation wrapping rectangle is visible only when a skeleton is activated (<https://github.com/opencv/cvat/pull/5911>)
 
 ### Deprecated
 - TDB

cvat-canvas/package.json

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

cvat-canvas/src/scss/canvas.scss

@@ -265,6 +265,14 @@ g.cvat_canvas_shape_occluded {
     transform: none !important;
 }
 
+.cvat_canvas_shape > .cvat_canvas_skeleton_wrapping_rect {
+    visibility: hidden;
+}
+
+.cvat_canvas_shape.cvat_canvas_shape_activated > .cvat_canvas_skeleton_wrapping_rect {
+    visibility: initial;
+}
+
 .cvat_canvas_pixelized {
     image-rendering: optimizeSpeed;             /* Legal fallback */
     image-rendering: -moz-crisp-edges;          /* Firefox        */

cvat-canvas/src/typescript/canvasView.ts

@@ -2826,6 +2826,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
                 'shape-rendering': 'geometricprecision',
                 'stroke-width': consts.BASE_STROKE_WIDTH / this.geometry.scale,
                 'data-z-order': state.zOrder,
+                'pointer-events': 'all',
                 ...this.getShapeColorization(state),
             }).addClass('cvat_canvas_shape') as SVG.G;
 

tests/cypress/e2e/skeletons/skeletons_pipeline.js

@@ -46,16 +46,18 @@ context('Manipulations with skeletons', { scrollBehavior: false }, () => {
 
     after(() => {
         cy.clearAllCookies();
-        cy.getAuthKey().then((response) => {
-            const authKey = response.body.key;
-            cy.request({
-                method: 'DELETE',
-                url: `/api/tasks/${taskID}`,
-                headers: {
-                    Authorization: `Token ${authKey}`,
-                },
+        if (taskID !== null) {
+            cy.getAuthKey().then((response) => {
+                const authKey = response.body.key;
+                cy.request({
+                    method: 'DELETE',
+                    url: `/api/tasks/${taskID}`,
+                    headers: {
+                        Authorization: `Token ${authKey}`,
+                    },
+                });
             });
-        });
+        }
     });
 
     describe('Create a task with skeletons', () => {
@@ -159,7 +161,6 @@ context('Manipulations with skeletons', { scrollBehavior: false }, () => {
         }
 
         function deleteSkeleton(selector, shapeType, force) {
-            cy.get(selector).trigger('mousemove').should('have.class', 'cvat_canvas_shape_activated');
             cy.get('body').type(force ? '{shift}{del}' : '{del}');
             if (shapeType.toLowerCase() === 'track' && !force) {
                 cy.get('.cvat-remove-object-confirm-wrapper').should('exist').and('be.visible');
@@ -170,6 +171,19 @@ context('Manipulations with skeletons', { scrollBehavior: false }, () => {
             cy.get(selector).should('not.exist');
         }
 
+        it('Wrapping bounding box for a skeleton is visible only when skeleton is activated', () => {
+            createSkeletonObject('shape');
+
+            cy.get('body').click();
+            cy.get('#cvat_canvas_shape_1').within(($el) => {
+                cy.get('.cvat_canvas_skeleton_wrapping_rect').should('exist').and('not.be.visible');
+                cy.wrap($el).trigger('mousemove').should('have.class', 'cvat_canvas_shape_activated');
+                cy.get('.cvat_canvas_skeleton_wrapping_rect').should('exist').and('be.visible');
+            });
+
+            cy.removeAnnotations();
+        });
+
         it('Creating, checking occluded for a single point, and removing a skeleton shape', () => {
             createSkeletonObject('shape');
 
@@ -196,7 +210,6 @@ context('Manipulations with skeletons', { scrollBehavior: false }, () => {
                     prevY = +$rect[0].getAttribute('y');
                 });
             });
-            cy.get('#cvat_canvas_shape_1').trigger('mousemove').should('have.class', 'cvat_canvas_shape_activated');
             cy.get('body').trigger('keydown', { keyCode: 78, code: 'KeyN', shiftKey: true });
             cy.get('.cvat-canvas-container')
                 .click(skeletonPosition.xtl + REDRAW_MARGIN, skeletonPosition.ytl + REDRAW_MARGIN)