Add more customization for auto pan

docs/documentation.md

@@ -48,6 +48,12 @@
 | toolbarProps.SVGAlignX | `left` | one of `left`, `center`, `right` | X Alignment used for "Fit to Viewer" action |
 | toolbarProps.SVGAlignY | `top` | one of `top`, `center`, `bottom` | Y Alignment used for "Fit to Viewer" action |
 | toolbarProps.activeToolColor | `#1CA6FC` | String | Color of active and hovered tool icons |
+| autoPanProps | {} | Object | Auto pan settings |
+| autoPanProps.length | `20` | Number | Length of the auto pan area on each side |
+| autoPanProps.width | - | Number | Length of the auto pan area on the left and right, overrides `length` |
+| autoPanProps.height | - | Number | Length of the auto pan area on the top and bottom, overrides `length` |
+| autoPanProps.delta | `2` | Number | Amount of pixel to shift when auto panning |
+| autoPanProps.easing | - | `fn(t: Number): Number` | Easing function which must return the amount of pixel to shift given t [0, 1], 0 being the start of the panning area, 1 being the edge of the viewer |
 
 \* handler available only with the tool `none` or `auto`
 
@@ -139,6 +145,7 @@ import {
 
   ACTION_ZOOM,
   ACTION_PAN,
+  ACTION_AUTO_PAN,
 
   ALIGN_CENTER,
   ALIGN_LEFT,
@@ -150,5 +157,3 @@ import {
   INITIAL_VALUE
 } from 'react-svg-pan-zoom'
 ```
-
-

package.json

@@ -8,6 +8,7 @@
   "unpkg": "./build-umd/react-svg-pan-zoom.min.js",
   "jsnext:main": "./build-es/index.js",
   "scripts": {
+    "prepare": "run-p clean library:build:commonjs library:build:es",
     "start": "run-p storybook:start",
     "build": "run-p clean library:build:commonjs library:build:es library:build:umd library:build:umd_min storybook:build",
     "storybook:start": "start-storybook -p 9001 -s storybook/public -c storybook",

src/constants.js

@@ -16,6 +16,7 @@ export const POSITION_LEFT = 'left';
 
 export const ACTION_ZOOM = 'zoom';
 export const ACTION_PAN = 'pan';
+export const ACTION_AUTO_PAN = 'auto_pan';
 
 export const ALIGN_CENTER = 'center';
 export const ALIGN_LEFT = 'left';

src/features/interactions.js

@@ -142,5 +142,5 @@ export function onInterval(event, ViewerDOM, tool, value, props, coords = null)
   if (!props.detectAutoPan) return value;
   if (!value.focus) return value;
 
-  return autoPanIfNeeded(value, x, y);
+  return autoPanIfNeeded(value, x, y, props.autoPanProps);
 }

src/features/pan.js

@@ -1,4 +1,4 @@
-import {ACTION_PAN, MODE_IDLE, MODE_PANNING} from '../constants';
+import {ACTION_PAN, ACTION_AUTO_PAN, MODE_IDLE, MODE_PANNING} from '../constants';
 import {set, getSVGPoint} from './common';
 import {fromObject, translate, transform, applyToPoints} from 'transformation-matrix';
 
@@ -115,19 +115,29 @@ export function stopPanning(value) {
  * @param value
  * @param viewerX
  * @param viewerY
+ * @param props
  * @return {ReadonlyArray<any>}
  */
-export function autoPanIfNeeded(value, viewerX, viewerY) {
+export function autoPanIfNeeded(value, viewerX, viewerY, props) {
   let deltaX = 0;
   let deltaY = 0;
 
-  if (viewerY <= 20) deltaY = 2;
-  if (value.viewerWidth - viewerX <= 20) deltaX = -2;
-  if (value.viewerHeight - viewerY <= 20) deltaY = -2;
-  if (viewerX <= 20) deltaX = 2;
+  const panWidth = props.width || props.length || 20;
+  const panHeight = props.height || props.length || 20;
+
+  const delta = props.delta || 2;
+
+  if (viewerY <= panHeight)
+    deltaY = props.easing ? props.easing(1 - viewerY / panHeight) : delta;
+  if (value.viewerWidth - viewerX <= panWidth)
+    deltaX = props.easing ? -props.easing(1 - (value.viewerWidth - viewerX) / panWidth) : -delta;
+  if (value.viewerHeight - viewerY <= panHeight)
+    deltaY = props.easing ? -props.easing(1 - (value.viewerHeight - viewerY) / panHeight) : -delta;
+  if (viewerX <= panWidth)
+    deltaX = props.easing ? props.easing(1 - viewerX / panWidth) : delta;
 
   deltaX = deltaX / value.d;
   deltaY = deltaY / value.d;
 
-  return (deltaX === 0 && deltaY === 0) ? value : pan(value, deltaX, deltaY);
+  return (deltaX === 0 && deltaY === 0) ? value : set(pan(value, deltaX, deltaY), {}, ACTION_AUTO_PAN);
 }

src/ui/border-gradient.js

@@ -5,7 +5,7 @@ import RandomUID from "../utils/RandomUID";
 
 const prefixID = 'react-svg-pan-zoom_border_gradient'
 
-function BorderGradient({direction, width, height, _uid}) {
+function BorderGradient({direction, width, height, length, _uid}) {
 
   let transform;
 
@@ -39,13 +39,13 @@ function BorderGradient({direction, width, height, _uid}) {
           <stop offset="100%" stopColor="#000" stopOpacity="0.5"/>
         </linearGradient>
 
-        <mask id={maskID} x="0" y="0" width="20" height={Math.max(width, height)}>
-          <rect x="0" y="0" width="20" height={Math.max(width, height)}
+        <mask id={maskID} x="0" y="0" width={length} height={Math.max(width, height)}>
+          <rect x="0" y="0" width={length} height={Math.max(width, height)}
                 style={{stroke: "none", fill: `url(#${gradientID})`}}/>
         </mask>
       </defs>
 
-      <rect x="0" y="0" width="20" height={Math.max(width, height)}
+      <rect x="0" y="0" width={length} height={Math.max(width, height)}
             style={{stroke: "none", fill: "#000", mask: `url(#${maskID})`}} transform={transform}/>
     </g>
   );
@@ -54,7 +54,8 @@ function BorderGradient({direction, width, height, _uid}) {
 BorderGradient.propTypes = {
   direction: PropTypes.oneOf([POSITION_TOP, POSITION_RIGHT, POSITION_BOTTOM, POSITION_LEFT]).isRequired,
   width: PropTypes.number.isRequired,
-  height: PropTypes.number.isRequired
+  height: PropTypes.number.isRequired,
+  length: PropTypes.number.isRequired
 };
 
 export default RandomUID(BorderGradient)

src/viewer.js

@@ -38,6 +38,7 @@ import Miniature from './ui-miniature/miniature'
 
 import {
   ACTION_PAN,
+  ACTION_AUTO_PAN,
   ACTION_ZOOM,
   ALIGN_BOTTOM,
   ALIGN_CENTER,
@@ -171,7 +172,7 @@ export default class ReactSVGPanZoom extends React.Component {
     if (onChangeValue) onChangeValue(nextValue);
     if (nextValue.lastAction) {
       if (onZoom && nextValue.lastAction === ACTION_ZOOM) onZoom(nextValue);
-      if (onPan && nextValue.lastAction === ACTION_PAN) onPan(nextValue);
+      if (onPan && (nextValue.lastAction === ACTION_PAN || nextValue.lastAction === ACTION_AUTO_PAN)) onPan(nextValue);
     }
   }
 
@@ -296,6 +297,9 @@ export default class ReactSVGPanZoom extends React.Component {
 
     const touchAction = (this.props.detectPinchGesture || [TOOL_PAN, TOOL_AUTO].indexOf(this.getTool()) !== -1) ? 'none' : undefined
 
+    const autoPanWidth = this.props.autoPanProps.width || this.props.autoPanProps.length || 20;
+    const autoPanHeight = this.props.autoPanProps.height || this.props.autoPanProps.length || 20;
+
     const style = {display: 'block', cursor, touchAction};
 
     return (
@@ -395,20 +399,20 @@ export default class ReactSVGPanZoom extends React.Component {
 
           {!([TOOL_NONE, TOOL_AUTO].indexOf(tool) >= 0 && props.detectAutoPan && value.focus) ? null : (
             <g style={{pointerEvents: "none"}}>
-              {!(pointerY <= 20) ? null :
-                <BorderGradient direction={POSITION_TOP} width={value.viewerWidth} height={value.viewerHeight}/>
+              {!(pointerY <= autoPanHeight) ? null :
+                <BorderGradient direction={POSITION_TOP} width={value.viewerWidth} height={value.viewerHeight} length={autoPanHeight}/>
               }
 
-              {!(value.viewerWidth - pointerX <= 20) ? null :
-                <BorderGradient direction={POSITION_RIGHT} width={value.viewerWidth} height={value.viewerHeight}/>
+              {!(value.viewerWidth - pointerX <= autoPanWidth) ? null :
+                <BorderGradient direction={POSITION_RIGHT} width={value.viewerWidth} height={value.viewerHeight} length={autoPanWidth}/>
               }
 
-              {!(value.viewerHeight - pointerY <= 20) ? null :
-                <BorderGradient direction={POSITION_BOTTOM} width={value.viewerWidth} height={value.viewerHeight}/>
+              {!(value.viewerHeight - pointerY <= autoPanHeight) ? null :
+                <BorderGradient direction={POSITION_BOTTOM} width={value.viewerWidth} height={value.viewerHeight} length={autoPanHeight}/>
               }
 
-              {!(value.focus && pointerX <= 20) ? null :
-                <BorderGradient direction={POSITION_LEFT} width={value.viewerWidth} height={value.viewerHeight}/>
+              {!(value.focus && pointerX <= autoPanWidth) ? null :
+                <BorderGradient direction={POSITION_LEFT} width={value.viewerWidth} height={value.viewerHeight} length={autoPanWidth}/>
               }
             </g>
           )}
@@ -600,6 +604,19 @@ ReactSVGPanZoom.propTypes = {
     activeToolColor: PropTypes.string,
   }),
 
+  /**************************************************************************/
+  /* Auto pan configurations                                                */
+  /**************************************************************************/
+
+  //auto pan props
+  autoPanProps: PropTypes.shape({
+    width: PropTypes.number,
+    height: PropTypes.number,
+    length: PropTypes.number,
+    delta: PropTypes.number,
+    easing: PropTypes.func,
+  }),
+
   /**************************************************************************/
   /* Children Check                                                         */
   /**************************************************************************/
@@ -646,4 +663,5 @@ ReactSVGPanZoom.defaultProps = {
   toolbarProps: {},
   customMiniature: Miniature,
   miniatureProps: {},
+  autoPanProps: {},
 };

storybook/stories/ViewerStory.jsx

@@ -155,6 +155,13 @@ export default class MainStory extends Component {
 
             height: number('miniatureProps.height', 80),
           }}
+
+          autoPanProps={{
+            length: number('autoPanProps.length', 20),
+            width: number('autoPanProps.width', 20),
+            height: number('autoPanProps.height', 20),
+            delta: number('autoPanProps.delta', 2),
+          }}
         >
 
           <svg width={1440} height={1440}>

test/features/pan.spec.js

@@ -66,12 +66,34 @@ test("auto pan", () => {
     0, 0, 400, 400, //svg 400x400
   )
 
-  const value1 = autoPanIfNeeded(value, 100, 100) //because far from viewer edge -> no pan operation
+  const value1 = autoPanIfNeeded(value, 100, 100, {}) //because far from viewer edge -> no pan operation
   expect(value1).toBe(value)
 
-  const value2 = autoPanIfNeeded(value, 190, 190)
+  const value2 = autoPanIfNeeded(value, 190, 190, {})
   expect(testSVGBBox(value2)).toEqual([-2, -2, expect.any(Number), expect.any(Number)])
 
-  const value3 = autoPanIfNeeded(value, 10, 10)
+  const value3 = autoPanIfNeeded(value, 10, 10, {})
   expect(testSVGBBox(value3)).toEqual([2, 2, expect.any(Number), expect.any(Number)])
+
+  // autoPan.delta
+  const value4 = autoPanIfNeeded(value, 10, 10, {delta: 3})
+  expect(testSVGBBox(value4)).toEqual([3, 3, expect.any(Number), expect.any(Number)])
+
+  // autoPan.easing
+  const value5 = autoPanIfNeeded(value, 10, 10, {easing: (t) => {
+    return 3 * t * t + 2;
+  }})
+  expect(testSVGBBox(value5)).toEqual([2.75, 2.75, expect.any(Number), expect.any(Number)])
+
+  // autoPan.length
+  const value6 = autoPanIfNeeded(value, 10, 10, {length: 5})
+  expect(value6).toBe(value)
+
+  // autoPan.width
+  const value7 = autoPanIfNeeded(value, 10, 10, {width: 5})
+  expect(testSVGBBox(value7)).toEqual([0, 2, expect.any(Number), expect.any(Number)])
+
+  // autoPan.height
+  const value8 = autoPanIfNeeded(value, 10, 10, {height: 5})
+  expect(testSVGBBox(value8)).toEqual([2, 0, expect.any(Number), expect.any(Number)])
 })