Finalize cusor position

src/app/app.component.html

@@ -316,6 +316,10 @@
             <mat-icon *ngIf="!focusedItem">add</mat-icon>
         </button>
 
+        <label class="cursor-position" *ngIf="cursorPosition" >
+            {{cursorPosition.x.toFixed(cursorPosition.decimals)}},
+            {{cursorPosition.y.toFixed(cursorPosition.decimals)}}
+        </label>
 
         <button mat-mini-fab *ngIf="(focusedImage && !cfg.preview && !dragging)"
             color="accent"
@@ -412,9 +416,6 @@
             >
                 <mat-icon svgIcon="zoom_out"></mat-icon> 
             </button>
-            <label class="cursor-position" *ngIf="!isTouchDevice()" >
-                {{cursorPosition.x.toFixed(1)}}, {{cursorPosition.y.toFixed(1)}}
-            </label>
         </div>
 
         <svg

src/app/app.component.scss

@@ -202,12 +202,14 @@ textarea {
 }
 
 label.cursor-position {
-    position: relative;
-    right: 0;
-    float: right;
-    align-items: center;
-    width: max-content;
-    height: 20px;
-    margin-bottom: -10px;
-    display: inline-flex;
+    position: absolute;
+    font-size: 1.5em;
+    font-family: monospace;
+    bottom:16px;
+    left:50%;
+    transform: translateX(-50%);
+    padding:4px 16px;
+    background-color: rgba(255, 255, 255, 0.8);
+    color:#111111;
+    border-radius: 4px;
 }

src/app/app.component.ts

@@ -68,7 +68,7 @@ export class AppComponent implements AfterViewInit {
   wasCanvasDragged = false;
   draggedIsNew = false;
   dragging = false;
-	cursorPosition: Point = {x: 0, y: 0};
+	cursorPosition?: Point & {decimals?: number};
 
   // Images
   images: Image[] = [];
@@ -169,7 +169,7 @@ export class AppComponent implements AfterViewInit {
     }
   }
 
-	setCursorPosition(position: Point) {
+	setCursorPosition(position?: Point & {decimals?: number}) {
 		this.cursorPosition = position;
 	}
 
@@ -498,8 +498,4 @@ export class AppComponent implements AfterViewInit {
       }
     }
   }
-
-	isTouchDevice(): boolean {
-		return window.matchMedia("(pointer: coarse)").matches
-	}
 }

src/app/canvas/canvas.component.ts

@@ -51,7 +51,7 @@ export class CanvasComponent implements OnInit, OnChanges, AfterViewInit {
   @Output() afterModelChange = new EventEmitter<void>();
   @Output() dragging = new EventEmitter<boolean>();
   @Output() viewPort = new EventEmitter<{x: number, y: number, w: number, h: number | null, force?: boolean}>();
-	@Output() cursorPosition = new EventEmitter<Point>();
+	@Output() cursorPosition = new EventEmitter<Point & {decimals?: number} | undefined>();
 
   @Output() emptyCanvas = new EventEmitter<void>();
 
@@ -127,7 +127,6 @@ export class CanvasComponent implements OnInit, OnChanges, AfterViewInit {
     $event.stopPropagation();
   }
   @HostListener('mousemove', ['$event']) onMouseMove($event: MouseEvent) {
-		this.setCursorPosition($event);
     this.drag($event);
   }
   @HostListener('mouseup', ['$event'])  onMouseUp($event: MouseEvent) {
@@ -260,6 +259,7 @@ export class CanvasComponent implements OnInit, OnChanges, AfterViewInit {
       this.drag(this.draggedEvt);
     }
     this.dragging.emit(false);
+    this.setCursorPosition(undefined);
 
     if (!this.draggedPoint && !this.wasCanvasDragged) {
       // unselect action
@@ -318,6 +318,7 @@ export class CanvasComponent implements OnInit, OnChanges, AfterViewInit {
         }
         this.afterModelChange.emit();
         this.draggedEvt = null;
+        this.setCursorPosition({...pt, decimals});
       } else if(this.draggedEvt) {
         this.wasCanvasDragged = true;
         const pinchToZoom = this.pinchToZoom(this.draggedEvt, event);
@@ -339,8 +340,7 @@ export class CanvasComponent implements OnInit, OnChanges, AfterViewInit {
     }
   }
 
-	setCursorPosition(event: MouseEvent | TouchEvent) {
-		const pt = this.eventToLocation(event);
-		this.cursorPosition.emit({x: pt.x, y: pt.y});
+	setCursorPosition(location?: {x: number, y: number, decimals?: number}) {
+		this.cursorPosition.emit(location);
 	}
 }