Permalink
Browse files

Fixed a bug in LayerDraggable where the starting point would be recor…

…ded wrongly

Fixes framer/company#6180
  • Loading branch information...
nvh committed Dec 12, 2017
1 parent 6f33b51 commit d6fd324045544db5c2023bb81c00399a6259a49d
@@ -40,7 +40,7 @@ class exports.GestureInputRecognizer
@touchstart(event)
touchstart: (event) =>
console.log "touchStart", event.target
# Only fire if we are not already in a session
return if @session
@@ -326,14 +326,13 @@ class exports.GestureInputRecognizer
_getEventPoint: (event) ->
return @_getTouchPoint(event, 0) if event.touches?.length
point = {x: event.pageX, y: event.pageY}
Utils.convertPointFromContext(point, Framer.CurrentContext, true, true)
return {x: event.pageX, y: event.pageY}
_getGestureEvent: (event) ->
# Convert the point to the current context
eventPoint = @_getEventPoint(event)
eventPoint = Utils.convertPointFromContext(
@_getEventPoint(event), Framer.CurrentContext, true, true)
_.extend event,
time: Date.now() # Current time √
@@ -430,11 +429,9 @@ class exports.GestureInputRecognizer
return event
_getTouchPoint: (event, index) ->
point =
return point =
x: event.touches[index].pageX
y: event.touches[index].pageY
return Utils.convertPointFromContext(point, Framer.CurrentContext, true, true)
_getDirection: (offset) ->
if Math.abs(offset.x) > Math.abs(offset.y)
@@ -107,17 +107,12 @@ class exports.LayerDraggable extends BaseClass
@attach()
attach: ->
@layer.on(Gestures.TapStart, @touchStart)
# @layer.on(Gestures.Pan, @_touchMove)
# @layer.on(Gestures.TapEnd, @_touchEnd)
@layer.on(Gestures.PanStart, @touchStart)
@layer.on("change:x", @_updateLayerPosition)
@layer.on("change:y", @_updateLayerPosition)
remove: ->
@layer.off(Gestures.TapStart, @touchStart)
@layer.off(Gestures.PanStart, @touchStart)
@layer.off(Gestures.Pan, @_touchMove)
@layer.off(Gestures.PanEnd, @_touchEnd)
@@ -141,7 +136,7 @@ class exports.LayerDraggable extends BaseClass
LayerDraggable._globalDidDrag = false
Events.wrap(document).addEventListener(Gestures.Pan, @_touchMove)
Events.wrap(document).addEventListener(Gestures.TapEnd, @_touchEnd)
Events.wrap(document).addEventListener(Gestures.PanEnd, @_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.
@@ -162,10 +157,11 @@ class exports.LayerDraggable extends BaseClass
# Extract the event (mobile may have multiple)
touchEvent = Events.touchEvent(event)
# TODO: we should use the event velocity
@_eventBuffer.push
x: touchEvent.clientX
y: touchEvent.clientY
x: event.point.x
y: event.point.y
t: Date.now()
# Store original layer position
@@ -15,7 +15,8 @@ describe "Layer", ->
a2.isAnimating.should.equal true
a3.isAnimating.should.equal true
layer.draggable.touchStart(document.createEvent("MouseEvent"))
event = Framer.GestureInputRecognizer._getGestureEvent(document.createEvent("MouseEvent"))
layer.draggable.touchStart(event)
a1.isAnimating.should.equal false
a2.isAnimating.should.equal false
@@ -24,20 +25,25 @@ describe "Layer", ->
describe "Simulation", ->
it "should be cancelled when animating the same property", (done) ->
layerA = new Layer
start = document.createEvent("MouseEvent")
event = Framer.GestureInputRecognizer._getGestureEvent(start)
layerA.draggable._touchStart(start)
time = 0.001
for i in [0..3]
do (i) ->
Utils.delay i*time, ->
move = document.createEvent("MouseEvent")
move.delta =
x: i
y: 0
move.touches = [
{clientX: i, clientY: 0}
{pageX: i, pageY: 0}
]
layerA.draggable._touchMove(move)
event = Framer.GestureInputRecognizer._getGestureEvent(move)
event.delta =
x: i
y: 0
layerA.draggable._touchMove(event)
Utils.delay i*time, ->
layerA.draggable._touchEnd(document.createEvent("MouseEvent"))
event = Framer.GestureInputRecognizer._getGestureEvent(document.createEvent("MouseEvent"))
layerA.draggable._touchEnd(event)
layerA.onDragEnd ->
simulation = layerA.draggable._simulation.x
a = @animate
@@ -119,13 +119,13 @@ describe "ScrollComponent", ->
done("expected up+, down+, null+, but got: #{moves}")
# TODO instead of actually taking time, trick time
draggable._touchStart({clientX: 100, clientY: 100, preventDefault: (->), stopPropagation: (->)})
draggable._touchStart({point: {x: 100, y: 100}, preventDefault: (->), stopPropagation: (->)})
Utils.delay 0.01, ->
draggable._touchMove({clientX: 100, clientY: 111, preventDefault: (->), stopPropagation: (->), delta: {x: 0, y: 11}})
draggable._touchMove({clientX: 100, clientY: 111, point: {x: 100, y: 111}, preventDefault: (->), stopPropagation: (->), delta: {x: 0, y: 11}})
Utils.delay 0.20, -> # enough time to set velocity to zero
draggable._touchMove({clientX: 100, clientY: 112, preventDefault: (->), stopPropagation: (->), delta: {x: 0, y: 1}})
draggable._touchMove({clientX: 100, clientY: 112, point: {x: 100, y: 112}, preventDefault: (->), stopPropagation: (->), delta: {x: 0, y: 1}})
Utils.delay 0.21, ->
draggable._touchEnd({clientX: 100, clientY: 112, preventDefault: (->), stopPropagation: (->), delta: {x: 0, y: 0}})
draggable._touchEnd({clientX: 100, clientY: 112, point: {x: 100, y: 112}, preventDefault: (->), stopPropagation: (->), delta: {x: 0, y: 0}})
describe "PageComponent", ->
it "should fire scroll events", (done) ->

0 comments on commit d6fd324

Please sign in to comment.