Permalink
Browse files

Add layer.force2d for mask + borderRadius

  • Loading branch information...
koenbok committed Sep 30, 2014
1 parent 1d521bd commit ae4fc9b469a83071285378de66a894e4554aaa63
Showing with 39 additions and 57 deletions.
  1. +6 −11 extras/CactusFramer/static/app.coffee
  2. +2 −2 framer/Layer.coffee
  3. +20 −44 framer/LayerStyle.coffee
  4. +11 −0 test/tests/LayerTest.coffee
@@ -1,13 +1,8 @@
layer = new Layer
layerA = new Layer
layerB = new Layer superLayer:layerA
layerA.borderRadius = layerA.height / 4
layerA.center()
a = new Animation
layer: layer
properties:
x: -> layer.x + 100
time: 2.5
repeat: 5
a.start()
# layerA._prefer2d = true
layerB.force2d = true
View
@@ -168,8 +168,7 @@ class exports.Layer extends BaseClass
@define "shadowSpread", layerProperty @, "shadowSpread", "boxShadow", 0, _.isNumber
@define "shadowColor", layerProperty @, "shadowColor", "boxShadow", ""
# Mapped style properties
# Color properties
@define "backgroundColor", layerProperty @, "backgroundColor", "backgroundColor", null, _.isString
@define "color", layerProperty @, "color", "color", null, _.isString
@@ -178,6 +177,7 @@ class exports.Layer extends BaseClass
@define "borderColor", layerProperty @, "borderColor", "border", null, _.isString
@define "borderWidth", layerProperty @, "borderWidth", "border", 0, _.isNumber
@define "force2d", layerProperty @, "force2d", "webkitTransform", false, _.isBool
##############################################################
# Identity
View
@@ -14,6 +14,16 @@ _WebkitProperties = [
["sepia", "sepia", 0, "%"],
]
_Force2DProperties =
"z": 0
"scaleX": 1
"scaleY": 1
"scaleZ": 1
"skewX": 0
"skewY": 0
"rotationX": 0
"rotationY": 0
exports.LayerStyle =
width: (layer) ->
@@ -77,8 +87,8 @@ exports.LayerStyle =
# scenarios with rounded corners and shadows where gpu drawing gets weird
# results.
if layer._properties._prefer2d
return exports.LayerStyle.WebkitTransformPrefer2d(layer)
if layer._prefer2d or layer._properties.force2d
return exports.LayerStyle.webkitTransformForce2d(layer)
"
translate3d(#{layer._properties.x}px,#{layer._properties.y}px,#{layer._properties.z}px)
@@ -92,58 +102,24 @@ exports.LayerStyle =
rotateZ(#{layer._properties.rotationZ}deg)
"
webkitTransformPrefer2d: (layer) ->
webkitTransformForce2d: (layer) ->
# This detects if we use 3d properties, if we don't it only uses
# 2d properties to disable gpu rendering.
css = []
if layer._properties.z != 0
css.push "translate3d(#{layer._properties.x}px,#{layer._properties.y}px,#{layer._properties.z}px)"
else
css.push "translate(#{layer._properties.x}px,#{layer._properties.y}px)"
if layer._properties.scale != 1
css.push "scale(#{layer._properties.scale})"
if layer._properties.scaleX != 1 or layer._properties.scaleY != 1 or layer._properties.scaleZ != 1
css.push "scale3d(#{layer._properties.scaleX},#{layer._properties.scaleY},#{layer._properties.scaleZ})"
if layer._properties.skew
css.push "skew(#{layer._properties.skew}deg,#{layer._properties.skew}deg)"
if layer._properties.skewX
css.push "skewX(#{layer._properties.skewX}deg)"
if layer._properties.skewY
css.push "skewY(#{layer._properties.skewY}deg)"
if layer._properties.rotationX
css.push "rotateX(#{layer._properties.rotationX}deg)"
if layer._properties.rotationY
css.push "rotateY(#{layer._properties.rotationY}deg)"
if layer._properties.rotationZ
css.push "rotateZ(#{layer._properties.rotationZ}deg)"
for p, v of _Force2DProperties
if layer._properties[p] isnt v
console.warn "Layer property '#{p}'' will be ignored with force2d enabled"
css.push "translate(#{layer._properties.x}px,#{layer._properties.y}px)"
css.push "scale(#{layer._properties.scale})"
css.push "skew(#{layer._properties.skew}deg,#{layer._properties.skew}deg)"
css.push "rotate(#{layer._properties.rotationZ}deg)"
return css.join(" ")
# "
# translate3d(#{layer._properties.x}px,#{layer._properties.y}px,#{layer._properties.z}px)
# scale(#{layer._properties.scale})
# scale3d(#{layer._properties.scaleX},#{layer._properties.scaleY},#{layer._properties.scaleZ})
# skew(#{layer._properties.skew}deg,#{layer._properties.skew}deg)
# skewX(#{layer._properties.skewX}deg)
# skewY(#{layer._properties.skewY}deg)
# rotateX(#{layer._properties.rotationX}deg)
# rotateY(#{layer._properties.rotationY}deg)
# rotateZ(#{layer._properties.rotationZ}deg)
# "
webkitTransformOrigin: (layer) ->
"#{layer._properties.originX * 100}% #{layer._properties.originY * 100}%"
@@ -696,6 +696,17 @@ describe "Layer", ->
inputElement = _.first(inputElements)
inputElement.getAttribute("id").should.equal "hello"
describe "Force 2D", ->
it "should switch to 2d rendering", ->
layer = new Layer
layer.style.webkitTransform.should.equal "translate3d(0px, 0px, 0px) scale(1) scale3d(1, 1, 1) skew(0deg, 0deg) skewX(0deg) skewY(0deg) rotateX(0deg) rotateY(0deg) rotateZ(0deg)"
layer.force2d = true
layer.style.webkitTransform.should.equal "translate(0px, 0px) scale(1) skew(0deg, 0deg) rotate(0deg)"

0 comments on commit ae4fc9b

Please sign in to comment.