anvaka · calebmcelroy · Feb 15, 2024
diff --git a/README.md b/README.md
@@ -410,13 +410,27 @@ instance.smoothMoveTo(0, 0);
 
 ## Triggering Zoom
 
-To Zoom the object using Javascript use `zoomTo(<number>,<number>,<number>)` function. It expects x, y value as coordinates of where to zoom. It also expects the zoom factor as the third argument. If zoom factor is greater than 1, apply zoom IN. If zoom factor is less than 1, apply zoom OUT.
+### `zoom(zoomFactor: number, smooth: number)`:
+
+`zoom` requires the zoom factor as its first argument. If the zoom factor is greater than 1, it applies a zoom-in effect. Conversely, if the zoom factor is less than 1, it applies a zoom-out effect. This function zooms in or out towards the center of the visible area. To disable smooth zooming, pass `false` as the second argument. 
+
+``` js
+instance.zoom(1.25); // zoom in
+instance.zoom(0.8); // zoom out
+instance.zoom(0.8, false); // second argument disables smooth zoom
+```
+
+### `zoomTo(x: number, y: number, zoomFactor: number)`:
+
+`zoomTo` requires `x` and `y` values as coordinates for the zoom location and the zoom factor as the third argument. If the zoom factor is greater than 1, it applies a zoom-in effect. If the zoom factor is less than 1, it applies a zoom-out effect.
 
 ``` js
 instance.zoomTo(0, 0, 2);
 ```
 
-To zoom in a smooth way use `smoothZoom(<number>,<number>,<number>)`:
+### `smoothZoom(x: number, y: number, zoomFactor: number)`:
+
+`smoothZoom` is identical to `zoomTo` but zooms in a smooth way.
 
 ``` js
 instance.smoothZoom(0, 0, 0.5);

diff --git a/demo/buttons.html b/demo/buttons.html
@@ -850,15 +850,11 @@
 
     function handleClick(e) {
       e.preventDefault();
-      let container = document.querySelector('#scene');
-      let rect = container.getBBox();
-      let cx = rect.x + rect.width/2;
-      let cy = rect.y + rect.height/2;
       let isZoomIn = e.target.id === 'zoomIn';
       let zoomBy = isZoomIn ? 2 : 0.5;
-      pz.smoothZoom(cx, cy, zoomBy);
-      // Or if you don't need animation, usee this:
-      // pz.zoomTo(cx, cy, zoomBy);
+      pz.zoom(zoomBy);
+      // Or if you don't need animation, use this:
+      // pz.zoom(zoomBy, false);
     }
   </script>
   </body>

diff --git a/demo/test/buttons-dom.html b/demo/test/buttons-dom.html
@@ -0,0 +1,156 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv='content-type' content='text/html; charset=utf-8'/>
+    <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no'>
+    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
+    <META NAME='Description' content='Pan and zoom DOM  elements demo '>
+    <meta name='keywords' content='dom, pan, zoom'/>
+    <meta name='author' content='Andrei Kashcha'>
+    <meta name='title' content='DOM panzoom demo'/>
+    <title>DOM panzoom demo</title>
+    <style type="text/css" media="screen">
+        body, html {
+            padding: 0;
+            margin: 0;
+        }
+
+        .header, .footer {
+            padding: 10px;
+            margin: 0;
+            background: rgba(255, 255, 255, 0.4);
+        }
+
+        .header {
+            color: rgba(0, 0, 0, 0.82);
+        }
+
+        a {
+            color: #FF4081;
+            text-decoration: none;
+        }
+
+        .button-container {
+            position: absolute;
+            bottom: 10px;
+            left: 10px;
+            color: rgba(0, 0, 0, 0.52);
+        }
+
+        .button-container .button {
+            display: inline-block;
+            width: 32px;
+            height: 32px;
+            font-size: 28px;
+            line-height: 28px;
+            border: 1px solid;
+            text-align: center;
+            background: white;
+        }
+
+        .footer {
+            color: rgba(0, 0, 0, 0.52);
+        }
+    </style>
+</head>
+<body>
+<div id="lipsum" class='zoomable'>
+    <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam enim lectus, euismod ac metus eget, consequat
+        aliquam augue. Fusce vestibulum sagittis massa, eget iaculis lorem malesuada ut. Curabitur fringilla a
+        lectus
+        sed suscipit. Sed mollis ligula blandit ipsum posuere, et luctus sem iaculis. Suspendisse scelerisque mollis
+        dapibus. Sed elementum placerat lacus, ac rutrum mauris varius in. Sed malesuada, ipsum in facilisis
+        facilisis,
+        eros massa euismod odio, id pretium augue purus sed risus. Nulla vitae purus enim. Suspendisse placerat ac
+        turpis sed tempor. Cras et vulputate eros. Aenean volutpat tincidunt erat eu aliquam. Sed vel ex pulvinar,
+        rutrum velit at, ullamcorper nibh. Ut ac rhoncus nulla. Pellentesque eu orci eu libero semper commodo ac sit
+        amet massa.
+    </p>
+    <p>
+        Donec condimentum odio ut lorem rhoncus pharetra. Maecenas nisl mi, faucibus ut tincidunt eu, lobortis at
+        nunc.
+        Suspendisse ut ipsum nec libero pharetra porta. Mauris porttitor neque nec mi rhoncus, a luctus massa
+        consectetur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed
+        varius
+        mauris et volutpat dignissim. Maecenas consectetur porta mollis. Morbi quis hendrerit massa. Cras vel eros
+        vitae
+        nisi mollis volutpat blandit id est. Vivamus fringilla iaculis lacus eu aliquet. Ut a varius augue, et
+        accumsan
+        nulla. Integer eu sem non erat porttitor posuere. Sed dui tortor, aliquam sed volutpat vitae, sodales non
+        enim.
+        Vestibulum libero nulla, tempus blandit pretium ac, ullamcorper eu nisl.
+    </p>
+    <p>
+        Aenean quis rhoncus ante. Maecenas euismod non lacus nec accumsan. Integer vitae sollicitudin lacus. Aliquam
+        in
+        justo augue. Pellentesque nisl nisi, sollicitudin sed commodo vitae, vestibulum eget est. Lorem ipsum dolor
+        sit
+        amet, consectetur adipiscing elit. Duis auctor laoreet lectus sit amet eleifend. Curabitur tempus est nunc,
+        vel
+        molestie mauris congue vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
+        Curae; Praesent tincidunt aliquam massa, at ornare lacus tincidunt et.
+    </p>
+    <p>
+        Nam posuere et ante in finibus. Proin sagittis iaculis lacus, scelerisque convallis nulla porttitor ac. Nunc
+        sagittis velit vitae pharetra dapibus. Etiam tortor ante, facilisis a odio sed, pretium vehicula dui. Proin
+        et
+        pellentesque lacus, ac tristique nibh. Pellentesque vitae ex a justo fringilla pharetra. Aenean accumsan
+        tempor
+        sollicitudin. Integer elementum, quam at commodo vestibulum, odio massa egestas nibh, nec hendrerit lacus
+        diam
+        eget nisi. Integer pretium pretium purus, eu ornare ipsum posuere id. Nullam eget varius magna, ac blandit
+        tellus. In hac habitasse platea dictumst. Praesent volutpat, purus quis rhoncus faucibus, orci lacus dictum
+        purus, sed sagittis ligula ante ut augue. Curabitur eget est quis erat volutpat mattis. Aliquam eleifend ut
+        tortor eu ultrices.
+    </p>
+    <p>
+        Integer pretium erat et elit bibendum, ut laoreet tortor rutrum. Donec pulvinar faucibus enim vel molestie.
+        Donec et euismod urna. Vestibulum nec feugiat magna. Nam at nunc lorem. Fusce sed ante eu purus posuere
+        vulputate. In hac habitasse platea dictumst. Fusce consectetur elit a magna faucibus euismod. Ut congue
+        efficitur ex. In dictum velit ac arcu condimentum, hendrerit venenatis dui tincidunt. Vestibulum pulvinar
+        purus
+        elementum felis tempus tincidunt. Aenean convallis, leo eu interdum varius, ante dui volutpat urna, a
+        pharetra
+        risus felis mattis mauris. Cras tincidunt justo enim, faucibus commodo nisl fringilla sed. Nullam facilisis,
+        nisl a tincidunt euismod, purus odio sollicitudin sem, at ornare lorem sem ac nisi. Etiam a tincidunt
+        tortor,
+        consectetur porta nisl. Phasellus diam arcu, dapibus finibus nisi facilisis, dictum rutrum leo.
+    </p>
+</div>
+<div class='button-container'>
+    <a href="#" class='button' id='zoomIn'>+</a>
+    <a href="#" class='button' id='zoomOut'>-</a>
+</div>
+<p class='header'>
+    Drag it or zoom it...
+</p>
+<script src='../../dist/panzoom.js'></script>
+<script>
+  var area = document.querySelector('.zoomable')
+  var pz = panzoom(area)
+
+  Array.from(
+    document.querySelectorAll('.button-container a.button')
+  ).forEach(attachClickHandler)
+
+  function attachClickHandler(el) {
+    el.addEventListener('click', handleClick);
+  }
+
+  function handleClick(e) {
+    e.preventDefault();
+    let isZoomIn = e.target.id === 'zoomIn';
+    let zoomBy = isZoomIn ? 2 : 0.5;
+    pz.zoom(zoomBy);
+    // Or if you don't need animation, use this:
+    // pz.zoom(zoomBy, false);
+  }
+</script>
+<a href="https://github.com/anvaka/panzoom">
+    <img style="position: absolute; top: 0; right: 0; border: 0;"
+         src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67"
+         alt="Fork me on GitHub"
+         data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a>
+</body>
+</html>
diff --git a/dist/panzoom.js b/dist/panzoom.js
@@ -24,7 +24,7 @@ module.exports = createPanZoom;
 /**
  * Creates a new instance of panzoom, so that an object can be panned and zoomed
  *
- * @param {DOMElement} domElement where panzoom should be attached.
+ * @param {HTMLElement|SVGGraphicsElement} domElement where panzoom should be attached.
  * @param {Object} options that configure behavior.
  */
 function createPanZoom(domElement, options) {
@@ -127,6 +127,7 @@ function createPanZoom(domElement, options) {
     centerOn: centerOn,
     zoomTo: publicZoomTo,
     zoomAbs: zoomAbs,
+    zoom: zoom,
     smoothZoom: smoothZoom,
     smoothZoomAbs: smoothZoomAbs,
     showRectangle: showRectangle,
@@ -434,6 +435,18 @@ function createPanZoom(domElement, options) {
     zoomByRatio(clientX, clientY, ratio);
   }
 
+  function zoom(ratio, smooth = true) {
+    var ownerRect = owner.getBoundingClientRect();
+    var bbox = panController.getBBox();
+    var x = (ownerRect.width / 2) + bbox.left;
+    var y = (ownerRect.height / 2) + bbox.top;
+    if (smooth) {
+      smoothZoom(x, y, ratio);
+    } else {
+      zoomByRatio(x, y, ratio);
+    }
+  }
+
   function centerOn(ui) {
     var parent = ui.ownerSVGElement;
     if (!parent)
@@ -1327,12 +1340,12 @@ function makeSvgController(svgElement, options) {
   }
 
   function getBBox() {
-    var bbox =  svgElement.getBBox();
+    var boundingBox =  svgElement.getBBox();
     return {
-      left: bbox.x,
-      top: bbox.y,
-      width: bbox.width,
-      height: bbox.height,
+      left: boundingBox.x,
+      top: boundingBox.y,
+      width: boundingBox.width,
+      height: boundingBox.height,
     };
   }
 

diff --git a/dist/panzoom.min.js b/dist/panzoom.min.js
diff --git a/index.d.ts b/index.d.ts
@@ -71,6 +71,7 @@ declare module "panzoom" {
       clientY: number,
       toScaleValue: number
     ) => void;
+    zoom: (ratio: number, smooth?: boolean) => void;
     getTransform: () => Transform;
     showRectangle: (rect: ClientRect) => void;
     pause: () => void;

diff --git a/index.js b/index.js
@@ -23,7 +23,7 @@ module.exports = createPanZoom;
 /**
  * Creates a new instance of panzoom, so that an object can be panned and zoomed
  *
- * @param {DOMElement} domElement where panzoom should be attached.
+ * @param {HTMLElement|SVGGraphicsElement} domElement where panzoom should be attached.
  * @param {Object} options that configure behavior.
  */
 function createPanZoom(domElement, options) {
@@ -126,6 +126,7 @@ function createPanZoom(domElement, options) {
     centerOn: centerOn,
     zoomTo: publicZoomTo,
     zoomAbs: zoomAbs,
+    zoom: zoom,
     smoothZoom: smoothZoom,
     smoothZoomAbs: smoothZoomAbs,
     showRectangle: showRectangle,
@@ -433,6 +434,18 @@ function createPanZoom(domElement, options) {
     zoomByRatio(clientX, clientY, ratio);
   }
 
+  function zoom(ratio, smooth = true) {
+    var ownerRect = owner.getBoundingClientRect();
+    var bbox = panController.getBBox();
+    var x = (ownerRect.width / 2) + bbox.left;
+    var y = (ownerRect.height / 2) + bbox.top;
+    if (smooth) {
+      smoothZoom(x, y, ratio);
+    } else {
+      zoomByRatio(x, y, ratio);
+    }
+  }
+
   function centerOn(ui) {
     var parent = ui.ownerSVGElement;
     if (!parent)