Comparing version 1.0.0 to 1.0.1
48
index.js
@@ -6,2 +6,3 @@ /* globals SVGElement */ | ||
var wheel = require('wheel') | ||
var animate = require('amator'); | ||
var zoomTo = require('./lib/zoomTo.js') | ||
@@ -48,2 +49,3 @@ var kinetic = require('./lib/kinetic.js') | ||
var smoothScroll = kinetic(svgElement, scroll) | ||
var previousAnimation | ||
@@ -53,5 +55,45 @@ listenForEvents() | ||
return { | ||
dispose: dispose | ||
dispose: dispose, | ||
moveBy: internalMoveBy, | ||
centerOn: centerOn | ||
} | ||
function centerOn(ui) { | ||
var parent = ui.ownerSVGElement | ||
if (!parent) throw new Error('ui element is required to be within the scene') | ||
var clientRect = ui.getBoundingClientRect() | ||
var cx = clientRect.left + clientRect.width/2 | ||
var cy = clientRect.top + clientRect.height/2 | ||
var container = parent.getBoundingClientRect() | ||
var dx = container.width/2 - cx | ||
var dy = container.height/2 - cy | ||
internalMoveBy(dx, dy, true) | ||
} | ||
function internalMoveBy(dx, dy, smooth) { | ||
if (!smooth) { | ||
moveBy(svgElement, dx, dy) | ||
return | ||
} | ||
if (previousAnimation) previousAnimation.cancel() | ||
var from = { x: 0, y: 0 } | ||
var to = { x: dx, y : dy } | ||
var lastX = 0 | ||
var lastY = 0 | ||
previousAnimation = animate(from, to, { | ||
step: function(v) { | ||
moveBy(svgElement, v.x - lastX, v.y - lastY) | ||
lastX = v.x | ||
lastY = v.y | ||
} | ||
}) | ||
} | ||
function scroll(x, y) { | ||
@@ -119,3 +161,3 @@ moveTo(svgElement, x, y) | ||
mouseY = touch.clientY | ||
moveBy(svgElement, dx, dy) | ||
internalMoveBy(dx, dy) | ||
} else if (e.touches.length === 2) { | ||
@@ -205,3 +247,3 @@ // it's a zoom, let's find direction | ||
mouseY = e.clientY | ||
moveBy(svgElement, dx, dy) | ||
internalMoveBy(dx, dy) | ||
} | ||
@@ -208,0 +250,0 @@ |
/** | ||
* Moves element by x,y offset without affecting its scale | ||
* Moves element by dx,dy offset without affecting its scale | ||
*/ | ||
@@ -4,0 +4,0 @@ var getTransform = require('./getTransform.js') |
{ | ||
"name": "panzoom", | ||
"version": "1.0.0", | ||
"version": "1.0.1", | ||
"description": "Pan and zoom SVG elements", | ||
@@ -22,4 +22,5 @@ "main": "index.js", | ||
"dependencies": { | ||
"amator": "^1.0.0", | ||
"wheel": "0.0.4" | ||
} | ||
} |
@@ -9,2 +9,3 @@ # panzoom | ||
* [YASIV](http://www.yasiv.com/#/Search?q=algorithms&category=Books&lang=US) - my hobby project | ||
* [SVG Tiger](https://jsfiddle.net/uwxcmbyg/) - js fiddle | ||
@@ -49,8 +50,36 @@ # Usage | ||
panzoom(scene) | ||
``` | ||
// You can visit https://jsfiddle.net/djL2fazo/ to see this demo in action | ||
If your use case requires dynamic behavior (i.e. you want to make a scene not | ||
draggable anymore, or even completely delete an SVG element) make sure to call | ||
`dispose()` method: | ||
``` js | ||
var instance = panzoom(scene) | ||
// do work | ||
// ... | ||
// then at some point you decide you don't need this anymore: | ||
instance.dispose() | ||
``` | ||
This will make sure that all event handlers are cleared and you are not leaking | ||
memory | ||
When user starts/ends dragging the scene, the scene will fire `panstart`/`panend` | ||
events. By default they will bubble up, so you can catch them any time you want: | ||
``` | ||
document.body.addEventListener('panstart', function(e) { | ||
console.log('pan start', e); | ||
}, true); | ||
document.body.addEventListener('panend', function(e) { | ||
console.log('pan end', e); | ||
}, true); | ||
``` | ||
See [JSFiddle](https://jsfiddle.net/uwxcmbyg/1/) console for a demo. | ||
# license | ||
MIT |
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
105985
980
84
2
+ Addedamator@^1.0.0
+ Addedamator@1.1.0(transitive)
+ Addedbezier-easing@2.1.0(transitive)