@svgedit/svgcanvas 7.2.1 → 7.2.2

package/CHANGES.md

@@ -0,0 +1,8 @@
+# svgcanvas CHANGES
+
+## 7.2.1
+- npm packages ugrade 
+- bug fixes
+
+## previous history 
+- See svgedit changes.md

package/core/coords.js

@@ -8,7 +8,7 @@ import {
   snapToGrid, assignAttributes, getBBox, getRefElem, findDefs
 } from './utilities.js'
 import {
-  transformPoint, transformListToTransform, matrixMultiply, transformBox
+  transformPoint, transformListToTransform, matrixMultiply, transformBox, getTransformList
 } from './math.js'
 
 // this is how we map paths to our preferred relative segment types
@@ -98,7 +98,7 @@ export const remapElement = (selected, changes, m) => {
       changes.y = Number.parseFloat(changes.y) + tNew.f
     } else {
       // we just absorb all matrices into the element and don't do any remapping
-      const chlist = selected.transform.baseVal
+      const chlist = getTransformList(selected)
       const mt = svgCanvas.getSvgRoot().createSVGTransform()
       mt.setMatrix(matrixMultiply(transformListToTransform(chlist).matrix, m))
       chlist.clear()
@@ -115,7 +115,7 @@ export const remapElement = (selected, changes, m) => {
     // Allow images to be inverted (give them matrix when flipped)
       if (elName === 'image' && (m.a < 0 || m.d < 0)) {
       // Convert to matrix
-        const chlist = selected.transform.baseVal
+        const chlist = getTransformList(selected)
         const mt = svgCanvas.getSvgRoot().createSVGTransform()
         mt.setMatrix(matrixMultiply(transformListToTransform(chlist).matrix, m))
         chlist.clear()

package/core/elem-get-set.js

@@ -526,6 +526,7 @@ const setPaintMethod = (type, paint) => {
       break
   }
 }
+
 /**
 * Sets the stroke width for the current selected elements.
 * When attempting to set a line's width to 0, this changes it to 1 instead.
@@ -599,54 +600,41 @@ const setStrokeAttrMethod = (attr, val) => {
     svgCanvas.call('changed', selectedElements)
   }
 }
+
 /**
-* Check whether selected element is bold or not.
-* @function module:svgcanvas.SvgCanvas#getBold
-* @returns {boolean} Indicates whether or not element is bold
-*/
+ * Check if all selected text elements are in bold.
+ * @function module:svgcanvas.SvgCanvas#getBold
+ * @returns {boolean} `true` if all selected elements are bold, `false` otherwise.
+ */
 const getBoldMethod = () => {
   const selectedElements = svgCanvas.getSelectedElements()
-  // should only have one element selected
-  const selected = selectedElements[0]
-  if (selected?.tagName === 'text' &&
-    !selectedElements[1]) {
-    return (selected.getAttribute('font-weight') === 'bold')
-  }
-  return false
+  const textElements = selectedElements.filter(el => el?.tagName === 'text')
+  return textElements.every(el => el.getAttribute('font-weight') === 'bold')
 }
 
 /**
-* Make the selected element bold or normal.
-* @function module:svgcanvas.SvgCanvas#setBold
-* @param {boolean} b - Indicates bold (`true`) or normal (`false`)
-* @returns {void}
-*/
+ * Make the selected element(s) bold or normal.
+ * @function module:svgcanvas.SvgCanvas#setBold
+ * @param {boolean} b - Indicates bold (`true`) or normal (`false`)
+ * @returns {void}
+ */
 const setBoldMethod = (b) => {
   const selectedElements = svgCanvas.getSelectedElements()
-  const selected = selectedElements[0]
-  if (selected?.tagName === 'text' &&
-    !selectedElements[1]) {
-    svgCanvas.changeSelectedAttribute('font-weight', b ? 'bold' : 'normal')
-  }
-  if (!selectedElements[0].textContent) {
+  const textElements = selectedElements.filter(el => el?.tagName === 'text')
+  svgCanvas.changeSelectedAttribute('font-weight', b ? 'bold' : 'normal', textElements)
+  if (!textElements.some(el => el.textContent)) {
     svgCanvas.textActions.setCursor()
   }
 }
 
 /**
- * Check whether selected element has the given text decoration value or not.
- * @returns {boolean} Indicates whether or not element has the text decoration value
+ * Check if all selected text elements have the given text decoration value or not.
+ * @returns {boolean} Indicates whether or not elements have the text decoration value
  */
 const hasTextDecorationMethod = (value) => {
   const selectedElements = svgCanvas.getSelectedElements()
-  const selected = selectedElements[0]
-
-  if (selected?.tagName === 'text' && !selectedElements[1]) {
-    const attribute = selected.getAttribute('text-decoration') || ''
-    return attribute.includes(value)
-  }
-
-  return false
+  const textElements = selectedElements.filter(el => el?.tagName === 'text')
+  return textElements.every(el => (el.getAttribute('text-decoration') || '').includes(value))
 }
 
 /**
@@ -655,13 +643,24 @@ const hasTextDecorationMethod = (value) => {
  * @returns {void}
  */
 const addTextDecorationMethod = (value) => {
+  const { ChangeElementCommand, BatchCommand } = svgCanvas.history
   const selectedElements = svgCanvas.getSelectedElements()
-  const selected = selectedElements[0]
-  if (selected?.tagName === 'text' && !selectedElements[1]) {
-    const oldValue = selected.getAttribute('text-decoration') || ''
-    svgCanvas.changeSelectedAttribute('text-decoration', (oldValue + ' ' + value).trim())
+  const textElements = selectedElements.filter(el => el?.tagName === 'text')
+
+  const batchCmd = new BatchCommand()
+  textElements.forEach(elem => {
+    const oldValue = elem.getAttribute('text-decoration') || ''
+    // Add the new text decoration value if it did not exist
+    if (!oldValue.includes(value)) {
+      batchCmd.addSubCommand(new ChangeElementCommand(elem, { 'text-decoration': oldValue }))
+      svgCanvas.changeSelectedAttributeNoUndo('text-decoration', (oldValue + ' ' + value).trim(), [elem])
+    }
+  })
+  if (!batchCmd.isEmpty()) {
+    svgCanvas.undoMgr.addCommandToHistory(batchCmd)
   }
-  if (selectedElements.length > 0 && !selectedElements[0].textContent) {
+
+  if (!textElements.some(el => el.textContent)) {
     svgCanvas.textActions.setCursor()
   }
 }
@@ -672,44 +671,47 @@ const addTextDecorationMethod = (value) => {
  * @returns {void}
  */
 const removeTextDecorationMethod = (value) => {
+  const { ChangeElementCommand, BatchCommand } = svgCanvas.history
   const selectedElements = svgCanvas.getSelectedElements()
-  const selected = selectedElements[0]
-  if (selected?.tagName === 'text' && !selectedElements[1]) {
-    const actualValues = selected.getAttribute('text-decoration') || ''
-    svgCanvas.changeSelectedAttribute('text-decoration', actualValues.replace(value, '').trim())
+  const textElements = selectedElements.filter(el => el?.tagName === 'text')
+
+  const batchCmd = new BatchCommand()
+  textElements.forEach(elem => {
+    const actualValues = elem.getAttribute('text-decoration') || ''
+    batchCmd.addSubCommand(new ChangeElementCommand(elem, { 'text-decoration': actualValues }))
+    svgCanvas.changeSelectedAttributeNoUndo('text-decoration', actualValues.replace(value, '').trim(), [elem])
+  })
+  if (!batchCmd.isEmpty()) {
+    svgCanvas.undoMgr.addCommandToHistory(batchCmd)
   }
-  if (selectedElements.length > 0 && !selectedElements[0].textContent) {
+
+  if (!textElements.some(el => el.textContent)) {
     svgCanvas.textActions.setCursor()
   }
 }
 
 /**
-* Check whether selected element is in italics or not.
-* @function module:svgcanvas.SvgCanvas#getItalic
-* @returns {boolean} Indicates whether or not element is italic
-*/
+ * Check if all selected elements have an italic font style.
+ * @function module:svgcanvas.SvgCanvas#getItalic
+ * @returns {boolean} `true` if all selected elements are in italics, `false` otherwise.
+ */
 const getItalicMethod = () => {
   const selectedElements = svgCanvas.getSelectedElements()
-  const selected = selectedElements[0]
-  if (selected?.tagName === 'text' && !selectedElements[1]) {
-    return (selected.getAttribute('font-style') === 'italic')
-  }
-  return false
+  const textElements = selectedElements.filter(el => el?.tagName === 'text')
+  return textElements.every(el => el.getAttribute('font-style') === 'italic')
 }
 
 /**
-* Make the selected element italic or normal.
-* @function module:svgcanvas.SvgCanvas#setItalic
-* @param {boolean} i - Indicates italic (`true`) or normal (`false`)
-* @returns {void}
-*/
+ * Make the selected element(s) italic or normal.
+ * @function module:svgcanvas.SvgCanvas#setItalic
+ * @param {boolean} i - Indicates italic (`true`) or normal (`false`)
+ * @returns {void}
+ */
 const setItalicMethod = (i) => {
   const selectedElements = svgCanvas.getSelectedElements()
-  const selected = selectedElements[0]
-  if (selected?.tagName === 'text' && !selectedElements[1]) {
-    svgCanvas.changeSelectedAttribute('font-style', i ? 'italic' : 'normal')
-  }
-  if (!selectedElements[0].textContent) {
+  const textElements = selectedElements.filter(el => el?.tagName === 'text')
+  svgCanvas.changeSelectedAttribute('font-style', i ? 'italic' : 'normal', textElements)
+  if (!textElements.some(el => el.textContent)) {
     svgCanvas.textActions.setCursor()
   }
 }
@@ -721,13 +723,8 @@ const setItalicMethod = (i) => {
  */
 const setTextAnchorMethod = (value) => {
   const selectedElements = svgCanvas.getSelectedElements()
-  const selected = selectedElements[0]
-  if (selected?.tagName === 'text' && !selectedElements[1]) {
-    svgCanvas.changeSelectedAttribute('text-anchor', value)
-  }
-  if (selectedElements.length > 0 && !selectedElements[0].textContent) {
-    svgCanvas.textActions.setCursor()
-  }
+  const textElements = selectedElements.filter(el => el?.tagName === 'text')
+  svgCanvas.changeSelectedAttribute('text-anchor', value, textElements)
 }
 
 /**
@@ -737,11 +734,9 @@ const setTextAnchorMethod = (value) => {
  */
 const setLetterSpacingMethod = (value) => {
   const selectedElements = svgCanvas.getSelectedElements()
-  const selected = selectedElements[0]
-  if (selected?.tagName === 'text' && !selectedElements[1]) {
-    svgCanvas.changeSelectedAttribute('letter-spacing', value)
-  }
-  if (selectedElements.length > 0 && !selectedElements[0].textContent) {
+  const textElements = selectedElements.filter(el => el?.tagName === 'text')
+  svgCanvas.changeSelectedAttribute('letter-spacing', value, textElements)
+  if (!textElements.some(el => el.textContent)) {
     svgCanvas.textActions.setCursor()
   }
 }
@@ -753,11 +748,9 @@ const setLetterSpacingMethod = (value) => {
  */
 const setWordSpacingMethod = (value) => {
   const selectedElements = svgCanvas.getSelectedElements()
-  const selected = selectedElements[0]
-  if (selected?.tagName === 'text' && !selectedElements[1]) {
-    svgCanvas.changeSelectedAttribute('word-spacing', value)
-  }
-  if (selectedElements.length > 0 && !selectedElements[0].textContent) {
+  const textElements = selectedElements.filter(el => el?.tagName === 'text')
+  svgCanvas.changeSelectedAttribute('word-spacing', value, textElements)
+  if (!textElements.some(el => el.textContent)) {
     svgCanvas.textActions.setCursor()
   }
 }
@@ -769,11 +762,9 @@ const setWordSpacingMethod = (value) => {
  */
 const setTextLengthMethod = (value) => {
   const selectedElements = svgCanvas.getSelectedElements()
-  const selected = selectedElements[0]
-  if (selected?.tagName === 'text' && !selectedElements[1]) {
-    svgCanvas.changeSelectedAttribute('textLength', value)
-  }
-  if (selectedElements.length > 0 && !selectedElements[0].textContent) {
+  const textElements = selectedElements.filter(el => el?.tagName === 'text')
+  svgCanvas.changeSelectedAttribute('textLength', value, textElements)
+  if (!textElements.some(el => el.textContent)) {
     svgCanvas.textActions.setCursor()
   }
 }
@@ -785,11 +776,9 @@ const setTextLengthMethod = (value) => {
  */
 const setLengthAdjustMethod = (value) => {
   const selectedElements = svgCanvas.getSelectedElements()
-  const selected = selectedElements[0]
-  if (selected?.tagName === 'text' && !selectedElements[1]) {
-    svgCanvas.changeSelectedAttribute('lengthAdjust', value)
-  }
-  if (selectedElements.length > 0 && !selectedElements[0].textContent) {
+  const textElements = selectedElements.filter(el => el?.tagName === 'text')
+  svgCanvas.changeSelectedAttribute('lengthAdjust', value, textElements)
+  if (!textElements.some(el => el.textContent)) {
     svgCanvas.textActions.setCursor()
   }
 }
@@ -810,9 +799,10 @@ const getFontFamilyMethod = () => {
 */
 const setFontFamilyMethod = (val) => {
   const selectedElements = svgCanvas.getSelectedElements()
+  const textElements = selectedElements.filter(el => el?.tagName === 'text')
   svgCanvas.setCurText('font_family', val)
-  svgCanvas.changeSelectedAttribute('font-family', val)
-  if (!selectedElements[0]?.textContent) {
+  svgCanvas.changeSelectedAttribute('font-family', val, textElements)
+  if (!textElements.some(el => el.textContent)) {
     svgCanvas.textActions.setCursor()
   }
 }

package/core/event.js

@@ -12,7 +12,7 @@ import {
   convertAttrs
 } from './units.js'
 import {
-  transformPoint, hasMatrixTransform, getMatrix, snapToAngle
+  transformPoint, hasMatrixTransform, getMatrix, snapToAngle, getTransformList
 } from './math.js'
 import * as draw from './draw.js'
 import * as pathModule from './path.js'
@@ -83,7 +83,7 @@ const getBsplinePoint = (t) => {
 const updateTransformList = (svgRoot, element, dx, dy) => {
   const xform = svgRoot.createSVGTransform()
   xform.setTranslate(dx, dy)
-  const tlist = element.transform?.baseVal
+  const tlist = getTransformList(element)
   if (tlist.numberOfItems) {
     const firstItem = tlist.getItem(0)
     if (firstItem.type === 2) { // SVG_TRANSFORM_TRANSLATE = 2
@@ -221,7 +221,7 @@ const mouseMoveEvent = (evt) => {
       // we track the resize bounding box and translate/scale the selected element
       // while the mouse is down, when mouse goes up, we use this to recalculate
       // the shape's coordinates
-      tlist = selected.transform.baseVal
+      tlist = getTransformList(selected)
       const hasMatrix = hasMatrixTransform(tlist)
       box = hasMatrix ? svgCanvas.getInitBbox() : getBBox(selected)
       let left = box.x
@@ -1026,7 +1026,7 @@ const mouseDownEvent = (evt) => {
 
   svgCanvas.setStartTransform(mouseTarget.getAttribute('transform'))
 
-  const tlist = mouseTarget.transform.baseVal
+  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)
@@ -1060,7 +1060,7 @@ const mouseDownEvent = (evt) => {
           // a transform to use for its translate
           for (const selectedElement of selectedElements) {
             if (!selectedElement) { continue }
-            const slist = selectedElement.transform?.baseVal
+            const slist = getTransformList(selectedElement)
             if (slist.numberOfItems) {
               slist.insertItemBefore(svgRoot.createSVGTransform(), 0)
             } else {

package/core/math.js

@@ -7,17 +7,17 @@
  */
 
 /**
-* @typedef {PlainObject} module:math.AngleCoord45
-* @property {Float} x - The angle-snapped x value
-* @property {Float} y - The angle-snapped y value
-* @property {Integer} a - The angle at which to snap
-*/
+ * @typedef {PlainObject} module:math.AngleCoord45
+ * @property {Float} x - The angle-snapped x value
+ * @property {Float} y - The angle-snapped y value
+ * @property {Integer} a - The angle at which to snap
+ */
 
 /**
-* @typedef {PlainObject} module:math.XYObject
-* @property {Float} x
-* @property {Float} y
-*/
+ * @typedef {PlainObject} module:math.XYObject
+ * @property {Float} x
+ * @property {Float} y
+ */
 
 import { NS } from './namespaces.js'
 
@@ -35,20 +35,35 @@ const svg = document.createElementNS(NS.SVG, 'svg')
  * @param {Float} y - Float representing the y coordinate
  * @param {SVGMatrix} m - Matrix object to transform the point with
  * @returns {module:math.XYObject} An x, y object representing the transformed point
-*/
+ */
 export const transformPoint = function (x, y, m) {
   return { x: m.a * x + m.c * y + m.e, y: m.b * x + m.d * y + m.f }
 }
 
+export const getTransformList = (elem) => {
+  if (elem.transform) {
+    return elem.transform?.baseVal
+  }
+  if (elem.gradientTransform) {
+    return elem.gradientTransform?.baseVal
+  }
+  if (elem.patternTransform) {
+    return elem.patternTransform?.baseVal
+  }
+  console.warn('no transform list found - check browser version', elem)
+}
+
 /**
  * Helper function to check if the matrix performs no actual transform
  * (i.e. exists for identity purposes).
  * @function module:math.isIdentity
  * @param {SVGMatrix} m - The matrix object to check
  * @returns {boolean} Indicates whether or not the matrix is 1,0,0,1,0,0
-*/
+ */
 export const isIdentity = function (m) {
-  return (m.a === 1 && m.b === 0 && m.c === 0 && m.d === 1 && m.e === 0 && m.f === 0)
+  return (
+    m.a === 1 && m.b === 0 && m.c === 0 && m.d === 1 && m.e === 0 && m.f === 0
+  )
 }
 
 /**
@@ -57,18 +72,30 @@ export const isIdentity = function (m) {
  * @function module:math.matrixMultiply
  * @param {...SVGMatrix} args - Matrix objects to multiply
  * @returns {SVGMatrix} The matrix object resulting from the calculation
-*/
+ */
 export const matrixMultiply = function (...args) {
   const m = args.reduceRight((prev, m1) => {
     return m1.multiply(prev)
   })
 
-  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 (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
+  }
 
   return m
 }
@@ -78,29 +105,33 @@ export const matrixMultiply = function (...args) {
  * @function module:math.hasMatrixTransform
  * @param {SVGTransformList} [tlist] - The transformlist to check
  * @returns {boolean} Whether or not a matrix transform was found
-*/
+ */
 export const hasMatrixTransform = function (tlist) {
-  if (!tlist) { return false }
+  if (!tlist) {
+    return false
+  }
   let num = tlist.numberOfItems
   while (num--) {
     const xform = tlist.getItem(num)
-    if (xform.type === 1 && !isIdentity(xform.matrix)) { return true }
+    if (xform.type === 1 && !isIdentity(xform.matrix)) {
+      return true
+    }
   }
   return false
 }
 
 /**
-* @typedef {PlainObject} module:math.TransformedBox An object with the following values
-* @property {module:math.XYObject} tl - The top left coordinate
-* @property {module:math.XYObject} tr - The top right coordinate
-* @property {module:math.XYObject} bl - The bottom left coordinate
-* @property {module:math.XYObject} br - The bottom right coordinate
-* @property {PlainObject} aabox - Object with the following values:
-* @property {Float} aabox.x - Float with the axis-aligned x coordinate
-* @property {Float} aabox.y - Float with the axis-aligned y coordinate
-* @property {Float} aabox.width - Float with the axis-aligned width coordinate
-* @property {Float} aabox.height - Float with the axis-aligned height coordinate
-*/
+ * @typedef {PlainObject} module:math.TransformedBox An object with the following values
+ * @property {module:math.XYObject} tl - The top left coordinate
+ * @property {module:math.XYObject} tr - The top right coordinate
+ * @property {module:math.XYObject} bl - The bottom left coordinate
+ * @property {module:math.XYObject} br - The bottom right coordinate
+ * @property {PlainObject} aabox - Object with the following values:
+ * @property {Float} aabox.x - Float with the axis-aligned x coordinate
+ * @property {Float} aabox.y - Float with the axis-aligned y coordinate
+ * @property {Float} aabox.width - Float with the axis-aligned width coordinate
+ * @property {Float} aabox.height - Float with the axis-aligned height coordinate
+ */
 
 /**
  * Transforms a rectangle based on the given matrix.
@@ -111,12 +142,12 @@ export const hasMatrixTransform = function (tlist) {
  * @param {Float} h - Float with the box height
  * @param {SVGMatrix} m - Matrix object to transform the box by
  * @returns {module:math.TransformedBox}
-*/
+ */
 export const transformBox = function (l, t, w, h, m) {
   const tl = transformPoint(l, t, m)
-  const tr = transformPoint((l + w), t, m)
-  const bl = transformPoint(l, (t + h), m)
-  const br = transformPoint((l + w), (t + h), m)
+  const tr = transformPoint(l + w, t, m)
+  const bl = transformPoint(l, t + h, m)
+  const br = transformPoint(l + w, t + h, m)
 
   const minx = Math.min(tl.x, tr.x, bl.x, br.x)
   const maxx = Math.max(tl.x, tr.x, bl.x, br.x)
@@ -131,8 +162,8 @@ export const transformBox = function (l, t, w, h, m) {
     aabox: {
       x: minx,
       y: miny,
-      width: (maxx - minx),
-      height: (maxy - miny)
+      width: maxx - minx,
+      height: maxy - miny
     }
   }
 }
@@ -148,23 +179,28 @@ export const transformBox = function (l, t, w, h, m) {
  * @param {Integer} [max] - Optional integer indicating end transform position;
  *   defaults to one less than the tlist's `numberOfItems`
  * @returns {SVGTransform} A single matrix transform object
-*/
+ */
 export const transformListToTransform = function (tlist, min, max) {
   if (!tlist) {
     // Or should tlist = null have been prevented before this?
     return svg.createSVGTransformFromMatrix(svg.createSVGMatrix())
   }
   min = min || 0
-  max = max || (tlist.numberOfItems - 1)
+  max = max || tlist.numberOfItems - 1
   min = Number.parseInt(min)
   max = Number.parseInt(max)
-  if (min > max) { const temp = max; max = min; min = temp }
+  if (min > max) {
+    const temp = max
+    max = min
+    min = temp
+  }
   let m = svg.createSVGMatrix()
   for (let i = min; i <= max; ++i) {
     // if our indices are out of range, just use a harmless identity matrix
-    const mtom = (i >= 0 && i < tlist.numberOfItems
-      ? tlist.getItem(i).matrix
-      : svg.createSVGMatrix())
+    const mtom =
+      i >= 0 && i < tlist.numberOfItems
+        ? tlist.getItem(i).matrix
+        : svg.createSVGMatrix()
     m = matrixMultiply(m, mtom)
   }
   return svg.createSVGTransformFromMatrix(m)
@@ -175,9 +211,9 @@ export const transformListToTransform = function (tlist, min, max) {
  * @function module:math.getMatrix
  * @param {Element} elem - The DOM element to check
  * @returns {SVGMatrix} The matrix object associated with the element's transformlist
-*/
+ */
 export const getMatrix = (elem) => {
-  const tlist = elem.transform.baseVal
+  const tlist = getTransformList(elem)
   return transformListToTransform(tlist).matrix
 }
 
@@ -190,7 +226,7 @@ export const getMatrix = (elem) => {
  * @param {Integer} x2 - Second coordinate's x value
  * @param {Integer} y2 - Second coordinate's y value
  * @returns {module:math.AngleCoord45}
-*/
+ */
 export const snapToAngle = (x1, y1, x2, y2) => {
   const snap = Math.PI / 4 // 45 degrees
   const dx = x2 - x1
@@ -214,8 +250,10 @@ export const snapToAngle = (x1, y1, x2, y2) => {
  * @returns {boolean} True if rectangles intersect
  */
 export const rectsIntersect = (r1, r2) => {
-  return r2.x < (r1.x + r1.width) &&
-    (r2.x + r2.width) > r1.x &&
-    r2.y < (r1.y + r1.height) &&
-    (r2.y + r2.height) > r1.y
+  return (
+    r2.x < r1.x + r1.width &&
+    r2.x + r2.width > r1.x &&
+    r2.y < r1.y + r1.height &&
+    r2.y + r2.height > r1.y
+  )
 }

package/core/path-actions.js

@@ -11,7 +11,7 @@ import { shortFloat } from './units.js'
 import { ChangeElementCommand, BatchCommand } from './history.js'
 import {
   transformPoint, snapToAngle, rectsIntersect,
-  transformListToTransform
+  transformListToTransform, getTransformList
 } from './math.js'
 import {
   assignAttributes, getElement, getRotationAngle, snapToGrid,
@@ -876,7 +876,7 @@ export const pathActionsMethod = (function () {
     */
     resetOrientation (pth) {
       if (pth?.nodeName !== 'path') { return false }
-      const tlist = pth.transform.baseVal
+      const tlist = getTransformList(pth)
       const m = transformListToTransform(tlist).matrix
       tlist.clear()
       pth.removeAttribute('transform')

package/core/path.js

@@ -7,7 +7,7 @@
  */
 
 import { shortFloat } from './units.js'
-import { transformPoint } from './math.js'
+import { transformPoint, getTransformList } from './math.js'
 import {
   getRotationAngle, getBBox,
   getRefElem, findDefs,
@@ -511,7 +511,7 @@ export const recalcRotatedPath = () => {
 
   // now we must set the new transform to be rotated around the new center
   const Rnc = svgCanvas.getSvgRoot().createSVGTransform()
-  const tlist = currentPath.transform.baseVal
+  const tlist = getTransformList(currentPath)
   Rnc.setRotate((angle * 180.0 / Math.PI), newcx, newcy)
   tlist.replaceItem(Rnc, 0)
 }