Permalink
Browse files

Merge pull request #363 from koenbok/gestures-update

Make all gesture event points screen based
  • Loading branch information...
koenbok committed Jul 15, 2016
2 parents 621479a + 5c36efc commit c13d10a3858412f90fc78636f23a4c619795fd07
Showing with 63 additions and 119 deletions.
  1. +40 −99 extras/Studio.framer/app.coffee
  2. +7 −4 framer/GestureInputRecognizer.coffee
  3. +12 −8 framer/Layer.coffee
  4. +2 −6 framer/LayerDraggable.coffee
  5. +2 −2 framer/Utils.coffee
@@ -1,112 +1,53 @@
rk4 = new Framer.SpringRK4Animator
tension: 1
friction: 0
velocity: 0
tolerance: 1/10000
#Draw a stupid graph
Defaults =
colors:
curveWidgetLine: "#999999"
curveWidgetAxis: "#292929"
curveWidgetBackground: "#1E1E1E"
class Curve extends Layer
constructor: (options = {}) ->
super _.defaults options,
backgroundColor: Defaults.colors.curveWidgetBackground
width: 120
height: 120
x: 90
y: 20
borderRadius: 2
borderWidth: 1
borderColor: Defaults.colors.textInputBorder
style:
"box-sizing": "border-box"
@canvasSize = @width
@factor = options.factor ? 1
#Lines
@xLine = new Layer
backgroundColor: Defaults.colors.curveWidgetAxis
height: 1
width: @canvasSize-2*@borderWidth
parent: @
@xLine.centerY()
@yLine = new Layer
backgroundColor: Defaults.colors.curveWidgetAxis
width: 1
height: @canvasSize-2*@borderWidth
parent: @
if not Utils.isFramerStudio()
Framer.Extras.Preloader.enable()
Framer.Extras.Hints.enable()
@yLine.centerX()
layer = new Layer
size: Screen
@canvasLayer = new Layer
width:@width
height:@height
parent:@
backgroundColor:null
# Start canvas drawing
@canvas = document.createElement("canvas")
# For 2x
@canvas.width = @canvasSize * 2
@canvas.height = @canvasSize * 2
@canvas.style.width = "#{@canvasSize}px"
@canvas.style.height = "#{@canvasSize}px"
# Append Canvas
@canvasLayer._element.appendChild(@canvas)
@ctx = @canvas.getContext("2d")
@ctx.scale(2, 2)
# Style
@ctx.strokeStyle = Defaults.colors.curveWidgetLine
@ctx.lineWidth = 1
layer.onTap (e) ->
print Screen
print e.point
point = Utils.convertPoint(e.point, null, Framer.CurrentContext, true)
new Layer
midX: point.x
midY: point.y
# Values
@values = 0
@animator = new Framer.LinearAnimator
@render()
# Set-up
render: ->
@values = @animator.values(1/120,200)
@ctx.clearRect(0, 0, @width, @height)
@ctx.beginPath()
adjustedValues = []
values = @values
for index, value of values
previous = values[index - 1] * (@canvasSize / 2)
current = values[index] * (@canvasSize / 2)
delta = previous - current
if Math.abs(delta) > 0.01
adjustedValues.push(value)
for index, value of adjustedValues
l = adjustedValues.length
i = index
x = parseInt(i) * (@canvasSize / (l))
y = (1-(value * @factor)) * @canvasSize
@ctx.lineTo(x, y)
@ctx.stroke()
curve = new Curve
width: 500
height: 500
curve.center()
curve.factor = 0.5
curve.animator = rk4
curve.render()
#
# nav = new NavComponent
#
# grid = new GridComponent
# width: Screen.width * 2
# height: Screen.height * 2
# rows: 10
# columns: 10
#
# nav.push(grid)
#
# grid.renderCell = (layer) ->
# layer.image = Utils.randomImage(layer) + "?date=#{Date.now()}"
#
# layer.onClick ->
#
# large = new Layer
# size: Utils.frameInset(nav, 80)
# image: @image
#
# large.onTap ->
# nav.back()
#
# nav.modal(large)
#
@@ -328,12 +328,15 @@ class exports.GestureInputRecognizer
_getGestureEvent: (event) ->
eventPoint = Utils.convertPoint(
@_getEventPoint(event), null, Framer.CurrentContext, true)
_.extend event,
time: Date.now() # Current time √
point: @_getEventPoint(event) # Current point √
start: @_getEventPoint(event) # Start point √
previous: @_getEventPoint(event) # Previous point √
point: eventPoint # Current point √
start: eventPoint # Start point √
previous: eventPoint # Previous point √
offset: {x:0, y:0} # Offset since start √
offsetTime: 0 # Time since start √
@@ -349,7 +352,7 @@ class exports.GestureInputRecognizer
velocity: {x:0, y:0} # Velocity average over the last few events √
fingers: event.touches?.length or 0 # Number of fingers used √
touchCenter: @_getEventPoint(event) # Center between two fingers √
touchCenter: eventPoint # Center between two fingers √
touchOffset: {x:0, y:0} # Offset between two fingers √
touchDistance: 0 # Distance between two fingers √
scale: 1 # Scale value from two fingers √
@@ -477,26 +477,30 @@ class exports.Layer extends BaseClass
# return @_parentOrContext().screenOriginY()
# return @originY
canvasScaleX: ->
scale = @scale * @scaleX
canvasScaleX: (self=true) ->
scale = 1
scale = @scale * @scaleX if self
for parent in @ancestors(context=true)
scale = scale * parent.scale * parent.scaleX
return scale
canvasScaleY: ->
scale = @scale * @scaleY
canvasScaleY: (self=true) ->
scale = 1
scale = @scale * @scaleY if self
for parent in @ancestors(context=true)
scale = scale * parent.scale * parent.scaleY
return scale
screenScaleX: ->
scale = @scale * @scaleX
screenScaleX: (self=true) ->
scale = 1
scale = @scale * @scaleX if self
for parent in @ancestors(context=false)
scale = scale * parent.scale * parent.scaleX
return scale
screenScaleY: ->
scale = @scale * @scaleY
screenScaleY: (self=true) ->
scale = 1
scale = @scale * @scaleY if self
for parent in @ancestors(context=false)
scale = scale * parent.scale * parent.scaleY
return scale
@@ -209,12 +209,8 @@ class exports.LayerDraggable extends BaseClass
t: Date.now() # We don't use timeStamp because it's different on Chrome/Safari
point = _.clone(@_point)
scaleX = (1 / @layer.canvasScaleX() * @layer.scale * @layer.scaleX)
scaleY = (1 / @layer.canvasScaleY() * @layer.scale * @layer.scaleY)
point.x = @_point.x + (event.delta.x * scaleX * @speedX) if @horizontal
point.y = @_point.y + (event.delta.y * scaleY * @speedY) if @vertical
point.x = @_point.x + (event.delta.x * @speedX * (1 / @layer.screenScaleX(false))) if @horizontal
point.y = @_point.y + (event.delta.y * @speedY * (1 / @layer.screenScaleY(false))) if @vertical
# Save the point for the next update so we have the unrounded, unconstrained value
@_point = _.clone(point)
@@ -997,7 +997,7 @@ Utils.convertPointFromContext = (point = {}, layer, rootContext=false, includeLa
else
parent = layer.parent or layer.context
node = parent._element
return webkitConvertPointFromPageToNode(node, new WebKitPoint(point.x, point.y))
return Utils.point(webkitConvertPointFromPageToNode(node, new WebKitPoint(point.x, point.y)))
ancestors = layer.ancestors(rootContext)
ancestors.reverse()
@@ -1024,7 +1024,7 @@ Utils.convertPoint = (input, layerA, layerB, rootContext=false) ->
return Utils.convertPointFromContext(point, layerB, rootContext)
else if layerA? and rootContext and webkitConvertPointFromPageToNode?
node = layerA.context._element
return webkitConvertPointFromPageToNode(node, new WebKitPoint(point.x, point.y))
return Utils.point(webkitConvertPointFromPageToNode(node, new WebKitPoint(point.x, point.y)))
else
return point

0 comments on commit c13d10a

Please sign in to comment.