panzoom - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

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 @@

lib/moveBy.js

		/**
		* 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')

package.json

		{
		"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"
		}
		}

README.md

		@@ -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

New alerts