Implement hot keys

README.md

@@ -94,6 +94,7 @@ docker logs make_sense
 | Zoom in                            | Editor   | <kbd>⌥</kbd> + <kbd>+</kbd> | <kbd>Ctrl</kbd> + <kbd>+</kbd> |
 | 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> |
 | Exit popup                         | Popup    | <kbd>Escape</kbd> | <kbd>Escape</kbd> |
 
 **Table 1.** Supported keyboard shortcuts

src/logic/actions/ImageActions.ts

@@ -1,31 +1,152 @@
-import {LabelsSelector} from "../../store/selectors/LabelsSelector";
-import {store} from "../../index";
-import {updateActiveImageIndex, updateActiveLabelId} from "../../store/labels/actionCreators";
-import {ViewPortActions} from "./ViewPortActions";
-import {EditorModel} from "../../staticModels/EditorModel";
+import { LabelsSelector } from "../../store/selectors/LabelsSelector";
+import { store } from "../../index";
+import {
+  updateActiveImageIndex,
+  updateActiveLabelId,
+  updateActiveLabelNameId,
+  updateImageDataById,
+} from "../../store/labels/actionCreators";
+import { ViewPortActions } from "./ViewPortActions";
+import { EditorModel } from "../../staticModels/EditorModel";
+import { LabelType } from "../../data/enums/LabelType";
+import {
+  ImageData,
+  LabelLine,
+  LabelPoint,
+  LabelPolygon,
+  LabelRect,
+} from "../../store/labels/types";
+import { LabelStatus } from "../../data/enums/LabelStatus";
+import { remove } from "lodash";
 
 export class ImageActions {
-    public static getPreviousImage(): void {
-        const currentImageIndex: number = LabelsSelector.getActiveImageIndex();
-        ImageActions.getImageByIndex(currentImageIndex - 1);
-    }
+  public static getPreviousImage(): void {
+    const currentImageIndex: number = LabelsSelector.getActiveImageIndex();
+    ImageActions.getImageByIndex(currentImageIndex - 1);
+  }
+
+  public static getNextImage(): void {
+    const currentImageIndex: number = LabelsSelector.getActiveImageIndex();
+    ImageActions.getImageByIndex(currentImageIndex + 1);
+  }
+
+  public static getImageByIndex(index: number): void {
+    if (EditorModel.viewPortActionsDisabled) return;
 
-    public static getNextImage(): void {
-        const currentImageIndex: number = LabelsSelector.getActiveImageIndex();
-        ImageActions.getImageByIndex(currentImageIndex + 1);
+    const imageCount: number = LabelsSelector.getImagesData().length;
+
+    if (index < 0 || index > imageCount - 1) {
+      return;
+    } else {
+      ViewPortActions.setZoom(1);
+      store.dispatch(updateActiveImageIndex(index));
+      store.dispatch(updateActiveLabelId(null));
     }
+  }
 
-    public static getImageByIndex(index: number): void {
-        if (EditorModel.viewPortActionsDisabled) return;
+  public static setActiveLabelOnActiveImage(labelIndex: number): void {
+    const labelNames = LabelsSelector.getLabelNames();
+    if (labelNames.length < labelIndex + 1) {
+      return;
+    }
 
-        const imageCount: number = LabelsSelector.getImagesData().length;
+    const imageData: ImageData = LabelsSelector.getActiveImageData();
+    store.dispatch(
+      updateImageDataById(
+        imageData.id,
+        ImageActions.mapNewImageData(imageData, labelIndex)
+      )
+    );
+    store.dispatch(updateActiveLabelNameId(labelNames[1].id));
+  }
 
-        if (index < 0 || index > imageCount - 1) {
-            return;
+  private static mapNewImageData(
+    imageData: ImageData,
+    labelIndex: number
+  ): ImageData {
+    const labelType: LabelType = LabelsSelector.getActiveLabelType();
+    const labelNames = LabelsSelector.getLabelNames();
+    let newImageData: ImageData = {
+      ...imageData,
+    };
+    switch (labelType) {
+      case LabelType.POINT:
+        const point = LabelsSelector.getActivePointLabel();
+        newImageData.labelPoints = imageData.labelPoints.map(
+          (labelPoint: LabelPoint) => {
+            if (labelPoint.id === point.id) {
+              return {
+                ...labelPoint,
+                labelId: labelNames[labelIndex].id,
+                status: LabelStatus.ACCEPTED,
+              };
+            }
+            return labelPoint;
+          }
+        );
+        store.dispatch(updateActiveLabelId(point.id));
+        break;
+      case LabelType.LINE:
+        const line = LabelsSelector.getActiveLineLabel();
+        newImageData.labelLines = imageData.labelLines.map(
+          (labelLine: LabelLine) => {
+            if (labelLine.id === line.id) {
+              return {
+                ...labelLine,
+                labelId: labelNames[labelIndex].id,
+                status: LabelStatus.ACCEPTED,
+              };
+            }
+            return labelLine;
+          }
+        );
+        store.dispatch(updateActiveLabelId(line.id));
+        break;
+      case LabelType.RECT:
+        const rect = LabelsSelector.getActiveRectLabel();
+        newImageData.labelRects = imageData.labelRects.map(
+          (labelRectangle: LabelRect) => {
+            if (labelRectangle.id === rect.id) {
+              return {
+                ...labelRectangle,
+                labelId: labelNames[labelIndex].id,
+                status: LabelStatus.ACCEPTED,
+              };
+            }
+            return labelRectangle;
+          }
+        );
+        store.dispatch(updateActiveLabelId(rect.id));
+        break;
+      case LabelType.POLYGON:
+        const polygon = LabelsSelector.getActivePolygonLabel();
+        newImageData.labelPolygons = imageData.labelPolygons.map(
+          (labelPolygon: LabelPolygon) => {
+            if (labelPolygon.id === polygon.id) {
+              return {
+                ...labelPolygon,
+                labelId: labelNames[labelIndex].id,
+                status: LabelStatus.ACCEPTED,
+              };
+            }
+            return labelPolygon;
+          }
+        );
+        store.dispatch(updateActiveLabelId(polygon.id));
+        break;
+      case LabelType.IMAGE_RECOGNITION:
+        const labelId: string = labelNames[labelIndex].id;
+        if (imageData.labelNameIds.includes(labelId)) {
+          newImageData.labelNameIds = remove(
+            imageData.labelNameIds,
+            (element: string) => element !== labelId
+          );
         } else {
-            ViewPortActions.setZoom(1);
-            store.dispatch(updateActiveImageIndex(index));
-            store.dispatch(updateActiveLabelId(null));
+          newImageData.labelNameIds = imageData.labelNameIds.concat(labelId);
         }
+        break;
     }
-}
+
+    return newImageData;
+  }
+}

src/logic/context/EditorContext.ts

@@ -97,6 +97,76 @@ export class EditorContext extends BaseContext {
             action: (event: KeyboardEvent) => {
                 LabelActions.deleteActiveLabel();
             }
+        },
+        {
+            keyCombo: PlatformUtil.isMac(window.navigator.userAgent) ? ["Alt", "0"] : ["Control", "0"],
+            action: (event: KeyboardEvent) => {
+                ImageActions.setActiveLabelOnActiveImage(0);
+                EditorActions.fullRender();
+            }
+        },
+        {
+            keyCombo: PlatformUtil.isMac(window.navigator.userAgent) ? ["Alt", "1"] : ["Control", "1"],
+            action: (event: KeyboardEvent) => {
+                ImageActions.setActiveLabelOnActiveImage(1);
+                EditorActions.fullRender();
+            }
+        },
+        {
+            keyCombo: PlatformUtil.isMac(window.navigator.userAgent) ? ["Alt", "2"] : ["Control", "2"],
+            action: (event: KeyboardEvent) => {
+                ImageActions.setActiveLabelOnActiveImage(2);
+                EditorActions.fullRender();
+            }
+        },
+        {
+            keyCombo: PlatformUtil.isMac(window.navigator.userAgent) ? ["Alt", "3"] : ["Control", "3"],
+            action: (event: KeyboardEvent) => {
+                ImageActions.setActiveLabelOnActiveImage(3);
+                EditorActions.fullRender();
+            }
+        },
+        {
+            keyCombo: PlatformUtil.isMac(window.navigator.userAgent) ? ["Alt", "4"] : ["Control", "4"],
+            action: (event: KeyboardEvent) => {
+                ImageActions.setActiveLabelOnActiveImage(4);
+                EditorActions.fullRender();
+            }
+        },
+        {
+            keyCombo: PlatformUtil.isMac(window.navigator.userAgent) ? ["Alt", "5"] : ["Control", "5"],
+            action: (event: KeyboardEvent) => {
+                ImageActions.setActiveLabelOnActiveImage(5);
+                EditorActions.fullRender();
+            }
+        },
+        {
+            keyCombo: PlatformUtil.isMac(window.navigator.userAgent) ? ["Alt", "6"] : ["Control", "6"],
+            action: (event: KeyboardEvent) => {
+                ImageActions.setActiveLabelOnActiveImage(6);
+                EditorActions.fullRender();
+            }
+        },
+        {
+            keyCombo: PlatformUtil.isMac(window.navigator.userAgent) ? ["Alt", "7"] : ["Control", "7"],
+            action: (event: KeyboardEvent) => {
+                ImageActions.setActiveLabelOnActiveImage(7);
+                EditorActions.fullRender();
+            }
+        },
+        {
+            keyCombo: PlatformUtil.isMac(window.navigator.userAgent) ? ["Alt", "8"] : ["Control", "8"],
+            action: (event: KeyboardEvent) => {
+                ImageActions.setActiveLabelOnActiveImage(8);
+                EditorActions.fullRender();
+            }
+        },
+        {
+            keyCombo: PlatformUtil.isMac(window.navigator.userAgent) ? ["Alt", "9"] : ["Control", "9"],
+            action: (event: KeyboardEvent) => {
+                ImageActions.setActiveLabelOnActiveImage(9);
+                EditorActions.fullRender();
+            }
         }
     ];
 }