Remove group objects

cvat-canvas/src/typescript/groupHandler.ts

@@ -23,6 +23,7 @@ export class GroupHandlerImpl implements GroupHandler {
     private bindedOnSelectUpdate: (event: MouseEvent) => void;
     private bindedOnSelectStop: (event: MouseEvent) => void;
     private selectionRect: SVG.Rect;
+    private allowSelect: boolean = false;
     private startSelectionPoint: {
         x: number;
         y: number;
@@ -92,6 +93,7 @@ export class GroupHandlerImpl implements GroupHandler {
                 (shape: SVG.Shape): boolean => !shape.hasClass('cvat_canvas_hidden'),
             );
             for (const shape of shapes) {
+                this.allowSelect = box.xtl - box.xbr == 0 && box.ytl - box.ybr == 0;
                 // TODO: Doesn't work properly for groups
                 const bbox = shape.bbox();
                 const clientID = shape.attr('clientID');
@@ -186,6 +188,7 @@ export class GroupHandlerImpl implements GroupHandler {
     }
 
     public select(objectState: any): void {
+        if (!this.allowSelect) return;
         const stateIndexes = this.statesToBeGroupped.map((state): number => state.clientID);
         const includes = stateIndexes.indexOf(objectState.clientID);
         if (includes !== -1) {

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

@@ -10,6 +10,7 @@ import {
     EyeOutlined,
     LockFilled,
     UnlockOutlined,
+    DeleteOutlined,
 } from '@ant-design/icons';
 import { Col, Row } from 'antd/lib/grid';
 
@@ -25,15 +26,28 @@ interface Props {
     statesOrdering: StatesOrdering;
     switchLockAllShortcut: string;
     switchHiddenAllShortcut: string;
+    deleteAllShortcut: string;
     changeStatesOrdering(value: StatesOrdering): void;
     lockAllStates(): void;
     unlockAllStates(): void;
     collapseAllStates(): void;
+    deleteAllStates(): void;
     expandAllStates(): void;
     hideAllStates(): void;
     showAllStates(): void;
 }
 
+function DeleteAllSwitcher(props: Props): JSX.Element {
+    const { deleteAllStates, deleteAllShortcut } = props;
+    return (
+        <Col span={2}>
+            <CVATTooltip title={`Delete selected ${deleteAllShortcut}`}>
+                <DeleteOutlined onClick={deleteAllStates} />
+            </CVATTooltip>
+        </Col>
+    );
+}
+
 function LockAllSwitcher(props: Props): JSX.Element {
     const {
         statesLocked, switchLockAllShortcut, unlockAllStates, lockAllStates,
@@ -92,6 +106,7 @@ function ObjectListHeader(props: Props): JSX.Element {
                     </>
                 )}
                 <CollapseAllSwitcher {...props} />
+                <DeleteAllSwitcher {...props} />
                 <StatesOrderingSelector statesOrdering={statesOrdering} changeStatesOrdering={changeStatesOrdering} />
             </Row>
         </div>

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

@@ -18,10 +18,12 @@ interface Props {
     objectStates: any[];
     switchLockAllShortcut: string;
     switchHiddenAllShortcut: string;
+    deleteAllShortcut: string;
     changeStatesOrdering(value: StatesOrdering): void;
     lockAllStates(): void;
     unlockAllStates(): void;
     collapseAllStates(): void;
+    deleteAllStates(): void;
     expandAllStates(): void;
     hideAllStates(): void;
     showAllStates(): void;
@@ -38,10 +40,12 @@ function ObjectListComponent(props: Props): JSX.Element {
         objectStates,
         switchLockAllShortcut,
         switchHiddenAllShortcut,
+        deleteAllShortcut,
         changeStatesOrdering,
         lockAllStates,
         unlockAllStates,
         collapseAllStates,
+        deleteAllStates,
         expandAllStates,
         hideAllStates,
         showAllStates,
@@ -56,11 +60,13 @@ function ObjectListComponent(props: Props): JSX.Element {
                 statesCollapsed={statesCollapsedAll}
                 statesOrdering={statesOrdering}
                 switchLockAllShortcut={switchLockAllShortcut}
+                deleteAllShortcut={deleteAllShortcut}
                 switchHiddenAllShortcut={switchHiddenAllShortcut}
                 changeStatesOrdering={changeStatesOrdering}
                 lockAllStates={lockAllStates}
                 unlockAllStates={unlockAllStates}
                 collapseAllStates={collapseAllStates}
+                deleteAllStates={deleteAllStates}
                 expandAllStates={expandAllStates}
                 hideAllStates={hideAllStates}
                 showAllStates={showAllStates}

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

@@ -54,6 +54,7 @@ interface DispatchToProps {
 }
 
 function mapStateToProps(state: CombinedState): StateToProps {
+    const { highlightedShapes } = state?.annotation?.canvas?.instance?.view?.groupHandler;
     const {
         annotation: {
             annotations: {
@@ -90,6 +91,7 @@ function mapStateToProps(state: CombinedState): StateToProps {
     });
 
     return {
+        highlightedShapes,
         statesHidden,
         statesLocked,
         statesCollapsedAll: collapsedAll,
@@ -201,6 +203,10 @@ class ObjectsListContainer extends React.PureComponent<Props, State> {
         this.collapseAllStates(true);
     };
 
+    private onDeleteAllStates = (): void => {
+        this.deleteAllStates(true);
+    };
+
     private onExpandAllStates = (): void => {
         this.collapseAllStates(false);
     };
@@ -243,6 +249,14 @@ class ObjectsListContainer extends React.PureComponent<Props, State> {
         collapseStates(objectStates, collapsed);
     }
 
+    private deleteAllStates(force: boolean): void {
+        const { objectStates, removeObject, jobInstance, highlightedShapes } = this.props;
+        objectStates.forEach(state => {
+            if (highlightedShapes[state.clientID] != undefined)
+                removeObject(jobInstance, state, force)
+        });
+    }
+
     public render(): JSX.Element {
         const {
             statesHidden,
@@ -267,6 +281,7 @@ class ObjectsListContainer extends React.PureComponent<Props, State> {
         const { objectStates, sortedStatesID, statesOrdering } = this.state;
 
         const subKeyMap = {
+            DELETE_ALL: keyMap.DELETE_ALL,
             SWITCH_ALL_LOCK: keyMap.SWITCH_ALL_LOCK,
             SWITCH_LOCK: keyMap.SWITCH_LOCK,
             SWITCH_ALL_HIDDEN: keyMap.SWITCH_ALL_HIDDEN,
@@ -323,6 +338,10 @@ class ObjectsListContainer extends React.PureComponent<Props, State> {
             MOVE_RIGHT: () => {},
             ZOOM_IN: () => {},
             ZOOM_OUT: () => {},
+            DELETE_ALL: (event: KeyboardEvent | undefined) => {
+                preventDefault(event);
+                this.deleteAllStates(true);
+            },
             SWITCH_ALL_LOCK: (event: KeyboardEvent | undefined) => {
                 preventDefault(event);
                 this.lockAllStates(!statesLocked);
@@ -462,10 +481,12 @@ class ObjectsListContainer extends React.PureComponent<Props, State> {
                     objectStates={objectStates}
                     switchHiddenAllShortcut={normalizedKeyMap.SWITCH_ALL_HIDDEN}
                     switchLockAllShortcut={normalizedKeyMap.SWITCH_ALL_LOCK}
+                    deleteAllShortcut={normalizedKeyMap.DELETE_ALL}
                     changeStatesOrdering={this.onChangeStatesOrdering}
                     lockAllStates={this.onLockAllStates}
                     unlockAllStates={this.onUnlockAllStates}
                     collapseAllStates={this.onCollapseAllStates}
+                    deleteAllStates={this.onDeleteAllStates}
                     expandAllStates={this.onExpandAllStates}
                     hideAllStates={this.onHideAllStates}
                     showAllStates={this.onShowAllStates}

cvat-ui/src/reducers/shortcuts-reducer.ts

@@ -37,6 +37,13 @@ const defaultKeyMap = ({
         applicable: [DimensionType.DIM_2D, DimensionType.DIM_3D],
     },
 
+    DELETE_ALL: {
+        name: 'Delete selected objects',
+        description: 'Delete all grouped objects',
+        sequences: ['d'],
+        action: 'keydown',
+        applicable: [DimensionType.DIM_2D, DimensionType.DIM_3D],
+    },
     SWITCH_ALL_LOCK: {
         name: 'Lock/unlock all objects',
         description: 'Change locked state for all objects in the side bar',