Permalink
Browse files

Merge branch 'feature/svglayer-image-pattern'

  • Loading branch information...
jonastreub committed Mar 8, 2018
2 parents a426bbe + 5d6f5d9 commit 08e7197604a184991edee98c9700d854b920c011
View
Binary file not shown.
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
@@ -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) =>
View
@@ -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 = {}
View
@@ -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)
@@ -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)
@@ -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", ->
@@ -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", ->
@@ -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()
@@ -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()

0 comments on commit 08e7197

Please sign in to comment.