Permalink
Browse files

Merge branch 'feature/Future'

  • Loading branch information...
Koen Bok
Koen Bok committed Apr 8, 2016
2 parents 24fa7ed + 795bcfa commit 10d6ed2ec3ba978bd4233085f290281e71fb894a
@@ -67,3 +67,6 @@ extras/DevServer.framer/framer/config.json
imported
cursor-active.png
cursor-active@2x.png
# Ed
.idea
@@ -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
@@ -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)
@@ -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;
@@ -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"
@@ -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) ->
@@ -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) ->
@@ -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"

0 comments on commit 10d6ed2

Please sign in to comment.