Added a smoothShowRectangle and Promises to all smooth functions

README.md

@@ -405,6 +405,51 @@ To pan in a smooth way use `smoothMoveTo(<number>,<number>)`:
 panzoom.smoothMoveTo(0, 0);
 ```
 
+To pan and zoom to a specific in dom/svg coordinate use:
+
+``` js
+rect =  {
+  top: 10,
+  left: 20,
+  bottom: 30,
+  right: 40,
+};
+
+panzoom.showRectangle(rect);
+```
+
+to do this in a smooth fashion do
+
+``` js
+panzoom.smoothShowRectangle(rect);
+```
+you can also give a function that gets the current rect and the target rect to determine the duration of the animation, like:
+
+``` js
+panzoom.smoothShowRectangle(rect, (from, to) => {
+  var distance = Math.sqrt(
+    Math.pow(from.top - to.top, 2)
+    + Math.pow(from.right - to.right, 2)
+    + Math.pow(from.bottom - to.bottom, 2)
+    + Math.pow(from.left - to.left, 2)
+  );
+
+  var exp_diff = Math.exp(distance / 1000);
+  var sigmoid = (exp_diff * 1000) / (exp_diff + 1);
+
+  return sigmoid;
+})
+```
+
+Further more: the `smoothShowRectangle` return a promise, so that the caller can act on the completion of the animation.
+
+``` js
+panzoom.smoothShowRectangle(rect)
+  .then(() => {
+    console.log("animation complete");
+  });
+```
+
 # license
 
 MIT

index.d.ts

@@ -50,22 +50,23 @@ declare module "panzoom" {
     dispose: () => void;
     moveBy: (dx: number, dy: number, smooth: boolean) => void;
     moveTo: (x: number, y: number) => void;
-    smoothMoveTo: (x: number, y: number) => void;
-    centerOn: (ui: any) => void;
+    smoothMoveTo: (x: number, y: number) => Promise<boolean>;
+    centerOn: (ui: any) => Promise<boolean>;
     zoomTo: (clientX: number, clientY: number, scaleMultiplier: number) => void;
     zoomAbs: (clientX: number, clientY: number, zoomLevel: number) => void;
     smoothZoom: (
       clientX: number,
       clientY: number,
       scaleMultiplier: number
-    ) => void;
+    ) => Promise<boolean>;
     smoothZoomAbs: (
       clientX: number,
       clientY: number,
       toScaleValue: number
-    ) => void;
+    ) => Promise<boolean>;
     getTransform: () => Transform;
     showRectangle: (rect: ClientRect) => void;
+    smoothShowRectangle: (rect: ClientRect, duration: (from:ClientRect, to:ClientRect) => number) => Promise<boolean>;
     pause: () => void;
     resume: () => void;
     isPaused: () => boolean;