Permalink
Browse files

Merge pull request #541 from koenbok/feature/background-filters

Feature/background filters
  • Loading branch information...
eelco committed Sep 13, 2017
2 parents 670822c + 4763660 commit 5b6867bda7a0c1808d9eae13ef0ed6085941cdaf
Showing with 114 additions and 4 deletions.
  1. +17 −0 framer/Blending.coffee
  2. +1 −0 framer/Framer.coffee
  3. +13 −1 framer/Layer.coffee
  4. +29 −3 framer/LayerStyle.coffee
  5. +54 −0 test/tests/LayerTest.coffee
View
@@ -0,0 +1,17 @@
exports.Blending =
normal: "normal"
multiply: "multiply"
screen: "screen"
overlay: "overlay"
darken: "darken"
lighten: "lighten"
colorDodge: "color-dodge"
colorBurn: "color-burn"
hardLight: "hard-light"
softLight: "soft-light"
difference: "difference"
exclusion: "exclusion"
hue: "hue"
saturation: "saturation"
color: "color"
luminosity: "luminosity"
View
@@ -20,6 +20,7 @@ Framer.AnimationGroup = (require "./AnimationGroup").AnimationGroup
Framer.AnimationStateGroup = (require "./AnimationGroup").AnimationStateGroup
Framer.Screen = (require "./Screen").Screen
Framer.Align = (require "./Align").Align
Framer.Blending = (require "./Blending").Blending
Framer.print = (require "./Print").print
# Components
View
@@ -59,7 +59,7 @@ layerProperty = (obj, name, cssProperty, fallback, validator, transformer, optio
mainElement?.style[cssProperty] = @_properties[name]
subElement?.style[cssProperty] = @_properties[name]
# These values are set multiple times during applyDefaults, so ignore them here, and set the style in the constructor
else if not @__applyingDefaults or (cssProperty not in ["webkitTransform", "webkitFilter", "webkitPerspectiveOrigin", "webkitTransformOrigin"])
else if not @__applyingDefaults or (cssProperty not in ["webkitTransform", "webkitFilter", "webkitPerspectiveOrigin", "webkitTransformOrigin", "webkitBackdropFilter"])
style = LayerStyle[cssProperty](@)
mainElement?.style[cssProperty] = style
subElement?.style[cssProperty] = style
@@ -210,6 +210,7 @@ class exports.Layer extends BaseClass
@_element.style["webkitFilter"] = LayerStyle["webkitFilter"](@)
@_element.style["webkitTransformOrigin"] = LayerStyle["webkitTransformOrigin"](@)
@_element.style["webkitPerspectiveOrigin"] = LayerStyle["webkitPerspectiveOrigin"](@)
@_element.style["webkitBackdropFilter"] = LayerStyle["webkitBackdropFilter"](@)
# Add this layer to the current context
@_context.addLayer(@)
@@ -348,6 +349,17 @@ class exports.Layer extends BaseClass
@define "grayscale", layerProperty(@, "grayscale", "webkitFilter", 0, _.isNumber)
@define "sepia", layerProperty(@, "sepia", "webkitFilter", 0, _.isNumber)
@define "blending", layerProperty(@, "blending", "mixBlendMode", null, _.isString)
@define "backgroundBlur", layerProperty(@, "backgroundBlur", "webkitBackdropFilter", 0, _.isNumber)
@define "backgroundBrightness", layerProperty(@, "backgroundBrightness", "webkitBackdropFilter", 100, _.isNumber)
@define "backgroundSaturate", layerProperty(@, "backgroundSaturate", "webkitBackdropFilter", 100, _.isNumber)
@define "backgroundHueRotate", layerProperty(@, "backgroundHueRotate", "webkitBackdropFilter", 0, _.isNumber)
@define "backgroundContrast", layerProperty(@, "backgroundContrast", "webkitBackdropFilter", 100, _.isNumber)
@define "backgroundInvert", layerProperty(@, "backgroundInvert", "webkitBackdropFilter", 0, _.isNumber)
@define "backgroundGrayscale", layerProperty(@, "backgroundGrayscale", "webkitBackdropFilter", 0, _.isNumber)
@define "backgroundSepia", layerProperty(@, "backgroundSepia", "webkitBackdropFilter", 0, _.isNumber)
for i in [0...8]
do (i) =>
@define "shadow#{i+1}",
View
@@ -20,6 +20,17 @@ _WebkitProperties = [
["sepia", "sepia", 0, "%"],
]
_BackdropProperties = [
["blur", "backgroundBlur", 0, "px"],
["brightness", "backgroundBrightness", 100, "%"],
["saturate", "backgroundSaturate", 100, "%"],
["hue-rotate", "backgroundHueRotate", 0, "deg"],
["contrast", "backgroundContrast", 100, "%"],
["invert", "backgroundInvert", 0, "%"],
["grayscale", "backgroundGrayscale", 0, "%"],
["sepia", "backgroundSepia", 0, "%"],
]
_Force2DProperties =
"z": 0
"scaleZ": 1
@@ -105,9 +116,9 @@ exports.LayerStyle =
css = []
for [cssName, layerName, fallback, unit] in _WebkitProperties
if layer._properties.hasOwnProperty(layerName) and layer[layerName] isnt fallback
css.push("#{cssName}(#{filterFormat(layer[layerName], unit)})")
for [cssName, layerPropertyName, fallback, unit] in _WebkitProperties
if layer._properties.hasOwnProperty(layerPropertyName) and layer[layerPropertyName] isnt fallback
css.push("#{cssName}(#{filterFormat(layer[layerPropertyName], unit)})")
# filter shadow
shadowStrings = getShadowStrings(layer, "drop", (shadow, pixelMultiplier) ->
@@ -117,6 +128,15 @@ exports.LayerStyle =
css = css.concat shadowStrings
return css.join(" ")
webkitBackdropFilter: (layer) ->
css = []
for [cssName, layerPropertyName, fallback, unit] in _BackdropProperties
if layer._properties.hasOwnProperty(layerPropertyName) and layer[layerPropertyName] isnt fallback
css.push("#{cssName}(#{filterFormat(layer[layerPropertyName], unit)})")
return css.join(" ")
webkitTransform: (layer) ->
# We have a special rendering path for layers that prefer 2d rendering.
# This definitely decreases performance, but is handy in complex drawing
@@ -177,6 +197,12 @@ exports.LayerStyle =
webkitPerspectiveOrigin: (layer) ->
"#{layer._properties.perspectiveOriginX * 100}% #{layer._properties.perspectiveOriginY * 100}%"
mixBlendMode: (layer) ->
if layer._properties.blending in _.values(Blending)
return layer._properties.blending
else
return ""
pointerEvents: (layer) ->
if layer._properties.ignoreEvents
return "none"
@@ -711,6 +711,60 @@ describe "Layer", ->
layer.contrast = 50
layer.contrast.should.equal 50
layer.style.webkitFilter.should.equal "blur(10px) contrast(50%)"
describe "Backdrop properties", ->
it "should set backgroundBlur", ->
l = new Layer
backgroundBlur: 50
l.style.webkitBackdropFilter.should.equal "blur(50px)"
it "should set backgroundBrightness", ->
l = new Layer
backgroundBrightness: 50
l.style.webkitBackdropFilter.should.equal "brightness(50%)"
it "should set backgroundSaturate", ->
l = new Layer
backgroundSaturate: 50
l.style.webkitBackdropFilter.should.equal "saturate(50%)"
it "should set backgroundHueRotate", ->
l = new Layer
backgroundHueRotate: 50
l.style.webkitBackdropFilter.should.equal "hue-rotate(50deg)"
it "should set backgroundContrast", ->
l = new Layer
backgroundContrast: 50
l.style.webkitBackdropFilter.should.equal "contrast(50%)"
it "should set backgroundInvert", ->
l = new Layer
backgroundInvert: 50
l.style.webkitBackdropFilter.should.equal "invert(50%)"
it "should set backgroundGrayscale", ->
l = new Layer
backgroundGrayscale: 50
l.style.webkitBackdropFilter.should.equal "grayscale(50%)"
it "should set backgroundSepia", ->
l = new Layer
backgroundSepia: 50
l.style.webkitBackdropFilter.should.equal "sepia(50%)"
it "should support multiple filters", ->
l = new Layer
backgroundBlur: 50
backgroundHueRotate: 20
backgroundSepia: 10
l.style.webkitBackdropFilter.should.equal "blur(50px) hue-rotate(20deg) sepia(10%)"
describe "Blending", ->
it "Should work with every blending mode", ->
l = new Layer
for key, value of Blending
l.blending = value
l.style.mixBlendMode.should.equal value
describe "Shadow Properties", ->

0 comments on commit 5b6867b

Please sign in to comment.