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

Comparing version 3.5.0 to 3.6.0

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

@@ -18,3 +18,3 @@ "use strict";
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
@@ -21,0 +21,0 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

build-commonjs/features/common.js

@@ -18,2 +18,3 @@ "use strict";
 exports.resetMode = resetMode;
+exports.DEFAULT_MODE = void 0;
 
@@ -28,6 +29,8 @@ var _constants = require("../constants");
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+var VERSION = 3;
+var DEFAULT_MODE = _constants.MODE_IDLE;
 /**
@@ -37,6 +40,11 @@ * Obtain default value
  */
-function getDefaultValue(viewerWidth, viewerHeight, SVGMinX, SVGMinY, SVGWidth, SVGHeight, scaleFactorMin, scaleFactorMax) {
+
+exports.DEFAULT_MODE = DEFAULT_MODE;
+
+function getDefaultValue(viewerWidth, viewerHeight, SVGMinX, SVGMinY, SVGWidth, SVGHeight) {
+  var scaleFactorMin = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : null;
+  var scaleFactorMax = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : null;
   return set({}, _objectSpread({}, (0, _transformationMatrix.identity)(), {
-    version: 2,
-    mode: _constants.MODE_IDLE,
+    version: VERSION,
+    mode: DEFAULT_MODE,
     focus: false,
@@ -64,3 +72,3 @@ pinchPointDistance: null,
  * @param value
- * @param change
+ * @param patch
  * @param action
@@ -71,5 +79,5 @@ * @returns {Object}
 
-function set(value, change) {
+function set(value, patch) {
   var action = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-  value = Object.assign({}, value, change, {
+  value = Object.assign({}, value, patch, {
     lastAction: action
@@ -86,3 +94,3 @@ });
 function isValueValid(value) {
-  return value !== null && _typeof(value) === 'object' && value.hasOwnProperty('version');
+  return value !== null && _typeof(value) === 'object' && value.hasOwnProperty('version') && value.version === VERSION;
 }
@@ -175,2 +183,3 @@ /**
  */
+//TODO rename to setZoomLimits
 
@@ -227,3 +236,3 @@
   return set(value, {
-    mode: _constants.MODE_IDLE,
+    mode: DEFAULT_MODE,
     startX: null,
@@ -230,0 +239,0 @@ startY: null,

build-commonjs/features/interactions-touch.js

@@ -23,3 +23,3 @@ "use strict";
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
@@ -26,0 +26,0 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

build-commonjs/features/pan.js

@@ -20,3 +20,3 @@ "use strict";
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
@@ -34,7 +34,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 /**
- *
+ * Atomic pan operation
  * @param value
- * @param SVGDeltaX
- * @param SVGDeltaY
- * @param panLimit
+ * @param SVGDeltaX drag movement
+ * @param SVGDeltaY drag movement
+ * @param panLimit forces the image to keep at least x pixel inside the viewer
  * @returns {Object}
@@ -78,3 +78,11 @@ */
 }
+/**
+ * Start pan operation lifecycle
+ * @param value
+ * @param viewerX
+ * @param viewerY
+ * @return {ReadonlyArray<unknown>}
+ */
 
+
 function startPanning(value, viewerX, viewerY) {
@@ -89,3 +97,12 @@ return (0, _common.set)(value, {
 }
+/**
+ * Continue pan operation lifecycle
+ * @param value
+ * @param viewerX
+ * @param viewerY
+ * @param panLimit
+ * @return {ReadonlyArray<unknown>}
+ */
 
+
 function updatePanning(value, viewerX, viewerY, panLimit) {
@@ -106,3 +123,9 @@ if (value.mode !== _constants.MODE_PANNING) throw new Error('update pan not allowed in this mode ' + value.mode);
 }
+/**
+ * Stop pan operation lifecycle
+ * @param value
+ * @return {ReadonlyArray<unknown>}
+ */
 
+
 function stopPanning(value) {
@@ -117,3 +140,11 @@ return (0, _common.set)(value, {
 }
+/**
+ * when pointer is on viewer edge -> pan image
+ * @param value
+ * @param viewerX
+ * @param viewerY
+ * @return {ReadonlyArray<any>}
+ */
 
+
 function autoPanIfNeeded(value, viewerX, viewerY) {
@@ -120,0 +151,0 @@ var deltaX = 0;

build-commonjs/features/zoom.js

@@ -28,18 +28,15 @@ "use strict";
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-function lessThanScaleFactorMin(value, scaleFactor) {
-  return value.scaleFactorMin && value.d * scaleFactor <= value.scaleFactorMin;
-}
+function isZoomLevelGoingOutOfBounds(value, scaleFactor) {
+  var _decompose = (0, _common.decompose)(value),
+      curScaleFactor = _decompose.scaleFactor;
 
-function moreThanScaleFactorMax(value, scaleFactor) {
-  return value.scaleFactorMax && value.d * scaleFactor >= value.scaleFactorMax;
+  var lessThanScaleFactorMin = value.scaleFactorMin && curScaleFactor * scaleFactor < value.scaleFactorMin;
+  var moreThanScaleFactorMax = value.scaleFactorMax && curScaleFactor * scaleFactor > value.scaleFactorMax;
+  return lessThanScaleFactorMin && scaleFactor < 1 || moreThanScaleFactorMax && scaleFactor > 1;
 }
 
-function isZoomLevelGoingOutOfBounds(value, scaleFactor) {
-  return lessThanScaleFactorMin(value, scaleFactor) && scaleFactor < 1 || moreThanScaleFactorMax(value, scaleFactor) && scaleFactor > 1;
-}
-
 function limitZoomLevel(value, matrix) {
@@ -73,3 +70,3 @@ var scaleLevel = matrix.a;
     mode: _constants.MODE_IDLE
-  }, limitZoomLevel(value, matrix), {
+  }, matrix, {
     startX: null,
@@ -80,4 +77,7 @@ startY: null,
   }), _constants.ACTION_ZOOM);
-}
+} //ENHANCEMENT: add ability to control alignment
+//ENHANCEMENT: add ability to selectively fit image inside viewer
+//ENHANCEMENT: refactor some logic in order to merge with fitToViewer function
 
+
 function fitSelection(value, selectionSVGPointX, selectionSVGPointY, selectionWidth, selectionHeight) {
@@ -223,11 +223,11 @@ var viewerWidth = value.viewerWidth,
 
-function stopZooming(value, viewerX, viewerY, scaleFactor, props) {
+function stopZooming(value, viewerX, viewerY, scaleFactor) {
+  var TOLERATED_DISTANCE = 7; //minimum distance to choose if area selection or drill down on point
+
   var startX = value.startX,
-      startY = value.startY,
-      endX = value.endX,
-      endY = value.endY;
+      startY = value.startY;
   var start = (0, _common.getSVGPoint)(value, startX, startY);
-  var end = (0, _common.getSVGPoint)(value, endX, endY);
+  var end = (0, _common.getSVGPoint)(value, viewerX, viewerY);
 
-  if (Math.abs(startX - endX) > 7 && Math.abs(startY - endY) > 7) {
+  if (Math.abs(startX - viewerX) > TOLERATED_DISTANCE && Math.abs(startY - viewerY) > TOLERATED_DISTANCE) {
     var box = (0, _calculateBox.default)(start, end);
@@ -237,4 +237,4 @@ return fitSelection(value, box.x, box.y, box.width, box.height);
     var SVGPoint = (0, _common.getSVGPoint)(value, viewerX, viewerY);
-    return zoom(value, SVGPoint.x, SVGPoint.y, scaleFactor, props);
+    return zoom(value, SVGPoint.x, SVGPoint.y, scaleFactor);
   }
 }

build-commonjs/viewer.js

@@ -54,3 +54,3 @@ "use strict";
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
@@ -57,0 +57,0 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

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

@@ -5,3 +5,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); }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
@@ -8,0 +8,0 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

build-es/features/common.js

@@ -5,3 +5,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); }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
@@ -11,3 +11,5 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 import { MODE_IDLE } from '../constants';
-import { identity, fromObject, inverse, applyToPoint, transform, translate, scale } from 'transformation-matrix';
+import { applyToPoint, fromObject, identity, inverse, scale, transform, translate } from 'transformation-matrix';
+var VERSION = 3;
+export var DEFAULT_MODE = MODE_IDLE;
 /**
@@ -18,6 +20,8 @@ * Obtain default value
 
-export function getDefaultValue(viewerWidth, viewerHeight, SVGMinX, SVGMinY, SVGWidth, SVGHeight, scaleFactorMin, scaleFactorMax) {
+export function getDefaultValue(viewerWidth, viewerHeight, SVGMinX, SVGMinY, SVGWidth, SVGHeight) {
+  var scaleFactorMin = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : null;
+  var scaleFactorMax = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : null;
   return set({}, _objectSpread({}, identity(), {
-    version: 2,
-    mode: MODE_IDLE,
+    version: VERSION,
+    mode: DEFAULT_MODE,
     focus: false,
@@ -45,3 +49,3 @@ pinchPointDistance: null,
  * @param value
- * @param change
+ * @param patch
  * @param action
@@ -51,5 +55,5 @@ * @returns {Object}
 
-export function set(value, change) {
+export function set(value, patch) {
   var action = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-  value = Object.assign({}, value, change, {
+  value = Object.assign({}, value, patch, {
     lastAction: action
@@ -65,3 +69,3 @@ });
 export function isValueValid(value) {
-  return value !== null && _typeof(value) === 'object' && value.hasOwnProperty('version');
+  return value !== null && _typeof(value) === 'object' && value.hasOwnProperty('version') && value.version === VERSION;
 }
@@ -149,2 +153,3 @@ /**
  */
+//TODO rename to setZoomLimits
 
@@ -197,3 +202,3 @@ export function setZoomLevels(value, scaleFactorMin, scaleFactorMax) {
   return set(value, {
-    mode: MODE_IDLE,
+    mode: DEFAULT_MODE,
     startX: null,
@@ -200,0 +205,0 @@ startY: null,

build-es/features/interactions-touch.js

 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 _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
@@ -5,0 +5,0 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

build-es/features/pan.js

 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 _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
@@ -19,7 +19,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 /**
- *
+ * Atomic pan operation
  * @param value
- * @param SVGDeltaX
- * @param SVGDeltaY
- * @param panLimit
+ * @param SVGDeltaX drag movement
+ * @param SVGDeltaY drag movement
+ * @param panLimit forces the image to keep at least x pixel inside the viewer
  * @returns {Object}
@@ -64,2 +64,10 @@ */
 }
+/**
+ * Start pan operation lifecycle
+ * @param value
+ * @param viewerX
+ * @param viewerY
+ * @return {ReadonlyArray<unknown>}
+ */
+
 export function startPanning(value, viewerX, viewerY) {
@@ -74,2 +82,11 @@ return set(value, {
 }
+/**
+ * Continue pan operation lifecycle
+ * @param value
+ * @param viewerX
+ * @param viewerY
+ * @param panLimit
+ * @return {ReadonlyArray<unknown>}
+ */
+
 export function updatePanning(value, viewerX, viewerY, panLimit) {
@@ -90,2 +107,8 @@ if (value.mode !== MODE_PANNING) throw new Error('update pan not allowed in this mode ' + value.mode);
 }
+/**
+ * Stop pan operation lifecycle
+ * @param value
+ * @return {ReadonlyArray<unknown>}
+ */
+
 export function stopPanning(value) {
@@ -100,2 +123,10 @@ return set(value, {
 }
+/**
+ * when pointer is on viewer edge -> pan image
+ * @param value
+ * @param viewerX
+ * @param viewerY
+ * @return {ReadonlyArray<any>}
+ */
+
 export function autoPanIfNeeded(value, viewerX, viewerY) {
@@ -102,0 +133,0 @@ var deltaX = 0;

build-es/features/zoom.js

 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 _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-import { transform, fromObject, translate, scale } from 'transformation-matrix';
+import { fromObject, scale, transform, translate } from 'transformation-matrix';
 import { ACTION_ZOOM, MODE_IDLE, MODE_ZOOMING, ALIGN_CENTER, ALIGN_LEFT, ALIGN_RIGHT, ALIGN_TOP, ALIGN_BOTTOM } from '../constants';
-import { set, getSVGPoint } from './common';
+import { decompose, getSVGPoint, set } from './common';
 import calculateBox from '../utils/calculateBox';
+export function isZoomLevelGoingOutOfBounds(value, scaleFactor) {
+  var _decompose = decompose(value),
+      curScaleFactor = _decompose.scaleFactor;
 
-function lessThanScaleFactorMin(value, scaleFactor) {
-  return value.scaleFactorMin && value.d * scaleFactor <= value.scaleFactorMin;
+  var lessThanScaleFactorMin = value.scaleFactorMin && curScaleFactor * scaleFactor < value.scaleFactorMin;
+  var moreThanScaleFactorMax = value.scaleFactorMax && curScaleFactor * scaleFactor > value.scaleFactorMax;
+  return lessThanScaleFactorMin && scaleFactor < 1 || moreThanScaleFactorMax && scaleFactor > 1;
 }
-
-function moreThanScaleFactorMax(value, scaleFactor) {
-  return value.scaleFactorMax && value.d * scaleFactor >= value.scaleFactorMax;
-}
-
-export function isZoomLevelGoingOutOfBounds(value, scaleFactor) {
-  return lessThanScaleFactorMin(value, scaleFactor) && scaleFactor < 1 || moreThanScaleFactorMax(value, scaleFactor) && scaleFactor > 1;
-}
 export function limitZoomLevel(value, matrix) {
@@ -50,3 +46,3 @@ var scaleLevel = matrix.a;
     mode: MODE_IDLE
-  }, limitZoomLevel(value, matrix), {
+  }, matrix, {
     startX: null,
@@ -57,3 +53,6 @@ startY: null,
   }), ACTION_ZOOM);
-}
+} //ENHANCEMENT: add ability to control alignment
+//ENHANCEMENT: add ability to selectively fit image inside viewer
+//ENHANCEMENT: refactor some logic in order to merge with fitToViewer function
+
 export function fitSelection(value, selectionSVGPointX, selectionSVGPointY, selectionWidth, selectionHeight) {
@@ -194,11 +193,11 @@ var viewerWidth = value.viewerWidth,
 }
-export function stopZooming(value, viewerX, viewerY, scaleFactor, props) {
+export function stopZooming(value, viewerX, viewerY, scaleFactor) {
+  var TOLERATED_DISTANCE = 7; //minimum distance to choose if area selection or drill down on point
+
   var startX = value.startX,
-      startY = value.startY,
-      endX = value.endX,
-      endY = value.endY;
+      startY = value.startY;
   var start = getSVGPoint(value, startX, startY);
-  var end = getSVGPoint(value, endX, endY);
+  var end = getSVGPoint(value, viewerX, viewerY);
 
-  if (Math.abs(startX - endX) > 7 && Math.abs(startY - endY) > 7) {
+  if (Math.abs(startX - viewerX) > TOLERATED_DISTANCE && Math.abs(startY - viewerY) > TOLERATED_DISTANCE) {
     var box = calculateBox(start, end);
@@ -208,4 +207,4 @@ return fitSelection(value, box.x, box.y, box.width, box.height);
     var SVGPoint = getSVGPoint(value, viewerX, viewerY);
-    return zoom(value, SVGPoint.x, SVGPoint.y, scaleFactor, props);
+    return zoom(value, SVGPoint.x, SVGPoint.y, scaleFactor);
   }
 }

build-es/viewer.js

@@ -7,3 +7,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); }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
@@ -10,0 +10,0 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

build-storybook/asset-manifest.json

 {
   "files": {
-    "main.js": "/react-svg-pan-zoom/main.43f395afb99f8c9f925d.bundle.js",
-    "main.js.map": "/react-svg-pan-zoom/main.43f395afb99f8c9f925d.bundle.js.map",
-    "runtime~main.js": "/react-svg-pan-zoom/runtime~main.43f395afb99f8c9f925d.bundle.js",
-    "runtime~main.js.map": "/react-svg-pan-zoom/runtime~main.43f395afb99f8c9f925d.bundle.js.map",
-    "vendors~main.js": "/react-svg-pan-zoom/vendors~main.43f395afb99f8c9f925d.bundle.js",
-    "vendors~main.js.map": "/react-svg-pan-zoom/vendors~main.43f395afb99f8c9f925d.bundle.js.map",
+    "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",
     "iframe.html": "/react-svg-pan-zoom/iframe.html",
-    "precache-manifest.da4e1070711086770d4577b9785a5264.js": "/react-svg-pan-zoom/precache-manifest.da4e1070711086770d4577b9785a5264.js",
+    "precache-manifest.e93efbc97b8396fd5838d79b089e69b5.js": "/react-svg-pan-zoom/precache-manifest.e93efbc97b8396fd5838d79b089e69b5.js",
     "service-worker.js": "/react-svg-pan-zoom/service-worker.js"
   },
   "entrypoints": [
-    "runtime~main.43f395afb99f8c9f925d.bundle.js",
-    "vendors~main.43f395afb99f8c9f925d.bundle.js",
-    "main.43f395afb99f8c9f925d.bundle.js"
+    "runtime~main.229f856c61eec041660c.bundle.js",
+    "vendors~main.229f856c61eec041660c.bundle.js",
+    "main.229f856c61eec041660c.bundle.js"
   ]
 }

build-storybook/service-worker.js

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

package.json

 {
   "author": "chrvadala",
   "name": "react-svg-pan-zoom",
-  "version": "3.5.0",
+  "version": "3.6.0",
   "description": "A React component that adds pan and zoom features to SVG",
@@ -22,3 +22,7 @@ "main": "./build-commonjs/index.js",
     "version": "yarn build",
-    "postpublish": "yarn storybook:publish"
+    "postpublish": "yarn storybook:publish",
+    "test": "jest",
+    "coverage": "jest --coverage",
+    "coverage:publish": "jest --coverage --coverageReporters=text-lcov | coveralls",
+    "test:ci": "npm-run-all test build coverage:publish"
   },
@@ -57,5 +61,5 @@ "files": [
   "devDependencies": {
-    "@babel/cli": "^7.6.4",
-    "@babel/core": "^7.6.4",
-    "@babel/runtime": "^7.6.3",
+    "@babel/cli": "^7.7.4",
+    "@babel/core": "^7.7.4",
+    "@babel/runtime": "^7.7.4",
     "@storybook/addon-actions": "5.2.6",
@@ -67,6 +71,9 @@ "@storybook/addon-knobs": "5.2.6",
     "@storybook/theming": "^5.2.4",
+    "@types/jest": "^24.0.23",
     "babel-loader": "^8.0.6",
+    "coveralls": "^3.0.8",
     "cross-env": "^6.0.3",
     "del-cli": "^3.0.0",
     "gh-pages": "^2.1.1",
+    "jest": "^24.9.0",
     "npm-run-all": "^4.1.3",
@@ -73,0 +80,0 @@ "react": "^16.10.2",

README.md

@@ -82,2 +82,3 @@ # react-svg-pan-zoom
 - **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
 
@@ -84,0 +85,0 @@ ## Some projects using react-svg-pan-zoom

src/features/common.js

 import {MODE_IDLE} from '../constants';
-import {
-  identity,
-  fromObject,
-  inverse,
-  applyToPoint,
-  transform,
-  translate,
-  scale
-} from 'transformation-matrix';
+import {applyToPoint, fromObject, identity, inverse, scale, transform, translate} from 'transformation-matrix';
 
+const VERSION = 3
+export const DEFAULT_MODE = MODE_IDLE
+
 /**
@@ -16,7 +11,7 @@ * Obtain default value
  */
-export function getDefaultValue(viewerWidth, viewerHeight, SVGMinX, SVGMinY, SVGWidth, SVGHeight, scaleFactorMin, scaleFactorMax) {
+export function getDefaultValue(viewerWidth, viewerHeight, SVGMinX, SVGMinY, SVGWidth, SVGHeight, scaleFactorMin = null, scaleFactorMax = null) {
   return set({}, {
     ...identity(),
-    version: 2,
-    mode: MODE_IDLE,
+    version: VERSION,
+    mode: DEFAULT_MODE,
     focus: false,
@@ -45,8 +40,8 @@ pinchPointDistance: null,
  * @param value
- * @param change
+ * @param patch
  * @param action
  * @returns {Object}
  */
-export function set(value, change, action = null) {
-  value = Object.assign({}, value, change, {lastAction: action});
+export function set(value, patch, action = null) {
+  value = Object.assign({}, value, patch, {lastAction: action});
   return Object.freeze(value);
@@ -62,3 +57,4 @@ }
     && typeof value === 'object'
-    && value.hasOwnProperty('version');
+    && value.hasOwnProperty('version')
+    && value.version === VERSION;
 }
@@ -137,2 +133,3 @@
  */
+//TODO rename to setZoomLimits
 export function setZoomLevels(value, scaleFactorMin, scaleFactorMax) {
@@ -185,3 +182,3 @@ return set(value, {scaleFactorMin, scaleFactorMax});
   return set(value, {
-    mode: MODE_IDLE,
+    mode: DEFAULT_MODE,
     startX: null,
@@ -188,0 +185,0 @@ startY: null,

src/features/pan.js

@@ -6,7 +6,7 @@ import {ACTION_PAN, MODE_IDLE, MODE_PANNING} from '../constants';
 /**
- *
+ * Atomic pan operation
  * @param value
- * @param SVGDeltaX
- * @param SVGDeltaY
- * @param panLimit
+ * @param SVGDeltaX drag movement
+ * @param SVGDeltaY drag movement
+ * @param panLimit forces the image to keep at least x pixel inside the viewer
  * @returns {Object}
@@ -54,2 +54,9 @@ */
 
+/**
+ * Start pan operation lifecycle
+ * @param value
+ * @param viewerX
+ * @param viewerY
+ * @return {ReadonlyArray<unknown>}
+ */
 export function startPanning(value, viewerX, viewerY) {
@@ -65,2 +72,10 @@ return set(value, {
 
+/**
+ * Continue pan operation lifecycle
+ * @param value
+ * @param viewerX
+ * @param viewerY
+ * @param panLimit
+ * @return {ReadonlyArray<unknown>}
+ */
 export function updatePanning(value, viewerX, viewerY, panLimit) {
@@ -85,2 +100,7 @@ if (value.mode !== MODE_PANNING) throw new Error('update pan not allowed in this mode ' + value.mode);
 
+/**
+ * Stop pan operation lifecycle
+ * @param value
+ * @return {ReadonlyArray<unknown>}
+ */
 export function stopPanning(value) {
@@ -97,2 +117,9 @@ return set(value, {
 
+/**
+ * when pointer is on viewer edge -> pan image
+ * @param value
+ * @param viewerX
+ * @param viewerY
+ * @return {ReadonlyArray<any>}
+ */
 export function autoPanIfNeeded(value, viewerX, viewerY) {
@@ -99,0 +126,0 @@ let deltaX = 0;

src/features/zoom.js

@@ -1,2 +0,2 @@
-import {transform, fromObject, translate, scale} from 'transformation-matrix';
+import {fromObject, scale, transform, translate} from 'transformation-matrix';
 
@@ -7,17 +7,13 @@ import {
 } from '../constants';
-import {set, getSVGPoint} from './common';
+import {decompose, getSVGPoint, set} from './common';
 import calculateBox from '../utils/calculateBox';
 
-function lessThanScaleFactorMin (value, scaleFactor) {
-  return value.scaleFactorMin && (value.d * (scaleFactor)) <= value.scaleFactorMin;
-}
+export function isZoomLevelGoingOutOfBounds(value, scaleFactor) {
+  const {scaleFactor: curScaleFactor} = decompose(value)
+  const lessThanScaleFactorMin = value.scaleFactorMin && (curScaleFactor * scaleFactor) < value.scaleFactorMin;
+  const moreThanScaleFactorMax = value.scaleFactorMax && (curScaleFactor * scaleFactor) > value.scaleFactorMax;
 
-function moreThanScaleFactorMax (value, scaleFactor) {
-  return value.scaleFactorMax && (value.d * scaleFactor) >= value.scaleFactorMax;
+  return (lessThanScaleFactorMin && scaleFactor < 1) || (moreThanScaleFactorMax && scaleFactor > 1);
 }
 
-export function isZoomLevelGoingOutOfBounds(value, scaleFactor) {
-  return (lessThanScaleFactorMin(value, scaleFactor) && scaleFactor < 1) || (moreThanScaleFactorMax(value, scaleFactor) && scaleFactor > 1);
-}
-
 export function limitZoomLevel(value, matrix) {
@@ -57,3 +53,3 @@ let scaleLevel = matrix.a;
     mode: MODE_IDLE,
-    ...limitZoomLevel(value, matrix),
+    ...matrix,
     startX: null,
@@ -66,2 +62,5 @@ startY: null,
 
+//ENHANCEMENT: add ability to control alignment
+//ENHANCEMENT: add ability to selectively fit image inside viewer
+//ENHANCEMENT: refactor some logic in order to merge with fitToViewer function
 export function fitSelection(value, selectionSVGPointX, selectionSVGPointY, selectionWidth, selectionHeight) {
@@ -206,9 +205,10 @@ let {viewerWidth, viewerHeight} = value;
 
-export function stopZooming(value, viewerX, viewerY, scaleFactor, props) {
-  let {startX, startY, endX, endY} = value;
+export function stopZooming(value, viewerX, viewerY, scaleFactor) {
+  const TOLERATED_DISTANCE = 7 //minimum distance to choose if area selection or drill down on point
+  let {startX, startY} = value;
 
   let start = getSVGPoint(value, startX, startY);
-  let end = getSVGPoint(value, endX, endY);
+  let end = getSVGPoint(value, viewerX, viewerY);
 
-  if (Math.abs(startX - endX) > 7 && Math.abs(startY - endY) > 7) {
+  if (Math.abs(startX - viewerX) > TOLERATED_DISTANCE && Math.abs(startY - viewerY) > TOLERATED_DISTANCE) {
     let box = calculateBox(start, end);
@@ -218,4 +218,4 @@ return fitSelection(value, box.x, box.y, box.width, box.height);
     let SVGPoint = getSVGPoint(value, viewerX, viewerY);
-    return zoom(value, SVGPoint.x, SVGPoint.y, scaleFactor, props);
+    return zoom(value, SVGPoint.x, SVGPoint.y, scaleFactor);
   }
 }

No alert changes

Improved metrics

Total package byte prevSize

5253225

increased by0.12%

Lines of code

24413

increased by0.49%

Number of lines in readme file

108

increased by0.93%

Worsened metrics

Dev dependency count

24

increased by14.29%

No dependency changes