From f42d4bc4dbe72ec8effd47b1d94843063eb62d8e Mon Sep 17 00:00:00 2001
From: Nam Nguyen <nam.nguyen.node@gmail.com>
Date: Tue, 14 Nov 2023 09:41:44 -0400
Subject: [PATCH] =?UTF-8?q?Improve=20zoom=20move=20performance=20?=
 =?UTF-8?q?=F0=9F=9A=80=20(#243)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .changeset/witty-bears-dress.md          |  5 ++++
 packages/core/src/createZoomImageMove.ts | 13 ----------
 size.json                                | 30 ++++++++++++------------
 3 files changed, 20 insertions(+), 28 deletions(-)
 create mode 100644 .changeset/witty-bears-dress.md

diff --git a/.changeset/witty-bears-dress.md b/.changeset/witty-bears-dress.md
new file mode 100644
index 00000000..369194f0
--- /dev/null
+++ b/.changeset/witty-bears-dress.md
@@ -0,0 +1,5 @@
+---
+"@zoom-image/core": minor
+---
+
+Improve zoom move performance 🚀
diff --git a/packages/core/src/createZoomImageMove.ts b/packages/core/src/createZoomImageMove.ts
index baf57f82..a64ee10a 100644
--- a/packages/core/src/createZoomImageMove.ts
+++ b/packages/core/src/createZoomImageMove.ts
@@ -33,19 +33,6 @@ export function createZoomImageMove(container: HTMLElement, options: ZoomImageMo
   zoomedImg.style.top = "0"
   zoomedImg.style.left = "0"
 
-  function init() {
-    container.style.width = `${sourceImgElement.clientWidth}px`
-    container.style.height = `${sourceImgElement.clientHeight}px`
-    zoomedImg.style.display = "none"
-    zoomedImg.style.transform = "none"
-  }
-
-  if (sourceImgElement.complete) {
-    init()
-  } else {
-    sourceImgElement.onload = init
-  }
-
   function handlePointerEnter(event: PointerEvent) {
     zoomedImg.style.display = "block"
     const zoomedImgWidth = sourceImgElement.clientWidth * zoomFactor
diff --git a/size.json b/size.json
index 71642c63..737d3032 100644
--- a/size.json
+++ b/size.json
@@ -2,8 +2,8 @@
   "@zoom-image/core": {
     "createZoomImageWheel": "1.76 KB",
     "createZoomImageHover": "1.14 KB",
-    "createZoomImageMove": "869 B",
     "createZoomImageClick": "847 B",
+    "createZoomImageMove": "841 B",
     "cropImage": "369 B",
     "makeCalculateZoom": "97 B",
     "makeCalculatePercentage": "95 B"
@@ -11,43 +11,43 @@
   "@zoom-image/react": {
     "useZoomImageWheel": "2.05 KB",
     "useZoomImageHover": "1.42 KB",
-    "useZoomImageMove": "1.12 KB",
+    "useZoomImageMove": "1.08 KB",
     "useZoomImageClick": "1.08 KB"
   },
   "@zoom-image/preact": {
     "useZoomImageWheel": "2.95 KB",
     "useZoomImageHover": "2.35 KB",
-    "useZoomImageMove": "2.06 KB",
+    "useZoomImageMove": "2.02 KB",
     "useZoomImageClick": "2.02 KB"
   },
   "@zoom-image/qwik": {
     "useZoomImageWheel": "2.2 KB",
     "useZoomImageHover": "1.55 KB",
-    "useZoomImageMove": "1.22 KB",
-    "useZoomImageClick": "1.2 KB"
+    "useZoomImageClick": "1.2 KB",
+    "useZoomImageMove": "1.19 KB"
   },
   "@zoom-image/solid": {
     "useZoomImageWheel": "3.25 KB",
     "useZoomImageHover": "2.62 KB",
-    "useZoomImageMove": "2.32 KB",
-    "useZoomImageClick": "2.29 KB"
+    "useZoomImageClick": "2.29 KB",
+    "useZoomImageMove": "2.29 KB"
   },
   "@zoom-image/svelte": {
     "useZoomImageWheel": "2.24 KB",
     "useZoomImageHover": "1.63 KB",
-    "useZoomImageMove": "1.31 KB",
-    "useZoomImageClick": "1.29 KB"
+    "useZoomImageClick": "1.29 KB",
+    "useZoomImageMove": "1.29 KB"
   },
   "@zoom-image/vue": {
     "useZoomImageWheel": "2.02 KB",
     "useZoomImageHover": "1.41 KB",
-    "useZoomImageMove": "1.08 KB",
-    "useZoomImageClick": "1.07 KB"
+    "useZoomImageClick": "1.07 KB",
+    "useZoomImageMove": "1.06 KB"
   },
   "@zoom-image/angular": {
-    "ZoomImageClickService": "3.48 KB",
-    "ZoomImageHoverService": "3.48 KB",
-    "ZoomImageWheelService": "3.48 KB",
-    "ZoomImageMoveService": "3.48 KB"
+    "ZoomImageClickService": "3.43 KB",
+    "ZoomImageHoverService": "3.43 KB",
+    "ZoomImageMoveService": "3.43 KB",
+    "ZoomImageWheelService": "3.43 KB"
   }
 }