Clone without assigning new IDs

4 files changed, 21 insertions, 7 deletions

diff --git a/.config/rollup.config.js b/.config/rollup.config.js
index 8391ba0..5e3667b 100644
--- a/.config/rollup.config.js
+++ b/.config/rollup.config.js
@@ -96,7 +96,8 @@ const config = (node, min, esm = false) => ({
       : node ? './dist/svg.node.js'
       : min ? './dist/svg.min.js'
       : './dist/svg.js',
-    format: esm ? 'esm' : node ? 'cjs' : 'iife',
+    // See https://stackoverflow.com/questions/54489234/trouble-loading-svgdotjs-svg-js-3-0-11-in-typescript-test-code-managed-by-j
+    format: esm ? 'esm' : node ? 'cjs' : 'umd',
     name: 'SVG',
     sourcemap: true,
     banner: headerLong,
diff --git a/spec/spec/elements/Dom.js b/spec/spec/elements/Dom.js
index f4864b3..e33883d 100644
--- a/spec/spec/elements/Dom.js
+++ b/spec/spec/elements/Dom.js
@@ -165,7 +165,7 @@ describe('Dom.js', function () {
       expect(clone.children()).toEqual([])
     })
 
-    it('assigns a new id to the element and to child elements', () => {
+    it('assigns a new id to the element and to child elements by default', () => {
       const group = new G().id('group')
       const rect = group.rect(100, 100).id('rect')
       const clone = group.clone()
@@ -173,6 +173,14 @@ describe('Dom.js', function () {
       expect(clone.id()).not.toBe(group.id())
     })
 
+    it('does not assign a new id to the element and to child elements', () => {
+      const group = new G().id('group')
+      const rect = group.rect(100, 100).id('rect')
+      const clone = group.clone(true, false)
+      expect(clone.get(0).id()).toBe(rect.id())
+      expect(clone.id()).toBe(group.id())
+    })
+
     it('returns an instance of the same class the method was called on', () => {
       const rect = new Dom(create('rect'))
       expect(rect.constructor).toBe(Dom)
diff --git a/src/elements/Dom.js b/src/elements/Dom.js
index e127f8c..d2ece97 100644
--- a/src/elements/Dom.js
+++ b/src/elements/Dom.js
@@ -67,12 +67,17 @@ export default class Dom extends EventTarget {
   }
 
   // Clone element
-  clone (deep = true) {
+  clone (deep = true, assignNewIds = true) {
     // write dom data to the dom so the clone can pickup the data
     this.writeDataToDom()
 
-    // clone element and assign new id
-    return new this.constructor(assignNewId(this.node.cloneNode(deep)))
+    // clone element
+    var nodeClone = this.node.cloneNode(deep);
+    if (assignNewIds) {
+      // assign new id
+      nodeClone = assignNewId(nodeClone);
+    }
+    return new this.constructor(nodeClone)
   }
 
   // Iterates over all children and invokes a given block
diff --git a/svg.js.d.ts b/svg.js.d.ts
index baf405e..843c309 100644
--- a/svg.js.d.ts
+++ b/svg.js.d.ts
@@ -933,7 +933,7 @@ declare module "@svgdotjs/svg.js" {
         addTo(parent: Dom | HTMLElement | string, i?: number): this

         children(): List<Element>;

         clear(): this;

-        clone(): this;

+        clone(deep?: boolean, assignNewIds?: boolean): this;

         each(block: (index: number, children: Element[]) => void, deep?: boolean): this;

         element(element: string, inherit?: object): this;

         first(): Element;

@@ -1182,7 +1182,7 @@ declare module "@svgdotjs/svg.js" {
         click(cb: Function | null): this;

         clipper(): ClipPath;

         clipWith(element: Element): this;

-        clone(): this;

+        clone(deep?: boolean, assignNewIds?: boolean): this;

         ctm(): Matrix;

         cx(): number;

         cx(x: number): this;