d3-zoom - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

build/d3-zoom.js

@@ -7,3 +7,3 @@ (function (global, factory) {
 
-  var version = "0.1.0";
+  var version = "0.2.0";
 
@@ -70,3 +70,3 @@ function constant(x) {
   function transform(node) {
-    return node && node.__zoom || identity;
+    return node.__zoom || identity;
   }
@@ -88,5 +88,5 @@
 
-  function defaultSize() {
+  function defaultExtent() {
     var node = this.ownerSVGElement || this;
-    return [node.clientWidth, node.clientHeight];
+    return [[0, 0], [node.clientWidth, node.clientHeight]];
   }
@@ -100,5 +100,9 @@
     var filter = defaultFilter,
-        size = defaultSize,
+        extent = defaultExtent,
         k0 = 0,
         k1 = Infinity,
+        x0 = -k1,
+        x1 = k1,
+        y0 = x0,
+        y1 = x1,
         duration = 250,
@@ -108,2 +112,4 @@ gestures = [],
         mousemoving,
+        mousePoint,
+        mouseLocation,
         touchstarting,
@@ -129,3 +135,2 @@ touchending,
       var selection = collection.selection ? collection.selection() : collection;
-      transform = clamp(transform);
       selection.property("__zoom", defaultTransform);
@@ -154,7 +159,8 @@ if (collection !== selection) {
       zoom.transform(selection, function() {
-        var t0 = this.__zoom,
-            p0 = (p0 = size.apply(this, arguments), [p0[0] / 2, p0[1] / 2]),
+        var e = extent.apply(this, arguments),
+            t0 = this.__zoom,
+            p0 = centroid(e),
             p1 = t0.invert(p0),
             k1 = typeof k === "function" ? k.apply(this, arguments) : k;
-        return translate(scale(t0, k1), p0, p1);
+        return constrain(translate(scale(t0, k1), p0, p1), e);
       });
@@ -165,29 +171,29 @@ };
       zoom.transform(selection, function() {
-        return this.__zoom.translate(
+        return constrain(this.__zoom.translate(
           typeof x === "function" ? x.apply(this, arguments) : x,
           typeof y === "function" ? y.apply(this, arguments) : y
-        );
+        ), extent.apply(this, arguments));
       });
     };
 
-    function clamp(transform) {
-      return function() {
-        var t = typeof transform === "function" ? transform.apply(this, arguments) : transform;
-        if (k0 > t.k || t.k > k1) {
-          var p0 = (p0 = size.apply(this, arguments), [p0[0] / 2, p0[1] / 2]),
-              p1 = t.invert(p0);
-          t = translate(scale(t, t.k), p0, p1);
-        }
-        return t;
-      };
-    }
-
     function scale(transform, k) {
-      return new Transform(Math.max(k0, Math.min(k1, k)), transform.x, transform.y);
+      k = Math.max(k0, Math.min(k1, k));
+      return k === transform.k ? transform : new Transform(k, transform.x, transform.y);
     }
 
     function translate(transform, p0, p1) {
-      return p1 = transform.apply(p1), new Transform(transform.k, transform.x + p0[0] - p1[0], transform.y + p0[1] - p1[1]);
+      var x = p0[0] - p1[0] * transform.k, y = p0[1] - p1[1] * transform.k;
+      return x === transform.x && y === transform.y ? transform : new Transform(transform.k, x, y);
     }
 
+    function constrain(transform, extent) {
+      var dx = Math.min(0, transform.invertX(extent[0][0]) - x0) || Math.max(0, transform.invertX(extent[1][0]) - x1),
+          dy = Math.min(0, transform.invertY(extent[0][1]) - y0) || Math.max(0, transform.invertY(extent[1][1]) - y1);
+      return dx || dy ? transform.translate(dx, dy) : transform;
+    }
+
+    function centroid(extent) {
+      return [(+extent[0][0] + +extent[1][0]) / 2, (+extent[0][1] + +extent[1][1]) / 2];
+    }
+
     function schedule(transition, transform, center) {
@@ -197,9 +203,9 @@ transition
           .on("interrupt.zoom end.zoom", function() { gesture(this, arguments).end(); })
-          .tween("zoom:zoom", function() {
+          .tween("zoom", function() {
             var that = this,
                 args = arguments,
                 g = gesture(that, args),
-                s = size.apply(that, args),
-                p = center || [s[0] / 2, s[1] / 2],
-                w = Math.max(s[0], s[1]),
+                e = extent.apply(that, args),
+                p = center || centroid(e),
+                w = Math.max(e[1][0] - e[0][0], e[1][1] - e[0][1]),
                 a = that.__zoom,
@@ -241,4 +247,3 @@ b = typeof transform === "function" ? transform.apply(that, args) : transform,
       zoom: function(key, transform) {
-        if (this.wheel && key !== "wheel") this.wheel[1] = transform.invert(this.wheel[0]);
-        if (this.mouse && key !== "mouse") this.mouse[1] = transform.invert(this.mouse[0]);
+        if (mousePoint && key !== "mouse") mouseLocation = transform.invert(mousePoint);
         if (this.touch0 && key !== "touch") this.touch0[1] = transform.invert(this.touch0[0]);
@@ -253,2 +258,3 @@ if (this.touch1 && key !== "touch") this.touch1[1] = transform.invert(this.touch1[0]);
           gestures.splice(this.index, 1);
+          mousePoint = mouseLocation = null;
           this.index = -1;
@@ -267,4 +273,2 @@ this.emit("end");
       var g = gesture(this, arguments),
-          p0,
-          p1,
           y = -d3Selection.event.deltaY * (d3Selection.event.deltaMode ? 120 : 1) / 500,
@@ -277,5 +281,9 @@ t = this.__zoom,
 
-      // If there were recently wheel events, use the existing point and location.
-      if (g.wheel) {
-        p0 = g.wheel[0], p1 = g.wheel[1];
+      // If the mouse is in the same location as before, reuse it.
+      // If there were recent wheel events, reset the wheel idle timeout.
+      if (wheelTimer) {
+        var point = d3Selection.mouse(this);
+        if (mousePoint[0] !== point[0] || mousePoint[1] !== point[1]) {
+          mouseLocation = t.invert(mousePoint = point);
+        }
         clearTimeout(wheelTimer);
@@ -286,3 +294,4 @@ }
       else {
-        g.wheel = [p0 = d3Selection.mouse(this), p1 = t.invert(p0)];
+        g.extent = extent.apply(this, arguments);
+        mouseLocation = t.invert(mousePoint = d3Selection.mouse(this));
         d3Transition.interrupt(this);
@@ -294,7 +303,6 @@ g.start();
       wheelTimer = setTimeout(wheelidled, wheelDelay);
-      g.zoom("wheel", translate(scale(t, k * Math.pow(2, y)), p0, p1));
+      g.zoom("mouse", constrain(translate(scale(t, k * Math.pow(2, y)), mousePoint, mouseLocation), g.extent));
 
       function wheelidled() {
         wheelTimer = null;
-        delete g.wheel;
         g.end();
@@ -307,5 +315,3 @@ }
       var g = gesture(this, arguments),
-          v = d3Selection.select(d3Selection.event.view).on("mousemove.zoom", mousemoved, true).on("mouseup.zoom", mouseupped, true),
-          p0 = d3Selection.mouse(this),
-          p1 = this.__zoom.invert(p0);
+          v = d3Selection.select(d3Selection.event.view).on("mousemove.zoom", mousemoved, true).on("mouseup.zoom", mouseupped, true);
 
@@ -315,3 +321,4 @@ d3Drag.dragDisable(d3Selection.event.view);
       mousemoving = false;
-      g.mouse = [p0, p1];
+      g.extent = extent.apply(this, arguments);
+      mouseLocation = this.__zoom.invert(mousePoint = d3Selection.mouse(this));
       d3Transition.interrupt(this);
@@ -323,3 +330,3 @@ g.start();
         mousemoving = true;
-        g.zoom("mouse", translate(g.that.__zoom, g.mouse[0] = d3Selection.mouse(g.that), g.mouse[1]));
+        g.zoom("mouse", constrain(translate(g.that.__zoom, mousePoint = d3Selection.mouse(g.that), mouseLocation), g.extent));
       }
@@ -331,3 +338,2 @@
         noevent();
-        delete g.mouse;
         g.end();
@@ -343,3 +349,3 @@ }
           k1 = t0.k * (d3Selection.event.shiftKey ? 0.5 : 2),
-          t1 = translate(scale(t0, k1), p0, p1);
+          t1 = constrain(translate(scale(t0, k1), p0, p1), extent.apply(this, arguments));
 
@@ -371,2 +377,3 @@ noevent();
         d3Transition.interrupt(this);
+        g.extent = extent.apply(this, arguments);
         g.start();
@@ -400,3 +407,3 @@ }
       else return;
-      g.zoom("touch", translate(t, p, l));
+      g.zoom("touch", constrain(translate(t, p, l), g.extent));
     }
@@ -425,4 +432,4 @@
 
-    zoom.size = function(_) {
-      return arguments.length ? (size = typeof _ === "function" ? _ : constant([+_[0], +_[1]]), zoom) : size;
+    zoom.extent = function(_) {
+      return arguments.length ? (extent = typeof _ === "function" ? _ : constant([[+_[0][0], +_[0][1]], [+_[1][0], +_[1][1]]]), zoom) : extent;
     };
@@ -434,2 +441,6 @@
 
+    zoom.translateExtent = function(_) {
+      return arguments.length ? (x0 = +_[0][0], x1 = +_[1][0], y0 = +_[0][1], y1 = +_[1][1], zoom) : [[x0, y0], [x1, y1]];
+    };
+
     zoom.duration = function(_) {
@@ -450,3 +461,4 @@ return arguments.length ? (duration = +_, zoom) : duration;
   exports.zoomTransform = transform;
+  exports.zoomIdentity = identity;
 
 }));

build/d3-zoom.min.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("d3-dispatch"),require("d3-drag"),require("d3-interpolate"),require("d3-selection"),require("d3-transition")):"function"==typeof define&&define.amd?define(["exports","d3-dispatch","d3-drag","d3-interpolate","d3-selection","d3-transition"],e):e(t.d3_zoom=t.d3_zoom||{},t.d3_dispatch,t.d3_drag,t.d3_interpolate,t.d3_selection,t.d3_transition)}(this,function(t,e,n,o,i,r){"use strict";function u(t){return function(){return t}}function h(t,e,n){this.target=t,this.type=e,this.transform=n}function s(t,e,n){this.k=t,this.x=e,this.y=n}function c(t){return t&&t.__zoom||y}function a(){i.event.stopImmediatePropagation()}function f(){i.event.preventDefault(),i.event.stopImmediatePropagation()}function l(){return!i.event.button}function m(){var t=this.ownerSVGElement||this;return[t.clientWidth,t.clientHeight]}function p(){return this.__zoom||y}function d(t){function c(t){t.on("wheel.zoom",w).on("mousedown.zoom",k).on("dblclick.zoom",x).on("touchstart.zoom",T).on("touchmove.zoom",b).on("touchend.zoom touchcancel.zoom",q).style("-webkit-tap-highlight-color","rgba(0,0,0,0)").property("__zoom",p)}function d(t){return function(){var e="function"==typeof t?t.apply(this,arguments):t;if(I>e.k||e.k>P){var n=(n=D.apply(this,arguments),[n[0]/2,n[1]/2]),o=e.invert(n);e=y(v(e,e.k),n,o)}return e}}function v(t,e){return new s(Math.max(I,Math.min(P,e)),t.x,t.y)}function y(t,e,n){return n=t.apply(n),new s(t.k,t.x+e[0]-n[0],t.y+e[1]-n[1])}function z(t,e,n){t.on("start.zoom",function(){_(this,arguments).start()}).on("interrupt.zoom end.zoom",function(){_(this,arguments).end()}).tween("zoom:zoom",function(){var t=this,i=arguments,r=_(t,i),u=D.apply(t,i),h=n||[u[0]/2,u[1]/2],c=Math.max(u[0],u[1]),a=t.__zoom,f="function"==typeof e?e.apply(t,i):e,l=o.interpolateZoom(a.invert(h).concat(c/a.k),f.invert(h).concat(c/f.k));return function(t){if(1===t)t=f;else{var e=l(t),n=c/e[2];t=new s(n,h[0]-e[0]*n,h[1]-e[1]*n)}r.zoom(null,t)}})}function _(t,e){for(var n,o=0,i=j.length;i>o;++o)if((n=j[o]).that===t)return n;return new g(t,e)}function g(t,e){this.that=t,this.args=e,this.index=-1,this.active=0}function w(){function t(){X=null,delete o.wheel,o.end()}if(B.apply(this,arguments)){var e,n,o=_(this,arguments),u=-i.event.deltaY*(i.event.deltaMode?120:1)/500,h=this.__zoom,s=h.k;0===u||0>u&&s===I||u>0&&s===P||(o.wheel?(e=o.wheel[0],n=o.wheel[1],clearTimeout(X)):(o.wheel=[e=i.mouse(this),n=h.invert(e)],r.interrupt(this),o.start()),f(),X=setTimeout(t,K),o.zoom("wheel",y(v(h,s*Math.pow(2,u)),e,n)))}}function k(){function t(){f(),M=!0,o.zoom("mouse",y(o.that.__zoom,o.mouse[0]=i.mouse(o.that),o.mouse[1]))}function e(){u.on("mousemove.zoom mouseup.zoom",null),n.dragEnable(i.event.view,M),f(),delete o.mouse,o.end()}if(!E&&B.apply(this,arguments)){var o=_(this,arguments),u=i.select(i.event.view).on("mousemove.zoom",t,!0).on("mouseup.zoom",e,!0),h=i.mouse(this),s=this.__zoom.invert(h);n.dragDisable(i.event.view),a(),M=!1,o.mouse=[h,s],r.interrupt(this),o.start()}}function x(){if(B.apply(this,arguments)){var t=this.__zoom,e=i.mouse(this),n=t.invert(e),o=t.k*(i.event.shiftKey?.5:2),r=y(v(t,o),e,n);f(),S>0?i.select(this).transition().duration(S).call(z,r,e):i.select(this).call(c.transform,r)}}function T(){if(B.apply(this,arguments)){var t,e,n,o=_(this,arguments),u=i.event.changedTouches,h=u.length;for(a(),t=0;h>t;++t)e=u[t],n=i.touch(this,u,e.identifier),n=[n,this.__zoom.invert(n),e.identifier],o.touch0?o.touch1||(o.touch1=n):o.touch0=n;return Y&&(Y=clearTimeout(Y),!o.touch1)?(o.end(),x.apply(this,arguments)):void(i.event.touches.length===h&&(Y=setTimeout(function(){Y=null},H),r.interrupt(this),o.start()))}}function b(){var t,e,n,o,r=_(this,arguments),u=i.event.changedTouches,h=u.length;for(f(),Y&&(Y=clearTimeout(Y)),t=0;h>t;++t)e=u[t],n=i.touch(this,u,e.identifier),r.touch0&&r.touch0[2]===e.identifier?r.touch0[0]=n:r.touch1&&r.touch1[2]===e.identifier&&(r.touch1[0]=n);if(e=r.that.__zoom,r.touch1){var s=r.touch0[0],c=r.touch0[1],a=r.touch1[0],l=r.touch1[1],m=(m=a[0]-s[0])*m+(m=a[1]-s[1])*m,p=(p=l[0]-c[0])*p+(p=l[1]-c[1])*p;e=v(e,Math.sqrt(m/p)),n=[(s[0]+a[0])/2,(s[1]+a[1])/2],o=[(c[0]+l[0])/2,(c[1]+l[1])/2]}else{if(!r.touch0)return;n=r.touch0[0],o=r.touch0[1]}r.zoom("touch",y(e,n,o))}function q(){var t,e,n=_(this,arguments),o=i.event.changedTouches,r=o.length;for(a(),E&&clearTimeout(E),E=setTimeout(function(){E=null},H),t=0;r>t;++t)e=o[t],n.touch0&&n.touch0[2]===e.identifier?delete n.touch0:n.touch1&&n.touch1[2]===e.identifier&&delete n.touch1;n.touch1&&!n.touch0&&(n.touch0=n.touch1,delete n.touch1),n.touch0||n.end()}var M,Y,E,X,B=l,D=m,I=0,P=1/0,S=250,j=[],G=e.dispatch("start","zoom","end").on("start",t),H=500,K=150;return c.transform=function(t,e){var n=t.selection?t.selection():t;e=d(e),n.property("__zoom",p),t!==n?z(t,e):n.interrupt().each(function(){_(this,arguments).start().zoom(null,"function"==typeof e?e.apply(this,arguments):e).end()})},c.scaleBy=function(t,e){c.scaleTo(t,function(){var t=this.__zoom.k,n="function"==typeof e?e.apply(this,arguments):e;return t*n})},c.scaleTo=function(t,e){c.transform(t,function(){var t=this.__zoom,n=(n=D.apply(this,arguments),[n[0]/2,n[1]/2]),o=t.invert(n),i="function"==typeof e?e.apply(this,arguments):e;return y(v(t,i),n,o)})},c.translateBy=function(t,e,n){c.transform(t,function(){return this.__zoom.translate("function"==typeof e?e.apply(this,arguments):e,"function"==typeof n?n.apply(this,arguments):n)})},g.prototype={start:function(){return 1===++this.active&&(this.index=j.push(this)-1,this.emit("start")),this},zoom:function(t,e){return this.wheel&&"wheel"!==t&&(this.wheel[1]=e.invert(this.wheel[0])),this.mouse&&"mouse"!==t&&(this.mouse[1]=e.invert(this.mouse[0])),this.touch0&&"touch"!==t&&(this.touch0[1]=e.invert(this.touch0[0])),this.touch1&&"touch"!==t&&(this.touch1[1]=e.invert(this.touch1[0])),this.that.__zoom=e,this.emit("zoom"),this},end:function(){return 0===--this.active&&(j.splice(this.index,1),this.index=-1,this.emit("end")),this},emit:function(t){i.customEvent(new h(c,t,this.that.__zoom),G.apply,G,[t,this.that,this.args])}},c.filter=function(t){return arguments.length?(B="function"==typeof t?t:u(!!t),c):B},c.size=function(t){return arguments.length?(D="function"==typeof t?t:u([+t[0],+t[1]]),c):D},c.scaleExtent=function(t){return arguments.length?(I=+t[0],P=+t[1],c):[I,P]},c.duration=function(t){return arguments.length?(S=+t,c):S},c.on=function(){var t=G.on.apply(G,arguments);return t===G?c:t},c}var v="0.1.0";s.prototype={constructor:s,scale:function(t){return 1===t?this:new s(this.k*t,this.x,this.y)},translate:function(t,e){return 0===t&0===e?this:new s(this.k,this.x+this.k*t,this.y+this.k*e)},apply:function(t){return[t[0]*this.k+this.x,t[1]*this.k+this.y]},applyX:function(t){return t*this.k+this.x},applyY:function(t){return t*this.k+this.y},invert:function(t){return[(t[0]-this.x)/this.k,(t[1]-this.y)/this.k]},invertX:function(t){return(t-this.x)/this.k},invertY:function(t){return(t-this.y)/this.k},rescaleX:function(t){return t.copy().domain(t.range().map(this.invertX,this).map(t.invert,t))},rescaleY:function(t){return t.copy().domain(t.range().map(this.invertY,this).map(t.invert,t))},toString:function(){return"translate("+this.x+","+this.y+") scale("+this.k+")"}};var y=new s(1,0,0);c.prototype=s.prototype,t.version=v,t.zoom=d,t.zoomTransform=c});
+!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("d3-dispatch"),require("d3-drag"),require("d3-interpolate"),require("d3-selection"),require("d3-transition")):"function"==typeof define&&define.amd?define(["exports","d3-dispatch","d3-drag","d3-interpolate","d3-selection","d3-transition"],n):n(t.d3_zoom=t.d3_zoom||{},t.d3_dispatch,t.d3_drag,t.d3_interpolate,t.d3_selection,t.d3_transition)}(this,function(t,n,e,o,i,r){"use strict";function u(t){return function(){return t}}function h(t,n,e){this.target=t,this.type=n,this.transform=e}function s(t,n,e){this.k=t,this.x=n,this.y=e}function c(t){return t.__zoom||y}function a(){i.event.stopImmediatePropagation()}function f(){i.event.preventDefault(),i.event.stopImmediatePropagation()}function l(){return!i.event.button}function p(){var t=this.ownerSVGElement||this;return[[0,0],[t.clientWidth,t.clientHeight]]}function m(){return this.__zoom||y}function d(t){function c(t){t.on("wheel.zoom",k).on("mousedown.zoom",w).on("dblclick.zoom",T).on("touchstart.zoom",M).on("touchmove.zoom",b).on("touchend.zoom touchcancel.zoom",Y).style("-webkit-tap-highlight-color","rgba(0,0,0,0)").property("__zoom",m)}function d(t,n){return n=Math.max(j,Math.min(G,n)),n===t.k?t:new s(n,t.x,t.y)}function v(t,n,e){var o=n[0]-e[0]*t.k,i=n[1]-e[1]*t.k;return o===t.x&&i===t.y?t:new s(t.k,o,i)}function y(t,n){var e=Math.min(0,t.invertX(n[0][0])-H)||Math.max(0,t.invertX(n[1][0])-K),o=Math.min(0,t.invertY(n[0][1])-V)||Math.max(0,t.invertY(n[1][1])-W);return e||o?t.translate(e,o):t}function z(t){return[(+t[0][0]+ +t[1][0])/2,(+t[0][1]+ +t[1][1])/2]}function _(t,n,e){t.on("start.zoom",function(){g(this,arguments).start()}).on("interrupt.zoom end.zoom",function(){g(this,arguments).end()}).tween("zoom",function(){var t=this,i=arguments,r=g(t,i),u=S.apply(t,i),h=e||z(u),c=Math.max(u[1][0]-u[0][0],u[1][1]-u[0][1]),a=t.__zoom,f="function"==typeof n?n.apply(t,i):n,l=o.interpolateZoom(a.invert(h).concat(c/a.k),f.invert(h).concat(c/f.k));return function(t){if(1===t)t=f;else{var n=l(t),e=c/n[2];t=new s(e,h[0]-n[0]*e,h[1]-n[1]*e)}r.zoom(null,t)}})}function g(t,n){for(var e,o=0,i=A.length;i>o;++o)if((e=A[o]).that===t)return e;return new x(t,n)}function x(t,n){this.that=t,this.args=n,this.index=-1,this.active=0}function k(){function t(){D=null,n.end()}if(P.apply(this,arguments)){var n=g(this,arguments),e=-i.event.deltaY*(i.event.deltaMode?120:1)/500,o=this.__zoom,u=o.k;if(!(0===e||0>e&&u===j||e>0&&u===G)){if(D){var h=i.mouse(this);X[0]===h[0]&&X[1]===h[1]||(E=o.invert(X=h)),clearTimeout(D)}else n.extent=S.apply(this,arguments),E=o.invert(X=i.mouse(this)),r.interrupt(this),n.start();f(),D=setTimeout(t,J),n.zoom("mouse",y(v(d(o,u*Math.pow(2,e)),X,E),n.extent))}}}function w(){function t(){f(),q=!0,o.zoom("mouse",y(v(o.that.__zoom,X=i.mouse(o.that),E),o.extent))}function n(){u.on("mousemove.zoom mouseup.zoom",null),e.dragEnable(i.event.view,q),f(),o.end()}if(!B&&P.apply(this,arguments)){var o=g(this,arguments),u=i.select(i.event.view).on("mousemove.zoom",t,!0).on("mouseup.zoom",n,!0);e.dragDisable(i.event.view),a(),q=!1,o.extent=S.apply(this,arguments),E=this.__zoom.invert(X=i.mouse(this)),r.interrupt(this),o.start()}}function T(){if(P.apply(this,arguments)){var t=this.__zoom,n=i.mouse(this),e=t.invert(n),o=t.k*(i.event.shiftKey?.5:2),r=y(v(d(t,o),n,e),S.apply(this,arguments));f(),Z>0?i.select(this).transition().duration(Z).call(_,r,n):i.select(this).call(c.transform,r)}}function M(){if(P.apply(this,arguments)){var t,n,e,o=g(this,arguments),u=i.event.changedTouches,h=u.length;for(a(),t=0;h>t;++t)n=u[t],e=i.touch(this,u,n.identifier),e=[e,this.__zoom.invert(e),n.identifier],o.touch0?o.touch1||(o.touch1=e):o.touch0=e;return I&&(I=clearTimeout(I),!o.touch1)?(o.end(),T.apply(this,arguments)):void(i.event.touches.length===h&&(I=setTimeout(function(){I=null},F),r.interrupt(this),o.extent=S.apply(this,arguments),o.start()))}}function b(){var t,n,e,o,r=g(this,arguments),u=i.event.changedTouches,h=u.length;for(f(),I&&(I=clearTimeout(I)),t=0;h>t;++t)n=u[t],e=i.touch(this,u,n.identifier),r.touch0&&r.touch0[2]===n.identifier?r.touch0[0]=e:r.touch1&&r.touch1[2]===n.identifier&&(r.touch1[0]=e);if(n=r.that.__zoom,r.touch1){var s=r.touch0[0],c=r.touch0[1],a=r.touch1[0],l=r.touch1[1],p=(p=a[0]-s[0])*p+(p=a[1]-s[1])*p,m=(m=l[0]-c[0])*m+(m=l[1]-c[1])*m;n=d(n,Math.sqrt(p/m)),e=[(s[0]+a[0])/2,(s[1]+a[1])/2],o=[(c[0]+l[0])/2,(c[1]+l[1])/2]}else{if(!r.touch0)return;e=r.touch0[0],o=r.touch0[1]}r.zoom("touch",y(v(n,e,o),r.extent))}function Y(){var t,n,e=g(this,arguments),o=i.event.changedTouches,r=o.length;for(a(),B&&clearTimeout(B),B=setTimeout(function(){B=null},F),t=0;r>t;++t)n=o[t],e.touch0&&e.touch0[2]===n.identifier?delete e.touch0:e.touch1&&e.touch1[2]===n.identifier&&delete e.touch1;e.touch1&&!e.touch0&&(e.touch0=e.touch1,delete e.touch1),e.touch0||e.end()}var q,X,E,I,B,D,P=l,S=p,j=0,G=1/0,H=-G,K=G,V=H,W=K,Z=250,A=[],C=n.dispatch("start","zoom","end").on("start",t),F=500,J=150;return c.transform=function(t,n){var e=t.selection?t.selection():t;e.property("__zoom",m),t!==e?_(t,n):e.interrupt().each(function(){g(this,arguments).start().zoom(null,"function"==typeof n?n.apply(this,arguments):n).end()})},c.scaleBy=function(t,n){c.scaleTo(t,function(){var t=this.__zoom.k,e="function"==typeof n?n.apply(this,arguments):n;return t*e})},c.scaleTo=function(t,n){c.transform(t,function(){var t=S.apply(this,arguments),e=this.__zoom,o=z(t),i=e.invert(o),r="function"==typeof n?n.apply(this,arguments):n;return y(v(d(e,r),o,i),t)})},c.translateBy=function(t,n,e){c.transform(t,function(){return y(this.__zoom.translate("function"==typeof n?n.apply(this,arguments):n,"function"==typeof e?e.apply(this,arguments):e),S.apply(this,arguments))})},x.prototype={start:function(){return 1===++this.active&&(this.index=A.push(this)-1,this.emit("start")),this},zoom:function(t,n){return X&&"mouse"!==t&&(E=n.invert(X)),this.touch0&&"touch"!==t&&(this.touch0[1]=n.invert(this.touch0[0])),this.touch1&&"touch"!==t&&(this.touch1[1]=n.invert(this.touch1[0])),this.that.__zoom=n,this.emit("zoom"),this},end:function(){return 0===--this.active&&(A.splice(this.index,1),X=E=null,this.index=-1,this.emit("end")),this},emit:function(t){i.customEvent(new h(c,t,this.that.__zoom),C.apply,C,[t,this.that,this.args])}},c.filter=function(t){return arguments.length?(P="function"==typeof t?t:u(!!t),c):P},c.extent=function(t){return arguments.length?(S="function"==typeof t?t:u([[+t[0][0],+t[0][1]],[+t[1][0],+t[1][1]]]),c):S},c.scaleExtent=function(t){return arguments.length?(j=+t[0],G=+t[1],c):[j,G]},c.translateExtent=function(t){return arguments.length?(H=+t[0][0],K=+t[1][0],V=+t[0][1],W=+t[1][1],c):[[H,V],[K,W]]},c.duration=function(t){return arguments.length?(Z=+t,c):Z},c.on=function(){var t=C.on.apply(C,arguments);return t===C?c:t},c}var v="0.2.0";s.prototype={constructor:s,scale:function(t){return 1===t?this:new s(this.k*t,this.x,this.y)},translate:function(t,n){return 0===t&0===n?this:new s(this.k,this.x+this.k*t,this.y+this.k*n)},apply:function(t){return[t[0]*this.k+this.x,t[1]*this.k+this.y]},applyX:function(t){return t*this.k+this.x},applyY:function(t){return t*this.k+this.y},invert:function(t){return[(t[0]-this.x)/this.k,(t[1]-this.y)/this.k]},invertX:function(t){return(t-this.x)/this.k},invertY:function(t){return(t-this.y)/this.k},rescaleX:function(t){return t.copy().domain(t.range().map(this.invertX,this).map(t.invert,t))},rescaleY:function(t){return t.copy().domain(t.range().map(this.invertY,this).map(t.invert,t))},toString:function(){return"translate("+this.x+","+this.y+") scale("+this.k+")"}};var y=new s(1,0,0);c.prototype=s.prototype,t.version=v,t.zoom=d,t.zoomTransform=c,t.zoomIdentity=y});

build/package.js

 export var name = "d3-zoom";
-export var version = "0.1.0";
-export var description = "";
+export var version = "0.2.0";
+export var description = "Pan and zoom SVG, HTML or Canvas using mouse or touch input.";
 export var keywords = ["d3","zoom","behavior","interaction"];
@@ -10,4 +10,4 @@ export var homepage = "https://github.com/d3/d3-zoom";
 export var repository = {"type":"git","url":"https://github.com/d3/d3-zoom.git"};
-export var scripts = {"pretest":"rm -rf build && mkdir build && json2module package.json > build/package.js && rollup -g d3-dispatch:d3_dispatch,d3-drag:d3_drag,d3-interpolate:d3_interpolate,d3-selection:d3_selection,d3-transition:d3_transition -f umd -n d3_zoom -o build/d3-zoom.js -- index.js","test":"tape 'test/**/*-test.js' && eslint index.js src","prepublish":"npm run test && uglifyjs build/d3-zoom.js -c -m -o build/d3-zoom.min.js","postpublish":"VERSION=`node -e 'console.log(require(\"./package.json\").version)'`; git push && git push --tags && cp build/d3-zoom.js ../d3.github.com/d3-zoom.v0.1.js && cp build/d3-zoom.min.js ../d3.github.com/d3-zoom.v0.1.min.js && cd ../d3.github.com && git add d3-zoom.v0.1.js d3-zoom.v0.1.min.js && git commit -m \"d3-zoom ${VERSION}\" && git push && cd - && zip -j build/d3-zoom.zip -- LICENSE README.md build/d3-zoom.js build/d3-zoom.min.js"};
+export var scripts = {"pretest":"rm -rf build && mkdir build && json2module package.json > build/package.js && rollup -g d3-dispatch:d3_dispatch,d3-drag:d3_drag,d3-interpolate:d3_interpolate,d3-selection:d3_selection,d3-transition:d3_transition -f umd -n d3_zoom -o build/d3-zoom.js -- index.js","test":"tape 'test/**/*-test.js' && eslint index.js src","prepublish":"npm run test && uglifyjs build/d3-zoom.js -c -m -o build/d3-zoom.min.js","postpublish":"VERSION=`node -e 'console.log(require(\"./package.json\").version)'`; git push && git push --tags && cp build/d3-zoom.js ../d3.github.com/d3-zoom.v0.2.js && cp build/d3-zoom.min.js ../d3.github.com/d3-zoom.v0.2.min.js && cd ../d3.github.com && git add d3-zoom.v0.2.js d3-zoom.v0.2.min.js && git commit -m \"d3-zoom ${VERSION}\" && git push && cd - && zip -j build/d3-zoom.zip -- LICENSE README.md build/d3-zoom.js build/d3-zoom.min.js"};
 export var dependencies = {"d3-dispatch":"~0.4.3","d3-drag":"~0.2.0","d3-interpolate":"~0.8.0","d3-selection":"~0.7.2","d3-transition":"~0.2.8"};
 export var devDependencies = {"eslint":"2","json2module":"0.0","rollup":"0.26","tape":"4","uglify-js":"2"};

index.js

 export {version} from "./build/package";
 export {default as zoom} from "./src/zoom";
-export {default as zoomTransform} from "./src/transform";
+export {default as zoomTransform, identity as zoomIdentity} from "./src/transform";

package.json

 {
   "name": "d3-zoom",
-  "version": "0.1.0",
-  "description": "",
+  "version": "0.2.0",
+  "description": "Pan and zoom SVG, HTML or Canvas using mouse or touch input.",
   "keywords": [
@@ -27,3 +27,3 @@ "d3",
     "prepublish": "npm run test && uglifyjs build/d3-zoom.js -c -m -o build/d3-zoom.min.js",
-    "postpublish": "VERSION=`node -e 'console.log(require(\"./package.json\").version)'`; git push && git push --tags && cp build/d3-zoom.js ../d3.github.com/d3-zoom.v0.1.js && cp build/d3-zoom.min.js ../d3.github.com/d3-zoom.v0.1.min.js && cd ../d3.github.com && git add d3-zoom.v0.1.js d3-zoom.v0.1.min.js && git commit -m \"d3-zoom ${VERSION}\" && git push && cd - && zip -j build/d3-zoom.zip -- LICENSE README.md build/d3-zoom.js build/d3-zoom.min.js"
+    "postpublish": "VERSION=`node -e 'console.log(require(\"./package.json\").version)'`; git push && git push --tags && cp build/d3-zoom.js ../d3.github.com/d3-zoom.v0.2.js && cp build/d3-zoom.min.js ../d3.github.com/d3-zoom.v0.2.min.js && cd ../d3.github.com && git add d3-zoom.v0.2.js d3-zoom.v0.2.min.js && git commit -m \"d3-zoom ${VERSION}\" && git push && cd - && zip -j build/d3-zoom.zip -- LICENSE README.md build/d3-zoom.js build/d3-zoom.min.js"
   },
@@ -30,0 +30,0 @@ "dependencies": {

README.md

 # d3-zoom
 
-…
+Pan and zoom SVG, HTML or Canvas using mouse or touch input.
 
 ## Installing
 
-If you use NPM, `npm install d3-zoom`. Otherwise, download the [latest release](https://github.com/d3/d3-zoom/releases/latest). You can also load directly from [d3js.org](https://d3js.org), either as a [standalone library](https://d3js.org/d3-zoom.v0.1.min.js) or as part of [D3 4.0](https://github.com/d3/d3). AMD, CommonJS, and vanilla environments are supported. In vanilla, a `d3_zoom` global is exported:
+If you use NPM, `npm install d3-zoom`. Otherwise, download the [latest release](https://github.com/d3/d3-zoom/releases/latest). You can also load directly from [d3js.org](https://d3js.org), either as a [standalone library](https://d3js.org/d3-zoom.v0.2.min.js) or as part of [D3 4.0](https://github.com/d3/d3). AMD, CommonJS, and vanilla environments are supported. In vanilla, a `d3_zoom` global is exported:
 
@@ -18,3 +18,3 @@ ```html
 <script src="https://d3js.org/d3-drag.v0.2.min.js"></script>
-<script src="https://d3js.org/d3-zoom.v0.1.min.js"></script>
+<script src="https://d3js.org/d3-zoom.v0.2.min.js"></script>
 <script>
@@ -64,6 +64,6 @@
 
-Applies this zoom behavior to the specified [*selection*](https://github.com/d3/d3-selection). This function is typically not invoked directly, and is instead invoked via [*selection*.call](https://github.com/d3/d3-selection#selection_call). For example, to instantiate a zoom behavior and apply it to a selection:
+Applies this zoom behavior to the specified [*selection*](https://github.com/d3/d3-selection), binding the necessary event listeners to allow panning and zooming, and initializing the [zoom transform](#zoom-transforms) on each selected element to the identity transform if not already defined. This function is typically not invoked directly, and is instead invoked via [*selection*.call](https://github.com/d3/d3-selection#selection_call). For example, to instantiate a zoom behavior and apply it to a selection:
 
 ```js
-d3.selectAll(".node").call(d3.zoom().on("zoom", zoomed));
+selection.call(d3.zoom().on("zoom", zoomed));
 ```
@@ -81,15 +81,29 @@
 
-…
+If *selection* is a selection, sets the [current zoom transform](#zoomTransform) of the selected elements to the specifed *transform*, instantaneously emitting start, zoom and end [events](#zoom-events). If *selection* is a transition, defines a “zoom” tween to the specified *transform* using [d3.interpolateZoom](https://github.com/d3/d3-interpolate#interpolateZoom), emitting a start event when the transition starts, zoom events for each tick of the transition, and then an end event when the transition ends (or is interrupted). The *transform* may be specified either as a [zoom transform](#zoom-transforms) or as a function that returns a zoom transform. If a function, it is invoked for each selected element, being passed the current datum `d` and index `i`, with the `this` context as the current DOM element.
 
+This function is typically not invoked directly, and is instead invoked via [*selection*.call](https://github.com/d3/d3-selection#selection_call) or [*transition*.call](https://github.com/d3/d3-transition#transition_call). For example, to reset the zoom transform to the [identity transform](#zoomIdentity) instantaneously:
+
+```js
+selection.call(zoom.transform, d3.zoomIdentity);
+```
+
+To smoothly reset the zoom transform to the identity transform over 750 milliseconds:
+
+```js
+selection.transition().duration(750).call(zoom.transform, d3.zoomIdentity);
+```
+
+This method requires that you specify the new zoom transform completely, and does not enforce the defined [scale extent](#zoom_scaleExtent) and [translate extent](#zoom_translateExtent), if any. To derive a new transform from the existing transform, and to enforce the scale and translate extents, see the convenience methods [*zoom*.translateBy](#zoom_translateBy), [*zoom*.scaleBy](#zoom_scaleBy) and [*zoom*.scaleTo](#zoom_scaleTo).
+
 <a href="#zoom_translateBy" name="zoom_translateBy">#</a> <i>zoom</i>.<b>translateBy</b>(<i>selection</i>, <i>x</i>, <i>y</i>)
 
-… A convenience alias for [*zoom*.transform](#zoom_transform).
+If *selection* is a selection, [translates](#transform_translate) the [current zoom transform](#zoomTransform) of the selected elements by *x* and *y*, such that the new *t<sub>x1</sub>* = *t<sub>x0</sub>* + *k* × *x* and *t<sub>y1</sub>* = *t<sub>y0</sub>* + *k* × *y*. If *selection* is a transition, defines a “zoom” tween translating the current transform. This method is a convenience method for [*zoom*.transform](#zoom_transform). The *x* and *y* translation amounts may be specified either as numbers or as functions that returns numbers. If a function, it is invoked for each selected element, being passed the current datum `d` and index `i`, with the `this` context as the current DOM element.
 
 <a href="#zoom_scaleBy" name="zoom_scaleBy">#</a> <i>zoom</i>.<b>scaleBy</b>(<i>selection</i>, <i>k</i>)
 
-… A convenience alias for [*zoom*.transform](#zoom_transform).
+If *selection* is a selection, [scales](#transform_scale) the [current zoom transform](#zoomTransform) of the selected elements by *k*, such that the new *k₁* = *k₀* × *k*. If *selection* is a transition, defines a “zoom” tween translating the current transform. This method is a convenience method for [*zoom*.transform](#zoom_transform). The *k* scale factor may be specified either as numbers or as functions that returns numbers. If a function, it is invoked for each selected element, being passed the current datum `d` and index `i`, with the `this` context as the current DOM element.
 
 <a href="#zoom_scaleTo" name="zoom_scaleTo">#</a> <i>zoom</i>.<b>scaleTo</b>(<i>selection</i>, <i>k</i>)
 
-… A convenience alias for [*zoom*.transform](#zoom_transform).
+If *selection* is a selection, [scales](#transform_scale) the [current zoom transform](#zoomTransform) of the selected elements to *k*, such that the new *k₁* = *k*. If *selection* is a transition, defines a “zoom” tween translating the current transform. This method is a convenience method for [*zoom*.transform](#zoom_transform). The *k* scale factor may be specified either as numbers or as functions that returns numbers. If a function, it is invoked for each selected element, being passed the current datum `d` and index `i`, with the `this` context as the current DOM element.
 
@@ -108,17 +122,23 @@ <a href="#zoom_filter" name="zoom_filter">#</a> <i>zoom</i>.<b>filter</b>([<i>filter</i>])
 
-<a href="#zoom_size" name="zoom_size">#</a> <i>zoom</i>.<b>size</b>([<i>size</i>])
+<a href="#zoom_extent" name="zoom_extent">#</a> <i>zoom</i>.<b>extent</b>([<i>extent</i>])
 
-…
+If *extent* is specified, sets the viewport extent to the specified array of points [[*x0*, *y0*], [*x1*, *y1*]], where [*x0*, *y0*] is the top-left corner of the viewport and [*x1*, *y1*] is the bottom-right corner of the viewport, and returns this zoom behavior. The *extent* may also be specified as a function which returns such an array; if a function, it is invoked for each selected element, being passed the current datum `d` and index `i`, with the `this` context as the current DOM element. If *extent* is not specified, returns the current extent accessor, which defaults to:
 
 ```js
-function size() {
+function extent() {
   var node = this.ownerSVGElement || this;
-  return [node.clientWidth, node.clientHeight];
+  return [[0, 0], [node.clientWidth, node.clientHeight]];
 }
 ```
 
-<a href="#zoom_scaleExtent" name="zoom_scaleExtent">#</a> <i>zoom</i>.<b>scaleExtent</b>([<i>scaleExtent</i>])
+The viewport extent affects several functions: the center of the viewport remains fixed during changes by [*zoom*.scaleBy](#zoom_scaleBy) and [*zoom*.scaleTo](#zoom_scaleTo); the viewport center and dimensions affect the path chosen by [d3.interpolateZoom](https://github.com/d3/d3-interpolate#interpolateZoom); and the viewport extent is needed to enforce the optional [translate extent](#zoom_translateExtent.)
 
-… Defaults to [0, ∞].
+<a href="#zoom_scaleExtent" name="zoom_scaleExtent">#</a> <i>zoom</i>.<b>scaleExtent</b>([<i>extent</i>])
 
+If *extent* is specified, sets the scale extent to the specified array of numbers [*k0*, *k1*] where *k0* is the minimum allowed scale factor and *k1* is the maximum allowed scale factor, and returns this zoom behavior. If *extent* is not specified, returns the current scale extent, which defaults to [0, ∞]. The scale extent restricts zooming in and out. It is enforced on interaction and when using [*zoom*.scaleBy](#zoom_scaleBy), [*zoom*.scaleTo](#zoom_scaleTo) and [*zoom*.translateBy](#zoom_translateBy); however, it is not enforced when using [*zoom*.transform](#zoom_transform) to set the transform explicitly.
+
+<a href="#zoom_translateExtent" name="zoom_translateExtent">#</a> <i>zoom</i>.<b>translateExtent</b>([<i>extent</i>])
+
+If *extent* is specified, sets the translate extent to the specified array of points [[*x0*, *y0*], [*x1*, *y1*]], where [*x0*, *y0*] is the top-left corner of the world and [*x1*, *y1*] is the bottom-right corner of the world, and returns this zoom behavior. If *extent* is not specified, returns the current translate extent, which defaults to [[-∞, -∞], [+∞, +∞]]. The translate extent restricts panning, and may cause translation on zoom out. It is enforced on interaction and when using [*zoom*.scaleBy](#zoom_scaleBy), [*zoom*.scaleTo](#zoom_scaleTo) and [*zoom*.translateBy](#zoom_translateBy); however, it is not enforced when using [*zoom*.transform](#zoom_transform) to set the transform explicitly.
+
 <a href="#zoom_duration" name="zoom_duration">#</a> <i>zoom</i>.<b>duration</b>([<i>duration</i>])
@@ -155,5 +175,5 @@
 
-<a href="#zoomTransform" name="zoomTransform">#</a> d3.<b>zoomTransform</b>([<i>node</i>])
+<a href="#zoomTransform" name="zoomTransform">#</a> d3.<b>zoomTransform</b>(<i>node</i>)
 
-Returns the current transform for the specified *node*. Internally, an element’s transform is stored as *element*.\_\_zoom; however, you should use this method rather than accessing it directly. If a *node* is not specified, or the given *node* has no defined transform, returns the identity transformation where *k* = 1, *t<sub>x</sub>* = *t<sub>y</sub>* = 0. The returned transform represents a two-dimensional [transformation matrix](https://en.wikipedia.org/wiki/Transformation_matrix#Affine_transformations) of the form:
+Returns the current transform for the specified *node*. Internally, an element’s transform is stored as *element*.\_\_zoom; however, you should use this method rather than accessing it directly. If the given *node* has no defined transform, returns the [identity transformation](#zoomIdentity). The returned transform represents a two-dimensional [transformation matrix](https://en.wikipedia.org/wiki/Transformation_matrix#Affine_transformations) of the form:
 
@@ -173,3 +193,3 @@ *k* 0 *t<sub>x</sub>*
 ```js
-var t = d3.zoomTransform().translate(x, y).scale(k);
+var t = d3.zoomIdentity.translate(x, y).scale(k);
 ```
@@ -220,3 +240,3 @@
 
-<a href="#transform_applyy" name="transform_applyy">#</a> <i>transform</i>.<b>applyY</b>(<i>y</i>)
+<a href="#transform_applyY" name="transform_applyY">#</a> <i>transform</i>.<b>applyY</b>(<i>y</i>)
 
@@ -233,3 +253,3 @@ Returns the transformation of the specified *y*-coordinate, *y* × *k* + *t<sub>y</sub>*.
 
-<a href="#transform_inverty" name="transform_inverty">#</a> <i>transform</i>.<b>invertY</b>(<i>y</i>)
+<a href="#transform_invertY" name="transform_invertY">#</a> <i>transform</i>.<b>invertY</b>(<i>y</i>)
 
@@ -252,3 +272,3 @@ Returns the inverse transformation of the specified *y*-coordinate, (*y* - *t<sub>y</sub>*) / *k*.
 
-<a href="#transform_rescaley" name="transform_rescaley">#</a> <i>transform</i>.<b>rescaleY</b>(<i>y</i>)
+<a href="#transform_rescaleY" name="transform_rescaleY">#</a> <i>transform</i>.<b>rescaleY</b>(<i>y</i>)
 
@@ -276,1 +296,5 @@ Returns a [copy](https://github.com/d3/d3-scale#continuous_copy) of the [continuous scale](https://github.com/d3/d3-scale#continuous-scales) *y* whose [domain](https://github.com/d3/d3-scale#continuous_domain) is transformed. This is implemented by first applying the [inverse *y*-transform](#transform_invertY) on the scale’s [range](https://github.com/d3/d3-scale#continuous_range), and then applying the [inverse scale](https://github.com/d3/d3-scale#continuous_invert) to compute the corresponding domain:
 ```
+
+<a href="#zoomIdentity" name="zoomIdentity">#</a> d3.<b>zoomIdentity</b>
+
+The identity transform, where *k* = 1, *t<sub>x</sub>* = *t<sub>y</sub>* = 0.

src/transform.js

@@ -49,3 +49,3 @@ export function Transform(k, x, y) {
 export default function transform(node) {
-  return node && node.__zoom || identity;
+  return node.__zoom || identity;
 }

src/zoom.js

@@ -16,5 +16,5 @@ import {dispatch} from "d3-dispatch";
 
-function defaultSize() {
+function defaultExtent() {
   var node = this.ownerSVGElement || this;
-  return [node.clientWidth, node.clientHeight];
+  return [[0, 0], [node.clientWidth, node.clientHeight]];
 }
@@ -28,5 +28,9 @@
   var filter = defaultFilter,
-      size = defaultSize,
+      extent = defaultExtent,
       k0 = 0,
       k1 = Infinity,
+      x0 = -k1,
+      x1 = k1,
+      y0 = x0,
+      y1 = x1,
       duration = 250,
@@ -36,2 +40,4 @@ gestures = [],
       mousemoving,
+      mousePoint,
+      mouseLocation,
       touchstarting,
@@ -57,3 +63,2 @@ touchending,
     var selection = collection.selection ? collection.selection() : collection;
-    transform = clamp(transform);
     selection.property("__zoom", defaultTransform);
@@ -82,7 +87,8 @@ if (collection !== selection) {
     zoom.transform(selection, function() {
-      var t0 = this.__zoom,
-          p0 = (p0 = size.apply(this, arguments), [p0[0] / 2, p0[1] / 2]),
+      var e = extent.apply(this, arguments),
+          t0 = this.__zoom,
+          p0 = centroid(e),
           p1 = t0.invert(p0),
           k1 = typeof k === "function" ? k.apply(this, arguments) : k;
-      return translate(scale(t0, k1), p0, p1);
+      return constrain(translate(scale(t0, k1), p0, p1), e);
     });
@@ -93,29 +99,29 @@ };
     zoom.transform(selection, function() {
-      return this.__zoom.translate(
+      return constrain(this.__zoom.translate(
         typeof x === "function" ? x.apply(this, arguments) : x,
         typeof y === "function" ? y.apply(this, arguments) : y
-      );
+      ), extent.apply(this, arguments));
     });
   };
 
-  function clamp(transform) {
-    return function() {
-      var t = typeof transform === "function" ? transform.apply(this, arguments) : transform;
-      if (k0 > t.k || t.k > k1) {
-        var p0 = (p0 = size.apply(this, arguments), [p0[0] / 2, p0[1] / 2]),
-            p1 = t.invert(p0);
-        t = translate(scale(t, t.k), p0, p1);
-      }
-      return t;
-    };
-  }
-
   function scale(transform, k) {
-    return new Transform(Math.max(k0, Math.min(k1, k)), transform.x, transform.y);
+    k = Math.max(k0, Math.min(k1, k));
+    return k === transform.k ? transform : new Transform(k, transform.x, transform.y);
   }
 
   function translate(transform, p0, p1) {
-    return p1 = transform.apply(p1), new Transform(transform.k, transform.x + p0[0] - p1[0], transform.y + p0[1] - p1[1]);
+    var x = p0[0] - p1[0] * transform.k, y = p0[1] - p1[1] * transform.k;
+    return x === transform.x && y === transform.y ? transform : new Transform(transform.k, x, y);
   }
 
+  function constrain(transform, extent) {
+    var dx = Math.min(0, transform.invertX(extent[0][0]) - x0) || Math.max(0, transform.invertX(extent[1][0]) - x1),
+        dy = Math.min(0, transform.invertY(extent[0][1]) - y0) || Math.max(0, transform.invertY(extent[1][1]) - y1);
+    return dx || dy ? transform.translate(dx, dy) : transform;
+  }
+
+  function centroid(extent) {
+    return [(+extent[0][0] + +extent[1][0]) / 2, (+extent[0][1] + +extent[1][1]) / 2];
+  }
+
   function schedule(transition, transform, center) {
@@ -125,9 +131,9 @@ transition
         .on("interrupt.zoom end.zoom", function() { gesture(this, arguments).end(); })
-        .tween("zoom:zoom", function() {
+        .tween("zoom", function() {
           var that = this,
               args = arguments,
               g = gesture(that, args),
-              s = size.apply(that, args),
-              p = center || [s[0] / 2, s[1] / 2],
-              w = Math.max(s[0], s[1]),
+              e = extent.apply(that, args),
+              p = center || centroid(e),
+              w = Math.max(e[1][0] - e[0][0], e[1][1] - e[0][1]),
               a = that.__zoom,
@@ -169,4 +175,3 @@ b = typeof transform === "function" ? transform.apply(that, args) : transform,
     zoom: function(key, transform) {
-      if (this.wheel && key !== "wheel") this.wheel[1] = transform.invert(this.wheel[0]);
-      if (this.mouse && key !== "mouse") this.mouse[1] = transform.invert(this.mouse[0]);
+      if (mousePoint && key !== "mouse") mouseLocation = transform.invert(mousePoint);
       if (this.touch0 && key !== "touch") this.touch0[1] = transform.invert(this.touch0[0]);
@@ -181,2 +186,3 @@ if (this.touch1 && key !== "touch") this.touch1[1] = transform.invert(this.touch1[0]);
         gestures.splice(this.index, 1);
+        mousePoint = mouseLocation = null;
         this.index = -1;
@@ -195,4 +201,2 @@ this.emit("end");
     var g = gesture(this, arguments),
-        p0,
-        p1,
         y = -event.deltaY * (event.deltaMode ? 120 : 1) / 500,
@@ -205,5 +209,9 @@ t = this.__zoom,
 
-    // If there were recently wheel events, use the existing point and location.
-    if (g.wheel) {
-      p0 = g.wheel[0], p1 = g.wheel[1];
+    // If the mouse is in the same location as before, reuse it.
+    // If there were recent wheel events, reset the wheel idle timeout.
+    if (wheelTimer) {
+      var point = mouse(this);
+      if (mousePoint[0] !== point[0] || mousePoint[1] !== point[1]) {
+        mouseLocation = t.invert(mousePoint = point);
+      }
       clearTimeout(wheelTimer);
@@ -214,3 +222,4 @@ }
     else {
-      g.wheel = [p0 = mouse(this), p1 = t.invert(p0)];
+      g.extent = extent.apply(this, arguments);
+      mouseLocation = t.invert(mousePoint = mouse(this));
       interrupt(this);
@@ -222,7 +231,6 @@ g.start();
     wheelTimer = setTimeout(wheelidled, wheelDelay);
-    g.zoom("wheel", translate(scale(t, k * Math.pow(2, y)), p0, p1));
+    g.zoom("mouse", constrain(translate(scale(t, k * Math.pow(2, y)), mousePoint, mouseLocation), g.extent));
 
     function wheelidled() {
       wheelTimer = null;
-      delete g.wheel;
       g.end();
@@ -235,5 +243,3 @@ }
     var g = gesture(this, arguments),
-        v = select(event.view).on("mousemove.zoom", mousemoved, true).on("mouseup.zoom", mouseupped, true),
-        p0 = mouse(this),
-        p1 = this.__zoom.invert(p0);
+        v = select(event.view).on("mousemove.zoom", mousemoved, true).on("mouseup.zoom", mouseupped, true);
 
@@ -243,3 +249,4 @@ dragDisable(event.view);
     mousemoving = false;
-    g.mouse = [p0, p1];
+    g.extent = extent.apply(this, arguments);
+    mouseLocation = this.__zoom.invert(mousePoint = mouse(this));
     interrupt(this);
@@ -251,3 +258,3 @@ g.start();
       mousemoving = true;
-      g.zoom("mouse", translate(g.that.__zoom, g.mouse[0] = mouse(g.that), g.mouse[1]));
+      g.zoom("mouse", constrain(translate(g.that.__zoom, mousePoint = mouse(g.that), mouseLocation), g.extent));
     }
@@ -259,3 +266,2 @@
       noevent();
-      delete g.mouse;
       g.end();
@@ -271,3 +277,3 @@ }
         k1 = t0.k * (event.shiftKey ? 0.5 : 2),
-        t1 = translate(scale(t0, k1), p0, p1);
+        t1 = constrain(translate(scale(t0, k1), p0, p1), extent.apply(this, arguments));
 
@@ -299,2 +305,3 @@ noevent();
       interrupt(this);
+      g.extent = extent.apply(this, arguments);
       g.start();
@@ -328,3 +335,3 @@ }
     else return;
-    g.zoom("touch", translate(t, p, l));
+    g.zoom("touch", constrain(translate(t, p, l), g.extent));
   }
@@ -353,4 +360,4 @@
 
-  zoom.size = function(_) {
-    return arguments.length ? (size = typeof _ === "function" ? _ : constant([+_[0], +_[1]]), zoom) : size;
+  zoom.extent = function(_) {
+    return arguments.length ? (extent = typeof _ === "function" ? _ : constant([[+_[0][0], +_[0][1]], [+_[1][0], +_[1][1]]]), zoom) : extent;
   };
@@ -362,2 +369,6 @@
 
+  zoom.translateExtent = function(_) {
+    return arguments.length ? (x0 = +_[0][0], x1 = +_[1][0], y0 = +_[0][1], y1 = +_[1][1], zoom) : [[x0, y0], [x1, y1]];
+  };
+
   zoom.duration = function(_) {
@@ -364,0 +375,0 @@ return arguments.length ? (duration = +_, zoom) : duration;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

64624

increased by15.22%

Lines of code

786

increased by2.48%

Number of lines in readme file

291

increased by8.99%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes