@svgedit/svgcanvas 7.2.7 → 7.4.1

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'

package/core/paste-elem.js

@@ -1,5 +1,6 @@
 import {
-  getStrokedBBoxDefaultVisible
+  getStrokedBBoxDefaultVisible,
+  getUrlFromAttr
 } from './utilities.js'
 import * as hstry from './history.js'
 
@@ -27,11 +28,15 @@ export const init = (canvas) => {
 * @fires module:svgcanvas.SvgCanvas#event:ext_IDsUpdated
 * @returns {void}
 */
-export const pasteElementsMethod = function (type, x, y) {
-  let clipb = JSON.parse(sessionStorage.getItem(svgCanvas.getClipboardID()))
-  if (!clipb) return
-  let len = clipb.length
-  if (!len) return
+export const pasteElementsMethod = (type, x, y) => {
+  const rawClipboard = sessionStorage.getItem(svgCanvas.getClipboardID())
+  let clipb
+  try {
+    clipb = JSON.parse(rawClipboard)
+  } catch {
+    return
+  }
+  if (!Array.isArray(clipb) || !clipb.length) return
 
   const pasted = []
   const batchCmd = new BatchCommand('Paste elements')
@@ -50,7 +55,7 @@ export const pasteElementsMethod = function (type, x, y) {
 * @param {module:svgcanvas.SVGAsJSON} elem
 * @returns {void}
 */
-  function checkIDs (elem) {
+  const checkIDs = (elem) => {
     if (elem.attr?.id) {
       changedIDs[elem.attr.id] = svgCanvas.getNextId()
       elem.attr.id = changedIDs[elem.attr.id]
@@ -59,6 +64,35 @@ export const pasteElementsMethod = function (type, x, y) {
   }
   clipb.forEach((elem) => checkIDs(elem))
 
+  // Update any internal references in the clipboard to match the new IDs.
+  /**
+  * @param {module:svgcanvas.SVGAsJSON} elem
+  * @returns {void}
+  */
+  const remapReferences = (elem) => {
+    const attrs = elem?.attr
+    if (attrs) {
+      for (const [attrName, attrVal] of Object.entries(attrs)) {
+        if (typeof attrVal !== 'string' || !attrVal) continue
+        if ((attrName === 'href' || attrName === 'xlink:href') && attrVal.startsWith('#')) {
+          const refId = attrVal.slice(1)
+          if (refId in changedIDs) {
+            attrs[attrName] = `#${changedIDs[refId]}`
+          }
+        }
+        const url = getUrlFromAttr(attrVal)
+        if (url) {
+          const refId = url.slice(1)
+          if (refId in changedIDs) {
+            attrs[attrName] = attrVal.replace(url, `#${changedIDs[refId]}`)
+          }
+        }
+      }
+    }
+    if (elem.children) elem.children.forEach((child) => remapReferences(child))
+  }
+  clipb.forEach((elem) => remapReferences(elem))
+
   // Give extensions like the connector extension a chance to reflect new IDs and remove invalid elements
   /**
 * Triggered when `pasteElements` is called from a paste action (context menu or key).
@@ -77,12 +111,14 @@ export const pasteElementsMethod = function (type, x, y) {
 
     extChanges.remove.forEach(function (removeID) {
       clipb = clipb.filter(function (clipBoardItem) {
-        return clipBoardItem.attr.id !== removeID
+        return clipBoardItem?.attr?.id !== removeID
       })
     })
   })
 
   // Move elements to lastClickPoint
+  let len = clipb.length
+  if (!len) return
   while (len--) {
     const elem = clipb[len]
     if (!elem) { continue }
@@ -94,6 +130,7 @@ export const pasteElementsMethod = function (type, x, y) {
     svgCanvas.restoreRefElements(copy)
   }
 
+  if (!pasted.length) return
   svgCanvas.selectOnly(pasted)
 
   if (type !== 'in_place') {
@@ -108,18 +145,20 @@ export const pasteElementsMethod = function (type, x, y) {
     }
 
     const bbox = getStrokedBBoxDefaultVisible(pasted)
-    const cx = ctrX - (bbox.x + bbox.width / 2)
-    const cy = ctrY - (bbox.y + bbox.height / 2)
-    const dx = []
-    const dy = []
-
-    pasted.forEach(function (_item) {
-      dx.push(cx)
-      dy.push(cy)
-    })
+    if (bbox && Number.isFinite(ctrX) && Number.isFinite(ctrY)) {
+      const cx = ctrX - (bbox.x + bbox.width / 2)
+      const cy = ctrY - (bbox.y + bbox.height / 2)
+      const dx = []
+      const dy = []
+
+      pasted.forEach(function (_item) {
+        dx.push(cx)
+        dy.push(cy)
+      })
 
-    const cmd = svgCanvas.moveSelectedElements(dx, dy, false)
-    if (cmd) batchCmd.addSubCommand(cmd)
+      const cmd = svgCanvas.moveSelectedElements(dx, dy, false)
+      if (cmd) batchCmd.addSubCommand(cmd)
+    }
   }
 
   svgCanvas.addCommandToHistory(batchCmd)