Merge pull request #226 from CertifaiAI/fix_shift_canvas

♻️ Add shift canvas when enlarge
CertifaiAI · Dec 10, 2021 · 811863e · 811863e
2 parents a436202 + f48acf6
commit 811863e
Showing 1 changed file with 23 additions and 1 deletion.
diff --git a/...ts/image-labelling/image-labelling-segmentation/image-labelling-segmentation.component.ts b/...ts/image-labelling/image-labelling-segmentation/image-labelling-segmentation.component.ts
@@ -79,6 +79,7 @@ export class ImageLabellingSegmentationComponent implements OnInit, OnChanges, O
     mouseEvent: MouseEvent | undefined;
     labelColorList!: Map<string, string>;
     invalidInput: boolean = false;
+    intervalId!: NodeJS.Timeout;
     @Input() _selectMetadata!: PolyMetadata;
     @Input() _imgSrc: string = '';
     @Input() _tabStatus: TabsProps<CompleteMetadata>[] = [];
@@ -367,6 +368,28 @@ export class ImageLabellingSegmentationComponent implements OnInit, OnChanges, O
                 this.movePolygon(key);
             }
 
+            if (ctrlKey) {
+                this._imgLblStateService.setState({ draw: false, drag: true, scroll: true });
+                this.intervalId = setInterval(() => {
+                    this._segCanvasService.panPolygons(this._selectMetadata, true, () => {
+                        /** This is intentional */
+                    });
+                    this._segCanvasService.drawNewPolygon(
+                        this._selectMetadata,
+                        this.image,
+                        this.canvasContext,
+                        this.canvas.nativeElement,
+                        false,
+                    );
+                }, 100);
+            }
+
+            if (key === 'x' || key === 'X') {
+                clearInterval(this.intervalId);
+                this._segCanvasService.setGlobalXY(this.mouseEvent as ExtendedMouseEvent);
+                this._imgLblStateService.setState({ draw: true, drag: false, scroll: false });
+            }
+
             if (this._shortcutKeyService.checkKey(ctrlKey, metaKey, shiftKey, key, 'copy')) {
                 this.copyPolygon();
             } else if (this._shortcutKeyService.checkKey(ctrlKey, metaKey, shiftKey, key, 'paste')) {
@@ -380,7 +403,6 @@ export class ImageLabellingSegmentationComponent implements OnInit, OnChanges, O
                     this.undoAction();
                 }
             }
-            // }
         } catch (err) {
             console.log('canvasKeyDownEvent', err);
         }