Permalink
Browse files

Fixing some issues related to devicePixelRatio and dragging and pinching

  • Loading branch information...
nvh committed Nov 15, 2017
1 parent a206425 commit 021b060b6f308da63543b123d58c277c38e73745
View
@@ -87,7 +87,7 @@ _.extend(Events, Gestures)
# Extract touch events for any event
Events.touchEvent = (event) ->
touchEvent = event.touches?[0]
touchEvent = event.touches?[0]
touchEvent ?= event.changedTouches?[0]
touchEvent ?= event
touchEvent
@@ -2,7 +2,7 @@ Utils = require "../Utils"
{BaseClass} = require "../BaseClass"
createTouch = (event, identifier, offset={x: 0, y: 0}) ->
return touch =
touch =
identifier: identifier
target: event.target
pageX: event.pageX - offset.x
@@ -11,6 +11,10 @@ createTouch = (event, identifier, offset={x: 0, y: 0}) ->
clientY: event.clientY - offset.y
screenX: event.screenX - offset.x
screenY: event.screenY - offset.y
touch.point =
x: touch.pageX
y: touch.pageY
return touch
dispatchTouchEvent = (type, target, event, offset) ->
@@ -326,13 +326,13 @@ class exports.GestureInputRecognizer
_getEventPoint: (event) ->
return @_getTouchPoint(event, 0) if event.touches?.length
return {x: event.pageX, y: event.pageY}
point = {x: event.pageX, y: event.pageY}
Utils.convertPointFromContext(point, Framer.CurrentContext, true, true)
_getGestureEvent: (event) ->
# Convert the point to the current context
eventPoint = Utils.convertPointFromContext(
@_getEventPoint(event), Framer.CurrentContext, true, true)
eventPoint = @_getEventPoint(event)
_.extend event,
time: Date.now() # Current time √
@@ -430,9 +430,11 @@ class exports.GestureInputRecognizer
return event
_getTouchPoint: (event, index) ->
return point =
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)
View
@@ -1436,6 +1436,12 @@ class exports.Layer extends BaseClass
event.point = Utils.convertPointFromContext(point, @, true)
event.contextPoint = Utils.convertPointFromContext(point, @context, true)
if event.touches?
for touch in event.touches
point = {x: touch.clientX, y: touch.clientY}
touch.point = Utils.convertPointFromContext(point, @, true)
touch.contextPoint = Utils.convertPointFromContext(point, @context, true)
# Always scope the event this to the layer and pass the layer as
# last argument for every event.
super(eventName, args..., @)
@@ -194,21 +194,23 @@ class exports.LayerDraggable extends BaseClass
@emit(Events.DragSessionStart, event)
_touchMove: (event) =>
return unless @enabled
# If we started dragging from another event we need to capture some initial values
@touchStart(event) if not @_point
event.preventDefault()
event.stopPropagation() if @propagateEvents is false
# print event.touches[0].identifier, event.touches[1].identifier
touchEvent = Events.touchEvent(event)
point = {x: touchEvent.clientX, y: touchEvent.clientY}
touchEvent.point = Utils.convertPointFromContext(point, @layer, true)
touchEvent.contextPoint = Utils.convertPointFromContext(point, @layer.context, true)
@_lastEvent = touchEvent
@_eventBuffer.push
x: touchEvent.clientX
y: touchEvent.clientY
x: touchEvent.point.x
y: touchEvent.point.y
t: Date.now() # We don't use timeStamp because it's different on Chrome/Safari
point = _.clone(@_point)
@@ -52,12 +52,10 @@ class exports.LayerPinchable extends BaseClass
#@_centerOrigin(event) if @centerOrigin
_centerOrigin: (event) =>
topInSuperBefore = Utils.convertPoint({}, @layer, @layer.superLayer)
pinchLocation = Utils.convertPointFromContext(event.touchCenter, @layer, true, true)
pinchLocation = Screen.convertPointToLayer(event.touchCenter, @layer)
@layer.originX = pinchLocation.x / @layer.width
@layer.originY = pinchLocation.y / @layer.height
topInSuperAfter = Utils.convertPoint({}, @layer, @layer.superLayer)
originDelta =
x: topInSuperAfter.x - topInSuperBefore.x
@@ -75,16 +73,7 @@ class exports.LayerPinchable extends BaseClass
return unless event.fingers is 2
return unless @enabled
pointA =
x: event.touches[0].pageX
y: event.touches[0].pageY
pointB =
x: event.touches[1].pageX
y: event.touches[1].pageY
return unless Utils.pointTotal(Utils.pointAbs(Utils.pointSubtract(pointA, pointB))) > @threshold
return unless event.touchDistance > @threshold
if @scale
@_scaleStart ?= @layer.scale

0 comments on commit 021b060

Please sign in to comment.