panzoom - npm Package Compare versions

Comparing version 1.2.4 to 1.3.1

index.js

@@ -32,2 +32,3 @@ /* globals SVGElement */
 
+  owner.setAttribute('tabindex', 1); // TODO: not sure if this is really polite
   options = options || {}
@@ -84,4 +85,3 @@
     if (!smooth) {
-      moveBy(svgElement, dx, dy)
-      return
+      return moveBy(svgElement, dx, dy)
     }
@@ -113,2 +113,3 @@
     owner.removeEventListener('mousedown', onMouseDown)
+    owner.removeEventListener('keydown', onKeyDown)
 
@@ -126,5 +127,40 @@ smoothScroll.cancel()
     owner.addEventListener('touchstart', onTouch)
+    owner.addEventListener('keydown', onKeyDown)
     wheel.addWheelListener(owner, onMouseWheel)
   }
 
+  function onKeyDown(e) {
+    var x = 0, y = 0, z = 0
+    if (e.keyCode === 38) {
+      y = 1 // up
+    } else if (e.keyCode === 40) {
+      y = -1 // down
+    } else if (e.keyCode === 37) {
+      x = 1 // left
+    } else if (e.keyCode === 39) {
+      x = -1 // right
+    } else if (e.keyCode === 189 || e.keyCode === 109) { // DASH or SUBTRACT
+      z = 1 // `-` -  zoom out
+    } else if (e.keyCode === 187 || e.keyCode === 107) { // EQUAL SIGN or ADD
+      z = -1 // `=` - zoom in (equal sign on US layout is under `+`)
+    }
+
+    if (x || y) {
+      e.preventDefault()
+      e.stopPropagation()
+
+      var clientRect = owner.getBoundingClientRect()
+      var offset = Math.min(clientRect.width, clientRect.height)
+      // make it uniform
+      var dx = offset * 0.05 * x
+      var dy = offset * 0.05 * y
+      internalMoveBy(dx, dy)
+    }
+
+    if (z) {
+      var scaleMultiplier = getScaleMultiplier(z)
+      zoomTo(svgElement, owner.clientWidth/2, owner.clientHeight/2, scaleMultiplier)
+    }
+  }
+
   function onTouch(e) {
@@ -165,3 +201,2 @@ if (e.touches.length === 1) {
   function handleTouchMove(e) {
-    triggerPanStart()
 
@@ -175,2 +210,5 @@ if (e.touches.length === 1) {
 
+      if (dx !== 0 && dy !== 0) {
+        triggerPanStart()
+      }
       mouseX = touch.clientX
@@ -304,3 +342,3 @@ mouseY = touch.clientY
   function publicZoomTo(clientX, clientY, scaleMultiplier) {
-      zoomTo(svgElement, clientX, clientY, scaleMultiplier)
+      return zoomTo(svgElement, clientX, clientY, scaleMultiplier)
   }
@@ -307,0 +345,0 @@

lib/moveBy.js

@@ -10,14 +10,17 @@ /**
   var transform = getTransform(svgElement)
+  var tranformMatrix = [
+    transform.matrix.a,
+    transform.matrix.b,
+    transform.matrix.c,
+    transform.matrix.d,
+    transform.matrix.e + dx,
+    transform.matrix.f + dy
+  ]
 
   svgElement.setAttribute(
     'transform', 'matrix(' +
-      [
-        transform.matrix.a,
-        transform.matrix.b,
-        transform.matrix.c,
-        transform.matrix.d,
-        transform.matrix.e + dx,
-        transform.matrix.f + dy
-      ].join(' ') + ')'
+      tranformMatrix.join(' ') + ')'
   )
+
+  return tranformMatrix
 }

lib/moveTo.js

@@ -10,14 +10,14 @@ /**
   var transform = getTransform(svgElement)
+  var tranformMatrix = [
+    transform.matrix.a,
+    transform.matrix.b,
+    transform.matrix.c,
+    transform.matrix.d,
+    x,
+    y
+  ]
 
-  svgElement.setAttribute(
-    'transform', 'matrix(' +
-      [
-        transform.matrix.a,
-        transform.matrix.b,
-        transform.matrix.c,
-        transform.matrix.d,
-        x,
-        y
-      ].join(' ') + ')'
-  )
+  svgElement.setAttribute( 'transform', 'matrix(' + tranformMatrix.join(' ') + ')')
+
+  return tranformMatrix
 }

lib/zoomTo.js

@@ -19,13 +19,16 @@ var getTransform = require('./getTransform.js')
 
-  svgElement.setAttribute(
-    'transform', 'matrix(' +
-      [
-        scale,
-        transform.matrix.b,
-        transform.matrix.c,
-        scale,
-        x - scaleMultiplier * (x - transform.matrix.e),
-        y - scaleMultiplier * (y - transform.matrix.f)
-      ].join(' ') + ')'
-  )
+  var e = x - scaleMultiplier * (x - transform.matrix.e)
+  var f = y - scaleMultiplier * (y - transform.matrix.f)
+  var transform = [
+      scale,
+      transform.matrix.b,
+      transform.matrix.c,
+      scale,
+      e,
+      f
+    ]
+
+  svgElement.setAttribute('transform', 'matrix(' + transform.join(' ') + ')')
+
+  return transform
 }

package.json

 {
   "name": "panzoom",
-  "version": "1.2.4",
+  "version": "1.3.1",
   "description": "Pan and zoom SVG elements",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -22,3 +22,3 @@ # panzoom
 ```
-https://cdn.rawgit.com/anvaka/panzoom/v1.2.1/dist/panzoom.min.js
+https://cdn.rawgit.com/anvaka/panzoom/v1.3.1/dist/panzoom.min.js
 ```
@@ -25,0 +25,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

122653

increased by1.1%

Lines of code

1220

increased by3.04%

No dependency changes