Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Minor fixes #15

Closed
wants to merge 10 commits into from
Closed

Minor fixes #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
82129fe
Fix Typo in index.js
odai-alali Nov 9, 2017
5bcad6e
Scale even when out of bounds
odai-alali Nov 9, 2017
7a5a2f3
Build and add example for bounds
odai-alali Nov 9, 2017
1bc0cd4
adjust ratio on min/maxZoom
odai-alali Nov 9, 2017
c0d4549
build
odai-alali Nov 9, 2017
b77af2a
Fix Typo & allow single touch propagation
odai-alali Nov 9, 2017
08bbd6b
build
odai-alali Nov 9, 2017
c39e1a0
pinch
odai-alali Nov 10, 2017
8ba7f7f
pinch|
odai-alali Nov 10, 2017
74483a4
fix pinch zoom
odai-alali Nov 10, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,3 +14,4 @@ results

npm-debug.log
node_modules
.idea
71 changes: 71 additions & 0 deletions demo/dom-bounds.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='content-type' content='text/html; charset=utf-8' />
<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no'>
<meta http-equiv='X-UA-Compatible' content='IE=edge' >
<META NAME='Description' content='Pan and zoom DOM elements demo '>
<meta name='keywords' content='dom, pan, zoom' />
<meta name='author' content='Andrei Kashcha'>
<meta name='title' content='DOM panzoom demo' />
<title>DOM panzoom demo</title>
<style type="text/css" media="screen">
body, html {
position: fixed;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.header, .footer{
position: absolute;
padding: 10px;
margin: 0;
background: rgba(255, 255, 255, 0.4);
}
.header {
color: rgba(0, 0, 0, 0.82);
}
a {
color: #FF4081;
text-decoration: none;
}

.footer {
bottom: 10px;
color: rgba(0, 0, 0, 0.52);
}
</style>
</head>
<body>
<div id="lipsum" class='zoomable'>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam enim lectus, euismod ac metus eget, consequat aliquam augue. Fusce vestibulum sagittis massa, eget iaculis lorem malesuada ut. Curabitur fringilla a lectus sed suscipit. Sed mollis ligula blandit ipsum posuere, et luctus sem iaculis. Suspendisse scelerisque mollis dapibus. Sed elementum placerat lacus, ac rutrum mauris varius in. Sed malesuada, ipsum in facilisis facilisis, eros massa euismod odio, id pretium augue purus sed risus. Nulla vitae purus enim. Suspendisse placerat ac turpis sed tempor. Cras et vulputate eros. Aenean volutpat tincidunt erat eu aliquam. Sed vel ex pulvinar, rutrum velit at, ullamcorper nibh. Ut ac rhoncus nulla. Pellentesque eu orci eu libero semper commodo ac sit amet massa.
</p>
<p>
Donec condimentum odio ut lorem rhoncus pharetra. Maecenas nisl mi, faucibus ut tincidunt eu, lobortis at nunc. Suspendisse ut ipsum nec libero pharetra porta. Mauris porttitor neque nec mi rhoncus, a luctus massa consectetur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed varius mauris et volutpat dignissim. Maecenas consectetur porta mollis. Morbi quis hendrerit massa. Cras vel eros vitae nisi mollis volutpat blandit id est. Vivamus fringilla iaculis lacus eu aliquet. Ut a varius augue, et accumsan nulla. Integer eu sem non erat porttitor posuere. Sed dui tortor, aliquam sed volutpat vitae, sodales non enim. Vestibulum libero nulla, tempus blandit pretium ac, ullamcorper eu nisl.
</p>
<p>
Aenean quis rhoncus ante. Maecenas euismod non lacus nec accumsan. Integer vitae sollicitudin lacus. Aliquam in justo augue. Pellentesque nisl nisi, sollicitudin sed commodo vitae, vestibulum eget est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor laoreet lectus sit amet eleifend. Curabitur tempus est nunc, vel molestie mauris congue vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent tincidunt aliquam massa, at ornare lacus tincidunt et.
</p>
<p>
Nam posuere et ante in finibus. Proin sagittis iaculis lacus, scelerisque convallis nulla porttitor ac. Nunc sagittis velit vitae pharetra dapibus. Etiam tortor ante, facilisis a odio sed, pretium vehicula dui. Proin et pellentesque lacus, ac tristique nibh. Pellentesque vitae ex a justo fringilla pharetra. Aenean accumsan tempor sollicitudin. Integer elementum, quam at commodo vestibulum, odio massa egestas nibh, nec hendrerit lacus diam eget nisi. Integer pretium pretium purus, eu ornare ipsum posuere id. Nullam eget varius magna, ac blandit tellus. In hac habitasse platea dictumst. Praesent volutpat, purus quis rhoncus faucibus, orci lacus dictum purus, sed sagittis ligula ante ut augue. Curabitur eget est quis erat volutpat mattis. Aliquam eleifend ut tortor eu ultrices.
</p>
<p>
Integer pretium erat et elit bibendum, ut laoreet tortor rutrum. Donec pulvinar faucibus enim vel molestie. Donec et euismod urna. Vestibulum nec feugiat magna. Nam at nunc lorem. Fusce sed ante eu purus posuere vulputate. In hac habitasse platea dictumst. Fusce consectetur elit a magna faucibus euismod. Ut congue efficitur ex. In dictum velit ac arcu condimentum, hendrerit venenatis dui tincidunt. Vestibulum pulvinar purus elementum felis tempus tincidunt. Aenean convallis, leo eu interdum varius, ante dui volutpat urna, a pharetra risus felis mattis mauris. Cras tincidunt justo enim, faucibus commodo nisl fringilla sed. Nullam facilisis, nisl a tincidunt euismod, purus odio sollicitudin sem, at ornare lorem sem ac nisi. Etiam a tincidunt tortor, consectetur porta nisl. Phasellus diam arcu, dapibus finibus nisi facilisis, dictum rutrum leo.
</p></div>
<p class='header'>
Drag it or zoom it...
</p>
<script src='../dist/panzoom.js'></script>
<script>
var area = document.querySelector('.zoomable')
panzoom(area, {
bounds: true,
boundsPadding: 1,
minZoom: 1
})
</script>
<a href="https://github.com/anvaka/panzoom"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a>
</body>
</html>
93 changes: 70 additions & 23 deletions dist/panzoom.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ module.exports = createPanZoom;

/**
* Creates a new instance of panzoom, so that an object can be panned and zoomed
*
*
* @param {DOMElement} domElement where panzoom should be attached.
* @param {Object} options that configure behavior.
*/
Expand Down Expand Up @@ -51,7 +51,7 @@ function createPanZoom(domElement, options) {
var maxZoom = typeof options.maxZoom === 'number' ? options.maxZoom : Number.POSITIVE_INFINITY
var minZoom = typeof options.minZoom === 'number' ? options.minZoom : 0

var boundsPadding = typeof options.boundsPaddding === 'number' ? options.boundsPaddding : 0.05
var boundsPadding = typeof options.boundsPadding === 'number' ? options.boundsPadding : 0.05
var zoomDoubleClickSpeed = typeof options.zoomDoubleClickSpeed === 'number' ? options.zoomDoubleClickSpeed : defaultDoubleTapZoomSpeed
var beforeWheel = options.beforeWheel || noop
var speed = typeof options.zoomSpeed === 'number' ? options.zoomSpeed : defaultZoomSpeed
Expand Down Expand Up @@ -80,7 +80,7 @@ function createPanZoom(domElement, options) {
var smoothScroll
if ('smoothScroll' in options && !options.smoothScroll) {
// If user explicitly asked us not to use smooth scrolling, we obey
smoothScroll = rigidScroll()
smoothScroll = rigidScroll()
} else {
// otherwise we use forward smoothScroll settings to kinetic API
// which makes scroll smoothing.
Expand Down Expand Up @@ -175,19 +175,16 @@ function createPanZoom(domElement, options) {
var boundingBox = getBoundingBox()
if (!boundingBox) return

var adjusted = false
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you please elaborate why was this removed?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi anvaka
It is related to the change in these two lines. the was disabled in case the transform was adjusted in the keepTransformInsideBounds() and this results in weird behavior in panzoom when the bounds set to true and the boundsPadding set to a value new or equal 1. I tried it with dom element and when the boundsPadding is 1, no zoom will be applied.

Removing this condition has no negative effect on the general behaviour of panzoom (I tested it on the dom element) and it allowed bounds to work properly and since the returned value is not needed when this condition is removed, I deleted the returned value in the function keepTransformInsideBounds()

var clientRect = getClientRect()

var diff = boundingBox.left - clientRect.right;
if (diff > 0) {
transform.x += diff
adjusted = true
}
// check the other side:
diff = boundingBox.right - clientRect.left
if (diff < 0) {
transform.x += diff
adjusted = true
}

// y axis:
Expand All @@ -198,15 +195,12 @@ function createPanZoom(domElement, options) {
// transform.y = boundingBox.top - (clientRect.bottom - transform.y) =>
// transform.y = diff + transform.y =>
transform.y += diff
adjusted = true
}

diff = boundingBox.bottom - clientRect.top;
if (diff < 0) {
transform.y += diff
adjusted = true
}
return adjusted
}

/**
Expand Down Expand Up @@ -262,9 +256,11 @@ function createPanZoom(domElement, options) {

var newScale = transform.scale * ratio

if (newScale > maxZoom || newScale < minZoom) {
// outside of allowed bounds
return
if (newScale < minZoom) {
ratio = minZoom / transform.scale
}
if (newScale > maxZoom) {
ratio = maxZoom / transform.scale
}

var parentScale = 1
Expand All @@ -284,8 +280,8 @@ function createPanZoom(domElement, options) {
transform.x = x - ratio * (x - transform.x)
transform.y = y - ratio * (y - transform.y)

var transformAdjusted = keepTransformInsideBounds()
if (!transformAdjusted) transform.scale *= ratio
keepTransformInsideBounds()
transform.scale *= ratio

triggerEvent('zoom')

Expand Down Expand Up @@ -421,7 +417,7 @@ function createPanZoom(domElement, options) {

function onTouch(e) {
if (e.touches.length === 1) {
return handleSignleFingerTouch(e, e.touches[0])
return handleSingleFingerTouch(e, e.touches[0])
} else if (e.touches.length === 2) {
// handleTouchMove() will care about pinch zoom.
e.stopPropagation()
Expand All @@ -433,9 +429,10 @@ function createPanZoom(domElement, options) {
}
}

function handleSignleFingerTouch(e) {
e.stopPropagation()
e.preventDefault()
function handleSingleFingerTouch(e) {
// allow single touch propagation to enable link or image maps touching
// e.stopPropagation()
// e.preventDefault()

var touch = e.touches[0]
mouseX = touch.clientX
Expand Down Expand Up @@ -482,7 +479,8 @@ function createPanZoom(domElement, options) {
delta = -1
}

var scaleMultiplier = getScaleMultiplier(delta)
// var scaleMultiplier = getScaleMultiplier(delta)
var scaleMultiplier = currentPinchLength / pinchZoomLength

mouseX = (t1.clientX + t2.clientX)/2
mouseY = (t1.clientY + t2.clientY)/2
Expand Down Expand Up @@ -514,8 +512,8 @@ function createPanZoom(domElement, options) {
}

function getPinchZoomLength(finger1, finger2) {
return (finger1.clientX - finger2.clientX) * (finger1.clientX - finger2.clientX) +
(finger1.clientY - finger2.clientY) * (finger1.clientY - finger2.clientY)
return Math.sqrt((finger1.clientX - finger2.clientX) * (finger1.clientX - finger2.clientX) +
(finger1.clientY - finger2.clientY) * (finger1.clientY - finger2.clientY))
}

function onDoubleClick(e) {
Expand Down Expand Up @@ -696,6 +694,7 @@ function rigidScroll() {
cancel: noop
}
}

},{"./lib/createEvent.js":2,"./lib/domController.js":3,"./lib/kinetic.js":4,"./lib/svgController.js":5,"./lib/textSlectionInterceptor.js":6,"./lib/transform.js":7,"amator":8,"wheel":10}],2:[function(require,module,exports){
/* global Event */
module.exports = createEvent;
Expand Down Expand Up @@ -1003,9 +1002,12 @@ var animations = {


module.exports = animate;
module.exports.makeAggregateRaf = makeAggregateRaf;
module.exports.sharedScheduler = makeAggregateRaf();


function animate(source, target, options) {
var start= Object.create(null)
var start = Object.create(null)
var diff = Object.create(null)
options = options || {}
// We let clients specify their own easing function
Expand All @@ -1030,7 +1032,7 @@ function animate(source, target, options) {
diff[key] = target[key] - source[key]
})

var durationInMs = options.duration || 400
var durationInMs = typeof options.duration === 'number' ? options.duration : 400
var durationInFrames = Math.max(1, durationInMs * 0.06) // 0.06 because 60 frames pers 1,000 ms
var previousAnimationId
var frame = 0
Expand Down Expand Up @@ -1097,6 +1099,51 @@ function timeoutScheduler() {
}
}

function makeAggregateRaf() {
var frontBuffer = new Set();
var backBuffer = new Set();
var frameToken = 0;

return {
next: next,
cancel: next,
clearAll: clearAll
}

function clearAll() {
frontBuffer.clear();
backBuffer.clear();
cancelAnimationFrame(frameToken);
frameToken = 0;
}

function next(callback) {
backBuffer.add(callback);
renderNextFrame();
}

function renderNextFrame() {
if (!frameToken) frameToken = requestAnimationFrame(renderFrame);
}

function renderFrame() {
frameToken = 0;

var t = backBuffer;
backBuffer = frontBuffer;
frontBuffer = t;

frontBuffer.forEach(function(callback) {
callback();
});
frontBuffer.clear();
}

function cancel(callback) {
backBuffer.delete(callback);
}
}

},{"bezier-easing":9}],9:[function(require,module,exports){
/**
* https://github.com/gre/bezier-easing
Expand Down
2 changes: 1 addition & 1 deletion dist/panzoom.min.js
View file
Open in desktop

Large diffs are not rendered by default.

Loading