Merge branch 'feature/Future'

koenbok · Apr 8, 2016 · 10d6ed2ec3ba978bd4233085f290281e71fb894a · 10d6ed2
2 parents 24fa7ed + 795bcfa
commit 10d6ed2ec3ba978bd4233085f290281e71fb894a
diff --git a/.gitignore b/.gitignore
@@ -67,3 +67,6 @@ extras/DevServer.framer/framer/config.json
 imported
 cursor-active.png
 cursor-active@2x.png
+
+# Ed
+.idea
diff --git a/framer/Animators/SpringRK4Animator.coffee b/framer/Animators/SpringRK4Animator.coffee
@@ -8,8 +8,8 @@ class exports.SpringRK4Animator extends Animator
 	setup: (options) ->

 		@options = _.defaults options,
-			tension: 500
-			friction: 10
+			tension: 250
+			friction: 25
 			velocity: 0
 			tolerance: 1/10000
 			time: null # Hack
diff --git a/framer/Components/SliderComponent.coffee b/framer/Components/SliderComponent.coffee
@@ -30,12 +30,18 @@ class Knob extends Layer
 class exports.SliderComponent extends Layer

 	constructor: (options={}) ->
-		options.backgroundColor ?= "#ccc"
-		options.borderRadius ?= 50
-		options.clip ?= false
-		options.width ?= 300
-		options.height ?= 10
-		options.value ?= 0
+
+		_.defaults options,
+			backgroundColor: "#ccc"
+			borderRadius: 50
+			clip: false
+			width: 300
+			height: 10
+			value: 0
+			knobSize: 30
+
+		# Set some sensible default for the hit area
+		options.hitArea ?= options.knobSize

 		@knob = new Knob
 			backgroundColor: "#fff"
@@ -48,32 +54,21 @@ class exports.SliderComponent extends Layer
 			width: 0, force2d: true
 			name: "fill"

-		@knobOverlay = new Layer
-			backgroundColor: null
-			name: "knobOverlay"
-
 		@sliderOverlay = new Layer
 			backgroundColor: null
 			name: "sliderOverlay"

 		super options

-		@knobSize = options.knobSize or 30
-		@knob.parent = @fill.parent = @knobOverlay.parent = @sliderOverlay.parent = @
+		@knobSize = options.knobSize
+		@knob.parent = @fill.parent = @sliderOverlay.parent = @

 		# Set fill initially
 		if @width > @height
 			@fill.height = @height
 		else
 			@fill.width = @width

-		# Link knobOverlay to knob
-		@knobOverlay.on Events.Move, ->
-			if @width > @height
-				@knob.x = @x
-			else
-				@knob.y = @y
-
 		@fill.borderRadius = @sliderOverlay.borderRadius = @borderRadius

 		@knob.draggable.enabled = true
@@ -82,41 +77,20 @@ class exports.SliderComponent extends Layer
 		@knob.draggable.momentumOptions = {friction: 5, tolerance: 0.25}
 		@knob.draggable.bounce = false
 		@knob.borderRadius = @knobSize / 2
-		@knobOverlay.borderRadius = (@knob.borderRadius * 2) + (@hitArea / 4)
-
-		# If hitArea isn't defined, remove the overlays
-		if not @hitArea
-			@knobOverlay.destroy()
-			@sliderOverlay.destroy()

 		@_updateFrame()
 		@_updateKnob()
 		@_updateFill()

-		@on("change:size", @_updateFrame)
+		@on("change:frame", @_updateFrame)
 		@on("change:borderRadius", @_setRadius)
-		@knob.on("change:borderRadius", @_setOverlayRadius)
-
-		# Check for vertical sliders
-		if @width > @height
-			@knob.draggable.speedY = 0
-			@knob.on("change:x", @_updateFill)
-		else
-			@knob.draggable.speedX = 0
-			@knob.on("change:y", @_updateFill)
-
 		@knob.on("change:size", @_updateKnob)
+		@knob.on("change:frame", @_updateFill)
+		@knob.on("change:frame", @_updateValue)

-		@knob.on Events.Move, =>
-			@_updateFrame()
-			@_updateValue()
-
-		# On click/touch of the slider, update the value
-		# @on(Events.TouchStart, @_touchDown)
-
-		@on(Events.TapStart, @_touchStart)
-		@on(Events.Pan, @_touchMove)
-		@on(Events.TapEnd, @_touchEnd)
+		@sliderOverlay.on(Events.TapStart, @_touchStart)
+		@sliderOverlay.on(Events.Pan, @_touchMove)
+		@sliderOverlay.on(Events.TapEnd, @_touchEnd)

 	_touchStart: (event) =>
 		event.preventDefault()
@@ -133,28 +107,25 @@ class exports.SliderComponent extends Layer
 		@_updateValue()

 	_touchMove: (event) =>
-		if event.target is @_element
-			@knob.draggable._touchMove(event)
+		@knob.draggable._touchMove(event)

 	_touchEnd: (event) =>
-		if event.target is @_element
-			@knob.draggable._touchEnd(event)
+		@knob.draggable._touchEnd(event)
+		@_updateValue()

 	_updateFill: =>
 		if @width > @height
-			@fill.width = @knobOverlay.midX = @knob.midX
+			@fill.width = @knob.midX
 		else
-			@fill.height = @knobOverlay.midY = @knob.midY
+			@fill.height = @knob.midY

 	_updateKnob: =>
 		if @width > @height
-			@knob.midX = @knobOverlay.midX = @fill.width
+			@knob.midX = @fill.width
 			@knob.centerY()
-
 		else
-			@knob.midY = @knobOverlay.midX = @fill.height
+			@knob.midY = @fill.height
 			@knob.centerX()
-			@knobOverlay.midY = @knob.midY

 	_updateFrame: =>
 		@knob.draggable.constraints =
@@ -173,21 +144,21 @@ class exports.SliderComponent extends Layer
 		if @width > @height
 			@fill.height = @height
 			@knob.centerY()
-			@knobOverlay.centerY()
 		else
 			@fill.width = @width
 			@knob.centerX()
-			@knobOverlay.centerX()
+
+		if @width > @height
+			@knob.draggable.speedY = 0
+		else
+			@knob.draggable.speedX = 0

 		@sliderOverlay.center()

 	_setRadius: =>
 		radius = @borderRadius
 		@fill.style.borderRadius = "#{radius}px 0 0 #{radius}px"

-	_setOverlayRadius: =>
-		@knobOverlay.borderRadius = (@knob.borderRadius * 2) + (@hitArea / 4)
-
 	@define "knobSize",
 		get: -> @_knobSize
 		set: (value) ->
@@ -197,19 +168,16 @@ class exports.SliderComponent extends Layer
 			@_updateFrame()

 	@define "hitArea",
-		get: -> @_hitArea
-
+		get: ->
+			@_hitArea
 		set: (value) ->
-
 			@_hitArea = value
-
-			@knobOverlay.props =
-				width: @knobSize or 30 + @_hitArea
-				height:	@knobSize or 30 + @_hitArea
-
-			@sliderOverlay.props =
-				width: @width + @_hitArea
-				height:	@height + @_hitArea
+			if @width > @height			
+				@sliderOverlay.width = @width + @hitArea
+				@sliderOverlay.height = @hitArea
+			else
+				@sliderOverlay.width = @hitArea
+				@sliderOverlay.height = @height + @hitArea

 	@define "min",
 		get: -> @_min or 0
@@ -227,6 +195,7 @@ class exports.SliderComponent extends Layer
 				@valueForPoint(@knob.midY)

 		set: (value) ->
+
 			if @width > @height
 				@knob.midX = @pointForValue(value)
 			else
@@ -266,10 +235,8 @@ class exports.SliderComponent extends Layer
 	animateToValue: (value, animationOptions={curve:"spring(300,25,0)"}) ->
 		if @width > @height
 			animationOptions.properties = {x: @pointForValue(value) - (@knob.width/2)}
-			@knob.on("change:x", @_updateValue)
 		else
 			animationOptions.properties = {y: @pointForValue(value) - (@knob.height/2)}
-			@knob.on("change:y", @_updateValue)

 		@knob.animate(animationOptions)

diff --git a/framer/Config.coffee b/framer/Config.coffee
@@ -20,6 +20,7 @@ body {
 	left: 0;
 	top: 0;
 	background-repeat: no-repeat;
+	background-position: center;
 	background-size: cover;
 	-webkit-overflow-scrolling: touch;
 	-webkit-box-sizing: border-box;
diff --git a/framer/Defaults.coffee b/framer/Defaults.coffee
@@ -6,11 +6,12 @@ Utils = require "./Utils"

 Originals =
 	Layer:
-		backgroundColor: "rgba(0, 124, 255, 0.5)"
+		backgroundColor: "rgba(123,123,123,0.5)"
 		color: "white"
-		shadowColor: "black"
-		width: 100
-		height: 100
+		shadowColor: "rgba(123,123,123,0.5)"
+		borderColor: "rgba(123,123,123,0.5)"
+		width: 200
+		height: 200
 	Animation:
 		# curve: "spring(400,40,0)" # Or, the Cemre-Curve
 		curve: "ease"
diff --git a/framer/Utils.coffee b/framer/Utils.coffee
@@ -853,7 +853,17 @@ Utils.convertFrameToContext = (frame = {}, layer, rootContext=false, includeLaye

 # convert a point from the context level to a layer, with rootContext enabled you can make it cross from the top context
 Utils.convertPointFromContext = (point = {}, layer, rootContext=false, includeLayer=true) ->
+
 	point = _.defaults(point, {x:0, y:0, z:0})
+
+	if rootContext and webkitConvertPointFromPageToNode?
+		if includeLayer
+			node = layer._element
+		else
+			parent = layer.parent or layer.context
+			node = parent._element
+		return webkitConvertPointFromPageToNode(node, new WebKitPoint(point.x, point.y))
+
 	ancestors = layer.ancestors(rootContext)
 	ancestors.reverse()
 	ancestors.push(layer) if includeLayer
@@ -875,8 +885,13 @@ Utils.convertPoint = (input, layerA, layerB, rootContext=false) ->
 	# Convert a point between two layer coordinate systems
 	point = _.defaults(input, {x:0, y:0, z:0})
 	point = Utils.convertPointToContext(point, layerA, rootContext) if layerA
-	return point unless layerB
-	return Utils.convertPointFromContext(point, layerB, rootContext)
+	if layerB?
+		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))
+	else
+		return point

 # get the bounding frame of a layer, either at the canvas (rootcontext) or screen level
 Utils.boundingFrame = (layer, rootContext=true) ->
diff --git a/test/tests.coffee b/test/tests.coffee
@@ -1,5 +1,9 @@
 window.chai = require("chai")

+# We don't want to update all the tests if we change these
+Framer.Defaults.Layer.width = 100
+Framer.Defaults.Layer.height = 100
+
 window.console.debug = (v) ->
 window.console.warn = (v) ->

diff --git a/test/tests/LayerTest.coffee b/test/tests/LayerTest.coffee
@@ -389,7 +389,7 @@ describe "Layer", ->
 			layer.shadowBlur.should.equal 10
 			layer.shadowSpread.should.equal 10

-			layer.style.boxShadow.should.equal "rgb(0, 0, 0) 10px 10px 10px 10px"
+			layer.style.boxShadow.should.equal "rgba(123, 123, 123, 0.496094) 10px 10px 10px 10px"

 			# Only after we set a color a shadow should be drawn
 			layer.shadowColor = "red"