react-svg-pan-zoom - npm Package Compare versions

Comparing version 3.6.0 to 3.7.0

build-commonjs/events/event-factory.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.default = _default;
+exports.default = eventFactory;
 
@@ -15,3 +15,3 @@ var _viewerMouseEvent = _interopRequireDefault(require("./viewer-mouse-event"));
 
-function _default(originalEvent, value, SVGViewer) {
+function eventFactory(originalEvent, value, SVGViewer) {
   var eventType = originalEvent.type;
@@ -18,0 +18,0 @@

build-commonjs/events/viewer-mouse-event.js

@@ -8,6 +8,6 @@ "use strict";
 
-var _common = require("../features/common");
-
 var _viewerEvent = _interopRequireDefault(require("./viewer-event"));
 
+var _interactions = require("../features/interactions");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -49,8 +49,4 @@
         var event = this.originalEvent,
-            value = this.value,
             SVGViewer = this.SVGViewer;
-        var rect = SVGViewer.getBoundingClientRect();
-        var x = event.clientX - Math.round(rect.left);
-        var y = event.clientY - Math.round(rect.top);
-        this._cachePoint = (0, _common.getSVGPoint)(value, x, y);
+        this._cachePoint = (0, _interactions.getMousePosition)(event, SVGViewer);
       }
@@ -57,0 +53,0 @@

build-commonjs/features/interactions-touch.js

@@ -27,7 +27,3 @@ "use strict";
 
-function hasPinchPointDistance(value) {
-  return typeof value.pinchPointDistance === 'number';
-}
-
-function onMultiTouch(event, ViewerDOM, tool, value, props) {
+function getTouchPosition(touch, ViewerDOM) {
   var _ViewerDOM$getBoundin = ViewerDOM.getBoundingClientRect(),
@@ -37,46 +33,2 @@ left = _ViewerDOM$getBoundin.left,
 
-  var x1 = event.touches[0].clientX - Math.round(left);
-  var y1 = event.touches[0].clientY - Math.round(top);
-  var x2 = event.touches[1].clientX - Math.round(left);
-  var y2 = event.touches[1].clientY - Math.round(top);
-  var pinchPointDistance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
-  var previousPointDistance = hasPinchPointDistance(value) ? value.pinchPointDistance : pinchPointDistance;
-  var svgPoint = (0, _common.getSVGPoint)(value, (x1 + x2) / 2, (y1 + y2) / 2);
-  var distanceFactor = pinchPointDistance / previousPointDistance;
-
-  if ((0, _zoom.isZoomLevelGoingOutOfBounds)(value, distanceFactor)) {
-    // Do not change translation and scale of value
-    return value;
-  }
-
-  if (event.cancelable) {
-    event.preventDefault();
-  }
-
-  var matrix = (0, _transformationMatrix.transform)((0, _transformationMatrix.fromObject)(value), (0, _transformationMatrix.translate)(svgPoint.x, svgPoint.y), (0, _transformationMatrix.scale)(distanceFactor, distanceFactor), (0, _transformationMatrix.translate)(-svgPoint.x, -svgPoint.y));
-  return (0, _common.set)(value, (0, _common.set)(_objectSpread({
-    mode: _constants.MODE_ZOOMING
-  }, (0, _zoom.limitZoomLevel)(value, matrix), {
-    startX: null,
-    startY: null,
-    endX: null,
-    endY: null,
-    prePinchMode: value.prePinchMode ? value.prePinchMode : value.mode,
-    pinchPointDistance: pinchPointDistance
-  })));
-}
-
-function isMultiTouch(event, props) {
-  return props.detectPinchGesture && event.touches.length > 1;
-}
-
-function shouldResetPinchPointDistance(event, value, props) {
-  return props.detectPinchGesture && hasPinchPointDistance(value) && event.touches.length < 2;
-}
-
-function getTouchPosition(touch, ViewerDOM) {
-  var _ViewerDOM$getBoundin2 = ViewerDOM.getBoundingClientRect(),
-      left = _ViewerDOM$getBoundin2.left,
-      top = _ViewerDOM$getBoundin2.top;
-
   var x = touch.clientX - Math.round(left);
@@ -90,24 +42,2 @@ var y = touch.clientY - Math.round(top);
 
-function getNextValue(event, ViewerDOM, tool, value, props, nextValueFn) {
-  var nextValue = event.touches.length === 0 ? (0, _common.set)(value, {
-    mode: value.prePinchMode ? _constants.MODE_IDLE : value.mode,
-    prePinchMode: null
-  }) : value;
-  var touch = event.touches.length > 0 ? event.touches[0] : event.changedTouches[0];
-  var touchPosition = getTouchPosition(touch, ViewerDOM);
-
-  switch (tool) {
-    case _constants.TOOL_ZOOM_OUT:
-    case _constants.TOOL_ZOOM_IN:
-    case _constants.TOOL_AUTO:
-    case _constants.TOOL_PAN:
-      event.stopPropagation();
-      event.preventDefault();
-      return nextValueFn(event, ViewerDOM, tool, nextValue, props, touchPosition);
-
-    default:
-      return nextValue;
-  }
-}
-
 function onTouchStart(event, ViewerDOM, tool, value, props) {
@@ -126,3 +56,3 @@ if (isMultiTouch(event, props)) {
 
-  return getNextValue(event, ViewerDOM, tool, value, props, _interactions.onMouseDown);
+  return onSingleTouch(event, ViewerDOM, tool, value, props, _interactions.onMouseDown);
 }
@@ -139,3 +69,3 @@
 
-  return getNextValue(event, ViewerDOM, tool, value, props, _interactions.onMouseMove);
+  return onSingleTouch(event, ViewerDOM, tool, value, props, _interactions.onMouseMove);
 }
@@ -156,3 +86,3 @@
 
-  return getNextValue(event, ViewerDOM, tool, nextValue, props, _interactions.onMouseUp);
+  return onSingleTouch(event, ViewerDOM, tool, nextValue, props, _interactions.onMouseUp);
 }
@@ -164,2 +94,72 @@
   return (0, _common.resetMode)(value);
+}
+
+function hasPinchPointDistance(value) {
+  return typeof value.pinchPointDistance === 'number';
+}
+
+function shouldResetPinchPointDistance(event, value, props) {
+  return props.detectPinchGesture && hasPinchPointDistance(value) && event.touches.length < 2;
+}
+
+function isMultiTouch(event, props) {
+  return props.detectPinchGesture && event.touches.length > 1;
+}
+
+function onSingleTouch(event, ViewerDOM, tool, value, props, nextValueFn) {
+  var nextValue = event.touches.length === 0 ? (0, _common.set)(value, {
+    mode: value.prePinchMode ? _constants.MODE_IDLE : value.mode,
+    prePinchMode: null
+  }) : value;
+  var touch = event.touches.length > 0 ? event.touches[0] : event.changedTouches[0];
+  var touchPosition = getTouchPosition(touch, ViewerDOM);
+
+  switch (tool) {
+    case _constants.TOOL_ZOOM_OUT:
+    case _constants.TOOL_ZOOM_IN:
+    case _constants.TOOL_AUTO:
+    case _constants.TOOL_PAN:
+      event.stopPropagation();
+      event.preventDefault();
+      return nextValueFn(event, ViewerDOM, tool, nextValue, props, touchPosition);
+
+    default:
+      return nextValue;
+  }
+}
+
+function onMultiTouch(event, ViewerDOM, tool, value, props) {
+  var _ViewerDOM$getBoundin2 = ViewerDOM.getBoundingClientRect(),
+      left = _ViewerDOM$getBoundin2.left,
+      top = _ViewerDOM$getBoundin2.top;
+
+  var x1 = event.touches[0].clientX - Math.round(left);
+  var y1 = event.touches[0].clientY - Math.round(top);
+  var x2 = event.touches[1].clientX - Math.round(left);
+  var y2 = event.touches[1].clientY - Math.round(top);
+  var pinchPointDistance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
+  var previousPointDistance = hasPinchPointDistance(value) ? value.pinchPointDistance : pinchPointDistance;
+  var svgPoint = (0, _common.getSVGPoint)(value, (x1 + x2) / 2, (y1 + y2) / 2);
+  var distanceFactor = pinchPointDistance / previousPointDistance;
+
+  if ((0, _zoom.isZoomLevelGoingOutOfBounds)(value, distanceFactor)) {
+    // Do not change translation and scale of value
+    return value;
+  }
+
+  if (event.cancelable) {
+    event.preventDefault();
+  }
+
+  var matrix = (0, _transformationMatrix.transform)((0, _transformationMatrix.fromObject)(value), (0, _transformationMatrix.translate)(svgPoint.x, svgPoint.y), (0, _transformationMatrix.scale)(distanceFactor, distanceFactor), (0, _transformationMatrix.translate)(-svgPoint.x, -svgPoint.y));
+  return (0, _common.set)(value, (0, _common.set)(_objectSpread({
+    mode: _constants.MODE_ZOOMING
+  }, (0, _zoom.limitZoomLevel)(value, matrix), {
+    startX: null,
+    startY: null,
+    endX: null,
+    endY: null,
+    prePinchMode: value.prePinchMode ? value.prePinchMode : value.mode,
+    pinchPointDistance: pinchPointDistance
+  })));
 }

build-commonjs/features/interactions.js

@@ -6,2 +6,3 @@ "use strict";
 });
+exports.getMousePosition = getMousePosition;
 exports.onMouseDown = onMouseDown;
@@ -27,18 +28,22 @@ exports.onMouseMove = onMouseMove;
 
+function getMousePosition(event, ViewerDOM) {
+  var _ViewerDOM$getBoundin = ViewerDOM.getBoundingClientRect(),
+      left = _ViewerDOM$getBoundin.left,
+      top = _ViewerDOM$getBoundin.top;
+
+  var x = event.clientX - Math.round(left);
+  var y = event.clientY - Math.round(top);
+  return {
+    x: x,
+    y: y
+  };
+}
+
 function onMouseDown(event, ViewerDOM, tool, value, props) {
   var coords = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : null;
-  var x, y;
 
-  if (coords) {
-    x = coords.x;
-    y = coords.y;
-  } else {
-    var _ViewerDOM$getBoundin = ViewerDOM.getBoundingClientRect(),
-        left = _ViewerDOM$getBoundin.left,
-        top = _ViewerDOM$getBoundin.top;
+  var _ref = coords || getMousePosition(event, ViewerDOM),
+      x = _ref.x,
+      y = _ref.y;
 
-    x = event.clientX - Math.round(left);
-    y = event.clientY - Math.round(top);
-  }
-
   var nextValue = value;
@@ -71,16 +76,7 @@
   var coords = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : null;
-  var x, y;
 
-  if (coords) {
-    x = coords.x;
-    y = coords.y;
-  } else {
-    var _ViewerDOM$getBoundin2 = ViewerDOM.getBoundingClientRect(),
-        left = _ViewerDOM$getBoundin2.left,
-        top = _ViewerDOM$getBoundin2.top;
+  var _ref2 = coords || getMousePosition(event, ViewerDOM),
+      x = _ref2.x,
+      y = _ref2.y;
 
-    x = event.clientX - Math.round(left);
-    y = event.clientY - Math.round(top);
-  }
-
   var forceExit = event.buttons === 0; //the mouse exited and reentered into svg
@@ -110,16 +106,7 @@
   var coords = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : null;
-  var x, y;
 
-  if (coords) {
-    x = coords.x;
-    y = coords.y;
-  } else {
-    var _ViewerDOM$getBoundin3 = ViewerDOM.getBoundingClientRect(),
-        left = _ViewerDOM$getBoundin3.left,
-        top = _ViewerDOM$getBoundin3.top;
+  var _ref3 = coords || getMousePosition(event, ViewerDOM),
+      x = _ref3.x,
+      y = _ref3.y;
 
-    x = event.clientX - Math.round(left);
-    y = event.clientY - Math.round(top);
-  }
-
   var nextValue = value;
@@ -138,3 +125,3 @@
     case _constants.TOOL_PAN:
-      if (value.mode === _constants.MODE_PANNING) nextValue = (0, _pan.stopPanning)(value, x, y);
+      if (value.mode === _constants.MODE_PANNING) nextValue = (0, _pan.stopPanning)(value);
       break;
@@ -152,36 +139,21 @@
   var coords = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : null;
-  var x, y;
 
-  if (coords) {
-    x = coords.x;
-    y = coords.y;
-  } else {
-    var _ViewerDOM$getBoundin4 = ViewerDOM.getBoundingClientRect(),
-        left = _ViewerDOM$getBoundin4.left,
-        top = _ViewerDOM$getBoundin4.top;
+  var _ref4 = coords || getMousePosition(event, ViewerDOM),
+      x = _ref4.x,
+      y = _ref4.y;
 
-    x = event.clientX - Math.round(left);
-    y = event.clientY - Math.round(top);
-  }
-
   var nextValue = value;
 
-  switch (tool) {
-    case _constants.TOOL_AUTO:
-      if (!props.disableDoubleClickZoomWithToolAuto) {
-        var SVGPoint = (0, _common.getSVGPoint)(value, x, y);
+  if (tool === _constants.TOOL_AUTO && !props.disableDoubleClickZoomWithToolAuto) {
+    var _props$modifierKeys = props.modifierKeys,
+        modifierKeys = _props$modifierKeys === void 0 ? [] : _props$modifierKeys;
+    var SVGPoint = (0, _common.getSVGPoint)(value, x, y);
 
-        var modifierKeysReducer = function modifierKeysReducer(current, modifierKey) {
-          return current || event.getModifierState(modifierKey);
-        };
+    var modifierKeysReducer = function modifierKeysReducer(current, modifierKey) {
+      return current || event.getModifierState(modifierKey);
+    };
 
-        var modifierKeyActive = props.modifierKeys.reduce(modifierKeysReducer, false);
-        var scaleFactor = modifierKeyActive ? 1 / props.scaleFactor : props.scaleFactor;
-        nextValue = (0, _zoom.zoom)(value, SVGPoint.x, SVGPoint.y, scaleFactor, props);
-      }
-
-      break;
-
-    default:
-      return value;
+    var modifierKeyActive = modifierKeys.reduce(modifierKeysReducer, false);
+    var scaleFactor = modifierKeyActive ? 1 / props.scaleFactor : props.scaleFactor;
+    nextValue = (0, _zoom.zoom)(value, SVGPoint.x, SVGPoint.y, scaleFactor, props);
   }
@@ -195,16 +167,7 @@
   var coords = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : null;
-  var x, y;
 
-  if (coords) {
-    x = coords.x;
-    y = coords.y;
-  } else {
-    var _ViewerDOM$getBoundin5 = ViewerDOM.getBoundingClientRect(),
-        left = _ViewerDOM$getBoundin5.left,
-        top = _ViewerDOM$getBoundin5.top;
+  var _ref5 = coords || getMousePosition(event, ViewerDOM),
+      x = _ref5.x,
+      y = _ref5.y;
 
-    x = event.clientX - Math.round(left);
-    y = event.clientY - Math.round(top);
-  }
-
   if (!props.detectWheel) return value;
@@ -211,0 +174,0 @@ var delta = Math.max(-1, Math.min(1, event.deltaY));

build-commonjs/utils/mapRange.js

@@ -8,4 +8,13 @@ "use strict";
 
-function mapRange(value, low1, high1, low2, high2) {
-  return low2 + (high2 - low2) * (value - low1) / (high1 - low1);
+/**
+ * Convert (re-map) an input value range into a destination range.
+ * @param value
+ * @param sourceStart
+ * @param sourceEnd
+ * @param targetStart
+ * @param targetEnd
+ * @return number
+ */
+function mapRange(value, sourceStart, sourceEnd, targetStart, targetEnd) {
+  return targetStart + (targetEnd - targetStart) * (value - sourceStart) / (sourceEnd - sourceStart);
 }

build-commonjs/viewer.js

@@ -22,3 +22,3 @@ "use strict";
 
-var _ViewBoxParser = _interopRequireDefault(require("./utils/ViewBoxParser"));
+var _parseViewBox5 = _interopRequireDefault(require("./utils/parseViewBox"));
 
@@ -102,3 +102,3 @@ var _interactionsTouch = require("./features/interactions-touch");
     if (SVGViewBox) {
-      var _parseViewBox = (0, _ViewBoxParser.default)(SVGViewBox),
+      var _parseViewBox = (0, _parseViewBox5.default)(SVGViewBox),
           _parseViewBox2 = _slicedToArray(_parseViewBox, 4),
@@ -154,3 +154,3 @@ SVGMinX = _parseViewBox2[0],
         // if the viewBox prop is specified
-        var _parseViewBox3 = (0, _ViewBoxParser.default)(SVGViewBox),
+        var _parseViewBox3 = (0, _parseViewBox5.default)(SVGViewBox),
             _parseViewBox4 = _slicedToArray(_parseViewBox3, 4),
@@ -157,0 +157,0 @@ x = _parseViewBox4[0],

build-es/events/event-factory.js

 import ViewerMouseEvent from './viewer-mouse-event';
 import ViewerTouchEvent from './viewer-touch-event';
-export default function (originalEvent, value, SVGViewer) {
+export default function eventFactory(originalEvent, value, SVGViewer) {
   var eventType = originalEvent.type;
@@ -5,0 +5,0 @@

build-es/events/viewer-mouse-event.js

@@ -19,4 +19,4 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
-import { getSVGPoint } from '../features/common';
 import ViewerEvent from './viewer-event';
+import { getMousePosition } from "../features/interactions";
 
@@ -39,8 +39,4 @@ var ViewerMouseEvent =
         var event = this.originalEvent,
-            value = this.value,
             SVGViewer = this.SVGViewer;
-        var rect = SVGViewer.getBoundingClientRect();
-        var x = event.clientX - Math.round(rect.left);
-        var y = event.clientY - Math.round(rect.top);
-        this._cachePoint = getSVGPoint(value, x, y);
+        this._cachePoint = getMousePosition(event, SVGViewer);
       }
@@ -47,0 +43,0 @@

build-es/features/interactions-touch.js

@@ -13,7 +13,3 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
-function hasPinchPointDistance(value) {
-  return typeof value.pinchPointDistance === 'number';
-}
-
-function onMultiTouch(event, ViewerDOM, tool, value, props) {
+function getTouchPosition(touch, ViewerDOM) {
   var _ViewerDOM$getBoundin = ViewerDOM.getBoundingClientRect(),
@@ -23,46 +19,2 @@ left = _ViewerDOM$getBoundin.left,
 
-  var x1 = event.touches[0].clientX - Math.round(left);
-  var y1 = event.touches[0].clientY - Math.round(top);
-  var x2 = event.touches[1].clientX - Math.round(left);
-  var y2 = event.touches[1].clientY - Math.round(top);
-  var pinchPointDistance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
-  var previousPointDistance = hasPinchPointDistance(value) ? value.pinchPointDistance : pinchPointDistance;
-  var svgPoint = getSVGPoint(value, (x1 + x2) / 2, (y1 + y2) / 2);
-  var distanceFactor = pinchPointDistance / previousPointDistance;
-
-  if (isZoomLevelGoingOutOfBounds(value, distanceFactor)) {
-    // Do not change translation and scale of value
-    return value;
-  }
-
-  if (event.cancelable) {
-    event.preventDefault();
-  }
-
-  var matrix = transform(fromObject(value), translate(svgPoint.x, svgPoint.y), scale(distanceFactor, distanceFactor), translate(-svgPoint.x, -svgPoint.y));
-  return set(value, set(_objectSpread({
-    mode: MODE_ZOOMING
-  }, limitZoomLevel(value, matrix), {
-    startX: null,
-    startY: null,
-    endX: null,
-    endY: null,
-    prePinchMode: value.prePinchMode ? value.prePinchMode : value.mode,
-    pinchPointDistance: pinchPointDistance
-  })));
-}
-
-function isMultiTouch(event, props) {
-  return props.detectPinchGesture && event.touches.length > 1;
-}
-
-function shouldResetPinchPointDistance(event, value, props) {
-  return props.detectPinchGesture && hasPinchPointDistance(value) && event.touches.length < 2;
-}
-
-function getTouchPosition(touch, ViewerDOM) {
-  var _ViewerDOM$getBoundin2 = ViewerDOM.getBoundingClientRect(),
-      left = _ViewerDOM$getBoundin2.left,
-      top = _ViewerDOM$getBoundin2.top;
-
   var x = touch.clientX - Math.round(left);
@@ -76,24 +28,2 @@ var y = touch.clientY - Math.round(top);
 
-function getNextValue(event, ViewerDOM, tool, value, props, nextValueFn) {
-  var nextValue = event.touches.length === 0 ? set(value, {
-    mode: value.prePinchMode ? MODE_IDLE : value.mode,
-    prePinchMode: null
-  }) : value;
-  var touch = event.touches.length > 0 ? event.touches[0] : event.changedTouches[0];
-  var touchPosition = getTouchPosition(touch, ViewerDOM);
-
-  switch (tool) {
-    case TOOL_ZOOM_OUT:
-    case TOOL_ZOOM_IN:
-    case TOOL_AUTO:
-    case TOOL_PAN:
-      event.stopPropagation();
-      event.preventDefault();
-      return nextValueFn(event, ViewerDOM, tool, nextValue, props, touchPosition);
-
-    default:
-      return nextValue;
-  }
-}
-
 export function onTouchStart(event, ViewerDOM, tool, value, props) {
@@ -112,3 +42,3 @@ if (isMultiTouch(event, props)) {
 
-  return getNextValue(event, ViewerDOM, tool, value, props, onMouseDown);
+  return onSingleTouch(event, ViewerDOM, tool, value, props, onMouseDown);
 }
@@ -124,3 +54,3 @@ export function onTouchMove(event, ViewerDOM, tool, value, props) {
 
-  return getNextValue(event, ViewerDOM, tool, value, props, onMouseMove);
+  return onSingleTouch(event, ViewerDOM, tool, value, props, onMouseMove);
 }
@@ -140,3 +70,3 @@ export function onTouchEnd(event, ViewerDOM, tool, value, props) {
 
-  return getNextValue(event, ViewerDOM, tool, nextValue, props, onMouseUp);
+  return onSingleTouch(event, ViewerDOM, tool, nextValue, props, onMouseUp);
 }
@@ -147,2 +77,72 @@ export function onTouchCancel(event, ViewerDOM, tool, value, props) {
   return resetMode(value);
+}
+
+function hasPinchPointDistance(value) {
+  return typeof value.pinchPointDistance === 'number';
+}
+
+function shouldResetPinchPointDistance(event, value, props) {
+  return props.detectPinchGesture && hasPinchPointDistance(value) && event.touches.length < 2;
+}
+
+function isMultiTouch(event, props) {
+  return props.detectPinchGesture && event.touches.length > 1;
+}
+
+function onSingleTouch(event, ViewerDOM, tool, value, props, nextValueFn) {
+  var nextValue = event.touches.length === 0 ? set(value, {
+    mode: value.prePinchMode ? MODE_IDLE : value.mode,
+    prePinchMode: null
+  }) : value;
+  var touch = event.touches.length > 0 ? event.touches[0] : event.changedTouches[0];
+  var touchPosition = getTouchPosition(touch, ViewerDOM);
+
+  switch (tool) {
+    case TOOL_ZOOM_OUT:
+    case TOOL_ZOOM_IN:
+    case TOOL_AUTO:
+    case TOOL_PAN:
+      event.stopPropagation();
+      event.preventDefault();
+      return nextValueFn(event, ViewerDOM, tool, nextValue, props, touchPosition);
+
+    default:
+      return nextValue;
+  }
+}
+
+function onMultiTouch(event, ViewerDOM, tool, value, props) {
+  var _ViewerDOM$getBoundin2 = ViewerDOM.getBoundingClientRect(),
+      left = _ViewerDOM$getBoundin2.left,
+      top = _ViewerDOM$getBoundin2.top;
+
+  var x1 = event.touches[0].clientX - Math.round(left);
+  var y1 = event.touches[0].clientY - Math.round(top);
+  var x2 = event.touches[1].clientX - Math.round(left);
+  var y2 = event.touches[1].clientY - Math.round(top);
+  var pinchPointDistance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
+  var previousPointDistance = hasPinchPointDistance(value) ? value.pinchPointDistance : pinchPointDistance;
+  var svgPoint = getSVGPoint(value, (x1 + x2) / 2, (y1 + y2) / 2);
+  var distanceFactor = pinchPointDistance / previousPointDistance;
+
+  if (isZoomLevelGoingOutOfBounds(value, distanceFactor)) {
+    // Do not change translation and scale of value
+    return value;
+  }
+
+  if (event.cancelable) {
+    event.preventDefault();
+  }
+
+  var matrix = transform(fromObject(value), translate(svgPoint.x, svgPoint.y), scale(distanceFactor, distanceFactor), translate(-svgPoint.x, -svgPoint.y));
+  return set(value, set(_objectSpread({
+    mode: MODE_ZOOMING
+  }, limitZoomLevel(value, matrix), {
+    startX: null,
+    startY: null,
+    endX: null,
+    endY: null,
+    prePinchMode: value.prePinchMode ? value.prePinchMode : value.mode,
+    pinchPointDistance: pinchPointDistance
+  })));
 }

build-es/features/interactions.js

@@ -1,22 +0,25 @@
-import { TOOL_AUTO, TOOL_NONE, TOOL_PAN, TOOL_ZOOM_IN, TOOL_ZOOM_OUT, MODE_PANNING, MODE_ZOOMING } from '../constants';
-import { setFocus, getSVGPoint } from './common';
-import { startPanning, updatePanning, stopPanning, autoPanIfNeeded } from './pan';
-import { startZooming, updateZooming, stopZooming, zoom } from './zoom';
+import { MODE_PANNING, MODE_ZOOMING, TOOL_AUTO, TOOL_NONE, TOOL_PAN, TOOL_ZOOM_IN, TOOL_ZOOM_OUT } from '../constants';
+import { getSVGPoint, setFocus } from './common';
+import { autoPanIfNeeded, startPanning, stopPanning, updatePanning } from './pan';
+import { startZooming, stopZooming, updateZooming, zoom } from './zoom';
 import mapRange from '../utils/mapRange';
+export function getMousePosition(event, ViewerDOM) {
+  var _ViewerDOM$getBoundin = ViewerDOM.getBoundingClientRect(),
+      left = _ViewerDOM$getBoundin.left,
+      top = _ViewerDOM$getBoundin.top;
+
+  var x = event.clientX - Math.round(left);
+  var y = event.clientY - Math.round(top);
+  return {
+    x: x,
+    y: y
+  };
+}
 export function onMouseDown(event, ViewerDOM, tool, value, props) {
   var coords = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : null;
-  var x, y;
 
-  if (coords) {
-    x = coords.x;
-    y = coords.y;
-  } else {
-    var _ViewerDOM$getBoundin = ViewerDOM.getBoundingClientRect(),
-        left = _ViewerDOM$getBoundin.left,
-        top = _ViewerDOM$getBoundin.top;
+  var _ref = coords || getMousePosition(event, ViewerDOM),
+      x = _ref.x,
+      y = _ref.y;
 
-    x = event.clientX - Math.round(left);
-    y = event.clientY - Math.round(top);
-  }
-
   var nextValue = value;
@@ -48,16 +51,7 @@
   var coords = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : null;
-  var x, y;
 
-  if (coords) {
-    x = coords.x;
-    y = coords.y;
-  } else {
-    var _ViewerDOM$getBoundin2 = ViewerDOM.getBoundingClientRect(),
-        left = _ViewerDOM$getBoundin2.left,
-        top = _ViewerDOM$getBoundin2.top;
+  var _ref2 = coords || getMousePosition(event, ViewerDOM),
+      x = _ref2.x,
+      y = _ref2.y;
 
-    x = event.clientX - Math.round(left);
-    y = event.clientY - Math.round(top);
-  }
-
   var forceExit = event.buttons === 0; //the mouse exited and reentered into svg
@@ -86,16 +80,7 @@
   var coords = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : null;
-  var x, y;
 
-  if (coords) {
-    x = coords.x;
-    y = coords.y;
-  } else {
-    var _ViewerDOM$getBoundin3 = ViewerDOM.getBoundingClientRect(),
-        left = _ViewerDOM$getBoundin3.left,
-        top = _ViewerDOM$getBoundin3.top;
+  var _ref3 = coords || getMousePosition(event, ViewerDOM),
+      x = _ref3.x,
+      y = _ref3.y;
 
-    x = event.clientX - Math.round(left);
-    y = event.clientY - Math.round(top);
-  }
-
   var nextValue = value;
@@ -114,3 +99,3 @@
     case TOOL_PAN:
-      if (value.mode === MODE_PANNING) nextValue = stopPanning(value, x, y);
+      if (value.mode === MODE_PANNING) nextValue = stopPanning(value);
       break;
@@ -127,36 +112,21 @@
   var coords = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : null;
-  var x, y;
 
-  if (coords) {
-    x = coords.x;
-    y = coords.y;
-  } else {
-    var _ViewerDOM$getBoundin4 = ViewerDOM.getBoundingClientRect(),
-        left = _ViewerDOM$getBoundin4.left,
-        top = _ViewerDOM$getBoundin4.top;
+  var _ref4 = coords || getMousePosition(event, ViewerDOM),
+      x = _ref4.x,
+      y = _ref4.y;
 
-    x = event.clientX - Math.round(left);
-    y = event.clientY - Math.round(top);
-  }
-
   var nextValue = value;
 
-  switch (tool) {
-    case TOOL_AUTO:
-      if (!props.disableDoubleClickZoomWithToolAuto) {
-        var SVGPoint = getSVGPoint(value, x, y);
+  if (tool === TOOL_AUTO && !props.disableDoubleClickZoomWithToolAuto) {
+    var _props$modifierKeys = props.modifierKeys,
+        modifierKeys = _props$modifierKeys === void 0 ? [] : _props$modifierKeys;
+    var SVGPoint = getSVGPoint(value, x, y);
 
-        var modifierKeysReducer = function modifierKeysReducer(current, modifierKey) {
-          return current || event.getModifierState(modifierKey);
-        };
+    var modifierKeysReducer = function modifierKeysReducer(current, modifierKey) {
+      return current || event.getModifierState(modifierKey);
+    };
 
-        var modifierKeyActive = props.modifierKeys.reduce(modifierKeysReducer, false);
-        var scaleFactor = modifierKeyActive ? 1 / props.scaleFactor : props.scaleFactor;
-        nextValue = zoom(value, SVGPoint.x, SVGPoint.y, scaleFactor, props);
-      }
-
-      break;
-
-    default:
-      return value;
+    var modifierKeyActive = modifierKeys.reduce(modifierKeysReducer, false);
+    var scaleFactor = modifierKeyActive ? 1 / props.scaleFactor : props.scaleFactor;
+    nextValue = zoom(value, SVGPoint.x, SVGPoint.y, scaleFactor, props);
   }
@@ -169,16 +139,7 @@
   var coords = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : null;
-  var x, y;
 
-  if (coords) {
-    x = coords.x;
-    y = coords.y;
-  } else {
-    var _ViewerDOM$getBoundin5 = ViewerDOM.getBoundingClientRect(),
-        left = _ViewerDOM$getBoundin5.left,
-        top = _ViewerDOM$getBoundin5.top;
+  var _ref5 = coords || getMousePosition(event, ViewerDOM),
+      x = _ref5.x,
+      y = _ref5.y;
 
-    x = event.clientX - Math.round(left);
-    y = event.clientY - Math.round(top);
-  }
-
   if (!props.detectWheel) return value;
@@ -185,0 +146,0 @@ var delta = Math.max(-1, Math.min(1, event.deltaY));

build-es/utils/mapRange.js

@@ -1,3 +0,12 @@
-export default function mapRange(value, low1, high1, low2, high2) {
-  return low2 + (high2 - low2) * (value - low1) / (high1 - low1);
+/**
+ * Convert (re-map) an input value range into a destination range.
+ * @param value
+ * @param sourceStart
+ * @param sourceEnd
+ * @param targetStart
+ * @param targetEnd
+ * @return number
+ */
+export default function mapRange(value, sourceStart, sourceEnd, targetStart, targetEnd) {
+  return targetStart + (targetEnd - targetStart) * (value - sourceStart) / (sourceEnd - sourceStart);
 }

build-es/viewer.js

@@ -44,3 +44,3 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 import { onDoubleClick as _onDoubleClick, onInterval, onMouseDown as _onMouseDown, onMouseEnterOrLeave, onMouseMove as _onMouseMove, onMouseUp as _onMouseUp, onWheel as _onWheel } from './features/interactions';
-import parseViewBox from './utils/ViewBoxParser';
+import parseViewBox from './utils/parseViewBox';
 import { onTouchCancel as _onTouchCancel, onTouchEnd as _onTouchEnd, onTouchMove as _onTouchMove, onTouchStart as _onTouchStart } from './features/interactions-touch';
@@ -47,0 +47,0 @@ import { fitSelection as _fitSelection, fitToViewer as _fitToViewer, zoom as _zoom, zoomOnViewerCenter as _zoomOnViewerCenter } from './features/zoom';

build-storybook/asset-manifest.json

 {
   "files": {
-    "main.js": "/react-svg-pan-zoom/main.229f856c61eec041660c.bundle.js",
-    "main.js.map": "/react-svg-pan-zoom/main.229f856c61eec041660c.bundle.js.map",
-    "runtime~main.js": "/react-svg-pan-zoom/runtime~main.229f856c61eec041660c.bundle.js",
-    "runtime~main.js.map": "/react-svg-pan-zoom/runtime~main.229f856c61eec041660c.bundle.js.map",
-    "vendors~main.js": "/react-svg-pan-zoom/vendors~main.229f856c61eec041660c.bundle.js",
-    "vendors~main.js.map": "/react-svg-pan-zoom/vendors~main.229f856c61eec041660c.bundle.js.map",
+    "main.js": "/react-svg-pan-zoom/main.cda14ed97b5e8787bb3b.bundle.js",
+    "main.js.map": "/react-svg-pan-zoom/main.cda14ed97b5e8787bb3b.bundle.js.map",
+    "runtime~main.js": "/react-svg-pan-zoom/runtime~main.cda14ed97b5e8787bb3b.bundle.js",
+    "runtime~main.js.map": "/react-svg-pan-zoom/runtime~main.cda14ed97b5e8787bb3b.bundle.js.map",
+    "vendors~main.js": "/react-svg-pan-zoom/vendors~main.cda14ed97b5e8787bb3b.bundle.js",
+    "vendors~main.js.map": "/react-svg-pan-zoom/vendors~main.cda14ed97b5e8787bb3b.bundle.js.map",
     "iframe.html": "/react-svg-pan-zoom/iframe.html",
-    "precache-manifest.e93efbc97b8396fd5838d79b089e69b5.js": "/react-svg-pan-zoom/precache-manifest.e93efbc97b8396fd5838d79b089e69b5.js",
+    "precache-manifest.991f2197408034074b6eca52c26449e3.js": "/react-svg-pan-zoom/precache-manifest.991f2197408034074b6eca52c26449e3.js",
     "service-worker.js": "/react-svg-pan-zoom/service-worker.js"
   },
   "entrypoints": [
-    "runtime~main.229f856c61eec041660c.bundle.js",
-    "vendors~main.229f856c61eec041660c.bundle.js",
-    "main.229f856c61eec041660c.bundle.js"
+    "runtime~main.cda14ed97b5e8787bb3b.bundle.js",
+    "vendors~main.cda14ed97b5e8787bb3b.bundle.js",
+    "main.cda14ed97b5e8787bb3b.bundle.js"
   ]
 }

build-storybook/service-worker.js

@@ -17,3 +17,3 @@ /**
 importScripts(
-  "precache-manifest.e93efbc97b8396fd5838d79b089e69b5.js"
+  "precache-manifest.991f2197408034074b6eca52c26449e3.js"
 );
@@ -20,0 +20,0 @@

package.json

 {
   "author": "chrvadala",
   "name": "react-svg-pan-zoom",
-  "version": "3.6.0",
+  "version": "3.7.0",
   "description": "A React component that adds pan and zoom features to SVG",
@@ -60,14 +60,14 @@ "main": "./build-commonjs/index.js",
   "devDependencies": {
-    "@babel/cli": "^7.7.4",
-    "@babel/core": "^7.7.4",
-    "@babel/runtime": "^7.7.4",
-    "@storybook/addon-actions": "5.2.6",
-    "@storybook/addon-knobs": "5.2.6",
-    "@storybook/addon-links": "5.2.6",
-    "@storybook/addons": "5.2.6",
-    "@storybook/react": "5.2.6",
-    "@storybook/theming": "^5.2.4",
+    "@babel/cli": "^7.7.5",
+    "@babel/core": "^7.7.5",
+    "@babel/runtime": "^7.7.6",
+    "@storybook/addon-actions": "5.2.8",
+    "@storybook/addon-knobs": "5.2.8",
+    "@storybook/addon-links": "5.2.8",
+    "@storybook/addons": "5.2.8",
+    "@storybook/react": "5.2.8",
+    "@storybook/theming": "^5.2.8",
     "@types/jest": "^24.0.23",
     "babel-loader": "^8.0.6",
-    "coveralls": "^3.0.8",
+    "coveralls": "^3.0.9",
     "cross-env": "^6.0.3",
@@ -77,6 +77,7 @@ "del-cli": "^3.0.0",
     "jest": "^24.9.0",
+    "jest-matcher-deep-close-to": "^1.3.0",
     "npm-run-all": "^4.1.3",
     "react": "^16.10.2",
     "react-dom": "^16.10.2",
-    "react-scripts": "^3.2.0",
+    "react-scripts": "^3.3.0",
     "react-virtualized": "^9.21.1",
@@ -83,0 +84,0 @@ "remarkable": "^2.0.0",

README.md

@@ -79,6 +79,7 @@ # react-svg-pan-zoom
 - **v3.2** - Upgrades deps
-- **v3.3** - Adds SVG viewbox prop support [#150](https://github.com/chrvadala/react-svg-pan-zoom/pull/150) 
+- **v3.3** - Adds SVG viewbox prop support [#150](https://github.com/chrvadala/react-svg-pan-zoom/pull/150)
 - **v3.4** - Upgrades deps and increases code quality (fixing eslint warnings)
 - **v3.5** - Handles wheel event as passive [#158](https://github.com/chrvadala/react-svg-pan-zoom/pull/158), upgrades deps
-- **3.6** - Adds some unit tests, Fixes [#161](https://github.com/chrvadala/react-svg-pan-zoom/issues/161), upgrades deps
+- **v3.6** - Adds some unit tests, Fixes [#161](https://github.com/chrvadala/react-svg-pan-zoom/issues/161), upgrades deps
+- **v3.7** - Adds some more unit tests, upgrades deps
 
@@ -85,0 +86,0 @@ ## Some projects using react-svg-pan-zoom

src/events/event-factory.js

 import ViewerMouseEvent from './viewer-mouse-event';
 import ViewerTouchEvent from './viewer-touch-event';
 
-export default function (originalEvent, value, SVGViewer) {
+export default function eventFactory(originalEvent, value, SVGViewer) {
 
@@ -6,0 +6,0 @@ let eventType = originalEvent.type;

src/events/viewer-mouse-event.js

@@ -1,15 +0,9 @@
-import {getSVGPoint} from '../features/common'
 import ViewerEvent from './viewer-event';
+import {getMousePosition} from "../features/interactions";
 
-export default class ViewerMouseEvent extends ViewerEvent{
-
+export default class ViewerMouseEvent extends ViewerEvent {
   get point() {
     if (!this._cachePoint) {
-      let event = this.originalEvent, value = this.value, SVGViewer = this.SVGViewer;
-
-      let rect = SVGViewer.getBoundingClientRect();
-      let x = event.clientX - Math.round(rect.left);
-      let y = event.clientY - Math.round(rect.top);
-
-      this._cachePoint = getSVGPoint(value, x, y);
+      const {originalEvent: event, SVGViewer} = this;
+      this._cachePoint = getMousePosition(event, SVGViewer)
     }
@@ -16,0 +10,0 @@ return this._cachePoint;

src/features/interactions-touch.js

@@ -10,53 +10,2 @@ import {transform, fromObject, translate, scale} from 'transformation-matrix';
 
-function hasPinchPointDistance(value) {
-  return typeof value.pinchPointDistance === 'number';
-}
-
-function onMultiTouch(event, ViewerDOM, tool, value, props) {
-  const {left, top} = ViewerDOM.getBoundingClientRect();
-  const x1 = event.touches[0].clientX - Math.round(left);
-  const y1 = event.touches[0].clientY - Math.round(top);
-  const x2 = event.touches[1].clientX - Math.round(left);
-  const y2 = event.touches[1].clientY - Math.round(top);
-  const pinchPointDistance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
-  const previousPointDistance = hasPinchPointDistance(value) ? value.pinchPointDistance : pinchPointDistance;
-  const svgPoint = getSVGPoint(value, (x1 + x2) / 2, (y1 + y2) / 2);
-  let distanceFactor = pinchPointDistance/previousPointDistance;
-
-  if (isZoomLevelGoingOutOfBounds(value, distanceFactor)) {
-    // Do not change translation and scale of value
-    return value;
-  }
-
-  if (event.cancelable) {
-    event.preventDefault();
-  }
-
-  let matrix = transform(
-    fromObject(value),
-    translate(svgPoint.x, svgPoint.y),
-    scale(distanceFactor, distanceFactor),
-    translate(-svgPoint.x, -svgPoint.y)
-  );
-
-  return set(value, set({
-    mode: MODE_ZOOMING,
-    ...limitZoomLevel(value, matrix),
-    startX: null,
-    startY: null,
-    endX: null,
-    endY: null,
-    prePinchMode: value.prePinchMode ? value.prePinchMode : value.mode,
-    pinchPointDistance
-  }));
-}
-
-function isMultiTouch(event, props) {
-  return props.detectPinchGesture && event.touches.length > 1;
-}
-
-function shouldResetPinchPointDistance(event, value, props) {
-  return props.detectPinchGesture && hasPinchPointDistance(value) && event.touches.length < 2;
-}
-
 function getTouchPosition(touch, ViewerDOM) {
@@ -70,21 +19,2 @@ let {left, top} = ViewerDOM.getBoundingClientRect();
 
-function getNextValue(event, ViewerDOM, tool, value, props, nextValueFn) {
-  let nextValue = event.touches.length === 0 ? set(value, { mode: value.prePinchMode ? MODE_IDLE : value.mode, prePinchMode: null }) : value;
-  let touch = event.touches.length > 0 ? event.touches[0] : event.changedTouches[0];
-  let touchPosition = getTouchPosition(touch, ViewerDOM);
-
-  switch (tool) {
-    case TOOL_ZOOM_OUT:
-    case TOOL_ZOOM_IN:
-    case TOOL_AUTO:
-    case TOOL_PAN:
-      event.stopPropagation();
-      event.preventDefault();
-      return nextValueFn(event, ViewerDOM, tool, nextValue, props, touchPosition);
-
-    default:
-      return nextValue;
-  }
-}
-
 export function onTouchStart(event, ViewerDOM, tool, value, props) {
@@ -103,3 +33,3 @@ if (isMultiTouch(event, props)) {
 
-  return getNextValue(event, ViewerDOM, tool, value, props, onMouseDown);
+  return onSingleTouch(event, ViewerDOM, tool, value, props, onMouseDown);
 }
@@ -116,3 +46,3 @@
 
-  return getNextValue(event, ViewerDOM, tool, value, props, onMouseMove);
+  return onSingleTouch(event, ViewerDOM, tool, value, props, onMouseMove);
 }
@@ -131,3 +61,3 @@
 
-  return getNextValue(event, ViewerDOM, tool, nextValue, props, onMouseUp);
+  return onSingleTouch(event, ViewerDOM, tool, nextValue, props, onMouseUp);
 }
@@ -141,1 +71,71 @@
 }
+
+function hasPinchPointDistance(value) {
+  return typeof value.pinchPointDistance === 'number';
+}
+
+function shouldResetPinchPointDistance(event, value, props) {
+  return props.detectPinchGesture && hasPinchPointDistance(value) && event.touches.length < 2;
+}
+
+function isMultiTouch(event, props) {
+  return props.detectPinchGesture && event.touches.length > 1;
+}
+
+function onSingleTouch(event, ViewerDOM, tool, value, props, nextValueFn) {
+  let nextValue = event.touches.length === 0 ? set(value, { mode: value.prePinchMode ? MODE_IDLE : value.mode, prePinchMode: null }) : value;
+  let touch = event.touches.length > 0 ? event.touches[0] : event.changedTouches[0];
+  let touchPosition = getTouchPosition(touch, ViewerDOM);
+
+  switch (tool) {
+    case TOOL_ZOOM_OUT:
+    case TOOL_ZOOM_IN:
+    case TOOL_AUTO:
+    case TOOL_PAN:
+      event.stopPropagation();
+      event.preventDefault();
+      return nextValueFn(event, ViewerDOM, tool, nextValue, props, touchPosition);
+
+    default:
+      return nextValue;
+  }
+}
+
+function onMultiTouch(event, ViewerDOM, tool, value, props) {
+  const {left, top} = ViewerDOM.getBoundingClientRect();
+  const x1 = event.touches[0].clientX - Math.round(left);
+  const y1 = event.touches[0].clientY - Math.round(top);
+  const x2 = event.touches[1].clientX - Math.round(left);
+  const y2 = event.touches[1].clientY - Math.round(top);
+  const pinchPointDistance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
+  const previousPointDistance = hasPinchPointDistance(value) ? value.pinchPointDistance : pinchPointDistance;
+  const svgPoint = getSVGPoint(value, (x1 + x2) / 2, (y1 + y2) / 2);
+  let distanceFactor = pinchPointDistance/previousPointDistance;
+
+  if (isZoomLevelGoingOutOfBounds(value, distanceFactor)) {
+    // Do not change translation and scale of value
+    return value;
+  }
+
+  if (event.cancelable) {
+    event.preventDefault();
+  }
+
+  let matrix = transform(
+    fromObject(value),
+    translate(svgPoint.x, svgPoint.y),
+    scale(distanceFactor, distanceFactor),
+    translate(-svgPoint.x, -svgPoint.y)
+  );
+
+  return set(value, set({
+    mode: MODE_ZOOMING,
+    ...limitZoomLevel(value, matrix),
+    startX: null,
+    startY: null,
+    endX: null,
+    endY: null,
+    prePinchMode: value.prePinchMode ? value.prePinchMode : value.mode,
+    pinchPointDistance
+  }));
+}

src/features/interactions.js

@@ -1,25 +0,16 @@
-import {
-  TOOL_AUTO,
-  TOOL_NONE,
-  TOOL_PAN,
-  TOOL_ZOOM_IN,
-  TOOL_ZOOM_OUT,
-  MODE_PANNING,
-  MODE_ZOOMING,
-} from '../constants';
-import {setFocus, getSVGPoint} from './common';
-import {startPanning, updatePanning, stopPanning, autoPanIfNeeded} from './pan';
-import {startZooming, updateZooming, stopZooming, zoom} from './zoom';
+import {MODE_PANNING, MODE_ZOOMING, TOOL_AUTO, TOOL_NONE, TOOL_PAN, TOOL_ZOOM_IN, TOOL_ZOOM_OUT,} from '../constants';
+import {getSVGPoint, setFocus} from './common';
+import {autoPanIfNeeded, startPanning, stopPanning, updatePanning} from './pan';
+import {startZooming, stopZooming, updateZooming, zoom} from './zoom';
 import mapRange from '../utils/mapRange';
 
+export function getMousePosition(event, ViewerDOM) {
+  let {left, top} = ViewerDOM.getBoundingClientRect();
+  let x = event.clientX - Math.round(left);
+  let y = event.clientY - Math.round(top);
+  return {x, y}
+}
 
 export function onMouseDown(event, ViewerDOM, tool, value, props, coords = null) {
-  let x, y;
-  if (coords) {
-    ({x, y} = coords);
-  } else {
-    let {left, top} = ViewerDOM.getBoundingClientRect();
-    x = event.clientX - Math.round(left);
-    y = event.clientY - Math.round(top);
-  }
+  const {x, y} = coords || getMousePosition(event, ViewerDOM)
 
@@ -52,10 +43,3 @@ let nextValue = value;
 export function onMouseMove(event, ViewerDOM, tool, value, props, coords = null) {
-  let x, y;
-  if (coords) {
-    ({x, y} = coords);
-  } else {
-    let {left, top} = ViewerDOM.getBoundingClientRect();
-    x = event.clientX - Math.round(left);
-    y = event.clientY - Math.round(top);
-  }
+  const {x, y} = coords || getMousePosition(event, ViewerDOM)
 
@@ -86,10 +70,3 @@ let forceExit = (event.buttons === 0); //the mouse exited and reentered into svg
 export function onMouseUp(event, ViewerDOM, tool, value, props, coords = null) {
-  let x, y;
-  if (coords) {
-    ({x, y} = coords);
-  } else {
-    let {left, top} = ViewerDOM.getBoundingClientRect();
-    x = event.clientX - Math.round(left);
-    y = event.clientY - Math.round(top);
-  }
+  const {x, y} = coords || getMousePosition(event, ViewerDOM)
 
@@ -112,3 +89,3 @@ let nextValue = value;
       if (value.mode === MODE_PANNING)
-        nextValue = stopPanning(value, x, y);
+        nextValue = stopPanning(value);
       break;
@@ -125,26 +102,13 @@
 export function onDoubleClick(event, ViewerDOM, tool, value, props, coords = null) {
-  let x, y;
-  if (coords) {
-    ({x, y} = coords);
-  } else {
-    let {left, top} = ViewerDOM.getBoundingClientRect();
-    x = event.clientX - Math.round(left);
-    y = event.clientY - Math.round(top);
-  }
+  const {x, y} = coords || getMousePosition(event, ViewerDOM)
 
   let nextValue = value;
 
-  switch (tool) {
-    case TOOL_AUTO:
-      if (!props.disableDoubleClickZoomWithToolAuto) {
-        let SVGPoint = getSVGPoint(value, x, y);
-        let modifierKeysReducer = (current, modifierKey) => current || event.getModifierState(modifierKey);
-        let modifierKeyActive = props.modifierKeys.reduce(modifierKeysReducer, false);
-        let scaleFactor = modifierKeyActive ? 1 / props.scaleFactor : props.scaleFactor;
-        nextValue = zoom(value, SVGPoint.x, SVGPoint.y, scaleFactor, props);
-      }
-      break;
-
-    default:
-      return value;
+  if (tool === TOOL_AUTO && !props.disableDoubleClickZoomWithToolAuto) {
+    const {modifierKeys = []} = props;
+    let SVGPoint = getSVGPoint(value, x, y);
+    let modifierKeysReducer = (current, modifierKey) => current || event.getModifierState(modifierKey);
+    let modifierKeyActive = modifierKeys.reduce(modifierKeysReducer, false);
+    let scaleFactor = modifierKeyActive ? 1 / props.scaleFactor : props.scaleFactor;
+    nextValue = zoom(value, SVGPoint.x, SVGPoint.y, scaleFactor, props);
   }
@@ -157,10 +121,3 @@
 export function onWheel(event, ViewerDOM, tool, value, props, coords = null) {
-  let x, y;
-  if (coords) {
-    ({x, y} = coords);
-  } else {
-    let {left, top} = ViewerDOM.getBoundingClientRect();
-    x = event.clientX - Math.round(left);
-    y = event.clientY - Math.round(top);
-  }
+  const {x, y} = coords || getMousePosition(event, ViewerDOM)
 
@@ -189,3 +146,3 @@ if (!props.detectWheel) return value;
 
-  if (! ([TOOL_NONE, TOOL_AUTO].indexOf(tool) >= 0) ) return value;
+  if (!([TOOL_NONE, TOOL_AUTO].indexOf(tool) >= 0)) return value;
   if (!props.detectAutoPan) return value;
@@ -192,0 +149,0 @@ if (!value.focus) return value;

src/utils/mapRange.js

@@ -1,3 +0,13 @@
-export default function mapRange(value, low1, high1, low2, high2) {
-  return low2 + (high2 - low2) * (value - low1) / (high1 - low1);
+/**
+ * Convert (re-map) an input value range into a destination range.
+ * @param value
+ * @param sourceStart
+ * @param sourceEnd
+ * @param targetStart
+ * @param targetEnd
+ * @return number
+ */
+
+export default function mapRange(value, sourceStart, sourceEnd, targetStart, targetEnd) {
+  return targetStart + (targetEnd - targetStart) * (value - sourceStart) / (sourceEnd - sourceStart);
 }

src/viewer.js

@@ -26,3 +26,3 @@ import React from 'react';
 } from './features/interactions';
-import parseViewBox from './utils/ViewBoxParser';
+import parseViewBox from './utils/parseViewBox';
 import {onTouchCancel, onTouchEnd, onTouchMove, onTouchStart} from './features/interactions-touch';
@@ -29,0 +29,0 @@

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

Improved metrics

Total package byte prevSize

5268041

increased by0.28%

Number of lines in readme file

109

increased by0.93%

Worsened metrics

Dev dependency count

25

increased by4.17%

Lines of code

24342

decreased by-0.29%

No dependency changes