@svgedit/svgcanvas 7.2.6 → 7.4.1

package/core/event.js

@@ -12,7 +12,7 @@ import {
   convertAttrs
 } from './units.js'
 import {
-  transformPoint, hasMatrixTransform, getMatrix, snapToAngle, getTransformList
+  transformPoint, hasMatrixTransform, getMatrix, snapToAngle, getTransformList, transformListToTransform
 } from './math.js'
 import * as draw from './draw.js'
 import * as pathModule from './path.js'
@@ -20,7 +20,9 @@ import * as hstry from './history.js'
 import { findPos } from '../../svgcanvas/common/util.js'
 
 const {
-  InsertElementCommand
+  InsertElementCommand,
+  BatchCommand,
+  ChangeElementCommand
 } = hstry
 
 let svgCanvas = null
@@ -84,6 +86,7 @@ const updateTransformList = (svgRoot, element, dx, dy) => {
   const xform = svgRoot.createSVGTransform()
   xform.setTranslate(dx, dy)
   const tlist = getTransformList(element)
+  if (!tlist) { return }
   if (tlist.numberOfItems) {
     const firstItem = tlist.getItem(0)
     if (firstItem.type === 2) { // SVG_TRANSFORM_TRANSLATE = 2
@@ -145,6 +148,25 @@ const mouseMoveEvent = (evt) => {
   let tlist
   switch (svgCanvas.getCurrentMode()) {
     case 'select': {
+      // Insert dummy transform on first mouse move (drag start), not on click.
+      // This avoids creating multiple transforms that trigger unwanted flattening.
+      if (!svgCanvas.hasDragStartTransform && selectedElements.length > 0) {
+        // Store original transforms BEFORE adding the drag transform (for undo)
+        svgCanvas.dragStartTransforms = new Map()
+        for (const selectedElement of selectedElements) {
+          if (!selectedElement) { continue }
+          // Capture the transform attribute before we modify it
+          svgCanvas.dragStartTransforms.set(selectedElement, selectedElement.getAttribute('transform') || '')
+          const slist = getTransformList(selectedElement)
+          if (!slist) { continue }
+          if (slist.numberOfItems) {
+            slist.insertItemBefore(svgRoot.createSVGTransform(), 0)
+          } else {
+            slist.appendItem(svgRoot.createSVGTransform())
+          }
+        }
+        svgCanvas.hasDragStartTransform = true
+      }
       // we temporarily use a translate on the element(s) being dragged
       // this transform is removed upon mousing up and the element is
       // relocated to the new location
@@ -222,6 +244,7 @@ const mouseMoveEvent = (evt) => {
       // while the mouse is down, when mouse goes up, we use this to recalculate
       // the shape's coordinates
       tlist = getTransformList(selected)
+      if (!tlist) { break }
       const hasMatrix = hasMatrixTransform(tlist)
       box = hasMatrix ? svgCanvas.getInitBbox() : getBBox(selected)
       let left = box.x
@@ -548,10 +571,21 @@ const mouseMoveEvent = (evt) => {
 *
 * @returns {void}
 */
-const mouseOutEvent = () => {
+const mouseOutEvent = (evt) => {
   const { $id } = svgCanvas
   if (svgCanvas.getCurrentMode() !== 'select' && svgCanvas.getStarted()) {
-    const event = new Event('mouseup')
+    const event = new MouseEvent('mouseup', {
+      bubbles: true,
+      cancelable: true,
+      clientX: evt?.clientX ?? 0,
+      clientY: evt?.clientY ?? 0,
+      button: evt?.button ?? 0,
+      buttons: evt?.buttons ?? 0,
+      altKey: evt?.altKey ?? false,
+      ctrlKey: evt?.ctrlKey ?? false,
+      metaKey: evt?.metaKey ?? false,
+      shiftKey: evt?.shiftKey ?? false
+    })
     $id('svgcanvas').dispatchEvent(event)
   }
 }
@@ -637,10 +671,71 @@ const mouseUpEvent = (evt) => {
           }
           svgCanvas.selectorManager.requestSelector(selected).showGrips(true)
         }
-        // always recalculate dimensions to strip off stray identity transforms
-        svgCanvas.recalculateAllSelectedDimensions()
         // if it was being dragged/resized
         if (realX !== svgCanvas.getRStartX() || realY !== svgCanvas.getRStartY()) {
+          // Only recalculate dimensions after actual dragging/resizing to avoid
+          // unwanted transform flattening on simple clicks
+
+          // Create a single batch command for all moved elements
+          const batchCmd = new BatchCommand('position')
+
+          selectedElements.forEach((elem) => {
+            if (!elem) return
+
+            const tlist = getTransformList(elem)
+            if (!tlist || tlist.numberOfItems === 0) return
+
+            // Get the transform from BEFORE the drag started
+            const oldTransform = svgCanvas.dragStartTransforms?.get(elem) || ''
+
+            // Check if the first transform is a translate (the drag transform we added)
+            const firstTransform = tlist.getItem(0)
+            const hasDragTranslate = firstTransform.type === 2 // SVG_TRANSFORM_TRANSLATE
+
+            // For groups, we always consolidate the transforms (recalculateDimensions returns null for groups)
+            const isGroup = elem.tagName === 'g' || elem.tagName === 'a'
+
+            // If element has 2+ transforms, or is a group with a drag translate, consolidate
+            if ((tlist.numberOfItems > 1 && hasDragTranslate) || (isGroup && hasDragTranslate)) {
+              const consolidatedMatrix = transformListToTransform(tlist).matrix
+
+              // Clear the transform list
+              while (tlist.numberOfItems > 0) {
+                tlist.removeItem(0)
+              }
+
+              // Add the consolidated matrix
+              const newTransform = svgCanvas.getSvgRoot().createSVGTransform()
+              newTransform.setMatrix(consolidatedMatrix)
+              tlist.appendItem(newTransform)
+
+              // Record the transform change for undo
+              batchCmd.addSubCommand(new ChangeElementCommand(elem, { transform: oldTransform }))
+              return
+            }
+
+            // For non-group elements with simple transforms, try recalculateDimensions
+            const cmd = svgCanvas.recalculateDimensions(elem)
+            if (cmd) {
+              batchCmd.addSubCommand(cmd)
+            } else {
+              // recalculateDimensions returned null
+              // Check if the transform actually changed and record it manually
+              const newTransform = elem.getAttribute('transform') || ''
+              if (newTransform !== oldTransform) {
+                batchCmd.addSubCommand(new ChangeElementCommand(elem, { transform: oldTransform }))
+              }
+            }
+          })
+
+          if (!batchCmd.isEmpty()) {
+            svgCanvas.addCommandToHistory(batchCmd)
+          }
+
+          // Clear the stored transforms AND reset the flag together
+          svgCanvas.dragStartTransforms = null
+          svgCanvas.hasDragStartTransform = false
+
           const len = selectedElements.length
           for (let i = 0; i < len; ++i) {
             if (!selectedElements[i]) { break }
@@ -799,6 +894,8 @@ const mouseUpEvent = (evt) => {
       svgCanvas.textActions.mouseUp(evt, mouseX, mouseY)
       break
     case 'rotate': {
+      svgCanvas.hasDragStartTransform = false
+      svgCanvas.dragStartTransforms = null
       keep = true
       element = null
       svgCanvas.setCurrentMode('select')
@@ -812,8 +909,13 @@ const mouseUpEvent = (evt) => {
       break
     } default:
       // This could occur in an extension
+      svgCanvas.hasDragStartTransform = false
+      svgCanvas.dragStartTransforms = null
       break
   }
+  // Reset drag flag after any mouseUp
+  svgCanvas.hasDragStartTransform = false
+  svgCanvas.dragStartTransforms = null
 
   /**
 * The main (left) mouse button is released (anywhere).
@@ -979,7 +1081,13 @@ const mouseDownEvent = (evt) => {
     svgCanvas.cloneSelectedElements(0, 0)
   }
 
-  svgCanvas.setRootSctm($id('svgcontent').querySelector('g').getScreenCTM().inverse())
+  // Get screenCTM from the first child group of svgcontent
+  // Note: svgcontent itself has x/y offset attributes, so we use its first child
+  const svgContent = $id('svgcontent')
+  const rootGroup = svgContent?.querySelector('g')
+  const screenCTM = rootGroup?.getScreenCTM?.()
+  if (!screenCTM) { return }
+  svgCanvas.setRootSctm(screenCTM.inverse())
 
   const pt = transformPoint(evt.clientX, evt.clientY, svgCanvas.getrootSctm())
   const mouseX = pt.x * zoom
@@ -1039,12 +1147,22 @@ const mouseDownEvent = (evt) => {
   svgCanvas.setStartTransform(mouseTarget.getAttribute('transform'))
 
   const tlist = getTransformList(mouseTarget)
-  // consolidate transforms using standard SVG but keep the transformation used for the move/scale
-  if (tlist.numberOfItems > 1) {
-    const firstTransform = tlist.getItem(0)
-    tlist.removeItem(0)
-    tlist.consolidate()
-    tlist.insertItemBefore(firstTransform, 0)
+
+  // Consolidate transforms for non-group elements to simplify dragging
+  // For elements with multiple transforms (e.g., after ungrouping), consolidate them
+  // into a single matrix so the dummy translate can be properly applied during drag
+  if (tlist?.numberOfItems > 1 && mouseTarget.tagName !== 'g' && mouseTarget.tagName !== 'a') {
+    // Compute the consolidated matrix from all transforms
+    const consolidatedMatrix = transformListToTransform(tlist).matrix
+
+    // Clear the transform list and add a single matrix transform
+    while (tlist.numberOfItems > 0) {
+      tlist.removeItem(0)
+    }
+
+    const newTransform = svgCanvas.getSvgRoot().createSVGTransform()
+    newTransform.setMatrix(consolidatedMatrix)
+    tlist.appendItem(newTransform)
   }
   switch (svgCanvas.getCurrentMode()) {
     case 'select':
@@ -1067,19 +1185,9 @@ const mouseDownEvent = (evt) => {
         }
         // else if it's a path, go into pathedit mode in mouseup
 
-        if (!rightClick) {
-          // insert a dummy transform so if the element(s) are moved it will have
-          // a transform to use for its translate
-          for (const selectedElement of selectedElements) {
-            if (!selectedElement) { continue }
-            const slist = getTransformList(selectedElement)
-            if (slist.numberOfItems) {
-              slist.insertItemBefore(svgRoot.createSVGTransform(), 0)
-            } else {
-              slist.appendItem(svgRoot.createSVGTransform())
-            }
-          }
-        }
+        // Note: Dummy transform insertion moved to mouseMove to avoid triggering
+        // recalculateDimensions on simple clicks. The dummy transform is only needed
+        // when actually starting a drag operation.
       } else if (!rightClick) {
         svgCanvas.clearSelection()
         svgCanvas.setCurrentMode('multiselect')
@@ -1105,13 +1213,14 @@ const mouseDownEvent = (evt) => {
       }
       assignAttributes(svgCanvas.getRubberBox(), {
         x: realX * zoom,
-        y: realX * zoom,
+        y: realY * zoom,
         width: 0,
         height: 0,
         display: 'inline'
       }, 100)
       break
     case 'resize': {
+      if (!tlist) { break }
       svgCanvas.setStarted(true)
       svgCanvas.setStartX(x)
       svgCanvas.setStartY(y)
@@ -1339,7 +1448,13 @@ const DOMMouseScrollEvent = (e) => {
 
   e.preventDefault()
 
-  svgCanvas.setRootSctm($id('svgcontent').querySelector('g').getScreenCTM().inverse())
+  // Get screenCTM from the first child group of svgcontent
+  // Note: svgcontent itself has x/y offset attributes, so we use its first child
+  const svgContent = $id('svgcontent')
+  const rootGroup = svgContent?.querySelector('g')
+  const screenCTM = rootGroup?.getScreenCTM?.()
+  if (!screenCTM) { return }
+  svgCanvas.setRootSctm(screenCTM.inverse())
 
   const workarea = document.getElementById('workarea')
   const scrbar = 15

package/core/history.js

@@ -6,6 +6,7 @@
  * @copyright 2010 Jeff Schiller
  */
 
+import { NS } from './namespaces.js'
 import { getHref, setHref, getRotationAngle, getBBox } from './utilities.js'
 
 /**
@@ -140,7 +141,7 @@ export class MoveElementCommand extends Command {
   constructor (elem, oldNextSibling, oldParent, text) {
     super()
     this.elem = elem
-    this.text = text ? ('Move ' + elem.tagName + ' to ' + text) : ('Move ' + elem.tagName)
+    this.text = text ? `Move ${elem.tagName} to ${text}` : `Move ${elem.tagName}`
     this.oldNextSibling = oldNextSibling
     this.oldParent = oldParent
     this.newNextSibling = elem.nextSibling
@@ -155,7 +156,11 @@ export class MoveElementCommand extends Command {
   */
   apply (handler) {
     super.apply(handler, () => {
-      this.elem = this.newParent.insertBefore(this.elem, this.newNextSibling)
+      const reference =
+        this.newNextSibling && this.newNextSibling.parentNode === this.newParent
+          ? this.newNextSibling
+          : null
+      this.elem = this.newParent.insertBefore(this.elem, reference)
     })
   }
 
@@ -167,7 +172,11 @@ export class MoveElementCommand extends Command {
   */
   unapply (handler) {
     super.unapply(handler, () => {
-      this.elem = this.oldParent.insertBefore(this.elem, this.oldNextSibling)
+      const reference =
+        this.oldNextSibling && this.oldNextSibling.parentNode === this.oldParent
+          ? this.oldNextSibling
+          : null
+      this.elem = this.oldParent.insertBefore(this.elem, reference)
     })
   }
 }
@@ -184,7 +193,7 @@ export class InsertElementCommand extends Command {
   constructor (elem, text) {
     super()
     this.elem = elem
-    this.text = text || ('Create ' + elem.tagName)
+    this.text = text || `Create ${elem.tagName}`
     this.parent = elem.parentNode
     this.nextSibling = this.elem.nextSibling
   }
@@ -197,7 +206,11 @@ export class InsertElementCommand extends Command {
   */
   apply (handler) {
     super.apply(handler, () => {
-      this.elem = this.parent.insertBefore(this.elem, this.nextSibling)
+      const reference =
+        this.nextSibling && this.nextSibling.parentNode === this.parent
+          ? this.nextSibling
+          : null
+      this.elem = this.parent.insertBefore(this.elem, reference)
     })
   }
 
@@ -229,7 +242,7 @@ export class RemoveElementCommand extends Command {
   constructor (elem, oldNextSibling, oldParent, text) {
     super()
     this.elem = elem
-    this.text = text || ('Delete ' + elem.tagName)
+    this.text = text || `Delete ${elem.tagName}`
     this.nextSibling = oldNextSibling
     this.parent = oldParent
   }
@@ -255,10 +268,11 @@ export class RemoveElementCommand extends Command {
   */
   unapply (handler) {
     super.unapply(handler, () => {
-      if (!this.nextSibling) {
-        console.error('Reference element was lost')
-      }
-      this.parent.insertBefore(this.elem, this.nextSibling) // Don't use `before` or `prepend` as `this.nextSibling` may be `null`
+      const reference =
+        this.nextSibling && this.nextSibling.parentNode === this.parent
+          ? this.nextSibling
+          : null
+      this.parent.insertBefore(this.elem, reference) // Don't use `before` or `prepend` as `reference` may be `null`
     })
   }
 }
@@ -284,7 +298,7 @@ export class ChangeElementCommand extends Command {
   constructor (elem, attrs, text) {
     super()
     this.elem = elem
-    this.text = text ? ('Change ' + elem.tagName + ' ' + text) : ('Change ' + elem.tagName)
+    this.text = text ? `Change ${elem.tagName} ${text}` : `Change ${elem.tagName}`
     this.newValues = {}
     this.oldValues = attrs
     for (const attr in attrs) {
@@ -308,19 +322,21 @@ export class ChangeElementCommand extends Command {
     super.apply(handler, () => {
       let bChangedTransform = false
       Object.entries(this.newValues).forEach(([attr, value]) => {
-        if (value) {
-          if (attr === '#text') {
-            this.elem.textContent = value
-          } else if (attr === '#href') {
-            setHref(this.elem, value)
+        const isNullishOrEmpty = value === null || value === undefined || value === ''
+        if (attr === '#text') {
+          this.elem.textContent = value === null || value === undefined ? '' : String(value)
+        } else if (attr === '#href') {
+          if (isNullishOrEmpty) {
+            this.elem.removeAttribute('href')
+            this.elem.removeAttributeNS(NS.XLINK, 'href')
           } else {
-            this.elem.setAttribute(attr, value)
+            setHref(this.elem, String(value))
           }
-        } else if (attr === '#text') {
-          this.elem.textContent = ''
-        } else {
+        } else if (isNullishOrEmpty) {
           this.elem.setAttribute(attr, '')
           this.elem.removeAttribute(attr)
+        } else {
+          this.elem.setAttribute(attr, value)
         }
 
         if (attr === 'transform') { bChangedTransform = true }
@@ -331,6 +347,7 @@ export class ChangeElementCommand extends Command {
         const angle = getRotationAngle(this.elem)
         if (angle) {
           const bbox = getBBox(this.elem)
+          if (!bbox) return
           const cx = bbox.x + bbox.width / 2
           const cy = bbox.y + bbox.height / 2
           const rotate = ['rotate(', angle, ' ', cx, ',', cy, ')'].join('')
@@ -352,18 +369,20 @@ export class ChangeElementCommand extends Command {
     super.unapply(handler, () => {
       let bChangedTransform = false
       Object.entries(this.oldValues).forEach(([attr, value]) => {
-        if (value) {
-          if (attr === '#text') {
-            this.elem.textContent = value
-          } else if (attr === '#href') {
-            setHref(this.elem, value)
+        const isNullishOrEmpty = value === null || value === undefined || value === ''
+        if (attr === '#text') {
+          this.elem.textContent = value === null || value === undefined ? '' : String(value)
+        } else if (attr === '#href') {
+          if (isNullishOrEmpty) {
+            this.elem.removeAttribute('href')
+            this.elem.removeAttributeNS(NS.XLINK, 'href')
           } else {
-            this.elem.setAttribute(attr, value)
+            setHref(this.elem, String(value))
           }
-        } else if (attr === '#text') {
-          this.elem.textContent = ''
-        } else {
+        } else if (isNullishOrEmpty) {
           this.elem.removeAttribute(attr)
+        } else {
+          this.elem.setAttribute(attr, value)
         }
         if (attr === 'transform') { bChangedTransform = true }
       })
@@ -372,6 +391,7 @@ export class ChangeElementCommand extends Command {
         const angle = getRotationAngle(this.elem)
         if (angle) {
           const bbox = getBBox(this.elem)
+          if (!bbox) return
           const cx = bbox.x + bbox.width / 2
           const cy = bbox.y + bbox.height / 2
           const rotate = ['rotate(', angle, ' ', cx, ',', cy, ')'].join('')
@@ -425,7 +445,7 @@ export class BatchCommand extends Command {
   */
   unapply (handler) {
     super.unapply(handler, () => {
-      this.stack.reverse().forEach((stackItem) => {
+      [...this.stack].reverse().forEach((stackItem) => {
         console.assert(stackItem, 'stack item should not be null')
         stackItem && stackItem.unapply(handler)
       })
@@ -602,7 +622,7 @@ export class UndoManager {
     const p = this.undoChangeStackPointer--
     const changeset = this.undoableChangeStack[p]
     const { attrName } = changeset
-    const batchCmd = new BatchCommand('Change ' + attrName)
+    const batchCmd = new BatchCommand(`Change ${attrName}`)
     let i = changeset.elements.length
     while (i--) {
       const elem = changeset.elements[i]

package/core/historyrecording.js

@@ -79,7 +79,9 @@ class HistoryRecordingService {
       this.batchCommandStack_.pop()
       const { length: len } = this.batchCommandStack_
       this.currentBatchCommand_ = len ? this.batchCommandStack_[len - 1] : null
-      this.addCommand_(batchCommand)
+      if (!batchCommand.isEmpty()) {
+        this.addCommand_(batchCommand)
+      }
     }
     return this
   }
@@ -157,5 +159,5 @@ class HistoryRecordingService {
  * @memberof module:history.HistoryRecordingService
  * @property {module:history.HistoryRecordingService} NO_HISTORY - Singleton that can be passed to functions that record history, but the caller requires that no history be recorded.
  */
-HistoryRecordingService.NO_HISTORY = new HistoryRecordingService()
+HistoryRecordingService.NO_HISTORY = new HistoryRecordingService(null)
 export default HistoryRecordingService

package/core/json.js

@@ -27,7 +27,7 @@ let svgdoc_ = null
 */
 export const init = (canvas) => {
   svgCanvas = canvas
-  svgdoc_ = canvas.getDOMDocument()
+  svgdoc_ = canvas.getDOMDocument?.() || (typeof document !== 'undefined' ? document : null)
 }
 /**
 * @function module:json.getJsonFromSvgElements Iterate element and return json format
@@ -35,8 +35,12 @@ export const init = (canvas) => {
 * @returns {svgRootElement}
 */
 export const getJsonFromSvgElements = (data) => {
+  if (!data) return null
+
   // Text node
-  if (data.nodeType === 3) return data.nodeValue
+  if (data.nodeType === 3 || data.nodeType === 4) return data.nodeValue
+  // Ignore non-element nodes (e.g., comments)
+  if (data.nodeType !== 1) return null
 
   const retval = {
     element: data.tagName,
@@ -46,13 +50,25 @@ export const getJsonFromSvgElements = (data) => {
   }
 
   // Iterate attributes
-  for (let i = 0, attr; (attr = data.attributes[i]); i++) {
-    retval.attr[attr.name] = attr.value
+  const attributes = data.attributes
+  if (attributes) {
+    for (let i = 0; i < attributes.length; i++) {
+      const attr = attributes[i]
+      if (!attr) continue
+      retval.attr[attr.name] = attr.value
+    }
   }
 
   // Iterate children
-  for (let i = 0, node; (node = data.childNodes[i]); i++) {
-    retval.children[i] = getJsonFromSvgElements(node)
+  const childNodes = data.childNodes
+  if (childNodes) {
+    for (let i = 0; i < childNodes.length; i++) {
+      const node = childNodes[i]
+      const child = getJsonFromSvgElements(node)
+      if (child !== null && child !== undefined) {
+        retval.children.push(child)
+      }
+    }
   }
 
   return retval
@@ -65,11 +81,29 @@ export const getJsonFromSvgElements = (data) => {
 */
 
 export const addSVGElementsFromJson = (data) => {
+  if (!svgdoc_) { return null }
+  if (data === null || data === undefined) return svgdoc_.createTextNode('')
   if (typeof data === 'string') return svgdoc_.createTextNode(data)
 
-  let shape = getElement(data.attr.id)
+  const attrs = data.attr || {}
+  const id = attrs.id
+  let shape = null
+  if (typeof id === 'string' && id) {
+    try {
+      shape = getElement(id)
+    } catch (e) {
+      // Ignore (CSS selector may be invalid); fallback to getElementById below
+    }
+    if (!shape) {
+      const byId = svgdoc_.getElementById?.(id)
+      const svgRoot = svgCanvas?.getSvgRoot?.()
+      if (byId && (!svgRoot || svgRoot.contains(byId))) {
+        shape = byId
+      }
+    }
+  }
   // if shape is a path but we need to create a rect/ellipse, then remove the path
-  const currentLayer = svgCanvas.getDrawing().getCurrentLayer()
+  const currentLayer = svgCanvas?.getDrawing?.()?.getCurrentLayer?.()
   if (shape && data.element !== shape.tagName) {
     shape.remove()
     shape = null
@@ -81,8 +115,10 @@ export const addSVGElementsFromJson = (data) => {
       (svgCanvas.getCurrentGroup() || currentLayer).append(shape)
     }
   }
-  const curShape = svgCanvas.getCurShape()
+  const curShape = svgCanvas.getCurShape?.() || {}
   if (data.curStyles) {
+    const curOpacity = Number(curShape.opacity)
+    const opacity = Number.isFinite(curOpacity) ? (curOpacity / 2) : 0.5
     assignAttributes(shape, {
       fill: curShape.fill,
       stroke: curShape.stroke,
@@ -92,17 +128,23 @@ export const addSVGElementsFromJson = (data) => {
       'stroke-linecap': curShape.stroke_linecap,
       'stroke-opacity': curShape.stroke_opacity,
       'fill-opacity': curShape.fill_opacity,
-      opacity: curShape.opacity / 2,
+      opacity,
       style: 'pointer-events:inherit'
     }, 100)
   }
-  assignAttributes(shape, data.attr, 100)
+  assignAttributes(shape, attrs, 100)
   cleanupElement(shape)
 
   // Children
   if (data.children) {
+    while (shape.firstChild) {
+      shape.firstChild.remove()
+    }
     data.children.forEach((child) => {
-      shape.append(addSVGElementsFromJson(child))
+      const childNode = addSVGElementsFromJson(child)
+      if (childNode) {
+        shape.append(childNode)
+      }
     })
   }