Fix: Prevent Incorrect Displacement during Animation (#533)

* update-links-n-context-doc

* fix indent

* fix issue where the image zooms while animation is happening

Author: houchongchan

src/core/instance.core.ts

@@ -49,6 +49,7 @@ import {
 } from "./double-click/double-click.logic";
 
 type StartCoordsType = { x: number; y: number } | null;
+type ClientCoordsType = StartCoordsType;
 
 export class ZoomPanPinch {
   public props: ReactZoomPanPinchProps;
@@ -79,6 +80,7 @@ export class ZoomPanPinch {
   public isPanning = false;
   public isWheelPanning = false;
   public startCoords: StartCoordsType = null;
+  public clientCoords: ClientCoordsType = null;
   public lastTouch: number | null = null;
   // pinch helpers
   public distance: null | number = null;

src/core/pan/panning.logic.ts

@@ -60,7 +60,7 @@ export function handlePanning(
   clientX: number,
   clientY: number,
 ): void {
-  const { startCoords, setup } = contextInstance;
+  const { startCoords, clientCoords, setup } = contextInstance;
   const { sizeX, sizeY } = setup.alignmentAnimation;
 
   if (!startCoords) return;
@@ -69,7 +69,7 @@ export function handlePanning(
   const paddingValueX = getPaddingValue(contextInstance, sizeX);
   const paddingValueY = getPaddingValue(contextInstance, sizeY);
 
-  handleCalculateVelocity(contextInstance, { x, y });
+  if(clientCoords?.x != clientX && clientCoords?.y != clientY) handleCalculateVelocity(contextInstance, { x, y });
   handleNewPosition(contextInstance, x, y, paddingValueX, paddingValueY);
 }
 

src/core/pan/panning.utils.ts

@@ -64,6 +64,7 @@ export const handlePanningSetup = (
   const y = event.clientY;
 
   contextInstance.startCoords = { x: x - positionX, y: y - positionY };
+  contextInstance.clientCoords = {x: x, y:  y};
 };
 
 export const handleTouchPanningSetup = (
@@ -81,6 +82,7 @@ export const handleTouchPanningSetup = (
     const x = touches[0].clientX;
     const y = touches[0].clientY;
     contextInstance.startCoords = { x: x - positionX, y: y - positionY };
+    contextInstance.clientCoords = {x: x, y:  y};
   }
 };
 export function handlePanToBounds(