Skip to content
Permalink
Browse files

Fix more screen postion bugs

  • Loading branch information...
koenbok committed Oct 27, 2014
1 parent a82c4fb commit 8d4b1bd28192f496e08320f41cf552af9f76ddee
@@ -1,75 +1,6 @@
# Framer.Loop._delta = null
Framer.Device = new Framer.DeviceView()
Framer.Device.setupContext()

# {Config} = require "./Config"
# {EventEmitter} = require "./EventEmitter"
layer = new Layer

# if window.performance
# getTime = -> window.performance.now()
# else
# getTime = -> Date.now()


# class AnimationLoop extends Framer.EventEmitter

# constructor: ->
# @_delta = 1/60

# start: =>

# animationLoop = @
# _timestamp = getTime()

# update = ->

# timestamp = getTime()
# delta = (timestamp - _timestamp) / 1000
# _timestamp = timestamp

# # if Math.abs(delta - 1/60) > (1/60 / 4)
# # print "Boom", delta

# document.body.style.display = 'none'
# document.body.style.offsetHeight;
# document.body.style.display='block';

# animationLoop.emit("update", delta)
# animationLoop.emit("render", delta)

# tick = (timestamp) ->
# # setTimeout(update, 0)
# update()
# window.requestAnimationFrame(tick)


# tick()

# Framer.Loop = new AnimationLoop()

# Utils.delay 0.2, ->

# Framer.Loop.start()



# Welcome to Framer

# Learn how to prototype: http://framerjs.com/learn
# Drop an image on the device, or import a design from Sketch or Photoshop

iconLayer = new Layer

iconLayer.center()

# Define a set of states with names (the original state is 'default')
iconLayer.states.add
second: {y:100, scale:0.6, rotationZ:100}
third: {y:300, scale:1.3, blur:4}
fourth: {y:200, scale:0.9, blur:2, rotationZ:200}

# Set the default animation options
iconLayer.states.animationOptions =
curve: "spring(1,1,0)"

# On a click, go to the next state
iconLayer.on Events.Click, ->
iconLayer.states.next()
layer.draggable.enabled = true
@@ -0,0 +1,163 @@
class LayerDraggable extends Framer.BaseClass

constructor: (@layer) ->

@_deltas = []
@_isDragging = false

@_start = null
@_offset = null
@_delta = null
@_cursorOffset = null

@enabled = true
@speedX = 1.0
@speedY = 1.0

# @maxDragFrame = null

@_attach()


update: (event, point) ->
@layer.x = point.x
@layer.y = point.y

_attach: -> @layer.on Events.TouchStart, @_touchStart
_remove: -> @layer.off Events.TouchStart, @_touchStart

_updatePosition: (event) =>

if @enabled is false
return

touchEvent = Events.touchEvent(event)

offset =
x: touchEvent.clientX - @_start.x
y: touchEvent.clientY - @_start.y

delta =
x: offset.x - @_offset.x
y: offset.y - @_offset.y
t: event.timeStamp

@_offset =
x: @_offset.x + delta.x
y: @_offset.y + delta.y

# Correct the next point with the drag speed and screen scale
delta.x = delta.x * @speedX * (1 / @layer.screenScaleX())
delta.y = delta.y * @speedY * (1 / @layer.screenScaleY())

@_deltas.push(delta)
@_delta = delta

# point =
# x: parseInt(layer.x + delta.x)
# y: parseInt(layer.y + delta.y)

print @_offset.x, @speedX, @_offset.x * @speedX

point =
x: parseInt(@_start.x - @_cursorOffset.x + (@_offset.x * @speedX))
y: parseInt(@_start.y - @_cursorOffset.y + (@_offset.y * @speedY))

# Add some extras to the event we're about to emit
event.offset = @_offset
event.delta = @_delta

@emit(Events.DragWillMove, event)
@update(event, point)
@emit(Events.DragMove, event)
@emit(Events.DragDidMove, event)

_touchStart: (event) =>

# Beacuse the dragging is going to update the x and y, we look if there
# are any animations running on those properties and stop them.
for propertyName, animation of @layer.animatingProperties()
animation.stop() if k in ["x", "y"]

@_isDragging = true

touchEvent = Events.touchEvent(event)

@_start =
x: touchEvent.clientX
y: touchEvent.clientY

@_cursorOffset =
x: touchEvent.clientX - @layer.x
y: touchEvent.clientY - @layer.y

@_offset = x:0, y:0
@_delta = x:0, y:0

document.addEventListener(Events.TouchMove, @_updatePosition)
document.addEventListener(Events.TouchEnd, @_touchEnd)

@emit(Events.DragStart, event)

_touchEnd: (event) =>

@_isDragging = false

document.removeEventListener(Events.TouchMove, @_updatePosition)
document.removeEventListener(Events.TouchEnd, @_touchEnd)

@emit Events.DragEnd, event

@_deltas = []

velocity: (time=0.1) ->

if @_deltas.length < 1
return {x:0, y:0}

index = @_deltas.length
distance = x:0, y:0

while index >= 0
index--
delta = @_deltas[index]
distance.x += Math.abs(delta.x)
distance.y += Math.abs(delta.y)

if (Date.now() - delta.t) > (time * 1000)
break

timeDelta = (Date.now() - delta.t) / 1000

velocity =
x: distance.x / timeDelta
y: distance.y / timeDelta

velocity.x = 0 if velocity.x is Infinity
velocity.y = 0 if velocity.y is Infinity

velocity

emit: (eventName, event) ->
# We override this to get all events both on the draggable
# and the encapsulated layer.
@layer.emit eventName, event

super eventName, event



layer = new Layer

layer.d = new LayerDraggable(layer)



layer.on Events.DragMove, ->


layer.d.speedX = Utils.round(Utils.modulate(layer.d._offset.x, [0, 1000], [1, 0], true), 3)
# print "layer.x", layer.x, layer.d.speedX

v = layer.d.velocity()
Utils.labelLayer layer, "#{Utils.round(v.x, 0)} #{Utils.round(v.y, 0)}"
Oops, something went wrong.

0 comments on commit 8d4b1bd

Please sign in to comment.
You can’t perform that action at this time.