Comparing version 1.2.4 to 1.3.1
46
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 @@ |
@@ -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 | ||
} |
@@ -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 | ||
} |
@@ -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 | ||
} |
{ | ||
"name": "panzoom", | ||
"version": "1.2.4", | ||
"version": "1.3.1", | ||
"description": "Pan and zoom SVG elements", | ||
@@ -5,0 +5,0 @@ "main": "index.js", |
@@ -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 @@ |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
122653
1220