diff --git a/cvat-ui/src/components/annotation-page/appearance-block.tsx b/cvat-ui/src/components/annotation-page/appearance-block.tsx index 4ba3e749..73309cbe 100644 --- a/cvat-ui/src/components/annotation-page/appearance-block.tsx +++ b/cvat-ui/src/components/annotation-page/appearance-block.tsx @@ -68,7 +68,9 @@ function mapStateToProps(state: CombinedState): StateToProps { const { annotation: { appearanceCollapsed }, settings: { - shapes: { colorBy, opacity, selectedOpacity, outlined, outlineColor, showBitmap, showProjections }, + shapes: { + colorBy, opacity, selectedOpacity, outlined, outlineColor, showBitmap, showProjections, + }, }, } = state; @@ -153,16 +155,33 @@ function AppearanceBlock(props: Props): JSX.Element { Appearance} key='appearance'>
Color by - + {ColorBy.LABEL} {ColorBy.INSTANCE} {ColorBy.GROUP} Opacity - + Selected opacity - + { changeShapesOutlinedBorders(event.target.checked, outlineColor); }} @@ -175,15 +194,23 @@ function AppearanceBlock(props: Props): JSX.Element { placement='top' resetVisible={false} > - - + Show bitmap - + Show projections
diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/color-picker.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/color-picker.tsx index ae3c1382..c12d4450 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/color-picker.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/color-picker.tsx @@ -22,23 +22,24 @@ interface Props { onChange?: (value: string) => void; onVisibleChange?: (visible: boolean) => void; placement?: - | 'left' - | 'top' - | 'right' - | 'bottom' - | 'topLeft' - | 'topRight' - | 'bottomLeft' - | 'bottomRight' - | 'leftTop' - | 'leftBottom' - | 'rightTop' - | 'rightBottom' - | undefined; + | 'left' + | 'top' + | 'right' + | 'bottom' + | 'topLeft' + | 'topRight' + | 'bottomLeft' + | 'bottomRight' + | 'leftTop' + | 'leftBottom' + | 'rightTop' + | 'rightBottom'; } function ColorPicker(props: Props, ref: React.Ref): JSX.Element { - const { children, value, visible, resetVisible, onChange, onVisibleChange, placement } = props; + const { + children, value, visible, resetVisible, onChange, onVisibleChange, placement, + } = props; const [colorState, setColorState] = useState(value); const [pickerVisible, setPickerVisible] = useState(false); @@ -55,7 +56,7 @@ function ColorPicker(props: Props, ref: React.Ref): JSX.Element { return ( ): JSX.Element { - } - title={ + )} + title={( Select color @@ -118,7 +119,7 @@ function ColorPicker(props: Props, ref: React.Ref): JSX.Element { - } + )} placement={placement || 'left'} overlayClassName='cvat-label-color-picker' trigger='click' diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/label-item.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/label-item.tsx index 73a0c4f3..33a17a02 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/label-item.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/label-item.tsx @@ -33,6 +33,17 @@ function LabelItemComponent(props: Props): JSX.Element { unlockStates, } = props; + const classes = { + lock: { + enabled: { className: 'cvat-label-item-button-lock cvat-label-item-button-lock-enabled' }, + disabled: { className: 'cvat-label-item-button-lock' }, + }, + hidden: { + enabled: { className: 'cvat-label-item-button-hidden cvat-label-item-button-hidden-enabled' }, + disabled: { className: 'cvat-label-item-button-hidden' }, + }, + }; + return ( {statesLocked ? ( - + ) : ( - + )} {statesHidden ? ( - + ) : ( - + )} diff --git a/tests/cypress/integration/actions_tasks_objects/case_16_z_order_features.js b/tests/cypress/integration/actions_tasks_objects/case_16_z_order_features.js new file mode 100644 index 00000000..4b64e4e1 --- /dev/null +++ b/tests/cypress/integration/actions_tasks_objects/case_16_z_order_features.js @@ -0,0 +1,113 @@ +// Copyright (C) 2020 Intel Corporation +// +// SPDX-License-Identifier: MIT + +/// + +import { taskName } from '../../support/const'; + +context('Actions on polygon', () => { + const caseId = '16'; + let zLayer = 0; + const createPolygonShapeFirst = { + reDraw: false, + type: 'Shape', + switchLabel: false, + pointsMap: [ + { x: 340, y: 200 }, + { x: 590, y: 200 }, + { x: 590, y: 450 }, + ], + complete: true, + numberOfPoints: null, + }; + const createPolygonShapeSecond = { + reDraw: false, + type: 'Shape', + switchLabel: false, + pointsMap: [ + { x: 190, y: 210 }, + { x: 440, y: 210 }, + { x: 440, y: 460 }, + ], + complete: true, + numberOfPoints: null, + }; + before(() => { + cy.openTaskJob(taskName); + }); + + describe(`Testing case "${caseId}"`, () => { + + it('Create a first polygon shape', () => { + cy.createPolygon(createPolygonShapeFirst); + }); + + it('Increase z-layer with a special switcher', () => { + cy.get('.cvat-canvas-z-axis-wrapper').within(() => { + cy.get('[role="slider"]').should('have.attr', 'aria-valuenow').then($zLayer=> { + zLayer = Number($zLayer); + }); + cy.get('i[aria-label="icon: plus-circle"]').click(); + cy.get('[role="slider"]').should('have.attr', 'aria-valuenow', zLayer + 1); + }); + }); + + it('Create a second polygon shape', () => { + cy.createPolygon(createPolygonShapeSecond); + }); + + it('Deactivate all objects', () => { + cy.get('.cvat-canvas-container').click(); + }); + + it('Second shape is over the first shape', () => { + // The larger the index of an element in the array the closer it is to us + cy.get('.cvat_canvas_shape').then($canvasShape => { +                expect(Number($canvasShape[1].id.match(/\d+$/))).to.be.equal(2); + }); + }); + + it('Activate first shape', () => { + cy.get('#cvat_canvas_shape_1').trigger('mousemove').trigger('mouseover'); + }); + + it('First shape is over the second shape', () => { + // The larger the index of an element in the array the closer it is to us +            cy.get('.cvat_canvas_shape').then($canvasShape => { +                expect(Number($canvasShape[1].id.match(/\d+$/))).to.be.equal(1); + assert.isAbove(Number($canvasShape.eq(-1).attr('fill-opacity')), Number($canvasShape.eq(0).attr('fill-opacity'))); + }); + }); + + it('Deactivate all objects', () => { + cy.get('.cvat-canvas-container').click(); + }); + + it('Switch z-layer slider to zero position', () => { + cy.get('.cvat-canvas-z-axis-wrapper').within(() => { + cy.get('[role="slider"]').parent().click('top'); + cy.get('[role="slider"]').should('have.attr', 'aria-valuenow', zLayer); + }); + }); + + it('Second shape is invisible', () => { + cy.get('#cvat_canvas_shape_2').should('not.be.visible'); + }); + + it('Increase z-layer with a special switcher', () => { + cy.get('.cvat-canvas-z-axis-wrapper').within(() => { + cy.get('[role="slider"]').should('have.attr', 'aria-valuenow').then($zLayer=> { + zLayer = Number($zLayer); + }); + cy.get('i[aria-label="icon: plus-circle"]').click(); + cy.get('[role="slider"]').should('have.attr', 'aria-valuenow', zLayer + 2); + }); + }); + + it('First and second shapes are visible', () => { + cy.get('#cvat_canvas_shape_1').should('be.visible'); + cy.get('#cvat_canvas_shape_2').should('be.visible'); + }); + }); +}); diff --git a/tests/cypress/integration/actions_users/issue_2391_user_guide.js b/tests/cypress/integration/actions_users/issue_2391_user_guide.js new file mode 100644 index 00000000..c529c3d1 --- /dev/null +++ b/tests/cypress/integration/actions_users/issue_2391_user_guide.js @@ -0,0 +1,20 @@ +// Copyright (C) 2020 Intel Corporation +// +// SPDX-License-Identifier: MIT + +/// + +context('Check User Guide.', () => { + const issueId = '2391'; + + describe(`Testing issue "${issueId}"`, () => { + it('User Guide is available.', () => { + cy.visit('documentation/user_guide.html'); + }); + it('Checking for the several elements.', () => { + cy.get('#users-guide'); + cy.get('a'); + cy.get('img'); + }); + }); +});