Toggle Drag mode with hotkey h, Add Copy and Paste for Labels, Updated Readme

README.md

@@ -96,8 +96,11 @@ docker logs make_sense
 | Load next image                    | Editor   | <kbd>⌥</kbd> + <kbd>Right</kbd> | <kbd>Ctrl</kbd> + <kbd>Right</kbd> |
 | Zoom in                            | Editor   | <kbd>⌥</kbd> + <kbd>+</kbd> | <kbd>Ctrl</kbd> + <kbd>+</kbd> |
 | Zoom out                           | Editor   | <kbd>⌥</kbd> + <kbd>-</kbd> | <kbd>Ctrl</kbd> + <kbd>-</kbd> |
+| Toggle Drag Mode                   | Editor   | <kbd>h</kbd> | <kbd>h</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> |
+| Copy all labels                    | Editor   | <kbd>⌥</kbd> + <kbd>c</kbd> | <kbd>Ctrl</kbd> + <kbd>c</kbd> |
+| Paste all labels                   | Editor   | <kbd>⌥</kbd> + <kbd>p</kbd> | <kbd>Ctrl</kbd> + <kbd>p</kbd> |
 | Exit popup                         | Popup    | <kbd>Escape</kbd> | <kbd>Escape</kbd> |
 
 **Table 1.** Supported keyboard shortcuts

src/logic/context/EditorContext.ts

@@ -167,6 +167,24 @@ export class EditorContext extends BaseContext {
                 ImageActions.setActiveLabelOnActiveImage(9);
                 EditorActions.fullRender();
             }
+        },
+        {
+            keyCombo: ["h"],
+            action: (event: KeyboardEvent) =>{
+                document.getElementById("imageDragOnClick").click();
+            }
+        },
+        {
+            keyCombo: PlatformUtil.isMac(window.navigator.userAgent) ? ["Alt", "v"] : ["Control", "v"],
+            action: (event: KeyboardEvent)=>{
+                EditorModel.supportRenderingEngine.pasteHandler();
+            }
+        },
+        {
+            keyCombo: PlatformUtil.isMac(window.navigator.userAgent) ? ["Alt", "v"] : ["Control", "c"],
+            action: (event: KeyboardEvent)=>{
+                EditorModel.supportRenderingEngine.copyHandler();
+            }
         }
     ];
 }

src/logic/render/BaseRenderEngine.ts

@@ -4,12 +4,16 @@ import {EventType} from '../../data/enums/EventType';
 import {LabelType} from '../../data/enums/LabelType';
 import {GeneralSelector} from '../../store/selectors/GeneralSelector';
 import {RenderEngineSettings} from '../../settings/RenderEngineSettings';
-import {LabelName} from '../../store/labels/types';
+import {ImageData, LabelName} from '../../store/labels/types';
 import {LabelsSelector} from '../../store/selectors/LabelsSelector';
+import { EditorModel } from '../../staticModels/EditorModel';
+import { PolygonRenderEngine } from './PolygonRenderEngine';
+import { LineRenderEngine } from './LineRenderEngine';
 
 export abstract class BaseRenderEngine {
     protected readonly canvas: HTMLCanvasElement;
     public labelType: LabelType;
+    protected imageDataCache: ImageData;
 
     protected constructor(canvas: HTMLCanvasElement) {
         this.canvas = canvas;
@@ -36,6 +40,20 @@ export abstract class BaseRenderEngine {
     protected abstract mouseDownHandler(data: EditorData): void;
     protected abstract mouseMoveHandler(data: EditorData): void;
     protected abstract mouseUpHandler(data: EditorData): void;
+    public abstract pasteHandler(): void;
+
+    public copyHandler(){
+        switch (EditorModel.supportRenderingEngine.labelType) {
+            case LabelType.POLYGON:
+                (EditorModel.supportRenderingEngine as PolygonRenderEngine).cancelLabelCreation();
+                break;
+            case LabelType.LINE:
+                (EditorModel.supportRenderingEngine as LineRenderEngine).cancelLabelCreation();
+                break;
+        }
+        const imageData = LabelsSelector.getActiveImageData();
+        this.imageDataCache = {...imageData};
+    }
 
     abstract render(data: EditorData): void;
 

src/logic/render/LineRenderEngine.ts

@@ -84,6 +84,21 @@ export class LineRenderEngine extends BaseRenderEngine {
             }
         }
     }
+
+    public pasteHandler(): void {
+        this.cancelLabelCreation();
+        if(this.imageDataCache && this.imageDataCache.labelLines){
+            const imageData: ImageData = LabelsSelector.getActiveImageData();
+            this.imageDataCache.labelLines.forEach((lineLabel) => {
+                imageData.labelLines.push(lineLabel);
+                store.dispatch(updateImageDataById(imageData.id, imageData));
+                store.dispatch(updateFirstLabelCreatedFlag(true));
+                store.dispatch(updateActiveLabelId(lineLabel.id));
+                this.lineCreationStartPoint = null
+            });
+            EditorActions.setViewPortActionsDisabledStatus(false);
+        }
+    }
 
     // =================================================================================================================
     // RENDERING

src/logic/render/PointRenderEngine.ts

@@ -7,6 +7,7 @@ import {ImageData, LabelPoint} from '../../store/labels/types';
 import { v4 as uuidv4 } from 'uuid';
 import {
     updateActiveLabelId,
+    updateActiveLabelNameId,
     updateFirstLabelCreatedFlag,
     updateHighlightedLabelId,
     updateImageDataById
@@ -103,6 +104,15 @@ export class PointRenderEngine extends BaseRenderEngine {
             }
         }
     }
+
+    public pasteHandler(): void {
+        if(this.imageDataCache && this.imageDataCache.labelPoints){
+            this.imageDataCache.labelPoints.forEach((pointLabel) => {
+                store.dispatch(updateActiveLabelNameId(pointLabel.labelId));
+                this.addPointLabel(pointLabel.point);
+            });
+        }
+    }
 
     // =================================================================================================================
     // RENDERING

src/logic/render/PolygonRenderEngine.ts

@@ -13,6 +13,7 @@ import {ImageData, LabelPolygon} from '../../store/labels/types';
 import {LabelsSelector} from '../../store/selectors/LabelsSelector';
 import {
     updateActiveLabelId,
+    updateActiveLabelNameId,
     updateFirstLabelCreatedFlag,
     updateHighlightedLabelId,
     updateImageDataById
@@ -28,7 +29,7 @@ import {Settings} from '../../settings/Settings';
 import {LabelUtil} from '../../utils/LabelUtil';
 
 export class PolygonRenderEngine extends BaseRenderEngine {
-
+    
     // =================================================================================================================
     // STATE
     // =================================================================================================================
@@ -144,6 +145,15 @@ export class PolygonRenderEngine extends BaseRenderEngine {
             }
         }
     }
+
+    public pasteHandler(): void {
+        if(this.imageDataCache && this.imageDataCache.labelPolygons){
+            this.imageDataCache.labelPolygons.forEach((polyLabel) => {
+                store.dispatch(updateActiveLabelNameId(polyLabel.labelId));
+                this.addPolygonLabel(polyLabel.vertices);
+            });
+        }
+    }
 
     // =================================================================================================================
     // RENDERING

src/logic/render/PrimaryEditorRenderEngine.ts

@@ -24,6 +24,7 @@ export class PrimaryEditorRenderEngine extends BaseRenderEngine {
     public mouseMoveHandler(data: EditorData): void {}
     public mouseDownHandler(data: EditorData): void {}
     public mouseUpHandler(data: EditorData): void {}
+    public pasteHandler(): void {}
 
     // =================================================================================================================
     // RENDERING