@svgedit/svgcanvas 7.2.7 → 7.4.2

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)
+      }
     })
   }
 

package/core/layer.js

@@ -40,19 +40,16 @@ class Layer {
       const layerTitle = svgdoc.createElementNS(NS.SVG, 'title')
       layerTitle.textContent = name
       this.group_.append(layerTitle)
-      if (group) {
-        group.insertAdjacentElement('afterend', this.group_)
-      } else {
-        svgElem.append(this.group_)
-      }
+
+      group ? group.insertAdjacentElement('afterend', this.group_) : svgElem.append(this.group_)
     }
 
     addLayerClass(this.group_)
     walkTree(this.group_, function (e) {
-      e.setAttribute('style', 'pointer-events:inherit')
+      e.style.pointerEvents = 'inherit'
     })
 
-    this.group_.setAttribute('style', svgElem ? 'pointer-events:all' : 'pointer-events:none')
+    this.group_.style.pointerEvents = svgElem ? 'all' : 'none'
   }
 
   /**
@@ -76,7 +73,7 @@ class Layer {
    * @returns {void}
    */
   activate () {
-    this.group_.setAttribute('style', 'pointer-events:all')
+    this.group_.style.pointerEvents = 'all'
   }
 
   /**
@@ -84,7 +81,7 @@ class Layer {
    * @returns {void}
    */
   deactivate () {
-    this.group_.setAttribute('style', 'pointer-events:none')
+    this.group_.style.pointerEvents = 'none'
   }
 
   /**
@@ -93,7 +90,7 @@ class Layer {
    * @returns {void}
    */
   setVisible (visible) {
-    const expected = visible === undefined || visible ? 'inline' : 'none'
+    const expected = (visible === undefined || visible) ? 'inline' : 'none'
     const oldDisplay = this.group_.getAttribute('display')
     if (oldDisplay !== expected) {
       this.group_.setAttribute('display', expected)
@@ -114,10 +111,7 @@ class Layer {
    */
   getOpacity () {
     const opacity = this.group_.getAttribute('opacity')
-    if (!opacity) {
-      return 1
-    }
-    return Number.parseFloat(opacity)
+    return opacity ? Number.parseFloat(opacity) : 1
   }
 
   /**
@@ -208,7 +202,7 @@ Layer.CLASS_NAME = 'layer'
 /**
  * @property {RegExp} CLASS_REGEX - Used to test presence of class Layer.CLASS_NAME
  */
-Layer.CLASS_REGEX = new RegExp('(\\s|^)' + Layer.CLASS_NAME + '(\\s|$)')
+Layer.CLASS_REGEX = new RegExp(`(\\s|^)${Layer.CLASS_NAME}(\\s|$)`)
 
 /**
  * Add class `Layer.CLASS_NAME` to the element (usually `class='layer'`).
@@ -216,12 +210,12 @@ Layer.CLASS_REGEX = new RegExp('(\\s|^)' + Layer.CLASS_NAME + '(\\s|$)')
  * @param {SVGGElement} elem - The SVG element to update
  * @returns {void}
  */
-function addLayerClass (elem) {
+const addLayerClass = (elem) => {
   const classes = elem.getAttribute('class')
   if (!classes || !classes.length) {
     elem.setAttribute('class', Layer.CLASS_NAME)
   } else if (!Layer.CLASS_REGEX.test(classes)) {
-    elem.setAttribute('class', classes + ' ' + Layer.CLASS_NAME)
+    elem.setAttribute('class', `${classes} ${Layer.CLASS_NAME}`)
   }
 }
 

package/core/math.js

@@ -20,6 +20,7 @@
  */
 
 import { NS } from './namespaces.js'
+import { warn } from '../common/logger.js'
 
 // Constants
 const NEAR_ZERO = 1e-10
@@ -27,6 +28,38 @@ const NEAR_ZERO = 1e-10
 // Create a throwaway SVG element for matrix operations
 const svg = document.createElementNS(NS.SVG, 'svg')
 
+const createTransformFromMatrix = (m) => {
+  const createFallback = (matrix) => {
+    const fallback = svg.createSVGMatrix()
+    Object.assign(fallback, {
+      a: matrix.a,
+      b: matrix.b,
+      c: matrix.c,
+      d: matrix.d,
+      e: matrix.e,
+      f: matrix.f
+    })
+    return fallback
+  }
+
+  try {
+    return svg.createSVGTransformFromMatrix(m)
+  } catch (e) {
+    const t = svg.createSVGTransform()
+    try {
+      t.setMatrix(m)
+      return t
+    } catch (err) {
+      try {
+        return svg.createSVGTransformFromMatrix(createFallback(m))
+      } catch (e2) {
+        t.setMatrix(createFallback(m))
+        return t
+      }
+    }
+  }
+}
+
 /**
  * Transforms a point by a given matrix without DOM calls.
  * @function transformPoint
@@ -56,7 +89,7 @@ export const getTransformList = elem => {
   if (elem.patternTransform?.baseVal) {
     return elem.patternTransform.baseVal
   }
-  console.warn('No transform list found. Check browser compatibility.', elem)
+  warn('No transform list found. Check browser compatibility.', elem, 'math')
 }
 
 /**
@@ -66,7 +99,12 @@ export const getTransformList = elem => {
  * @returns {boolean} True if it's an identity matrix (1,0,0,1,0,0)
  */
 export const isIdentity = m =>
-  m.a === 1 && m.b === 0 && m.c === 0 && m.d === 1 && m.e === 0 && m.f === 0
+  Math.abs(m.a - 1) < NEAR_ZERO &&
+  Math.abs(m.b) < NEAR_ZERO &&
+  Math.abs(m.c) < NEAR_ZERO &&
+  Math.abs(m.d - 1) < NEAR_ZERO &&
+  Math.abs(m.e) < NEAR_ZERO &&
+  Math.abs(m.f) < NEAR_ZERO
 
 /**
  * Multiplies multiple matrices together (m1 * m2 * ...).
@@ -76,22 +114,54 @@ export const isIdentity = m =>
  * @returns {SVGMatrix} The resulting matrix
  */
 export const matrixMultiply = (...args) => {
-  // If no matrices are given, return an identity matrix
   if (args.length === 0) {
     return svg.createSVGMatrix()
   }
 
-  const m = args.reduceRight((prev, curr) => curr.multiply(prev))
+  const normalizeNearZero = (matrix) => {
+    const props = ['a', 'b', 'c', 'd', 'e', 'f']
+    for (const prop of props) {
+      if (Math.abs(matrix[prop]) < NEAR_ZERO) {
+        matrix[prop] = 0
+      }
+    }
+    return matrix
+  }
 
-  // Round near-zero values to zero
-  if (Math.abs(m.a) < NEAR_ZERO) m.a = 0
-  if (Math.abs(m.b) < NEAR_ZERO) m.b = 0
-  if (Math.abs(m.c) < NEAR_ZERO) m.c = 0
-  if (Math.abs(m.d) < NEAR_ZERO) m.d = 0
-  if (Math.abs(m.e) < NEAR_ZERO) m.e = 0
-  if (Math.abs(m.f) < NEAR_ZERO) m.f = 0
+  if (typeof DOMMatrix === 'function' && typeof DOMMatrix.fromMatrix === 'function') {
+    const result = args.reduce(
+      (acc, curr) => acc.multiply(DOMMatrix.fromMatrix(curr)),
+      new DOMMatrix()
+    )
 
-  return m
+    const out = svg.createSVGMatrix()
+    Object.assign(out, {
+      a: result.a,
+      b: result.b,
+      c: result.c,
+      d: result.d,
+      e: result.e,
+      f: result.f
+    })
+
+    return normalizeNearZero(out)
+  }
+
+  let m = svg.createSVGMatrix()
+  for (const curr of args) {
+    const next = svg.createSVGMatrix()
+    Object.assign(next, {
+      a: m.a * curr.a + m.c * curr.b,
+      b: m.b * curr.a + m.d * curr.b,
+      c: m.a * curr.c + m.c * curr.d,
+      d: m.b * curr.c + m.d * curr.d,
+      e: m.a * curr.e + m.c * curr.f + m.e,
+      f: m.b * curr.e + m.d * curr.f + m.f
+    })
+    m = next
+  }
+
+  return normalizeNearZero(m)
 }
 
 /**
@@ -172,25 +242,34 @@ export const transformBox = (l, t, w, h, m) => {
  */
 export const transformListToTransform = (tlist, min = 0, max = null) => {
   if (!tlist) {
-    return svg.createSVGTransformFromMatrix(svg.createSVGMatrix())
+    return createTransformFromMatrix(svg.createSVGMatrix())
   }
 
   const start = Number.parseInt(min, 10)
   const end = Number.parseInt(max ?? tlist.numberOfItems - 1, 10)
-  const low = Math.min(start, end)
-  const high = Math.max(start, end)
+  const [low, high] = [Math.min(start, end), Math.max(start, end)]
 
-  let combinedMatrix = svg.createSVGMatrix()
+  const matrices = []
   for (let i = low; i <= high; i++) {
-    // If out of range, use identity
-    const currentMatrix =
-      i >= 0 && i < tlist.numberOfItems
-        ? tlist.getItem(i).matrix
-        : svg.createSVGMatrix()
-    combinedMatrix = matrixMultiply(combinedMatrix, currentMatrix)
+    const matrix = (i >= 0 && i < tlist.numberOfItems)
+      ? tlist.getItem(i).matrix
+      : svg.createSVGMatrix()
+    matrices.push(matrix)
   }
 
-  return svg.createSVGTransformFromMatrix(combinedMatrix)
+  const combinedMatrix = matrixMultiply(...matrices)
+
+  const out = svg.createSVGMatrix()
+  Object.assign(out, {
+    a: combinedMatrix.a,
+    b: combinedMatrix.b,
+    c: combinedMatrix.c,
+    d: combinedMatrix.d,
+    e: combinedMatrix.e,
+    f: combinedMatrix.f
+  })
+
+  return createTransformFromMatrix(out)
 }
 
 /**

package/core/namespaces.js

@@ -5,7 +5,7 @@
 */
 
 /**
-* Common namepaces constants in alpha order.
+* Common namespaces constants in alpha order.
 * @enum {string}
 * @type {PlainObject}
 * @memberof module:namespaces
@@ -29,12 +29,12 @@ export const NS = {
 
 /**
 * @function module:namespaces.getReverseNS
-* @returns {string} The NS with key values switched and lowercase
+* @returns {PlainObject<string, string>} The namespace URI map with values swapped to their lowercase keys
 */
-export const getReverseNS = function () {
+export const getReverseNS = () => {
   const reverseNS = {}
-  Object.entries(NS).forEach(([name, URI]) => {
+  for (const [name, URI] of Object.entries(NS)) {
     reverseNS[URI] = name.toLowerCase()
-  })
+  }
   return reverseNS
 }

package/core/paint.js

@@ -2,12 +2,95 @@
  *
  */
 export default class Paint {
+  static #normalizeAlpha (alpha) {
+    const numeric = Number(alpha)
+    if (!Number.isFinite(numeric)) return 100
+    return Math.min(100, Math.max(0, numeric))
+  }
+
+  static #normalizeSolidColor (color) {
+    if (color === null || color === undefined) return null
+    const str = String(color).trim()
+    if (!str) return null
+    if (str === 'none') return 'none'
+    return str.startsWith('#') ? str.slice(1) : str
+  }
+
+  static #extractHrefId (hrefAttr) {
+    if (!hrefAttr) return null
+    const href = String(hrefAttr).trim()
+    if (!href) return null
+    if (href.startsWith('#')) return href.slice(1)
+    const urlMatch = href.match(/url\(\s*['"]?#([^'")\s]+)['"]?\s*\)/)
+    if (urlMatch?.[1]) return urlMatch[1]
+    const hashIndex = href.lastIndexOf('#')
+    if (hashIndex >= 0 && hashIndex < href.length - 1) {
+      return href.slice(hashIndex + 1)
+    }
+    return null
+  }
+
+  static #resolveGradient (gradient) {
+    if (!gradient?.cloneNode) return null
+    const doc = gradient.ownerDocument || document
+    const visited = new Set()
+    const clone = gradient.cloneNode(true)
+
+    let refId = Paint.#extractHrefId(
+      clone.getAttribute('href') || clone.getAttribute('xlink:href')
+    )
+
+    while (refId && !visited.has(refId)) {
+      visited.add(refId)
+
+      const referenced = doc.getElementById(refId)
+      if (!referenced?.getAttribute) break
+
+      const cloneTag = String(clone.tagName || '').toLowerCase()
+      const referencedTag = String(referenced.tagName || '').toLowerCase()
+      if (
+        !['lineargradient', 'radialgradient'].includes(referencedTag) ||
+        referencedTag !== cloneTag
+      ) {
+        break
+      }
+
+      // Copy missing attributes from referenced gradient (matches SVG href inheritance).
+      for (const attr of referenced.attributes || []) {
+        const name = attr.name
+        if (name === 'id' || name === 'href' || name === 'xlink:href') continue
+        const current = clone.getAttribute(name)
+        if (current === null || current === '') {
+          clone.setAttribute(name, attr.value)
+        }
+      }
+
+      // If the referencing gradient has no stops, inherit stops from the referenced gradient.
+      if (clone.querySelectorAll('stop').length === 0) {
+        for (const stop of referenced.querySelectorAll?.('stop') || []) {
+          clone.append(stop.cloneNode(true))
+        }
+      }
+
+      // Prepare to continue resolving deeper links if present.
+      refId = Paint.#extractHrefId(
+        referenced.getAttribute('href') || referenced.getAttribute('xlink:href')
+      )
+    }
+
+    // The clone is now self-contained; remove any href.
+    clone.removeAttribute('href')
+    clone.removeAttribute('xlink:href')
+
+    return clone
+  }
+
   /**
    * @param {module:jGraduate.jGraduatePaintOptions} [opt]
    */
   constructor (opt) {
     const options = opt || {}
-    this.alpha = isNaN(options.alpha) ? 100 : options.alpha
+    this.alpha = Paint.#normalizeAlpha(options.alpha)
     // copy paint object
     if (options.copy) {
       /**
@@ -20,7 +103,7 @@ export default class Paint {
        * @name module:jGraduate~Paint#alpha
        * @type {Float}
        */
-      this.alpha = options.copy.alpha
+      this.alpha = Paint.#normalizeAlpha(options.copy.alpha)
       /**
        * Represents #RRGGBB hex of color.
        * @name module:jGraduate~Paint#solidColor
@@ -42,13 +125,17 @@ export default class Paint {
         case 'none':
           break
         case 'solidColor':
-          this.solidColor = options.copy.solidColor
+          this.solidColor = Paint.#normalizeSolidColor(options.copy.solidColor)
           break
         case 'linearGradient':
-          this.linearGradient = options.copy.linearGradient.cloneNode(true)
+          this.linearGradient = options.copy.linearGradient?.cloneNode
+            ? options.copy.linearGradient.cloneNode(true)
+            : null
           break
         case 'radialGradient':
-          this.radialGradient = options.copy.radialGradient.cloneNode(true)
+          this.radialGradient = options.copy.radialGradient?.cloneNode
+            ? options.copy.radialGradient.cloneNode(true)
+            : null
           break
       }
       // create linear gradient paint
@@ -56,33 +143,17 @@ export default class Paint {
       this.type = 'linearGradient'
       this.solidColor = null
       this.radialGradient = null
-      const hrefAttr =
-        options.linearGradient.getAttribute('href') ||
-        options.linearGradient.getAttribute('xlink:href')
-      if (hrefAttr) {
-        const xhref = document.getElementById(hrefAttr.replace(/^#/, ''))
-        this.linearGradient = xhref.cloneNode(true)
-      } else {
-        this.linearGradient = options.linearGradient.cloneNode(true)
-      }
+      this.linearGradient = Paint.#resolveGradient(options.linearGradient)
       // create linear gradient paint
     } else if (options.radialGradient) {
       this.type = 'radialGradient'
       this.solidColor = null
       this.linearGradient = null
-      const hrefAttr =
-        options.radialGradient.getAttribute('href') ||
-        options.radialGradient.getAttribute('xlink:href')
-      if (hrefAttr) {
-        const xhref = document.getElementById(hrefAttr.replace(/^#/, ''))
-        this.radialGradient = xhref.cloneNode(true)
-      } else {
-        this.radialGradient = options.radialGradient.cloneNode(true)
-      }
+      this.radialGradient = Paint.#resolveGradient(options.radialGradient)
       // create solid color paint
     } else if (options.solidColor) {
       this.type = 'solidColor'
-      this.solidColor = options.solidColor
+      this.solidColor = Paint.#normalizeSolidColor(options.solidColor)
       // create empty paint
     } else {
       this.type = 'none'