fix/329 shortcut to toogle all labels visibility

README.md

@@ -75,6 +75,7 @@ docker logs make-sense
 | Zoom out                           | Editor   | <kbd>⌥</kbd> + <kbd>-</kbd> | <kbd>Ctrl</kbd> + <kbd>-</kbd> |
 | Move image                         | Editor   | <kbd>Up</kbd> / <kbd>Down</kbd> / <kbd>Left</kbd> / <kbd>Right</kbd> | <kbd>Up</kbd> / <kbd>Down</kbd> / <kbd>Left</kbd> / <kbd>Right</kbd> |
 | Select Label                       | Editor   | <kbd>⌥</kbd> + <kbd>0-9</kbd> | <kbd>Ctrl</kbd> + <kbd>0-9</kbd> |
+| Show/Hide All Labels               | Editor   | <kbd>h</kbd>      | <kbd>h</kbd>
 | Exit popup                         | Popup    | <kbd>Escape</kbd> | <kbd>Escape</kbd> |
 
 **Table 1.** Supported keyboard shortcuts

src/logic/actions/ImageActions.ts

@@ -17,6 +17,7 @@ import {
   LabelRect,
 } from "../../store/labels/types";
 import { LabelStatus } from "../../data/enums/LabelStatus";
+import { LabelActions } from "./LabelActions";
 import { remove } from "lodash";
 
 export class ImageActions {
@@ -60,6 +61,13 @@ export class ImageActions {
     store.dispatch(updateActiveLabelNameId(labelNames[1].id));
   }
 
+  public static toggleAllLabelsVisibility(): void {
+    const imageData: ImageData = LabelsSelector.getActiveImageData();
+    const newToggleValue = imageData.allLabelsVisibilityToggle !== null ? !imageData.allLabelsVisibilityToggle : false;
+
+    LabelActions.setAllLabelsVisibility(imageData.id, newToggleValue);
+  }
+
   private static mapNewImageData(
     imageData: ImageData,
     labelIndex: number

src/logic/actions/LabelActions.ts

@@ -71,6 +71,28 @@ export class LabelActions {
         store.dispatch(updateImageDataById(imageData.id, newImageData));
     }
 
+    public static setAllLabelsVisibility(imageId: string, isVisible: boolean) {
+        const imageData: ImageData = LabelsSelector.getImageDataById(imageId);
+        const newImageData = {
+            ...imageData,
+            allLabelsVisibilityToggle: isVisible,
+            labelPoints: imageData.labelPoints.map((labelPoint: LabelPoint) => {
+                return LabelUtil.setAnnotationVisibility(labelPoint, isVisible)
+            }),
+            labelRects: imageData.labelRects.map((labelRect: LabelRect) => {
+                return LabelUtil.setAnnotationVisibility(labelRect, isVisible)
+            }),
+            labelPolygons: imageData.labelPolygons.map((labelPolygon: LabelPolygon) => {
+                return LabelUtil.setAnnotationVisibility(labelPolygon, isVisible)
+            }),
+            labelLines: imageData.labelLines.map((labelLine: LabelLine) => {
+                return LabelUtil.setAnnotationVisibility(labelLine, isVisible)
+            }),
+        };
+
+        store.dispatch(updateImageDataById(imageData.id, newImageData));
+    }
+
     public static toggleLabelVisibilityById(imageId: string, labelId: string) {
         const imageData: ImageData = LabelsSelector.getImageDataById(imageId);
         const newImageData = {

src/logic/context/EditorContext.ts

@@ -167,6 +167,13 @@ export class EditorContext extends BaseContext {
                 ImageActions.setActiveLabelOnActiveImage(9);
                 EditorActions.fullRender();
             }
-        }
+        },
+        {
+            keyCombo: ["h"],
+            action: (event: KeyboardEvent) => {
+                ImageActions.toggleAllLabelsVisibility();
+                EditorActions.fullRender();
+            }
+        },
     ];
 }

src/store/labels/types.ts

@@ -49,6 +49,8 @@ export type ImageData = {
     labelPolygons: LabelPolygon[];
     labelNameIds: string[];
 
+    allLabelsVisibilityToggle: boolean;
+
     // YOLO
     isVisitedByYOLOObjectDetector: boolean;
 

src/utils/LabelUtil.ts

@@ -56,6 +56,13 @@ export class LabelUtil {
         }
     }
 
+    public static setAnnotationVisibility<AnnotationType extends Annotation>(annotation: AnnotationType, isVisible: boolean): AnnotationType {
+        return {
+            ...annotation,
+            isVisible
+        }
+    }
+
     public static labelNamesIdsDiff(oldLabelNames: LabelName[], newLabelNames: LabelName[]): string[] {
         return oldLabelNames.reduce((missingIds: string[], labelName: LabelName) => {
             if (!find(newLabelNames, { 'id': labelName.id })) {