Browse files

Fix a set of ScrollComponent issues

- Missing touchUp events
- Wrapped PageComponents with directionLock
  • Loading branch information...
koenbok committed Apr 8, 2016
1 parent 56aef8f commit 925b0c4c9f51da1a7316325b2c2f2c744c4f8e43
Showing with 28 additions and 15 deletions.
  1. +6 −12 framer/Components/
  2. +22 −3 framer/
@@ -30,8 +30,8 @@ class exports.PageComponent extends ScrollComponent
@content.draggable.momentum = false
@content.draggable.bounce = false
@on(Events.ScrollStart, @_scrollStart)
@on(Events.ScrollEnd, @_scrollEnd)
@content.on(Events.DragSessionStart, @_scrollStart)
@content.on(Events.DragSessionEnd, @_scrollEnd)
@content.on("change:frame", _.debounce(@_scrollMove, 16))
@content.on("change:children", @_resetHistory)
@@ -168,16 +168,10 @@ class exports.PageComponent extends ScrollComponent
xLock = @content.draggable._directionLockEnabledX and (@direction == "right" or @direction == "left")
yLock = @content.draggable._directionLockEnabledY and (@direction == "down" or @direction == "up")
if Math.max(Math.abs(velocity.x), Math.abs(velocity.y)) < @velocityThreshold or xLock or yLock or xDisabled or yDisabled
# print "velocity"
maximumVelocity = Math.max(Math.abs(velocity.x), Math.abs(velocity.y))
start = @content.draggable._layerStartPoint
end = @content.draggable.layer.point
if start? and end?
if start.x isnt end.x or start.y isnt end.y
@snapToPage(@closestPage, true, @animationOptions)
if maximumVelocity < @velocityThreshold or xLock or yLock or xDisabled or yDisabled
return @snapToPage(@closestPage, true, @animationOptions)
# Figure out which direction we are scrolling to and make a sorted list of
# layers on that side, sorted by absolute distance so we can pick the first.
@@ -187,7 +181,7 @@ class exports.PageComponent extends ScrollComponent
# that we are already at.
nextPage ?= @closestPage
# print Math.max(Math.abs(velocity.x), Math.abs(velocity.y))
# print @content, maximumVelocity, @velocityThreshold
# print @direction, nextPage
@snapToPage(nextPage, true, @animationOptions)
@@ -19,6 +19,11 @@ Events.DragAnimationStart = "draganimationstart"
Events.DragAnimationEnd = "draganimationend"
Events.DirectionLockStart = "directionlockstart"
# Special cases
Events.DragSessionStart = "dragsessionstart"
Events.DragSessionMove = "dragsessionmove"
Events.DragSessionEnd = "dragsessionend"
# Add deprecated aliases
Events.DragAnimationDidStart = Events.DragAnimationStart
Events.DragAnimationDidEnd = Events.DragAnimationEnd
@@ -101,13 +106,16 @@ class exports.LayerDraggable extends BaseClass
attach: ->
@layer.on(Gestures.TapStart, @touchStart)
@layer.on(Gestures.Pan, @_touchMove)
@layer.on(Gestures.TapEnd, @_touchEnd)
# @layer.on(Gestures.Pan, @_touchMove)
# @layer.on(Gestures.TapEnd, @_touchEnd)
@layer.on("change:x", @_updateLayerPosition)
@layer.on("change:y", @_updateLayerPosition)
remove: ->, @touchStart), @touchStart), @_touchMove), @_touchEnd)
@@ -128,6 +136,9 @@ class exports.LayerDraggable extends BaseClass
_touchStart: (event) =>
Events.wrap(document).addEventListener(Gestures.Pan, @_touchMove)
Events.wrap(document).addEventListener(Gestures.TapEnd, @_touchEnd)
# Only reset isMoving if this was not animating when we were clicking
# so we can use it to detect a click versus a drag.
@_isMoving = @isAnimating
@@ -176,6 +187,8 @@ class exports.LayerDraggable extends BaseClass
@_point = @_correctedLayerStartPoint
@_ignoreUpdateLayerPosition = false
@emit(Events.DragSessionStart, event)
_touchMove: (event) =>
return unless @enabled
@@ -249,15 +262,21 @@ class exports.LayerDraggable extends BaseClass
@emit(Events.Move, @layer.point)
@emit(Events.DragDidMove, event)
@emit(Events.DragSessionMove, event)
_touchEnd: (event) =>
Events.wrap(document).removeEventListener(Gestures.Pan, @_touchMove)
Events.wrap(document).removeEventListener(Gestures.TapEnd, @_touchEnd)
event.stopPropagation() if @propagateEvents is false
# Start the simulation prior to emitting the DragEnd event.
# This way, if the user calls layer.animate on DragEnd, the simulation will
# be canceled by the user's animation (if the user animates x and/or y).
@emit(Events.DragSessionEnd, event)
@emit(Events.DragEnd, event) if @_isDragging
# Set _isDragging after DragEnd is fired, so that calls to calculateVelocity()

2 comments on commit 925b0c4


This comment has been minimized.

mrrocks replied Apr 9, 2016



This comment has been minimized.


koenbok replied Apr 9, 2016

So there is a new thing here: DragSession* vs Drag*. The latter only gets thrown if you actually move a layer. The first one always gets thrown.

Please sign in to comment.