Permalink
Browse files

Merge pull request #554 from koenbok/feature/svg-property

Feature/svg property
  • Loading branch information...
nvh committed Dec 8, 2017
2 parents 5fbb70e + f2e7954 commit 651439b0e5fd569539a999a84d510451367b5498
Showing with 82 additions and 5 deletions.
  1. +18 −0 framer/SVGLayer.coffee
  2. +2 −4 package.json
  3. +62 −1 test/tests/SVGLayerTest.coffee
View
@@ -37,6 +37,24 @@ class exports.SVGLayer extends Layer
@_gradient = null
@updateGradientSVG()
@define "svg",
get: ->
svgNode = _.first(@_elementHTML.children)
if svgNode instanceof SVGElement
return svgNode
else
return null
set: (value) ->
if typeof value is "string"
@html = value
else if value instanceof SVGElement
@_createHTMLElementIfNeeded()
while @_elementHTML.firstChild
@_elementHTML.removeChild(@_elementHTML.firstChild)
if value.parentNode?
value = value.cloneNode(true)
@_elementHTML.appendChild(value)
updateGradientSVG: ->
return if @__constructor
if not Gradient.isGradient(@gradient)
View
@@ -16,7 +16,7 @@
},
"devDependencies": {
"async": "^2.0.1",
"chai": "^3.5.0",
"chai": "^4.1.2",
"codecov": "^2.2.0",
"coffee-coverage": "^2.0.1",
"coffee-loader": "^0.7.2",
@@ -45,9 +45,7 @@
"webpack-dev-server": "^1.14.1",
"webpack-stream": "^3.0.1"
},
"keywords": [
"prototyping"
],
"keywords": ["prototyping"],
"author": "Koen Bok",
"license": "MIT",
"bugs": {
@@ -1,4 +1,6 @@
{expect} = require "chai"
svgString = "<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-toggle-right\"><rect x=\"1\" y=\"5\" width=\"22\" height=\"14\" rx=\"7\" ry=\"7\"><\/rect><circle cx=\"16\" cy=\"12\" r=\"3\"><\/circle><\/svg>"
describe "SVGLayer", ->
describe "gradients", ->
it "should generate unique gradient id per instance", ->
@@ -14,11 +16,70 @@ describe "SVGLayer", ->
it "should copy the html intrinsic size", ->
a = new SVGLayer
width: 24
html: "<?xml version=\"1.0\"?><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-toggle-right\"><rect x=\"1\" y=\"5\" width=\"22\" height=\"14\" rx=\"7\" ry=\"7\"><\/rect><circle cx=\"16\" cy=\"12\" r=\"3\"><\/circle><\/svg>",
html: svgString
htmlIntrinsicSize:
height: 24
width: 24
height: 24
b = a.copy()
a.htmlIntrinsicSize.should.eql b.htmlIntrinsicSize
describe "svg", ->
describe "getter", ->
it "should return the SVG node", ->
layer = new SVGLayer
html: svgString
layer.svg.should.be.an.instanceof(SVGElement)
it "should return null if the layer doesn't contain a svg node", ->
layer = new SVGLayer
html: "<div>hallo</div>"
expect(layer.svg).to.be.null
describe "setter", ->
it "should the html when a string is set", ->
layer = new SVGLayer
svg: svgString
layer.html.should.equal svgString
it "should set an svg node if an SVG element is provided", ->
layer = new SVGLayer
svg: svgString
layer2 = new SVGLayer
layer2.svg = layer.svg
layer2.html.should.equal svgString
it "should remove all children when setting an svg node", ->
layer = new SVGLayer
svg: svgString
layer2 = new SVGLayer
svg: svgString
layer2.svg = layer.svg
layer2.html.should.equal svgString
it "should not clone the node if the provided node has no parent", ->
svg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
svg.setAttribute('style', 'border: 1px solid black')
svg.setAttribute('width', '600')
svg.setAttribute('height', '250')
svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink")
layer2 = new SVGLayer
layer2.svg = svg
expect(layer2.svg is svg).to.be.true
layer2.html.should.equal '<svg style="border: 1px solid black" width="600" height="250" xmlns:xlink="http://www.w3.org/1999/xlink"></svg>'
it "should clone the node if the provided svg element already has a parent", ->
layer = new SVGLayer
svg: svgString
layer2 = new SVGLayer
svg = layer.svg
layer2.svg = svg
expect(layer2.svg is svg).to.be.false
layer.html.should.equal svgString
layer2.html.should.equal svgString

0 comments on commit 651439b

Please sign in to comment.