feat: capture pointer

Quozul · May 13, 2024 · ad85881 · ad85881
1 parent b13e1df
commit ad85881
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git 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
@@ -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;
     }
   }