[desktop]: Show zoom scale on Image

tiagohm · Jul 21, 2024 · b6e2e95 · b6e2e95
1 parent 0f4608c
commit b6e2e95
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 7 deletions.
diff --git a/desktop/src/app/image/image.component.html b/desktop/src/app/image/image.component.html
@@ -1,4 +1,12 @@
-<div class="inline-block relative">
+<span
+	class="bg-black-alpha-20 border-round-sm fixed pointer-events-none px-3 py-2 select-none z-1"
+	style="top: 48px; left: 6px">
+	{{ imageZoom.toFixed(1) }}x
+</span>
+
+<div
+	class="inline-block relative"
+	style="will-change: transform; backface-visibility: hidden">
 	<img
 		#image
 		(load)="imageLoaded()"
@@ -127,6 +135,8 @@
 		[draggable]="true"
 		[resizable]="true"
 		[rotatable]="false"
+		[edgeDraggable]="true"
+		[zoom]="1"
 		(drag)="roiDrag($event)"
 		(rotate)="roiRotate($event)"
 		(resize)="roiResize($event)" />

diff --git a/desktop/src/app/image/image.component.ts b/desktop/src/app/image/image.component.ts
@@ -78,6 +78,7 @@ export class ImageComponent implements AfterViewInit, OnDestroy {
 	private imageURL!: string
 	imageData: ImageData = {}
 	liveStackingMode: LiveStackingMode = 'NONE'
+	imageZoom = 1
 
 	readonly scnrChannels: { name: string; value?: ImageChannel }[] = [
 		{ name: 'None', value: undefined },
@@ -754,8 +755,8 @@ export class ImageComponent implements AfterViewInit, OnDestroy {
 		target.style.transform = transform
 
 		const rect = this.moveable.getRect()
-		this.imageROI.x = Math.round(rect.left)
-		this.imageROI.y = Math.round(rect.top)
+		this.imageROI.x = Math.trunc(rect.left)
+		this.imageROI.y = Math.trunc(rect.top)
 	}
 
 	roiResize(event: OnResize) {
@@ -765,12 +766,12 @@ export class ImageComponent implements AfterViewInit, OnDestroy {
 		const rect = this.moveable.getRect()
 
 		target.style.width = `${width}px`
-		this.imageROI.x = Math.round(rect.left)
-		this.imageROI.width = Math.round(width)
+		this.imageROI.x = Math.trunc(rect.left)
+		this.imageROI.width = Math.trunc(width)
 
 		target.style.height = `${height}px`
-		this.imageROI.y = Math.round(rect.top)
-		this.imageROI.height = Math.round(height)
+		this.imageROI.y = Math.trunc(rect.top)
+		this.imageROI.height = Math.trunc(height)
 	}
 
 	roiRotate(event: OnRotate) {
@@ -1244,6 +1245,7 @@ export class ImageComponent implements AfterViewInit, OnDestroy {
 				maxZoom: 500.0,
 				autocenter: true,
 				zoomDoubleClickSpeed: 1,
+				zoomSpeed: 1,
 				filterKey: () => {
 					return true
 				},
@@ -1255,6 +1257,11 @@ export class ImageComponent implements AfterViewInit, OnDestroy {
 					return e.target === this.roi.nativeElement
 				},
 			})
+
+			this.panZoom.on('zoom', () => {
+				const { scale } = this.panZoom!.getTransform()
+				this.imageZoom = scale
+			})
 		}
 	}