I am using SVG.js V3/svgdom and trying to get together a drawing system in which I have a series of javascript classes, each of which outputs a canvas group that can contain one or more svg elements. These classes maybe them be combined into other classes and then incorporated and positioned into the main canvas. Here is an example:
const window = require('svgdom')
const document = window.document
const {SVG, registerWindow} = require('@svgdotjs/svg.js')
registerWindow(window, document)
class Part1 {
constructor(params) {
this.canvas = params.canvas
this.width = params.width || 100
this.height = params.height || 50
}
get (){
let group = this.canvas.group()
group.rect(this.width / 2, this.height).fill('red').move(0, 0)
group.rect(this.width / 2, this.height).fill('green').move(this.width / 2, 0)
return group
}
}
class Part2 {
constructor(params) {
this.canvas = params.canvas
this.width = params.width || 100
this.height = params.height || 50
}
get (){
let group = this.canvas.group()
group.rect(this.width / 2, this.height).fill('yellow').move(0, 0)
group.rect(this.width / 2, this.height).fill('blue').move(this.width / 2, 0)
return group
}
}
class Combo1 {
constructor(params) {
this.canvas = params.canvas
}
get (){
let group = canvas.group()
const set1 = new Part1({canvas: canvas})
set1.get().move(0, 0)
group.add(set1)
const set2 = new Part2({canvas: canvas})
set2.get().move(0, set1.height)
group.add(set2)
return group
}
}
const canvas = SVG(document.documentElement).size(100, 150)
canvas.rect(100, 50).fill('orange').move(0, 0)
const combo1 = new Combo1({canvas: canvas}).get().move(0, 50)
canvas.add(combo1)
console.log(canvas.svg())
When running that I get this error (line 53 being the "const combo1 = new Combo1({canvas: canvas}).get().move(0, 50)" one):
D:\Learning\svg\node_modules\@svgdotjs\svg.js\dist\svg.node.js:3124
throw new Error('Getting bbox of element "' + el.node.nodeName + '" is not possible. ' + e.toString());
^
Error: Getting bbox of element "g" is not possible. TypeError: el.cloneNode is not a function
at getBox.call.el (D:\Learning\svg\node_modules\@svgdotjs\svg.js\dist\svg.node.js:3124:13)
at G.getBox (D:\Learning\svg\node_modules\@svgdotjs\svg.js\dist\svg.node.js:3110:11)
at G.bbox (D:\Learning\svg\node_modules\@svgdotjs\svg.js\dist\svg.node.js:3117:25)
at G.move (D:\Learning\svg\node_modules\@svgdotjs\svg.js\dist\svg.node.js:7706:33)
at Object.<anonymous> (D:\Learning\svg\test.js:53:51)
at Module._compile (internal/modules/cjs/loader.js:776:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
Could someone shed some light as to what the problem is?