Merge pull request #363 from koenbok/gestures-update

Make all gesture event points screen based
koenbok · Jul 15, 2016 · c13d10a3858412f90fc78636f23a4c619795fd07 · c13d10a
2 parents 621479a + 5c36efc
commit c13d10a3858412f90fc78636f23a4c619795fd07
Unified Split

Showing with 63 additions and 119 deletions.

+40 −99 extras/Studio.framer/app.coffee

+7 −4 framer/GestureInputRecognizer.coffee

+12 −8 framer/Layer.coffee

+2 −6 framer/LayerDraggable.coffee

+2 −2 framer/Utils.coffee
diff --git a/extras/Studio.framer/app.coffee b/extras/Studio.framer/app.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)
+# 
diff --git a/framer/GestureInputRecognizer.coffee b/framer/GestureInputRecognizer.coffee
@@ -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 √
diff --git a/framer/Layer.coffee b/framer/Layer.coffee
@@ -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
diff --git a/framer/LayerDraggable.coffee b/framer/LayerDraggable.coffee
@@ -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)
diff --git a/framer/Utils.coffee b/framer/Utils.coffee
@@ -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