@svgedit/svgcanvas 7.4.1 → 7.4.2

package/core/elem-get-set.js

@@ -655,14 +655,31 @@ const setStrokeAttrMethod = (attr, val) => {
   }
 }
 
+const getSelectedTextElements = () => {
+  return svgCanvas.getSelectedElements().filter(el => el?.tagName === 'text')
+}
+
+const getChangedTextElements = (textElements, attr, newValue) => {
+  const normalizedValue = String(newValue)
+  return textElements.filter((elem) => {
+    const oldValue = attr === '#text' ? elem.textContent : elem.getAttribute(attr)
+    return (oldValue || '') !== normalizedValue
+  })
+}
+
+const notifyTextChange = (textElements) => {
+  if (textElements.length > 0) {
+    svgCanvas.call('changed', textElements)
+  }
+}
+
 /**
  * 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()
-  const textElements = selectedElements.filter(el => el?.tagName === 'text')
+  const textElements = getSelectedTextElements()
   return textElements.every(el => el.getAttribute('font-weight') === 'bold')
 }
 
@@ -673,12 +690,16 @@ const getBoldMethod = () => {
  * @returns {void}
  */
 const setBoldMethod = (b) => {
-  const selectedElements = svgCanvas.getSelectedElements()
-  const textElements = selectedElements.filter(el => el?.tagName === 'text')
-  svgCanvas.changeSelectedAttribute('font-weight', b ? 'bold' : 'normal', textElements)
+  const textElements = getSelectedTextElements()
+  const value = b ? 'bold' : 'normal'
+  const changedTextElements = getChangedTextElements(textElements, 'font-weight', value)
+  if (changedTextElements.length > 0) {
+    svgCanvas.changeSelectedAttribute('font-weight', value, changedTextElements)
+  }
   if (!textElements.some(el => el.textContent)) {
     svgCanvas.textActions.setCursor()
   }
+  notifyTextChange(changedTextElements)
 }
 
 /**
@@ -686,8 +707,7 @@ const setBoldMethod = (b) => {
  * @returns {boolean} Indicates whether or not elements have the text decoration value
  */
 const hasTextDecorationMethod = (value) => {
-  const selectedElements = svgCanvas.getSelectedElements()
-  const textElements = selectedElements.filter(el => el?.tagName === 'text')
+  const textElements = getSelectedTextElements()
   return textElements.every(el => (el.getAttribute('text-decoration') || '').includes(value))
 }
 
@@ -698,8 +718,7 @@ const hasTextDecorationMethod = (value) => {
  */
 const addTextDecorationMethod = (value) => {
   const { ChangeElementCommand, BatchCommand } = svgCanvas.history
-  const selectedElements = svgCanvas.getSelectedElements()
-  const textElements = selectedElements.filter(el => el?.tagName === 'text')
+  const textElements = getSelectedTextElements()
 
   const batchCmd = new BatchCommand()
   textElements.forEach(elem => {
@@ -726,8 +745,7 @@ const addTextDecorationMethod = (value) => {
  */
 const removeTextDecorationMethod = (value) => {
   const { ChangeElementCommand, BatchCommand } = svgCanvas.history
-  const selectedElements = svgCanvas.getSelectedElements()
-  const textElements = selectedElements.filter(el => el?.tagName === 'text')
+  const textElements = getSelectedTextElements()
 
   const batchCmd = new BatchCommand()
   textElements.forEach(elem => {
@@ -750,8 +768,7 @@ const removeTextDecorationMethod = (value) => {
  * @returns {boolean} `true` if all selected elements are in italics, `false` otherwise.
  */
 const getItalicMethod = () => {
-  const selectedElements = svgCanvas.getSelectedElements()
-  const textElements = selectedElements.filter(el => el?.tagName === 'text')
+  const textElements = getSelectedTextElements()
   return textElements.every(el => el.getAttribute('font-style') === 'italic')
 }
 
@@ -762,12 +779,16 @@ const getItalicMethod = () => {
  * @returns {void}
  */
 const setItalicMethod = (i) => {
-  const selectedElements = svgCanvas.getSelectedElements()
-  const textElements = selectedElements.filter(el => el?.tagName === 'text')
-  svgCanvas.changeSelectedAttribute('font-style', i ? 'italic' : 'normal', textElements)
+  const textElements = getSelectedTextElements()
+  const value = i ? 'italic' : 'normal'
+  const changedTextElements = getChangedTextElements(textElements, 'font-style', value)
+  if (changedTextElements.length > 0) {
+    svgCanvas.changeSelectedAttribute('font-style', value, changedTextElements)
+  }
   if (!textElements.some(el => el.textContent)) {
     svgCanvas.textActions.setCursor()
   }
+  notifyTextChange(changedTextElements)
 }
 
 /**
@@ -776,9 +797,12 @@ const setItalicMethod = (i) => {
  * @returns {void}
  */
 const setTextAnchorMethod = (value) => {
-  const selectedElements = svgCanvas.getSelectedElements()
-  const textElements = selectedElements.filter(el => el?.tagName === 'text')
-  svgCanvas.changeSelectedAttribute('text-anchor', value, textElements)
+  const textElements = getSelectedTextElements()
+  const changedTextElements = getChangedTextElements(textElements, 'text-anchor', value)
+  if (changedTextElements.length > 0) {
+    svgCanvas.changeSelectedAttribute('text-anchor', value, changedTextElements)
+  }
+  notifyTextChange(changedTextElements)
 }
 
 /**
@@ -787,12 +811,15 @@ const setTextAnchorMethod = (value) => {
  * @returns {void}
  */
 const setLetterSpacingMethod = (value) => {
-  const selectedElements = svgCanvas.getSelectedElements()
-  const textElements = selectedElements.filter(el => el?.tagName === 'text')
-  svgCanvas.changeSelectedAttribute('letter-spacing', value, textElements)
+  const textElements = getSelectedTextElements()
+  const changedTextElements = getChangedTextElements(textElements, 'letter-spacing', value)
+  if (changedTextElements.length > 0) {
+    svgCanvas.changeSelectedAttribute('letter-spacing', value, changedTextElements)
+  }
   if (!textElements.some(el => el.textContent)) {
     svgCanvas.textActions.setCursor()
   }
+  notifyTextChange(changedTextElements)
 }
 
 /**
@@ -801,12 +828,15 @@ const setLetterSpacingMethod = (value) => {
  * @returns {void}
  */
 const setWordSpacingMethod = (value) => {
-  const selectedElements = svgCanvas.getSelectedElements()
-  const textElements = selectedElements.filter(el => el?.tagName === 'text')
-  svgCanvas.changeSelectedAttribute('word-spacing', value, textElements)
+  const textElements = getSelectedTextElements()
+  const changedTextElements = getChangedTextElements(textElements, 'word-spacing', value)
+  if (changedTextElements.length > 0) {
+    svgCanvas.changeSelectedAttribute('word-spacing', value, changedTextElements)
+  }
   if (!textElements.some(el => el.textContent)) {
     svgCanvas.textActions.setCursor()
   }
+  notifyTextChange(changedTextElements)
 }
 
 /**
@@ -815,12 +845,15 @@ const setWordSpacingMethod = (value) => {
  * @returns {void}
  */
 const setTextLengthMethod = (value) => {
-  const selectedElements = svgCanvas.getSelectedElements()
-  const textElements = selectedElements.filter(el => el?.tagName === 'text')
-  svgCanvas.changeSelectedAttribute('textLength', value, textElements)
+  const textElements = getSelectedTextElements()
+  const changedTextElements = getChangedTextElements(textElements, 'textLength', value)
+  if (changedTextElements.length > 0) {
+    svgCanvas.changeSelectedAttribute('textLength', value, changedTextElements)
+  }
   if (!textElements.some(el => el.textContent)) {
     svgCanvas.textActions.setCursor()
   }
+  notifyTextChange(changedTextElements)
 }
 
 /**
@@ -829,12 +862,15 @@ const setTextLengthMethod = (value) => {
  * @returns {void}
  */
 const setLengthAdjustMethod = (value) => {
-  const selectedElements = svgCanvas.getSelectedElements()
-  const textElements = selectedElements.filter(el => el?.tagName === 'text')
-  svgCanvas.changeSelectedAttribute('lengthAdjust', value, textElements)
+  const textElements = getSelectedTextElements()
+  const changedTextElements = getChangedTextElements(textElements, 'lengthAdjust', value)
+  if (changedTextElements.length > 0) {
+    svgCanvas.changeSelectedAttribute('lengthAdjust', value, changedTextElements)
+  }
   if (!textElements.some(el => el.textContent)) {
     svgCanvas.textActions.setCursor()
   }
+  notifyTextChange(changedTextElements)
 }
 
 /**
@@ -852,13 +888,16 @@ const getFontFamilyMethod = () => {
 * @returns {void}
 */
 const setFontFamilyMethod = (val) => {
-  const selectedElements = svgCanvas.getSelectedElements()
-  const textElements = selectedElements.filter(el => el?.tagName === 'text')
+  const textElements = getSelectedTextElements()
+  const changedTextElements = getChangedTextElements(textElements, 'font-family', val)
   svgCanvas.setCurText('font_family', val)
-  svgCanvas.changeSelectedAttribute('font-family', val, textElements)
+  if (changedTextElements.length > 0) {
+    svgCanvas.changeSelectedAttribute('font-family', val, changedTextElements)
+  }
   if (!textElements.some(el => el.textContent)) {
     svgCanvas.textActions.setCursor()
   }
+  notifyTextChange(changedTextElements)
 }
 
 /**
@@ -868,8 +907,13 @@ const setFontFamilyMethod = (val) => {
 * @returns {void}
 */
 const setFontColorMethod = (val) => {
+  const textElements = getSelectedTextElements()
+  const changedTextElements = getChangedTextElements(textElements, 'fill', val)
   svgCanvas.setCurText('fill', val)
-  svgCanvas.changeSelectedAttribute('fill', val)
+  if (changedTextElements.length > 0) {
+    svgCanvas.changeSelectedAttribute('fill', val, changedTextElements)
+  }
+  notifyTextChange(changedTextElements)
 }
 
 /**
@@ -895,12 +939,16 @@ const getFontSizeMethod = () => {
 * @returns {void}
 */
 const setFontSizeMethod = (val) => {
-  const selectedElements = svgCanvas.getSelectedElements()
+  const textElements = getSelectedTextElements()
+  const changedTextElements = getChangedTextElements(textElements, 'font-size', val)
   svgCanvas.setCurText('font_size', val)
-  svgCanvas.changeSelectedAttribute('font-size', val)
-  if (!selectedElements[0]?.textContent) {
+  if (changedTextElements.length > 0) {
+    svgCanvas.changeSelectedAttribute('font-size', val, changedTextElements)
+  }
+  if (!textElements.some(el => el.textContent)) {
     svgCanvas.textActions.setCursor()
   }
+  notifyTextChange(changedTextElements)
 }
 
 /**

package/core/event.js

@@ -89,7 +89,7 @@ const updateTransformList = (svgRoot, element, dx, dy) => {
   if (!tlist) { return }
   if (tlist.numberOfItems) {
     const firstItem = tlist.getItem(0)
-    if (firstItem.type === 2) { // SVG_TRANSFORM_TRANSLATE = 2
+    if (firstItem.type === SVGTransform.SVG_TRANSFORM_TRANSLATE) {
       tlist.replaceItem(xform, 0)
     } else {
       tlist.insertItemBefore(xform, 0)
@@ -99,6 +99,25 @@ const updateTransformList = (svgRoot, element, dx, dy) => {
   }
 }
 
+// Consolidate an element's current transform list into a single matrix,
+// returning an undo command that restores `oldTransform`. Used for groups
+// (whose transform must stay on the group rather than be flattened into
+// their children) and as a fallback when recalculateDimensions() doesn't
+// recognize the transform-list shape a drag interaction left behind.
+const consolidateTransform = (svgRoot, elem, tlist, oldTransform) => {
+  const consolidatedMatrix = transformListToTransform(tlist).matrix
+
+  while (tlist.numberOfItems > 0) {
+    tlist.removeItem(0)
+  }
+
+  const newTransform = svgRoot.createSVGTransform()
+  newTransform.setMatrix(consolidatedMatrix)
+  tlist.appendItem(newTransform)
+
+  return new ChangeElementCommand(elem, { transform: oldTransform })
+}
+
 /**
  *
  * @param {MouseEvent} evt
@@ -159,10 +178,16 @@ const mouseMoveEvent = (evt) => {
           svgCanvas.dragStartTransforms.set(selectedElement, selectedElement.getAttribute('transform') || '')
           const slist = getTransformList(selectedElement)
           if (!slist) { continue }
+          // The dummy must already be a translate (not the default identity
+          // matrix) so updateTransformList's `firstItem.type === 2` check
+          // recognizes and replaces it in place on the very first mousemove,
+          // instead of leaving it behind as a stray extra transform item.
+          const dummy = svgRoot.createSVGTransform()
+          dummy.setTranslate(0, 0)
           if (slist.numberOfItems) {
-            slist.insertItemBefore(svgRoot.createSVGTransform(), 0)
+            slist.insertItemBefore(dummy, 0)
           } else {
-            slist.appendItem(svgRoot.createSVGTransform())
+            slist.appendItem(dummy)
           }
         }
         svgCanvas.hasDragStartTransform = true
@@ -685,41 +710,43 @@ const mouseUpEvent = (evt) => {
             const tlist = getTransformList(elem)
             if (!tlist || tlist.numberOfItems === 0) return
 
-            // Get the transform from BEFORE the drag started
-            const oldTransform = svgCanvas.dragStartTransforms?.get(elem) || ''
+            // Get the transform from BEFORE this interaction started. `dragStartTransforms`
+            // is only populated for 'select'-mode (move) drags; 'resize'/'rotate' drags fall
+            // through to this same code with dragStartTransforms left null, so fall back to
+            // the value captured at mousedown via setStartTransform, which correctly reflects
+            // the prior transform (e.g. a matrix left by an earlier move) regardless of mode.
+            const oldTransform = svgCanvas.dragStartTransforms?.has(elem)
+              ? svgCanvas.dragStartTransforms.get(elem)
+              : (svgCanvas.getStartTransform() || '')
 
             // Check if the first transform is a translate (the drag transform we added)
             const firstTransform = tlist.getItem(0)
-            const hasDragTranslate = firstTransform.type === 2 // SVG_TRANSFORM_TRANSLATE
-
-            // For groups, we always consolidate the transforms (recalculateDimensions returns null for groups)
+            const hasDragTranslate = firstTransform.type === SVGTransform.SVG_TRANSFORM_TRANSLATE
+
+            // recalculateDimensions() returns null for groups (their transform must stay
+            // on the group itself), so consolidate those directly into one matrix. For
+            // every other element type, recalculateDimensions() already understands the
+            // translate/scale/translate shape produced by a resize (and plain translate
+            // from a move), and flattening into it keeps the shape's real geometry
+            // attributes (x/y/width/height/rx/ry/points/d/etc.) in sync - which is what
+            // drives the coordinate/size panel inputs and keeps stroke width from being
+            // visually distorted by a leftover scale matrix.
             const isGroup = elem.tagName === 'g' || elem.tagName === 'a'
 
-            // If element has 2+ transforms, or is a group with a drag translate, consolidate
-            if ((tlist.numberOfItems > 1 && hasDragTranslate) || (isGroup && hasDragTranslate)) {
-              const consolidatedMatrix = transformListToTransform(tlist).matrix
-
-              // Clear the transform list
-              while (tlist.numberOfItems > 0) {
-                tlist.removeItem(0)
-              }
-
-              // Add the consolidated matrix
-              const newTransform = svgCanvas.getSvgRoot().createSVGTransform()
-              newTransform.setMatrix(consolidatedMatrix)
-              tlist.appendItem(newTransform)
-
-              // Record the transform change for undo
-              batchCmd.addSubCommand(new ChangeElementCommand(elem, { transform: oldTransform }))
+            if (isGroup && hasDragTranslate) {
+              batchCmd.addSubCommand(consolidateTransform(svgCanvas.getSvgRoot(), elem, tlist, oldTransform))
               return
             }
 
-            // For non-group elements with simple transforms, try recalculateDimensions
             const cmd = svgCanvas.recalculateDimensions(elem)
             if (cmd) {
               batchCmd.addSubCommand(cmd)
+            } else if (tlist.numberOfItems > 1 && hasDragTranslate) {
+              // recalculateDimensions() didn't recognize this transform-list shape;
+              // fall back to consolidating into one matrix so the transform isn't lost.
+              batchCmd.addSubCommand(consolidateTransform(svgCanvas.getSvgRoot(), elem, tlist, oldTransform))
             } else {
-              // recalculateDimensions returned null
+              // recalculateDimensions returned null and there's nothing left to consolidate
               // Check if the transform actually changed and record it manually
               const newTransform = elem.getAttribute('transform') || ''
               if (newTransform !== oldTransform) {

package/core/history.js

@@ -8,6 +8,61 @@
 
 import { NS } from './namespaces.js'
 import { getHref, setHref, getRotationAngle, getBBox } from './utilities.js'
+import { getTransformList, transformListToTransform, transformPoint } from './math.js'
+
+// Attributes that affect an element's bounding box. Only these require
+// recalculating the rotation center when changed.
+export const BBOX_AFFECTING_ATTRS = new Set([
+  'x', 'y', 'x1', 'y1', 'x2', 'y2',
+  'cx', 'cy', 'r', 'rx', 'ry',
+  'width', 'height', 'd', 'points'
+])
+
+/**
+* Relocate rotation center after a bbox-affecting attribute change.
+* Uses the transform list API to update only the rotation entry,
+* preserving compound transforms (translate, scale, etc.).
+* @param {Element} elem - SVG element
+* @param {string[]} changedAttrs - attribute names that were changed
+*/
+function relocateRotationCenter (elem, changedAttrs) {
+  const hasBboxChange = changedAttrs.some(attr => BBOX_AFFECTING_ATTRS.has(attr))
+  if (!hasBboxChange) return
+
+  const angle = getRotationAngle(elem)
+  if (!angle) return
+
+  const tlist = getTransformList(elem)
+  let n = tlist.numberOfItems
+  while (n--) {
+    const xform = tlist.getItem(n)
+    if (xform.type === 4) { // SVG_TRANSFORM_ROTATE
+      // Compute bbox BEFORE removing the rotation so we can bail out
+      // safely if getBBox returns nothing (avoids losing the rotation).
+      const box = getBBox(elem)
+      if (!box) return
+
+      tlist.removeItem(n)
+
+      // Transform bbox center through only post-rotation transforms.
+      // After removeItem(n), what was at n+1 is now at n.
+      let centerMatrix
+      if (n < tlist.numberOfItems) {
+        centerMatrix = transformListToTransform(tlist, n, tlist.numberOfItems - 1).matrix
+      } else {
+        centerMatrix = elem.ownerSVGElement.createSVGMatrix() // identity
+      }
+      const center = transformPoint(
+        box.x + box.width / 2, box.y + box.height / 2, centerMatrix
+      )
+
+      const newrot = elem.ownerSVGElement.createSVGTransform()
+      newrot.setRotate(angle, center.x, center.y)
+      tlist.insertItemBefore(newrot, n)
+      break
+    }
+  }
+}
 
 /**
 * Group: Undo/Redo history management.
@@ -344,17 +399,7 @@ export class ChangeElementCommand extends Command {
 
       // relocate rotational transform, if necessary
       if (!bChangedTransform) {
-        const angle = getRotationAngle(this.elem)
-        if (angle) {
-          const bbox = getBBox(this.elem)
-          if (!bbox) return
-          const cx = bbox.x + bbox.width / 2
-          const cy = bbox.y + bbox.height / 2
-          const rotate = ['rotate(', angle, ' ', cx, ',', cy, ')'].join('')
-          if (rotate !== this.elem.getAttribute('transform')) {
-            this.elem.setAttribute('transform', rotate)
-          }
-        }
+        relocateRotationCenter(this.elem, Object.keys(this.newValues))
       }
     })
   }
@@ -388,17 +433,7 @@ export class ChangeElementCommand extends Command {
       })
       // relocate rotational transform, if necessary
       if (!bChangedTransform) {
-        const angle = getRotationAngle(this.elem)
-        if (angle) {
-          const bbox = getBBox(this.elem)
-          if (!bbox) return
-          const cx = bbox.x + bbox.width / 2
-          const cy = bbox.y + bbox.height / 2
-          const rotate = ['rotate(', angle, ' ', cx, ',', cy, ')'].join('')
-          if (rotate !== this.elem.getAttribute('transform')) {
-            this.elem.setAttribute('transform', rotate)
-          }
-        }
+        relocateRotationCenter(this.elem, Object.keys(this.oldValues))
       }
     })
   }

package/core/sanitize.js

@@ -11,6 +11,7 @@ import { getHref, getRefElem, setHref, getUrlFromAttr } from './utilities.js'
 import { warn } from '../common/logger.js'
 
 const REVERSE_NS = getReverseNS()
+const FONT_ATTRIBUTES = ['font-family', 'font-size', 'font-stretch', 'font-style', 'font-weight']
 
 // Todo: Split out into core attributes, presentation attributes, etc. so consistent
 /**
@@ -39,7 +40,7 @@ const svgWhiteList_ = {
   feOffset: ['dx', 'in', 'dy', 'result'],
   filter: ['color-interpolation-filters', 'filterRes', 'filterUnits', 'height', 'href', 'primitiveUnits', 'requiredFeatures', 'width', 'x', 'xlink:href', 'y'],
   foreignObject: ['font-size', 'height', 'opacity', 'requiredFeatures', 'width', 'x', 'y'],
-  g: ['clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'mask', 'opacity', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'systemLanguage', 'font-family', 'font-size', 'font-style', 'font-weight', 'text-anchor'],
+  g: [...FONT_ATTRIBUTES, 'clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'mask', 'opacity', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'systemLanguage', 'text-anchor'],
   image: [
     'clip-path', 'clip-rule', 'filter', 'height', 'mask', 'opacity',
     'preserveAspectRatio', 'requiredFeatures', 'systemLanguage', 'viewBox',
@@ -60,11 +61,11 @@ const svgWhiteList_ = {
   style: ['type'],
   svg: ['clip-path', 'clip-rule', 'enable-background', 'filter', 'height', 'mask', 'preserveAspectRatio', 'requiredFeatures', 'systemLanguage', 'version', 'viewBox', 'width', 'x', 'xmlns', 'xmlns:se', 'xmlns:xlink', 'xmlns:oi', 'oi:animations', 'y', 'stroke-linejoin', 'fill-rule', 'aria-label', 'stroke-width', 'fill-rule', 'xml:space'],
   switch: ['requiredFeatures', 'systemLanguage'],
-  symbol: ['fill', 'fill-opacity', 'fill-rule', 'filter', 'font-family', 'font-size', 'font-style', 'font-weight', 'opacity', 'overflow', 'preserveAspectRatio', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'systemLanguage', 'viewBox', 'width', 'height'],
-  text: ['clip-path', 'clip-rule', 'dominant-baseline', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'font-family', 'font-size', 'font-style', 'font-weight', 'mask', 'opacity', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'systemLanguage', 'text-anchor', 'letter-spacing', 'word-spacing', 'text-decoration', 'textLength', 'lengthAdjust', 'x', 'xml:space', 'y'],
+  symbol: [...FONT_ATTRIBUTES, 'fill', 'fill-opacity', 'fill-rule', 'filter', 'opacity', 'overflow', 'preserveAspectRatio', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'systemLanguage', 'viewBox', 'width', 'height'],
+  text: [...FONT_ATTRIBUTES, 'clip-path', 'clip-rule', 'dominant-baseline', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'mask', 'opacity', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'systemLanguage', 'text-anchor', 'letter-spacing', 'word-spacing', 'text-decoration', 'textLength', 'lengthAdjust', 'x', 'xml:space', 'y'],
   textPath: ['dominant-baseline', 'href', 'method', 'requiredFeatures', 'spacing', 'startOffset', 'systemLanguage', 'xlink:href'],
   title: [],
-  tspan: ['clip-path', 'clip-rule', 'dx', 'dy', 'dominant-baseline', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'font-family', 'font-size', 'font-style', 'font-weight', 'mask', 'opacity', 'requiredFeatures', 'rotate', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'systemLanguage', 'text-anchor', 'textLength', 'x', 'xml:space', 'y'],
+  tspan: [...FONT_ATTRIBUTES, 'clip-path', 'clip-rule', 'dx', 'dy', 'dominant-baseline', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'mask', 'opacity', 'requiredFeatures', 'rotate', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'systemLanguage', 'text-anchor', 'textLength', 'x', 'xml:space', 'y'],
   use: ['clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'height', 'href', 'mask', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'width', 'x', 'xlink:href', 'y', 'overflow'],
   // Filter Primitives
   feComponentTransfer: ['in', 'result'],

package/core/selected-elem.js

@@ -1069,6 +1069,7 @@ const convertToGroup = elem => {
     tlist.appendItem(xform)
     recalculateDimensions(elem)
     svgCanvas.call('selected', [elem])
+    return elem
   } else if (dataStorage.has($elem, 'symbol')) {
     elem = dataStorage.get($elem, 'symbol')
     if (!elem) {
@@ -1203,8 +1204,10 @@ const convertToGroup = elem => {
     }
 
     svgCanvas.addCommandToHistory(batchCmd)
+    return g
   } else {
     warn('Unexpected element to ungroup:', elem, 'selected-elem')
+    return null
   }
 }
 
@@ -1222,11 +1225,14 @@ const ungroupSelectedElement = () => {
     return
   }
   if (dataStorage.has(g, 'gsvg') || dataStorage.has(g, 'symbol')) {
-    // Is svg, so actually convert to group
-    convertToGroup(g)
-    return
-  }
-  if (g.tagName === 'use') {
+    // Is svg (e.g. imported content), so convert to a real group first, then
+    // fall through below to actually ungroup/flatten that new group - a
+    // single Ungroup action on imported content should ungroup it, not just
+    // silently swap its <use>/gsvg wrapper for a <g> that still needs a
+    // second Ungroup to do anything.
+    g = convertToGroup(g)
+    if (!g) { return }
+  } else if (g.tagName === 'use') {
     // Somehow doesn't have data set, so retrieve
     const href = getHref(g)
     if (!href || !href.startsWith('#')) {
@@ -1240,8 +1246,8 @@ const ungroupSelectedElement = () => {
     }
     dataStorage.put(g, 'symbol', symbol)
     dataStorage.put(g, 'ref', symbol)
-    convertToGroup(g)
-    return
+    g = convertToGroup(g)
+    if (!g) { return }
   }
   const parentsA = getParents(g.parentNode, 'a')
   if (parentsA?.length) {

package/core/text-actions.js

@@ -6,7 +6,7 @@
  */
 
 import { NS } from './namespaces.js'
-import { transformPoint, getMatrix } from './math.js'
+import { transformPoint, matrixMultiply, getTransformList, transformListToTransform } from './math.js'
 import {
   assignAttributes,
   getElement,
@@ -44,6 +44,40 @@ class TextActions {
   #lastY = null
   #allowDbl = false
 
+  /**
+   * Get the accumulated transformation matrix from the element up to the SVG content element.
+   * This includes transforms from all parent groups, fixing the issue where text cursor
+   * appears in the wrong position when editing text inside a transformed group.
+   * @param {Element} elem - The element to get the accumulated matrix for
+   * @returns {SVGMatrix|null} The accumulated transformation matrix, or null if none
+   * @private
+   */
+  #getAccumulatedMatrix = (elem) => {
+    const svgContent = svgCanvas.getSvgContent()
+    const matrices = []
+
+    let current = elem
+    while (current && current !== svgContent && current.nodeType === 1) {
+      const tlist = getTransformList(current)
+      if (tlist && tlist.numberOfItems > 0) {
+        const matrix = transformListToTransform(tlist).matrix
+        matrices.unshift(matrix) // Add to beginning to maintain correct order
+      }
+      current = current.parentNode
+    }
+
+    if (matrices.length === 0) {
+      return null
+    }
+
+    if (matrices.length === 1) {
+      return matrices[0]
+    }
+
+    // Multiply all matrices together
+    return matrixMultiply(...matrices)
+  }
+
   /**
    *
    * @param {Integer} index
@@ -526,11 +560,12 @@ class TextActions {
     const str = this.#curtext.textContent
     const len = str.length
 
-    const xform = this.#curtext.getAttribute('transform')
-
     this.#textbb = utilsGetBBox(this.#curtext)
 
-    this.#matrix = xform ? getMatrix(this.#curtext) : null
+    // Calculate accumulated transform matrix including all parent groups
+    // This fixes the issue where text cursor appears in wrong position
+    // when editing text inside a group with transforms
+    this.#matrix = this.#getAccumulatedMatrix(this.#curtext)
 
     this.#chardata = []
     this.#chardata.length = len