@svgedit/svgcanvas 7.2.0 → 7.2.2

package/core/recalculate.js

@@ -11,7 +11,7 @@ import { BatchCommand, ChangeElementCommand } from './history.js'
 import { remapElement } from './coords.js'
 import {
   isIdentity, matrixMultiply, transformPoint, transformListToTransform,
-  hasMatrixTransform
+  hasMatrixTransform, getTransformList
 } from './math.js'
 import {
   mergeDeep
@@ -55,7 +55,7 @@ export const init = (canvas) => {
 */
 export const updateClipPath = (attr, tx, ty) => {
   const path = getRefElem(attr).firstChild
-  const cpXform = path.transform.baseVal
+  const cpXform = getTransformList(path)
   const newxlate = svgCanvas.getSvgRoot().createSVGTransform()
   newxlate.setTranslate(tx, ty)
 
@@ -75,7 +75,7 @@ export const recalculateDimensions = (selected) => {
   if (!selected) return null
   const svgroot = svgCanvas.getSvgRoot()
   const dataStorage = svgCanvas.getDataStorage()
-  const tlist = selected.transform?.baseVal
+  const tlist = getTransformList(selected)
   // remove any unnecessary transforms
   if (tlist?.numberOfItems > 0) {
     let k = tlist.numberOfItems
@@ -113,7 +113,6 @@ export const recalculateDimensions = (selected) => {
     selected.setAttribute('transform', '')
     // However, this still next line currently doesn't work at all in Chrome
     selected.removeAttribute('transform')
-    // selected.transform.baseVal.clear(); // Didn't help for Chrome bug
     return null
   }
 
@@ -296,7 +295,7 @@ export const recalculateDimensions = (selected) => {
         tx = 0
         ty = 0
         if (child.nodeType === 1) {
-          const childTlist = child.transform.baseVal
+          const childTlist = getTransformList(child)
 
           // some children might not have a transform (<metadata>, <defs>, etc)
           if (!childTlist) { continue }
@@ -413,7 +412,7 @@ export const recalculateDimensions = (selected) => {
             oldStartTransform = svgCanvas.getStartTransform()
             svgCanvas.setStartTransform(child.getAttribute('transform'))
 
-            const childTlist = child.transform?.baseVal
+            const childTlist = getTransformList(child)
             // some children might not have a transform (<metadata>, <defs>, etc)
             if (childTlist) {
               const newxlate = svgroot.createSVGTransform()
@@ -460,7 +459,7 @@ export const recalculateDimensions = (selected) => {
         if (child.nodeType === 1) {
           oldStartTransform = svgCanvas.getStartTransform()
           svgCanvas.setStartTransform(child.getAttribute('transform'))
-          const childTlist = child.transform?.baseVal
+          const childTlist = getTransformList(child)
 
           if (!childTlist) { continue }
 
@@ -544,7 +543,7 @@ export const recalculateDimensions = (selected) => {
           if (child.nodeType === 1) {
             oldStartTransform = svgCanvas.getStartTransform()
             svgCanvas.setStartTransform(child.getAttribute('transform'))
-            const childTlist = child.transform?.baseVal
+            const childTlist = getTransformList(child)
             const newxlate = svgroot.createSVGTransform()
             newxlate.setTranslate(tx, ty)
             if (childTlist.numberOfItems) {
@@ -629,7 +628,7 @@ export const recalculateDimensions = (selected) => {
         if (attrVal === 'userSpaceOnUse') {
           // Update the userSpaceOnUse element
           m = transformListToTransform(tlist).matrix
-          const gtlist = paint.transform.baseVal
+          const gtlist = getTransformList(paint)
           const gmatrix = transformListToTransform(gtlist).matrix
           m = matrixMultiply(m, gmatrix)
           const mStr = 'matrix(' + [m.a, m.b, m.c, m.d, m.e, m.f].join(',') + ')'

package/core/select.js

@@ -8,7 +8,7 @@
 
 import { isWebkit } from '../common/browser.js'
 import { getRotationAngle, getBBox, getStrokedBBox } from './utilities.js'
-import { transformListToTransform, transformBox, transformPoint, matrixMultiply } from './math.js'
+import { transformListToTransform, transformBox, transformPoint, matrixMultiply, getTransformList } from './math.js'
 import { NS } from './namespaces'
 
 let svgCanvas
@@ -130,14 +130,14 @@ export class Selector {
     while (currentElt.parentNode) {
       if (currentElt.parentNode && currentElt.parentNode.tagName === 'g' && currentElt.parentNode.transform) {
         if (currentElt.parentNode.transform.baseVal.numberOfItems) {
-          parentTransformationMatrix = matrixMultiply(transformListToTransform(selected.parentNode.transform.baseVal).matrix, parentTransformationMatrix)
+          parentTransformationMatrix = matrixMultiply(transformListToTransform(getTransformList(selected.parentNode)).matrix, parentTransformationMatrix)
         }
       }
       currentElt = currentElt.parentNode
     }
 
     // loop and transform our bounding box until we reach our first rotation
-    const tlist = selected.transform.baseVal
+    const tlist = getTransformList(selected)
 
     // combines the parent transformation with that of the selected element if necessary
     const m = parentTransformationMatrix ? matrixMultiply(parentTransformationMatrix, transformListToTransform(tlist).matrix) : transformListToTransform(tlist).matrix

package/core/selected-elem.js

@@ -26,7 +26,8 @@ import {
 import {
   transformPoint,
   matrixMultiply,
-  transformListToTransform
+  transformListToTransform,
+  getTransformList
 } from './math.js'
 import { recalculateDimensions } from './recalculate.js'
 import { isGecko } from '../common/browser.js'
@@ -207,7 +208,7 @@ const moveSelectedElements = (dx, dy, undoable = true) => {
   selectedElements.forEach((selected, i) => {
     if (selected) {
       const xform = svgCanvas.getSvgRoot().createSVGTransform()
-      const tlist = selected.transform?.baseVal
+      const tlist = getTransformList(selected)
 
       // dx and dy could be arrays
       if (Array.isArray(dx)) {
@@ -724,7 +725,7 @@ const pushGroupProperty = (g, undoable) => {
   const len = children.length
   const xform = g.getAttribute('transform')
 
-  const glist = g.transform.baseVal
+  const glist = getTransformList(g)
   const m = transformListToTransform(glist).matrix
 
   const batchCmd = new BatchCommand('Push group properties')
@@ -810,7 +811,7 @@ const pushGroupProperty = (g, undoable) => {
       }
     }
 
-    let chtlist = elem.transform?.baseVal
+    let chtlist = getTransformList(elem)
 
     // Don't process gradient transforms
     if (elem.tagName.includes('Gradient')) {
@@ -963,7 +964,7 @@ const convertToGroup = elem => {
     }
     dataStorage.remove(elem, 'gsvg')
 
-    const tlist = elem.transform.baseVal
+    const tlist = getTransformList(elem)
     const xform = svgCanvas.getSvgRoot().createSVGTransform()
     xform.setTranslate(pt.x, pt.y)
     tlist.appendItem(xform)

package/core/selection.js

@@ -13,7 +13,8 @@ import {
 import {
   transformPoint,
   transformListToTransform,
-  rectsIntersect
+  rectsIntersect,
+  getTransformList
 } from './math.js'
 import * as hstry from './history.js'
 import { getClosest } from '../common/util.js'
@@ -392,7 +393,7 @@ const setRotationAngle = (val, preventUndo) => {
   const bbox = getBBox(elem)
   const cx = bbox.x + bbox.width / 2
   const cy = bbox.y + bbox.height / 2
-  const tlist = elem.transform.baseVal
+  const tlist = getTransformList(elem)
 
   // only remove the real rotational transform if present (i.e. at index=0)
   if (tlist.numberOfItems > 0) {

package/core/svg-exec.js

@@ -5,8 +5,8 @@
  * @copyright 2011 Jeff Schiller
  */
 
-import { jsPDF as JsPDF } from 'jspdf/dist/jspdf.es.min.js'
-import 'svg2pdf.js/dist/svg2pdf.es.js'
+import { jsPDF as JsPDF } from 'jspdf'
+import 'svg2pdf.js'
 import html2canvas from 'html2canvas'
 import * as hstry from './history.js'
 import {
@@ -23,7 +23,11 @@ import {
   getBBox as utilsGetBBox,
   hashCode
 } from './utilities.js'
-import { transformPoint, transformListToTransform } from './math.js'
+import {
+  transformPoint,
+  transformListToTransform,
+  getTransformList
+} from './math.js'
 import { convertUnit, shortFloat, convertToNum } from './units.js'
 import { isGecko, isChrome, isWebkit } from '../common/browser.js'
 import * as pathModule from './path.js'
@@ -90,7 +94,7 @@ const svgCanvasToString = () => {
 
   // Unwrap gsvg if it has no special attributes (only id and style)
   const gsvgElems = svgCanvas.getSvgContent().querySelectorAll('g[data-gsvg]')
-  Array.prototype.forEach.call(gsvgElems, (element) => {
+  Array.prototype.forEach.call(gsvgElems, element => {
     const attrs = element.attributes
     let len = attrs.length
     for (let i = 0; i < len; i++) {
@@ -109,7 +113,7 @@ const svgCanvasToString = () => {
 
   // Rewrap gsvg
   if (nakedSvgs.length) {
-    Array.prototype.forEach.call(nakedSvgs, (el) => {
+    Array.prototype.forEach.call(nakedSvgs, el => {
       svgCanvas.groupSvgElem(el)
     })
   }
@@ -162,26 +166,14 @@ const svgToString = (elem, indent) => {
       // }
       if (curConfig.dynamicOutput) {
         vb = elem.getAttribute('viewBox')
-        out.push(
-          ' viewBox="' +
-            vb +
-            '" xmlns="' +
-            NS.SVG +
-            '"'
-        )
+        out.push(' viewBox="' + vb + '" xmlns="' + NS.SVG + '"')
       } else {
         if (unit !== 'px') {
           res.w = convertUnit(res.w, unit) + unit
           res.h = convertUnit(res.h, unit) + unit
         }
         out.push(
-          ' width="' +
-            res.w +
-            '" height="' +
-            res.h +
-            '" xmlns="' +
-            NS.SVG +
-            '"'
+          ' width="' + res.w + '" height="' + res.h + '" xmlns="' + NS.SVG + '"'
         )
       }
 
@@ -191,7 +183,7 @@ const svgToString = (elem, indent) => {
       const csElements = elem.querySelectorAll('*')
       const cElements = Array.prototype.slice.call(csElements)
       cElements.push(elem)
-      Array.prototype.forEach.call(cElements, (el) => {
+      Array.prototype.forEach.call(cElements, el => {
         // const el = this;
         // for some elements have no attribute
         const uri = el.namespaceURI
@@ -441,7 +433,7 @@ const setSvgString = (xmlString, preventUndo) => {
 
     // change image href vals if possible
     const elements = content.querySelectorAll('image')
-    Array.prototype.forEach.call(elements, (image) => {
+    Array.prototype.forEach.call(elements, image => {
       preventClickDefault(image)
       const val = svgCanvas.getHref(image)
       if (val) {
@@ -487,7 +479,7 @@ const setSvgString = (xmlString, preventUndo) => {
 
     // Wrap child SVGs in group elements
     const svgElements = content.querySelectorAll('svg')
-    Array.prototype.forEach.call(svgElements, (element) => {
+    Array.prototype.forEach.call(svgElements, element => {
       // Skip if it's in a <defs>
       if (getClosest(element.parentNode, 'defs')) {
         return
@@ -511,7 +503,7 @@ const setSvgString = (xmlString, preventUndo) => {
       const findElems = content.querySelectorAll(
         'linearGradient, radialGradient, pattern'
       )
-      Array.prototype.forEach.call(findElems, (ele) => {
+      Array.prototype.forEach.call(findElems, ele => {
         svgDefs.appendChild(ele)
       })
     }
@@ -538,7 +530,7 @@ const setSvgString = (xmlString, preventUndo) => {
       attrs.height = vb[3]
       // handle content that doesn't have a viewBox
     } else {
-      ;['width', 'height'].forEach((dim) => {
+      ;['width', 'height'].forEach(dim => {
         // Set to 100 if not given
         const val = content.getAttribute(dim) || '100%'
         if (String(val).substr(-1) === '%') {
@@ -555,9 +547,9 @@ const setSvgString = (xmlString, preventUndo) => {
 
     // Give ID for any visible layer children missing one
     const chiElems = content.children
-    Array.prototype.forEach.call(chiElems, (chiElem) => {
+    Array.prototype.forEach.call(chiElems, chiElem => {
       const visElems = chiElem.querySelectorAll(svgCanvas.getVisElems())
-      Array.prototype.forEach.call(visElems, (elem) => {
+      Array.prototype.forEach.call(visElems, elem => {
         if (!elem.id) {
           elem.id = svgCanvas.getNextId()
         }
@@ -696,7 +688,7 @@ const importSvgString = (xmlString, preserveDimension) => {
         const elements = svg.querySelectorAll(
           'linearGradient, radialGradient, pattern'
         )
-        Array.prototype.forEach.call(elements, (el) => {
+        Array.prototype.forEach.call(elements, el => {
           defs.appendChild(el)
         })
       }
@@ -766,7 +758,7 @@ const importSvgString = (xmlString, preserveDimension) => {
  * @param {string} src - The path/URL of the image
  * @returns {Promise<string|false>} Resolves to a Data URL (string|false)
  */
-const embedImage = (src) => {
+const embedImage = src => {
   // Todo: Remove this Promise in favor of making an async/await `Image.load` utility
   return new Promise((resolve, reject) => {
     // load in the image and once it's loaded, get the dimensions
@@ -904,7 +896,7 @@ const rasterExport = async (imgType, quality, WindowName, opts = {}) => {
                 WindowName
               }
               if (!opts.avoidEvent) {
-                svgCanvas.call('ed', obj)
+                svgCanvas.call('exported', obj)
               }
               resolve(obj)
             }
@@ -1011,7 +1003,7 @@ const exportPDF = async (
  * @param {Element} g - The parent element of the tree to give unique IDs
  * @returns {void}
  */
-const uniquifyElemsMethod = (g) => {
+const uniquifyElemsMethod = g => {
   const ids = {}
   // TODO: Handle markers and connectors. These are not yet re-identified properly
   // as their referring elements do not get remapped.
@@ -1031,7 +1023,7 @@ const uniquifyElemsMethod = (g) => {
     'use'
   ]
 
-  walkTree(g, (n) => {
+  walkTree(g, n => {
     // if it's an element node
     if (n.nodeType === 1) {
       // and the element has an ID
@@ -1046,7 +1038,7 @@ const uniquifyElemsMethod = (g) => {
 
       // now search for all attributes on this element that might refer
       // to other elements
-      svgCanvas.getrefAttrs().forEach((attr) => {
+      svgCanvas.getrefAttrs().forEach(attr => {
         const attrnode = n.getAttributeNode(attr)
         if (attrnode) {
           // the incoming file has been sanitized, so we should be able to safely just strip off the leading #
@@ -1115,7 +1107,7 @@ const uniquifyElemsMethod = (g) => {
  * @param {Element} parent
  * @returns {void}
  */
-const setUseDataMethod = (parent) => {
+const setUseDataMethod = parent => {
   let elems = parent
 
   if (parent.tagName !== 'use') {
@@ -1210,17 +1202,15 @@ const removeUnusedDefElemsMethod = () => {
  * @param {Element} elem
  * @returns {void}
  */
-const convertGradientsMethod = (elem) => {
+const convertGradientsMethod = elem => {
   let elems = elem.querySelectorAll('linearGradient, radialGradient')
   if (!elems.length && isWebkit()) {
     // Bug in webkit prevents regular *Gradient selector search
-    elems = Array.prototype.filter.call(elem.querySelectorAll('*'), (
-      curThis
-    ) => {
+    elems = Array.prototype.filter.call(elem.querySelectorAll('*'), curThis => {
       return curThis.tagName.includes('Gradient')
     })
   }
-  Array.prototype.forEach.call(elems, (grad) => {
+  Array.prototype.forEach.call(elems, grad => {
     if (grad.getAttribute('gradientUnits') === 'userSpaceOnUse') {
       const svgContent = svgCanvas.getSvgContent()
       // TODO: Support more than one element with this ref by duplicating parent grad
@@ -1269,7 +1259,7 @@ const convertGradientsMethod = (elem) => {
         }
 
         // If has transform, convert
-        const tlist = grad.gradientTransform.baseVal
+        const tlist = getTransformList(grad)
         if (tlist?.numberOfItems > 0) {
           const m = transformListToTransform(tlist).matrix
           const pt1 = transformPoint(gCoords.x1, gCoords.y1, m)

package/core/undo.js

@@ -13,7 +13,7 @@ import {
   isGecko
 } from '../common/browser.js'
 import {
-  transformPoint, transformListToTransform
+  transformPoint, transformListToTransform, getTransformList
 } from './math.js'
 
 const {
@@ -167,8 +167,8 @@ export const changeSelectedAttributeNoUndoMethod = (attr, newValue, elems) => {
     // Set x,y vals on elements that don't have them
     if ((attr === 'x' || attr === 'y') && noXYElems.includes(elem.tagName)) {
       const bbox = getStrokedBBoxDefaultVisible([elem])
-      const diffX = attr === 'x' ? newValue - bbox.x : 0
-      const diffY = attr === 'y' ? newValue - bbox.y : 0
+      const diffX = attr === 'x' ? parseFloat(newValue) - bbox.x : 0
+      const diffY = attr === 'y' ? parseFloat(newValue) - bbox.y : 0
       svgCanvas.moveSelectedElements(diffX * zoom, diffY * zoom, true)
       continue
     }
@@ -189,7 +189,7 @@ export const changeSelectedAttributeNoUndoMethod = (attr, newValue, elems) => {
       } else if (attr === '#href') {
         setHref(elem, newValue)
       } else if (newValue) {
-        elem.setAttribute(attr, newValue)
+        elem.setAttribute(attr, isNaN(parseFloat(newValue)) ? newValue : parseFloat(newValue))
       } else if (typeof newValue === 'number') {
         elem.setAttribute(attr, newValue)
       } else {
@@ -228,7 +228,7 @@ export const changeSelectedAttributeNoUndoMethod = (attr, newValue, elems) => {
       // we need to update the rotational transform attribute
       const angle = getRotationAngle(elem)
       if (angle !== 0 && attr !== 'transform') {
-        const tlist = elem.transform?.baseVal
+        const tlist = getTransformList(elem)
         let n = tlist.numberOfItems
         while (n--) {
           const xform = tlist.getItem(n)