Skip to content

Commit

Permalink
Merge branch 'feature/svglayer-image-pattern'
Browse files Browse the repository at this point in the history
  • Loading branch information
Jonas Treub committed Mar 8, 2018
2 parents a426bbe + 5d6f5d9 commit 08e7197
Show file tree
Hide file tree
Showing 9 changed files with 79 additions and 6 deletions.
Binary file removed extras/Studio.framer/images/close.png
View file
Binary file not shown.
Binary file removed extras/Studio.framer/images/icon-facebook.png
View file
Binary file not shown.
Binary file removed extras/Studio.framer/images/icon-twitter.png
View file
Binary file not shown.
Binary file removed extras/Studio.framer/images/logo-button.png
View file
Binary file not shown.
Binary file removed extras/Studio.framer/images/logo.png
View file
Binary file not shown.
2 changes: 1 addition & 1 deletion framer/Layer.coffee
View file
Expand Up @@ -355,7 +355,7 @@ class exports.Layer extends BaseClass
@define "backgroundGrayscale", layerProperty(@, "backgroundGrayscale", "webkitBackdropFilter", 0, _.isNumber)
@define "backgroundSepia", layerProperty(@, "backgroundSepia", "webkitBackdropFilter", 0, _.isNumber)

@define "backgroundSize", layerProperty(@, "backgroundSize", "backgroundSize", null, _.isString)
@define "backgroundSize", layerProperty(@, "backgroundSize", "backgroundSize", "fill", _.isString)

for i in [0..8]
do (i) =>
Expand Down
50 changes: 50 additions & 0 deletions framer/SVG.coffee
View file
Expand Up @@ -31,6 +31,56 @@ class exports.SVG
"""
svgLayer.fill = "url(##{id})"

@updateImagePatternSVG: (svgLayer) ->
return if svgLayer.__constructor

if not svgLayer.image
svgLayer._elementImagePatternSVG?.innerHTML = ""
return

transform = ""

if svgLayer.backgroundSize in ["fill", "fit", "contain", "cover"] and svgLayer.imageSize
scaleX = 1
scaleY = 1
offsetX = 0
offsetY = 0

imageWidth = svgLayer.imageSize.width
imageHeight = svgLayer.imageSize.height

imageRatio = imageWidth / imageHeight
realWidth = svgLayer.height * imageRatio
realHeight = svgLayer.width / imageRatio
validScaleX = realWidth / svgLayer.width
validScaleY = realHeight / svgLayer.height

fillBackground = svgLayer.backgroundSize in ["fill", "cover"]

if fillBackground and validScaleY > validScaleX or not fillBackground and validScaleY < validScaleX
scaleY = validScaleY
offsetY = (1 - validScaleY) / 2
else
scaleX = validScaleX
offsetX = (1 - validScaleX) / 2

transform = """transform="translate(#{offsetX}, #{offsetY}) scale(#{scaleX}, #{scaleY})" """

if not svgLayer._elementImagePatternSVG
svgLayer._elementImagePatternSVG = document.createElementNS("http://www.w3.org/2000/svg", "svg")
svgLayer._elementImagePatternSVG.setAttribute("xmlns", "http://www.w3.org/2000/svg")
svgLayer._elementImagePatternSVG.setAttribute("width", "100%")
svgLayer._elementImagePatternSVG.setAttribute("height", "100%")
svgLayer._element.appendChild svgLayer._elementImagePatternSVG

id = "#{svgLayer.id}-image-pattern"
svgLayer._elementImagePatternSVG.innerHTML = """
<pattern id="#{id}" width="100%" height="100%" patternContentUnits="objectBoundingBox">
<image width="1" height="1" xlink:href=#{svgLayer.image} preserveAspectRatio="none" #{transform} />
</pattern>
"""
svgLayer.fill = "url(##{id})"

@constructSVGElements: (root, elements, PathClass, GroupClass) ->

targets = {}
Expand Down
23 changes: 23 additions & 0 deletions framer/SVGLayer.coffee
View file
Expand Up @@ -37,8 +37,11 @@ class exports.SVGLayer extends Layer
else
@elements = []

SVG.updateImagePatternSVG(@)
SVG.updateGradientSVG(@)

@onChange "backgroundSize", => SVG.updateImagePatternSVG(@)

@define "elements", @simpleProperty("elements", {})

@define "fill", layerProperty(@, "fill", "fill", null, SVG.validFill, SVG.toFill)
Expand All @@ -58,6 +61,26 @@ class exports.SVGLayer extends Layer
@_gradient = null
SVG.updateGradientSVG(@)

@define "image",
get: ->
return @_image
set: (value) ->
@_image = value
SVG.updateImagePatternSVG(@)

@define "imageSize",
importable: true
exportable: true
default: null
get: -> @_getPropertyValue "imageSize"
set: (value) ->
if value is null
@_setPropertyValue "imageSize", value
else
return if not _.isFinite(value.width) or not _.isFinite(value.height)
@_setPropertyValue "imageSize", {width: value.width, height: value.height}
SVG.updateImagePatternSVG(@)

@define "svg",
get: ->
svgNode = _.first(@_elementHTML?.children)
Expand Down
10 changes: 5 additions & 5 deletions test/tests/SVGLayerTest.coffee
View file
Expand Up @@ -34,7 +34,7 @@ describe "SVGLayer", ->
svg: svgWithNames

b = a.copy()
b.html.should.equal '<svg xmlns="http://www.w3.org/2000/svg" width="182" height="182"><path d="M 0 0 L 182 0 L 182 182 L 0 182 Z" name="Rectangle" style="-webkit-perspective: none; pointer-events: none; display: block; opacity: 1; overflow: visible; -webkit-transform-style: preserve-3d; -webkit-backface-visibility: visible; -webkit-perspective-origin-x: 50%; -webkit-perspective-origin-y: 50%;"></path></svg>'
b.html.should.equal '<svg xmlns="http://www.w3.org/2000/svg" width="182" height="182"><path d="M 0 0 L 182 0 L 182 182 L 0 182 Z" name="Rectangle" style="-webkit-perspective: none; pointer-events: none; display: block; opacity: 1; overflow: visible; background-size: cover; -webkit-transform-style: preserve-3d; -webkit-backface-visibility: visible; -webkit-perspective-origin-x: 50%; -webkit-perspective-origin-y: 50%;"></path></svg>'
b._elementHTML.should.not.be.equal a._elementHTML

it "should change the id's to random id's", ->
Expand Down Expand Up @@ -101,7 +101,7 @@ describe "SVGLayer", ->
y: 456
svg: '<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><path d="M 100 50 C 100 77.614 77.614 100 50 100 C 22.386 100 0 77.614 0 50 C 0 22.386 22.386 0 50 0" id="path" name="path" fill="transparent" stroke="#0AF"></path></svg>'
b = a.copy()
expect(b.html).to.equal '<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><path d="M 100 50 C 100 77.614 77.614 100 50 100 C 22.386 100 0 77.614 0 50 C 0 22.386 22.386 0 50 0" id="path1" name="path" fill="transparent" stroke="#0AF" style="-webkit-perspective: none; pointer-events: none; display: block; opacity: 1; overflow: visible; -webkit-transform-style: preserve-3d; -webkit-backface-visibility: visible; fill: rgba(0, 0, 0, 0); stroke: #00aaff; -webkit-perspective-origin-x: 50%; -webkit-perspective-origin-y: 50%;"></path></svg>'
expect(b.html).to.equal '<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><path d="M 100 50 C 100 77.614 77.614 100 50 100 C 22.386 100 0 77.614 0 50 C 0 22.386 22.386 0 50 0" id="path1" name="path" fill="transparent" stroke="#0AF" style="-webkit-perspective: none; pointer-events: none; display: block; opacity: 1; overflow: visible; background-size: cover; -webkit-transform-style: preserve-3d; -webkit-backface-visibility: visible; fill: rgba(0, 0, 0, 0); stroke: #00aaff; -webkit-perspective-origin-x: 50%; -webkit-perspective-origin-y: 50%;"></path></svg>'
a.destroy()

it "should unique the id's even if theyre complex", ->
Expand Down Expand Up @@ -168,8 +168,8 @@ describe "SVGLayer", ->
svg: svgWithIds
b = new SVGLayer
svg: svgWithIds
a.html.should.equal '<svg xmlns="http://www.w3.org/2000/svg" width="182" height="182"><path d="M 0 0 L 182 0 L 182 182 L 0 182 Z" name="Rectangle" id="test-bla/hoera" style="-webkit-perspective: none; pointer-events: none; display: block; opacity: 1; overflow: visible; -webkit-transform-style: preserve-3d; -webkit-backface-visibility: visible; -webkit-perspective-origin-x: 50%; -webkit-perspective-origin-y: 50%;"></path></svg>'
b.html.should.equal '<svg xmlns="http://www.w3.org/2000/svg" width="182" height="182"><path d="M 0 0 L 182 0 L 182 182 L 0 182 Z" name="Rectangle" id="test-bla/hoera1" style="-webkit-perspective: none; pointer-events: none; display: block; opacity: 1; overflow: visible; -webkit-transform-style: preserve-3d; -webkit-backface-visibility: visible; -webkit-perspective-origin-x: 50%; -webkit-perspective-origin-y: 50%;"></path></svg>'
a.html.should.equal '<svg xmlns="http://www.w3.org/2000/svg" width="182" height="182"><path d="M 0 0 L 182 0 L 182 182 L 0 182 Z" name="Rectangle" id="test-bla/hoera" style="-webkit-perspective: none; pointer-events: none; display: block; opacity: 1; overflow: visible; background-size: cover; -webkit-transform-style: preserve-3d; -webkit-backface-visibility: visible; -webkit-perspective-origin-x: 50%; -webkit-perspective-origin-y: 50%;"></path></svg>'
b.html.should.equal '<svg xmlns="http://www.w3.org/2000/svg" width="182" height="182"><path d="M 0 0 L 182 0 L 182 182 L 0 182 Z" name="Rectangle" id="test-bla/hoera1" style="-webkit-perspective: none; pointer-events: none; display: block; opacity: 1; overflow: visible; background-size: cover; -webkit-transform-style: preserve-3d; -webkit-backface-visibility: visible; -webkit-perspective-origin-x: 50%; -webkit-perspective-origin-y: 50%;"></path></svg>'
a.destroy()
b.destroy()

Expand All @@ -179,7 +179,7 @@ describe "SVGLayer", ->
svg: svgWithIds
b = new SVGLayer
svg: a.svg
a.html.should.equal '<svg xmlns="http://www.w3.org/2000/svg" width="182" height="182"><path d="M 0 0 L 182 0 L 182 182 L 0 182 Z" name="Rectangle" id="test-bla/hoera" style="-webkit-perspective: none; pointer-events: none; display: block; opacity: 1; overflow: visible; -webkit-transform-style: preserve-3d; -webkit-backface-visibility: visible; -webkit-perspective-origin-x: 50%; -webkit-perspective-origin-y: 50%;"></path></svg>'
a.html.should.equal '<svg xmlns="http://www.w3.org/2000/svg" width="182" height="182"><path d="M 0 0 L 182 0 L 182 182 L 0 182 Z" name="Rectangle" id="test-bla/hoera" style="-webkit-perspective: none; pointer-events: none; display: block; opacity: 1; overflow: visible; background-size: cover; -webkit-transform-style: preserve-3d; -webkit-backface-visibility: visible; -webkit-perspective-origin-x: 50%; -webkit-perspective-origin-y: 50%;"></path></svg>'
b.html.should.equal ''
a.destroy()

Expand Down

0 comments on commit 08e7197

Please sign in to comment.