@svgedit/svgcanvas 7.2.7 → 7.4.1

package/core/svg-exec.js

@@ -8,6 +8,7 @@
 import { jsPDF as JsPDF } from 'jspdf'
 import 'svg2pdf.js'
 import * as history from './history.js'
+import { error } from '../common/logger.js'
 import {
   text2xml,
   cleanupElement,
@@ -131,7 +132,7 @@ const svgToString = (elem, indent) => {
   const nsMap = svgCanvas.getNsMap()
   const out = []
   const unit = curConfig.baseUnit
-  const unitRe = new RegExp('^-?[\\d\\.]+' + unit + '$')
+  const unitRe = new RegExp(`^-?[\\d\\.]+${unit}$`)
 
   if (elem) {
     cleanupElement(elem)
@@ -164,7 +165,10 @@ const svgToString = (elem, indent) => {
       // }
       if (curConfig.dynamicOutput) {
         vb = elem.getAttribute('viewBox')
-        out.push(' viewBox="' + vb + '" xmlns="' + NS.SVG + '"')
+        if (!vb) {
+          vb = [0, 0, res.w, res.h].join(' ')
+        }
+        out.push(` viewBox="${vb}" xmlns="${NS.SVG}"`)
       } else {
         if (unit !== 'px') {
           res.w = convertUnit(res.w, unit) + unit
@@ -193,14 +197,14 @@ const svgToString = (elem, indent) => {
           nsMap[uri] !== 'xml'
         ) {
           nsuris[uri] = true
-          out.push(' xmlns:' + nsMap[uri] + '="' + uri + '"')
+          out.push(` xmlns:${nsMap[uri]}="${uri}"`)
         }
         if (el.attributes.length > 0) {
           for (const [, attr] of Object.entries(el.attributes)) {
             const u = attr.namespaceURI
             if (u && !nsuris[u] && nsMap[u] !== 'xmlns' && nsMap[u] !== 'xml') {
               nsuris[u] = true
-              out.push(' xmlns:' + nsMap[u] + '="' + u + '"')
+              out.push(` xmlns:${nsMap[u]}="${u}"`)
             }
           }
         }
@@ -469,7 +473,7 @@ const setSvgString = (xmlString, preventUndo) => {
 
     Object.entries(ids).forEach(([key, value]) => {
       if (value > 1) {
-        const nodes = content.querySelectorAll('[id="' + key + '"]')
+        const nodes = content.querySelectorAll(`[id="${key}"]`)
         for (let i = 1; i < nodes.length; i++) {
           nodes[i].setAttribute('id', svgCanvas.getNextId())
         }
@@ -525,14 +529,20 @@ const setSvgString = (xmlString, preventUndo) => {
     if (content.getAttribute('viewBox')) {
       const viBox = content.getAttribute('viewBox')
       const vb = viBox.split(/[ ,]+/)
-      attrs.width = vb[2]
-      attrs.height = vb[3]
+      const vbWidth = Number(vb[2])
+      const vbHeight = Number(vb[3])
+      if (Number.isFinite(vbWidth)) {
+        attrs.width = vbWidth
+      }
+      if (Number.isFinite(vbHeight)) {
+        attrs.height = vbHeight
+      }
       // handle content that doesn't have a viewBox
     } else {
       ;['width', 'height'].forEach(dim => {
         // Set to 100 if not given
         const val = content.getAttribute(dim) || '100%'
-        if (String(val).substr(-1) === '%') {
+        if (String(val).slice(-1) === '%') {
           // Use user units if percentage given
           percs = true
         } else {
@@ -558,16 +568,25 @@ const setSvgString = (xmlString, preventUndo) => {
     // Percentage width/height, so let's base it on visible elements
     if (percs) {
       const bb = getStrokedBBoxDefaultVisible()
-      attrs.width = bb.width + bb.x
-      attrs.height = bb.height + bb.y
+      if (bb && typeof bb === 'object') {
+        attrs.width = bb.width + bb.x
+        attrs.height = bb.height + bb.y
+      } else {
+        if (attrs.width === null || attrs.width === undefined) {
+          attrs.width = 100
+        }
+        if (attrs.height === null || attrs.height === undefined) {
+          attrs.height = 100
+        }
+      }
     }
 
     // Just in case negative numbers are given or
     // result from the percs calculation
-    if (attrs.width <= 0) {
+    if (!Number.isFinite(attrs.width) || attrs.width <= 0) {
       attrs.width = 100
     }
-    if (attrs.height <= 0) {
+    if (!Number.isFinite(attrs.height) || attrs.height <= 0) {
       attrs.height = 100
     }
 
@@ -596,7 +615,7 @@ const setSvgString = (xmlString, preventUndo) => {
     if (!preventUndo) svgCanvas.addCommandToHistory(batchCmd)
     svgCanvas.call('sourcechanged', [svgCanvas.getSvgContent()])
   } catch (e) {
-    console.error(e)
+    error('Error setting SVG string', e, 'svg-exec')
     return false
   }
 
@@ -666,16 +685,26 @@ const importSvgString = (xmlString, preserveDimension) => {
 
       // TODO: properly handle preserveAspectRatio
       const // canvasw = +svgContent.getAttribute('width'),
-        canvash = Number(svgCanvas.getSvgContent().getAttribute('height'))
+        rawCanvash = Number(svgCanvas.getSvgContent().getAttribute('height'))
+      const canvash =
+        Number.isFinite(rawCanvash) && rawCanvash > 0
+          ? rawCanvash
+          : (Number(svgCanvas.getCurConfig().dimensions?.[1]) || 100)
       // imported content should be 1/3 of the canvas on its largest dimension
 
+      const vbWidth = vb[2]
+      const vbHeight = vb[3]
+      const importW = Number.isFinite(vbWidth) && vbWidth > 0 ? vbWidth : (innerw > 0 ? innerw : 100)
+      const importH = Number.isFinite(vbHeight) && vbHeight > 0 ? vbHeight : (innerh > 0 ? innerh : 100)
+      const safeImportW = Number.isFinite(importW) && importW > 0 ? importW : 100
+      const safeImportH = Number.isFinite(importH) && importH > 0 ? importH : 100
       ts =
-        innerh > innerw
-          ? 'scale(' + canvash / 3 / vb[3] + ')'
-          : 'scale(' + canvash / 3 / vb[2] + ')'
+        safeImportH > safeImportW
+          ? 'scale(' + canvash / 3 / safeImportH + ')'
+          : 'scale(' + canvash / 3 / safeImportW + ')'
 
       // Hack to make recalculateDimensions understand how to scale
-      ts = 'translate(0) ' + ts + ' translate(0)'
+      ts = `translate(0) ${ts} translate(0)`
 
       symbol = svgCanvas.getDOMDocument().createElementNS(NS.SVG, 'symbol')
       const defs = findDefs()
@@ -738,7 +767,7 @@ const importSvgString = (xmlString, preserveDimension) => {
     svgCanvas.addCommandToHistory(batchCmd)
     svgCanvas.call('changed', [svgCanvas.getSvgContent()])
   } catch (e) {
-    console.error(e)
+    error('Error importing SVG string', e, 'svg-exec')
     return null
   }
 
@@ -865,8 +894,8 @@ const convertImagesToBase64 = async svgElement => {
           }
           reader.readAsDataURL(blob)
         })
-      } catch (error) {
-        console.error('Failed to fetch image:', error)
+      } catch (err) {
+        error('Failed to fetch image', err, 'svg-exec')
       }
     }
   })
@@ -905,10 +934,14 @@ const rasterExport = (
 
         const canvas = document.createElement('canvas')
         const ctx = canvas.getContext('2d')
+        if (!ctx) {
+          reject(new Error('Canvas 2D context not available'))
+          return
+        }
 
-        const width = svgElement.clientWidth || svgElement.getAttribute('width')
-        const height =
-          svgElement.clientHeight || svgElement.getAttribute('height')
+        const res = svgCanvas.getResolution()
+        const width = res.w
+        const height = res.h
         canvas.width = width
         canvas.height = height
 
@@ -1013,7 +1046,7 @@ const exportPDF = (
         }
 
         img.onerror = err => {
-          console.error('Failed to load SVG into image element:', err)
+          error('Failed to load SVG into image element', err, 'svg-exec')
           reject(err)
         }
 
@@ -1112,7 +1145,7 @@ const uniquifyElemsMethod = g => {
       let j = attrs.length
       while (j--) {
         const attr = attrs[j]
-        attr.ownerElement.setAttribute(attr.name, 'url(#' + newid + ')')
+        attr.ownerElement.setAttribute(attr.name, `url(#${newid})`)
       }
 
       // remap all href attributes
@@ -1142,7 +1175,11 @@ const setUseDataMethod = parent => {
 
   Array.prototype.forEach.call(elems, (el, _) => {
     const dataStorage = svgCanvas.getDataStorage()
-    const id = svgCanvas.getHref(el).substr(1)
+    const href = svgCanvas.getHref(el)
+    if (!href || !href.startsWith('#')) {
+      return
+    }
+    const id = href.substr(1)
     const refElem = svgCanvas.getElement(id)
     if (!refElem) {
       return
@@ -1301,6 +1338,41 @@ const convertGradientsMethod = elem => {
         grad.setAttribute('x2', (gCoords.x2 - bb.x) / bb.width)
         grad.setAttribute('y2', (gCoords.y2 - bb.y) / bb.height)
         grad.removeAttribute('gradientUnits')
+      } else if (grad.tagName === 'radialGradient') {
+        const getNum = (value, fallback) => {
+          const num = Number(value)
+          return Number.isFinite(num) ? num : fallback
+        }
+        let cx = getNum(grad.getAttribute('cx'), 0.5)
+        let cy = getNum(grad.getAttribute('cy'), 0.5)
+        let r = getNum(grad.getAttribute('r'), 0.5)
+        let fx = getNum(grad.getAttribute('fx'), cx)
+        let fy = getNum(grad.getAttribute('fy'), cy)
+
+        // If has transform, convert
+        const tlist = getTransformList(grad)
+        if (tlist?.numberOfItems > 0) {
+          const m = transformListToTransform(tlist).matrix
+          const cpt = transformPoint(cx, cy, m)
+          const fpt = transformPoint(fx, fy, m)
+          const rpt = transformPoint(cx + r, cy, m)
+          cx = cpt.x
+          cy = cpt.y
+          fx = fpt.x
+          fy = fpt.y
+          r = Math.hypot(rpt.x - cpt.x, rpt.y - cpt.y)
+          grad.removeAttribute('gradientTransform')
+        }
+
+        if (!bb.width || !bb.height) {
+          return
+        }
+        grad.setAttribute('cx', (cx - bb.x) / bb.width)
+        grad.setAttribute('cy', (cy - bb.y) / bb.height)
+        grad.setAttribute('fx', (fx - bb.x) / bb.width)
+        grad.setAttribute('fy', (fy - bb.y) / bb.height)
+        grad.setAttribute('r', r / Math.max(bb.width, bb.height))
+        grad.removeAttribute('gradientUnits')
       }
     }
   })

package/core/svgroot.js

@@ -14,7 +14,7 @@ import { text2xml } from './utilities.js'
 * @param {ArgumentsArray} dimensions - dimensions of width and height
 * @returns {svgRootElement}
 */
-export const svgRootElement = function (svgdoc, dimensions) {
+export const svgRootElement = (svgdoc, dimensions) => {
   return svgdoc.importNode(
     text2xml(
       `<svg id="svgroot" xmlns="${NS.SVG}" xlinkns="${NS.XLINK}" width="${dimensions[0]}"