Permalink
Browse files

Improved SVG Layer with respect to fill and color

  • Loading branch information...
nvh committed Jul 13, 2017
1 parent 7f807e6 commit 6229106a125edcef82c5dc6d9e9c5672a63fcaa9
Showing with 24 additions and 18 deletions.
  1. +24 −18 framer/SVGLayer.coffee
View
@@ -2,14 +2,23 @@
{Color} = require "./Color"
{Layer, layerProperty} = require "./Layer"
validFill = (value) ->
Color.validColorValue(value) or _.startsWith(value, "url(")
toFill = (value) ->
if _.startsWith(value, "url(")
return value
else
return Color.toColor(value)
class exports.SVGLayer extends Layer
constructor: (options={}) ->
options.backgroundColor ?= null
options.fill ?= "black"
super options
@define "backgroundColor", layerProperty(@, "fill", "fill", null, Color.validColorValue, Color.toColor)
@define "fill", layerProperty(@, "fill", "fill", null, validFill, toFill)
@define "stroke", layerProperty(@, "stroke", "stroke", null, validFill, toFill)
@define "color", layerProperty(@, "color", "color", null, Color.validColorValue, Color.toColor, null, ((layer, value) -> layer.fill = value), "_elementHTML", true)
@define "gradient",
get: ->
@@ -24,24 +33,21 @@ class exports.SVGLayer extends Layer
else
@_gradient = null
@updateGradientSVG()
updateGradientSVG: =>
isGradient = Gradient.isGradient @_gradient
updateGradientSVG: =>
if not Gradient.isGradient(@_gradient)
@_elementGradientSVG.innerHTML = ""
return
if not @_elementGradientSVG and isGradient
if not @_elementGradientSVG
@_elementGradientSVG = document.createElementNS("http://www.w3.org/2000/svg", "svg")
@_element.appendChild @_elementGradientSVG
if isGradient
id = "#{@id}-gradient"
@_elementGradientSVG.innerHTML = """
<linearGradient id='#{id}' gradientTransform='rotate(#{@gradient.angle - 90}, 0.5, 0.5)' >
<stop offset="0" stop-color='##{@gradient.start.toHex()}' stop-opacity='#{@gradient.start.a}' />
<stop offset="1" stop-color='##{@gradient.end.toHex()}' stop-opacity='#{@gradient.end.a}' />
</linearGradient>
"""
@style.fill = "url(##{id})"
else
@_elementGradientSVG.innerHTML = ""
@fill = @fill
id = "#{@id}-gradient"
@_elementGradientSVG.innerHTML = """
<linearGradient id='#{id}' gradientTransform='rotate(#{@gradient.angle - 90}, 0.5, 0.5)' >
<stop offset="0" stop-color='##{@gradient.start.toHex()}' stop-opacity='#{@gradient.start.a}' />
<stop offset="1" stop-color='##{@gradient.end.toHex()}' stop-opacity='#{@gradient.end.a}' />
</linearGradient>
"""
@fill = "url(##{id})"

0 comments on commit 6229106

Please sign in to comment.