From c32e406dbec008d1887e3c6ebae8e69d33f0360d Mon Sep 17 00:00:00 2001 From: Koen Bok Date: Mon, 8 Feb 2016 13:09:42 +0100 Subject: [PATCH] Fixed drag moving if drag was started by something else --- framer/LayerDraggable.coffee | 91 +++++++++++++++++++----------------- 1 file changed, 47 insertions(+), 44 deletions(-) diff --git a/framer/LayerDraggable.coffee b/framer/LayerDraggable.coffee index 12a301c7b..c6ea89937 100644 --- a/framer/LayerDraggable.coffee +++ b/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) -