From ad8588147d04c9c3f2d28ba5fa6666cc26ee284e Mon Sep 17 00:00:00 2001
From: Quozul <30729291+Quozul@users.noreply.github.com>
Date: Mon, 13 May 2024 19:55:45 +0200
Subject: [PATCH] feat: capture pointer

---
 src/listenMouseMove.ts | 2 ++
 src/main.ts            | 5 +++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/listenMouseMove.ts b/src/listenMouseMove.ts
index 42770e2..54c02d6 100644
--- a/src/listenMouseMove.ts
+++ b/src/listenMouseMove.ts
@@ -46,11 +46,13 @@ export function listenMouseMove(
     handleMove(event);
     evCache.push(event);
     previousDistance = calculateTouchDistance();
+    element.setPointerCapture(event.pointerId);
   };
 
   const handleEnd = (event: PointerEvent) => {
     const index = evCache.findIndex((cachedEv) => cachedEv.pointerId === event.pointerId);
     evCache.splice(index, 1);
+    element.releasePointerCapture(event.pointerId);
   };
 
   const handleWheel = (event: WheelEvent) => {
diff --git a/src/main.ts b/src/main.ts
index c94507b..b97ed59 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -90,16 +90,17 @@ class CanvasImage extends HTMLElement {
   attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
     if (name === "src") {
       this.loadImage(newValue);
+      this.calculateImageZoom(true);
     }
   }
 
-  private calculateImageZoom() {
+  private calculateImageZoom(forceCenter: boolean = false) {
     if (!this.context || !this.source) return;
 
     this.displayWidth = (this.source.height * this.context.canvas.width * this.zoomFactor) / this.context.canvas.height;
     this.displayHeight = this.source.height * this.zoomFactor;
 
-    if (this.offsetX === 0) {
+    if (forceCenter || this.offsetX === 0) {
       this.offsetX = -this.displayWidth / 2 + this.source.width / 2;
     }
   }