Permalink
Browse files

Fixed drag moving if drag was started by something else

  • Loading branch information...
Koen Bok
Koen Bok committed Feb 8, 2016
1 parent 8435391 commit c32e406dbec008d1887e3c6ebae8e69d33f0360d
Showing with 47 additions and 44 deletions.
  1. +47 −44 framer/LayerDraggable.coffee
@@ -20,17 +20,17 @@ Events.DragAnimationEnd = "draganimationend"
Events.DirectionLockStart = "directionlockstart"
"""
┌──────┐ │
│ │
│ │ ───────────────▶ │ ◀────▶
│ │
└──────┘ │
════════ ═════════════════ ═══════
Drag Momentum Bounce
┌──────┐ │
│ │
│ │ ───────────────▶ │ ◀────▶
│ │
└──────┘ │
════════ ═════════════════ ═══════
Drag Momentum Bounce
"""
class exports.LayerDraggable extends BaseClass
@@ -48,7 +48,7 @@ class exports.LayerDraggable extends BaseClass
@define "constraints",
get: -> @_constraints
set: (value) ->
set: (value) ->
if value and _.isObject(value)
@_constraints = _.defaults(value, {x:0, y:0, width:0, height:0})
else
@@ -68,7 +68,7 @@ class exports.LayerDraggable extends BaseClass
@define "offset",
get: ->
return {x:0, y:0} if not @_correctedLayerStartPoint
return offset =
return offset =
x: @layer.x - @_correctedLayerStartPoint.x
y: @layer.y - @_correctedLayerStartPoint.y
@@ -82,17 +82,17 @@ class exports.LayerDraggable extends BaseClass
@enabled = true
# TODO: will have to change panRecognizer's horizontal/vertical etc
# TODO: will have to change panRecognizer's horizontal/vertical etc
# when they are changed on the LayerDraggable
# @_panRecognizer = new PanRecognizer @eventBuffer
@_eventBuffer = new EventBuffer
@_constraints = null
@_ignoreUpdateLayerPosition = true
@attach()
attach: ->
attach: ->
@layer.on(Gestures.TapStart, @touchStart)
@layer.on(Gestures.Pan, @_touchMove)
@layer.on(Gestures.TapEnd, @_touchEnd)
@@ -144,8 +144,8 @@ class exports.LayerDraggable extends BaseClass
# Store original layer position
@_layerStartPoint = @layer.point
@_correctedLayerStartPoint = @layer.point
# If we are beyond bounds, we need to correct for the scaled clamping from the last drag,
# If we are beyond bounds, we need to correct for the scaled clamping from the last drag,
# hence the 1 / overdragScale
if @constraints and @bounce
@_correctedLayerStartPoint = @_constrainPosition(
@@ -167,9 +167,12 @@ class exports.LayerDraggable extends BaseClass
@emit(Events.DragStart, 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
@_lastEvent = event
event.preventDefault()
@@ -186,11 +189,12 @@ class exports.LayerDraggable extends BaseClass
if @overdrag is false
# TODO: We still need to account for the cursor offset here
frame = Utils.convertFrameToContext(@constraints, @layer, true, false)
return if event.point.x < Utils.frameGetMinX(frame)
return if event.point.x < Utils.frameGetMinX(frame)
return if event.point.x > Utils.frameGetMaxX(frame)
return if event.point.y < Utils.frameGetMinY(frame)
return if event.point.y < Utils.frameGetMinY(frame)
return if event.point.y > Utils.frameGetMaxY(frame)
point = _.clone(@_point)
scaleX = (1 / @layer.canvasScaleX() * @layer.scale * @layer.scaleX)
@@ -213,7 +217,7 @@ class exports.LayerDraggable extends BaseClass
offset.x = offset.x * @speedX * (1 / @layer.canvasScaleX()) * @layer.scaleX * @layer.scale
offset.y = offset.y * @speedY * (1 / @layer.canvasScaleY()) * @layer.scaleY * @layer.scale
@_updatedirectionLock(offset)
@_updatedirectionLock(offset)
return
else
point.x = @_layerStartPoint.x if @_directionLockEnabledX
@@ -238,7 +242,7 @@ class exports.LayerDraggable extends BaseClass
@_ignoreUpdateLayerPosition = true
@layer.point = @updatePosition(point)
@_ignoreUpdateLayerPosition = false
if @isDragging
@emit(Events.Move, @layer.point)
@emit(Events.DragDidMove, event)
@@ -248,13 +252,13 @@ class exports.LayerDraggable extends BaseClass
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
# 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).
@_startSimulation()
@emit(Events.DragEnd, event)
# Set _isDragging after DragEnd is fired, so that calls to calculateVelocity()
# Set _isDragging after DragEnd is fired, so that calls to calculateVelocity()
# still returns dragging velocity - both in case the user calls calculateVelocity(),
# (which would return a stale value before the simulation had finished one tick)
# and because @_start currently calls calculateVelocity().
@@ -271,10 +275,10 @@ class exports.LayerDraggable extends BaseClass
return {x:0, y:0} unless @constraints
{minX, maxX, minY, maxY} = @_calculateConstraints(@constraints)
point = @layer.point
constrainedPoint =
constrainedPoint =
x: Utils.clamp(point.x, minX, maxX)
y: Utils.clamp(point.y, minY, maxY)
offset =
offset =
x: point.x - constrainedPoint.x
y: point.y - constrainedPoint.y
return offset
@@ -295,13 +299,13 @@ class exports.LayerDraggable extends BaseClass
_calculateConstraints: (bounds) ->
if not bounds
return constraints =
return constraints =
minX: Infinity
maxX: Infinity
minY: Infinity
maxY: Infinity
constraints =
constraints =
minX: Utils.frameGetMinX(bounds)
maxX: Utils.frameGetMaxX(bounds)
minY: Utils.frameGetMinY(bounds)
@@ -314,15 +318,15 @@ class exports.LayerDraggable extends BaseClass
return constraints
_constrainPosition: (proposedPoint, bounds, scale) ->
{minX, maxX, minY, maxY} = @_calculateConstraints(@_constraints)
if @overdrag
point =
point =
x: @_clampAndScale(proposedPoint.x, minX, maxX, scale)
y: @_clampAndScale(proposedPoint.y, minY, maxY, scale)
else
point =
point =
x: Utils.clamp(proposedPoint.x, minX, maxX)
y: Utils.clamp(proposedPoint.y, minY, maxY)
@@ -337,7 +341,7 @@ class exports.LayerDraggable extends BaseClass
@define "velocity",
get: ->
return @_calculateSimulationVelocity() if @isAnimating
return @_eventBuffer.velocity
return @_eventBuffer.velocity
return {x:0, y:0}
# return @_eventBuffer.velocity if @isDragging
@@ -389,21 +393,21 @@ class exports.LayerDraggable extends BaseClass
# Lock Direction
_updatedirectionLock: (correctedDelta) ->
@_directionLockEnabledX = Math.abs(correctedDelta.y) > @directionLockThreshold.y
@_directionLockEnabledY = Math.abs(correctedDelta.x) > @directionLockThreshold.x
# TODO: This wasn't working as advertised. We shouls have a way to scroll diagonally
# if we were sort of moving into both directions equally.
# xSlightlyPreferred = Math.abs(correctedDelta.y) > @directionLockThreshold.y / 2
# ySlightlyPreferred = Math.abs(correctedDelta.x) > @directionLockThreshold.x / 2
# # Allow locking in both directions at the same time
# @_directionLockEnabledX = @_directionLockEnabledY = true if (xSlightlyPreferred and ySlightlyPreferred)
if @_directionLockEnabledX or @_directionLockEnabledY
@emit Events.DirectionLockStart,
@emit Events.DirectionLockStart,
x: @_directionLockEnabledX
y: @_directionLockEnabledY
@@ -417,14 +421,14 @@ class exports.LayerDraggable extends BaseClass
_setupSimulation: ->
return if @_simulation
@_simulation =
@_simulation =
x: @_setupSimulationForAxis("x")
y: @_setupSimulationForAxis("y")
@_updateSimulationConstraints(@constraints)
_setupSimulationForAxis: (axis) ->
properties = {}
properties[axis] = true
@@ -520,7 +524,7 @@ class exports.LayerDraggable extends BaseClass
@_setupSimulation()
@_isAnimating = true
@_isMoving = true
@_simulation.x.simulator.setState
x: @layer.x
v: velocityX
@@ -547,7 +551,7 @@ class exports.LayerDraggable extends BaseClass
##############################################################
## EVENT HELPERS
onMove: (cb) -> @on(Events.Move, cb)
onDragStart: (cb) -> @on(Events.DragStart, cb)
onDragWillMove: (cb) -> @on(Events.DragWillMove, cb)
@@ -558,4 +562,3 @@ class exports.LayerDraggable extends BaseClass
onDragAnimationStart: (cb) -> @on(Events.DragAnimationStart, cb)
onDragAnimationEnd: (cb) -> @on(Events.DragAnimationEnd, cb)
onDirectionLockStart: (cb) -> @on(Events.DirectionLockStart, cb)

0 comments on commit c32e406

Please sign in to comment.