Skip to content

Commit

Permalink
Fixed drag moving if drag was started by something else
Browse files Browse the repository at this point in the history
  • Loading branch information
Koen Bok committed Feb 8, 2016
1 parent 8435391 commit c32e406
Showing 1 changed file with 47 additions and 44 deletions.
91 changes: 47 additions & 44 deletions framer/LayerDraggable.coffee
View file
Expand Up @@ -20,17 +20,17 @@ Events.DragAnimationEnd = "draganimationend"
Events.DirectionLockStart = "directionlockstart"

"""
┌──────┐ │
│ │
│ │ ───────────────▶ │ ◀────▶
│ │
└──────┘ │
════════ ═════════════════ ═══════
Drag Momentum Bounce
┌──────┐ │
│ │
│ │ ───────────────▶ │ ◀────▶
│ │
└──────┘ │
════════ ═════════════════ ═══════
Drag Momentum Bounce
"""

class exports.LayerDraggable extends BaseClass
Expand All @@ -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
Expand All @@ -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

Expand All @@ -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)
Expand Down Expand Up @@ -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(
Expand All @@ -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()
Expand All @@ -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)
Expand All @@ -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
Expand All @@ -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)
Expand All @@ -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().
Expand All @@ -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
Expand All @@ -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)
Expand All @@ -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)

Expand All @@ -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
Expand Down Expand Up @@ -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

Expand All @@ -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

Expand Down Expand Up @@ -520,7 +524,7 @@ class exports.LayerDraggable extends BaseClass
@_setupSimulation()
@_isAnimating = true
@_isMoving = true

@_simulation.x.simulator.setState
x: @layer.x
v: velocityX
Expand All @@ -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)
Expand All @@ -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.