Permalink
Browse files

Also updating the id’s, when setting svg

  • Loading branch information...
nvh committed Jan 28, 2018
1 parent 0b25219 commit 23da2bff1c61da9405ed324f969da981dff888eb
Showing with 13 additions and 11 deletions.
  1. +11 −9 framer/SVGLayer.coffee
  2. +2 −2 test/tests/SVGLayerTest.coffee
@@ -6,6 +6,15 @@
{SVGPath} = require "./SVGPath"
Utils = require "./Utils"

updateIdsToBeUnique = (htmlString) ->
ids = Utils.getIdAttributesFromString(htmlString)
for id in ids
uniqueId = Utils.getUniqueId(id)
if id isnt uniqueId
htmlString = htmlString.replace(///((id|xlink:href)=["'']\#?)#{id}(["'])///g, "$1#{uniqueId}$3")
htmlString = htmlString.replace(///(["'']url\(\#)#{id}(\)["'])///g, "$1#{uniqueId}$2")
return htmlString

class exports.SVGLayer extends Layer

@DenyCopyMessage: "SVGLayer doesn't support `copy` when the layer has one more children"
@@ -60,7 +69,7 @@ class exports.SVGLayer extends Layer
return null
set: (value) ->
if typeof value is "string"
@html = value
@html = updateIdsToBeUnique(value)
else if value instanceof SVGElement
idElements = value.querySelectorAll('[id]')
for element in idElements
@@ -83,14 +92,7 @@ class exports.SVGLayer extends Layer
props = @props
if props.html? and props.svg?
delete props.svg
ids = Utils.getIdAttributesFromString(props.html)
html = props.html
for id in ids
uniqueId = Utils.getUniqueId(id)
if id isnt uniqueId
html = html.replace(///((id|xlink:href)=["'']\#?)#{id}(["'])///g, "$1#{uniqueId}$3")
html = html.replace(///(["'']url\(\#)#{id}(\)["'])///g, "$1#{uniqueId}$2")
props.html = html
props.html = updateIdsToBeUnique(props.html)
copy = new @constructor(props)
copy.style = @style
copy
@@ -136,14 +136,14 @@ describe "SVGLayer", ->
html: svgString
expect(a.backgroundColor).to.be.null

it "should warn when adding an svg string with id's that already exist in the document", ->
it "should unique the id's in a string that already exist in the document", ->
svgWithIds = '<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"></path></svg>'
a = new 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 ''
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.destroy()
b.destroy()

0 comments on commit 23da2bf

Please sign in to comment.