Also updating the id’s, when setting svg

koenbok · Jan 28, 2018 · 23da2bf · 23da2bf
1 parent 0b25219
commit 23da2bf
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 11 deletions.
diff --git a/framer/SVGLayer.coffee b/framer/SVGLayer.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
diff --git a/test/tests/SVGLayerTest.coffee b/test/tests/SVGLayerTest.coffee
@@ -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()