@svgedit/svgcanvas 7.2.7 → 7.4.2

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,
@@ -28,68 +28,103 @@ export const init = canvas => {
 /**
  * Group: Text edit functions
  * Functions relating to editing text elements.
- * @namespace {PlainObject} textActions
+ * @class TextActions
  * @memberof module:svgcanvas.SvgCanvas#
  */
-export const textActionsMethod = (function () {
-  let curtext
-  let textinput
-  let cursor
-  let selblock
-  let blinker
-  let chardata = []
-  let textbb // , transbb;
-  let matrix
-  let lastX
-  let lastY
-  let allowDbl
+class TextActions {
+  #curtext = null
+  #textinput = null
+  #cursor = null
+  #selblock = null
+  #blinker = null
+  #chardata = []
+  #textbb = null // , transbb;
+  #matrix = null
+  #lastX = null
+  #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
    * @returns {void}
+   * @private
    */
-  function setCursor (index) {
-    const empty = textinput.value === ''
-    textinput.focus()
+  #setCursor = (index = undefined) => {
+    const empty = this.#textinput.value === ''
+    this.#textinput.focus()
 
-    if (!arguments.length) {
+    if (index === undefined) {
       if (empty) {
         index = 0
       } else {
-        if (textinput.selectionEnd !== textinput.selectionStart) {
+        if (this.#textinput.selectionEnd !== this.#textinput.selectionStart) {
           return
         }
-        index = textinput.selectionEnd
+        index = this.#textinput.selectionEnd
       }
     }
 
-    const charbb = chardata[index]
+    const charbb = this.#chardata[index]
     if (!empty) {
-      textinput.setSelectionRange(index, index)
+      this.#textinput.setSelectionRange(index, index)
     }
-    cursor = getElement('text_cursor')
-    if (!cursor) {
-      cursor = document.createElementNS(NS.SVG, 'line')
-      assignAttributes(cursor, {
+    this.#cursor = getElement('text_cursor')
+    if (!this.#cursor) {
+      this.#cursor = document.createElementNS(NS.SVG, 'line')
+      assignAttributes(this.#cursor, {
         id: 'text_cursor',
         stroke: '#333',
         'stroke-width': 1
       })
-      getElement('selectorParentGroup').append(cursor)
+      getElement('selectorParentGroup').append(this.#cursor)
     }
 
-    if (!blinker) {
-      blinker = setInterval(function () {
-        const show = cursor.getAttribute('display') === 'none'
-        cursor.setAttribute('display', show ? 'inline' : 'none')
+    if (!this.#blinker) {
+      this.#blinker = setInterval(() => {
+        const show = this.#cursor.getAttribute('display') === 'none'
+        this.#cursor.setAttribute('display', show ? 'inline' : 'none')
       }, 600)
     }
 
-    const startPt = ptToScreen(charbb.x, textbb.y)
-    const endPt = ptToScreen(charbb.x, textbb.y + textbb.height)
+    const startPt = this.#ptToScreen(charbb.x, this.#textbb.y)
+    const endPt = this.#ptToScreen(charbb.x, this.#textbb.y + this.#textbb.height)
 
-    assignAttributes(cursor, {
+    assignAttributes(this.#cursor, {
       x1: startPt.x,
       y1: startPt.y,
       x2: endPt.x,
@@ -98,8 +133,8 @@ export const textActionsMethod = (function () {
       display: 'inline'
     })
 
-    if (selblock) {
-      selblock.setAttribute('d', '')
+    if (this.#selblock) {
+      this.#selblock.setAttribute('d', '')
     }
   }
 
@@ -109,40 +144,41 @@ export const textActionsMethod = (function () {
    * @param {Integer} end
    * @param {boolean} skipInput
    * @returns {void}
+   * @private
    */
-  function setSelection (start, end, skipInput) {
+  #setSelection = (start, end, skipInput) => {
     if (start === end) {
-      setCursor(end)
+      this.#setCursor(end)
       return
     }
 
     if (!skipInput) {
-      textinput.setSelectionRange(start, end)
+      this.#textinput.setSelectionRange(start, end)
     }
 
-    selblock = getElement('text_selectblock')
-    if (!selblock) {
-      selblock = document.createElementNS(NS.SVG, 'path')
-      assignAttributes(selblock, {
+    this.#selblock = getElement('text_selectblock')
+    if (!this.#selblock) {
+      this.#selblock = document.createElementNS(NS.SVG, 'path')
+      assignAttributes(this.#selblock, {
         id: 'text_selectblock',
         fill: 'green',
         opacity: 0.5,
         style: 'pointer-events:none'
       })
-      getElement('selectorParentGroup').append(selblock)
+      getElement('selectorParentGroup').append(this.#selblock)
     }
 
-    const startbb = chardata[start]
-    const endbb = chardata[end]
+    const startbb = this.#chardata[start]
+    const endbb = this.#chardata[end]
 
-    cursor.setAttribute('visibility', 'hidden')
+    this.#cursor.setAttribute('visibility', 'hidden')
 
-    const tl = ptToScreen(startbb.x, textbb.y)
-    const tr = ptToScreen(startbb.x + (endbb.x - startbb.x), textbb.y)
-    const bl = ptToScreen(startbb.x, textbb.y + textbb.height)
-    const br = ptToScreen(
+    const tl = this.#ptToScreen(startbb.x, this.#textbb.y)
+    const tr = this.#ptToScreen(startbb.x + (endbb.x - startbb.x), this.#textbb.y)
+    const bl = this.#ptToScreen(startbb.x, this.#textbb.y + this.#textbb.height)
+    const br = this.#ptToScreen(
       startbb.x + (endbb.x - startbb.x),
-      textbb.y + textbb.height
+      this.#textbb.y + this.#textbb.height
     )
 
     const dstr =
@@ -164,7 +200,7 @@ export const textActionsMethod = (function () {
       bl.y +
       'z'
 
-    assignAttributes(selblock, {
+    assignAttributes(this.#selblock, {
       d: dstr,
       display: 'inline'
     })
@@ -175,29 +211,30 @@ export const textActionsMethod = (function () {
    * @param {Float} mouseX
    * @param {Float} mouseY
    * @returns {Integer}
+   * @private
    */
-  function getIndexFromPoint (mouseX, mouseY) {
+  #getIndexFromPoint = (mouseX, mouseY) => {
     // Position cursor here
     const pt = svgCanvas.getSvgRoot().createSVGPoint()
     pt.x = mouseX
     pt.y = mouseY
 
     // No content, so return 0
-    if (chardata.length === 1) {
+    if (this.#chardata.length === 1) {
       return 0
     }
     // Determine if cursor should be on left or right of character
-    let charpos = curtext.getCharNumAtPosition(pt)
+    let charpos = this.#curtext.getCharNumAtPosition(pt)
     if (charpos < 0) {
       // Out of text range, look at mouse coords
-      charpos = chardata.length - 2
-      if (mouseX <= chardata[0].x) {
+      charpos = this.#chardata.length - 2
+      if (mouseX <= this.#chardata[0].x) {
         charpos = 0
       }
-    } else if (charpos >= chardata.length - 2) {
-      charpos = chardata.length - 2
+    } else if (charpos >= this.#chardata.length - 2) {
+      charpos = this.#chardata.length - 2
     }
-    const charbb = chardata[charpos]
+    const charbb = this.#chardata[charpos]
     const mid = charbb.x + charbb.width / 2
     if (mouseX > mid) {
       charpos++
@@ -210,9 +247,10 @@ export const textActionsMethod = (function () {
    * @param {Float} mouseX
    * @param {Float} mouseY
    * @returns {void}
+   * @private
    */
-  function setCursorFromPoint (mouseX, mouseY) {
-    setCursor(getIndexFromPoint(mouseX, mouseY))
+  #setCursorFromPoint = (mouseX, mouseY) => {
+    this.#setCursor(this.#getIndexFromPoint(mouseX, mouseY))
   }
 
   /**
@@ -221,14 +259,15 @@ export const textActionsMethod = (function () {
    * @param {Float} y
    * @param {boolean} apply
    * @returns {void}
+   * @private
    */
-  function setEndSelectionFromPoint (x, y, apply) {
-    const i1 = textinput.selectionStart
-    const i2 = getIndexFromPoint(x, y)
+  #setEndSelectionFromPoint = (x, y, apply) => {
+    const i1 = this.#textinput.selectionStart
+    const i2 = this.#getIndexFromPoint(x, y)
 
     const start = Math.min(i1, i2)
     const end = Math.max(i1, i2)
-    setSelection(start, end, !apply)
+    this.#setSelection(start, end, !apply)
   }
 
   /**
@@ -236,8 +275,9 @@ export const textActionsMethod = (function () {
    * @param {Float} xIn
    * @param {Float} yIn
    * @returns {module:math.XYObject}
+   * @private
    */
-  function screenToPt (xIn, yIn) {
+  #screenToPt = (xIn, yIn) => {
     const out = {
       x: xIn,
       y: yIn
@@ -246,8 +286,8 @@ export const textActionsMethod = (function () {
     out.x /= zoom
     out.y /= zoom
 
-    if (matrix) {
-      const pt = transformPoint(out.x, out.y, matrix.inverse())
+    if (this.#matrix) {
+      const pt = transformPoint(out.x, out.y, this.#matrix.inverse())
       out.x = pt.x
       out.y = pt.y
     }
@@ -260,15 +300,16 @@ export const textActionsMethod = (function () {
    * @param {Float} xIn
    * @param {Float} yIn
    * @returns {module:math.XYObject}
+   * @private
    */
-  function ptToScreen (xIn, yIn) {
+  #ptToScreen = (xIn, yIn) => {
     const out = {
       x: xIn,
       y: yIn
     }
 
-    if (matrix) {
-      const pt = transformPoint(out.x, out.y, matrix)
+    if (this.#matrix) {
+      const pt = transformPoint(out.x, out.y, this.#matrix)
       out.x = pt.x
       out.y = pt.y
     }
@@ -283,279 +324,294 @@ export const textActionsMethod = (function () {
    *
    * @param {Event} evt
    * @returns {void}
+   * @private
    */
-  function selectAll (evt) {
-    setSelection(0, curtext.textContent.length)
-    evt.target.removeEventListener('click', selectAll)
+  #selectAll = (evt) => {
+    this.#setSelection(0, this.#curtext.textContent.length)
+    evt.target.removeEventListener('click', this.#selectAll)
   }
 
   /**
    *
    * @param {Event} evt
    * @returns {void}
+   * @private
    */
-  function selectWord (evt) {
-    if (!allowDbl || !curtext) {
+  #selectWord = (evt) => {
+    if (!this.#allowDbl || !this.#curtext) {
       return
     }
     const zoom = svgCanvas.getZoom()
     const ept = transformPoint(evt.pageX, evt.pageY, svgCanvas.getrootSctm())
     const mouseX = ept.x * zoom
     const mouseY = ept.y * zoom
-    const pt = screenToPt(mouseX, mouseY)
+    const pt = this.#screenToPt(mouseX, mouseY)
 
-    const index = getIndexFromPoint(pt.x, pt.y)
-    const str = curtext.textContent
-    const first = str.substr(0, index).replace(/[a-z\d]+$/i, '').length
-    const m = str.substr(index).match(/^[a-z\d]+/i)
+    const index = this.#getIndexFromPoint(pt.x, pt.y)
+    const str = this.#curtext.textContent
+    const first = str.slice(0, index).replace(/[a-z\d]+$/i, '').length
+    const m = str.slice(index).match(/^[a-z\d]+/i)
     const last = (m ? m[0].length : 0) + index
-    setSelection(first, last)
+    this.#setSelection(first, last)
 
     // Set tripleclick
-    svgCanvas.$click(evt.target, selectAll)
+    svgCanvas.$click(evt.target, this.#selectAll)
 
-    setTimeout(function () {
-      evt.target.removeEventListener('click', selectAll)
+    setTimeout(() => {
+      evt.target.removeEventListener('click', this.#selectAll)
     }, 300)
   }
 
-  return /** @lends module:svgcanvas.SvgCanvas#textActions */ {
-    /**
-     * @param {Element} target
-     * @param {Float} x
-     * @param {Float} y
-     * @returns {void}
-     */
-    select (target, x, y) {
-      curtext = target
-      svgCanvas.textActions.toEditMode(x, y)
-    },
-    /**
-     * @param {Element} elem
-     * @returns {void}
-     */
-    start (elem) {
-      curtext = elem
-      svgCanvas.textActions.toEditMode()
-    },
-    /**
-     * @param {external:MouseEvent} evt
-     * @param {Element} mouseTarget
-     * @param {Float} startX
-     * @param {Float} startY
-     * @returns {void}
-     */
-    mouseDown (evt, mouseTarget, startX, startY) {
-      const pt = screenToPt(startX, startY)
-
-      textinput.focus()
-      setCursorFromPoint(pt.x, pt.y)
-      lastX = startX
-      lastY = startY
-
-      // TODO: Find way to block native selection
-    },
-    /**
-     * @param {Float} mouseX
-     * @param {Float} mouseY
-     * @returns {void}
-     */
-    mouseMove (mouseX, mouseY) {
-      const pt = screenToPt(mouseX, mouseY)
-      setEndSelectionFromPoint(pt.x, pt.y)
-    },
-    /**
-     * @param {external:MouseEvent} evt
-     * @param {Float} mouseX
-     * @param {Float} mouseY
-     * @returns {void}
-     */
-    mouseUp (evt, mouseX, mouseY) {
-      const pt = screenToPt(mouseX, mouseY)
-
-      setEndSelectionFromPoint(pt.x, pt.y, true)
-
-      // TODO: Find a way to make this work: Use transformed BBox instead of evt.target
-      // if (lastX === mouseX && lastY === mouseY
-      //   && !rectsIntersect(transbb, {x: pt.x, y: pt.y, width: 0, height: 0})) {
-      //   svgCanvas.textActions.toSelectMode(true);
-      // }
-
-      if (
-        evt.target !== curtext &&
-        mouseX < lastX + 2 &&
-        mouseX > lastX - 2 &&
-        mouseY < lastY + 2 &&
-        mouseY > lastY - 2
-      ) {
-        svgCanvas.textActions.toSelectMode(true)
-      }
-    },
-    /**
-     * @function
-     * @param {Integer} index
-     * @returns {void}
-     */
-    setCursor,
-    /**
-     * @param {Float} x
-     * @param {Float} y
-     * @returns {void}
-     */
-    toEditMode (x, y) {
-      allowDbl = false
-      svgCanvas.setCurrentMode('textedit')
-      svgCanvas.selectorManager.requestSelector(curtext).showGrips(false)
-      // Make selector group accept clicks
-      /* const selector = */ svgCanvas.selectorManager.requestSelector(curtext) // Do we need this? Has side effect of setting lock, so keeping for now, but next line wasn't being used
-      // const sel = selector.selectorRect;
-
-      svgCanvas.textActions.init()
-
-      curtext.style.cursor = 'text'
-
-      // if (supportsEditableText()) {
-      //   curtext.setAttribute('editable', 'simple');
-      //   return;
-      // }
-
-      if (!arguments.length) {
-        setCursor()
-      } else {
-        const pt = screenToPt(x, y)
-        setCursorFromPoint(pt.x, pt.y)
-      }
+  /**
+   * @param {Element} target
+   * @param {Float} x
+   * @param {Float} y
+   * @returns {void}
+   */
+  select (target, x, y) {
+    this.#curtext = target
+    svgCanvas.textActions.toEditMode(x, y)
+  }
 
-      setTimeout(function () {
-        allowDbl = true
-      }, 300)
-    },
-    /**
-     * @param {boolean|Element} selectElem
-     * @fires module:svgcanvas.SvgCanvas#event:selected
-     * @returns {void}
-     */
-    toSelectMode (selectElem) {
-      svgCanvas.setCurrentMode('select')
-      clearInterval(blinker)
-      blinker = null
-      if (selblock) {
-        selblock.setAttribute('display', 'none')
-      }
-      if (cursor) {
-        cursor.setAttribute('visibility', 'hidden')
-      }
-      curtext.style.cursor = 'move'
+  /**
+   * @param {Element} elem
+   * @returns {void}
+   */
+  start (elem) {
+    this.#curtext = elem
+    svgCanvas.textActions.toEditMode()
+  }
 
-      if (selectElem) {
-        svgCanvas.clearSelection()
-        curtext.style.cursor = 'move'
+  /**
+   * @param {external:MouseEvent} evt
+   * @param {Element} mouseTarget
+   * @param {Float} startX
+   * @param {Float} startY
+   * @returns {void}
+   */
+  mouseDown (evt, mouseTarget, startX, startY) {
+    const pt = this.#screenToPt(startX, startY)
 
-        svgCanvas.call('selected', [curtext])
-        svgCanvas.addToSelection([curtext], true)
-      }
-      if (!curtext?.textContent.length) {
-        // No content, so delete
-        svgCanvas.deleteSelectedElements()
-      }
+    this.#textinput.focus()
+    this.#setCursorFromPoint(pt.x, pt.y)
+    this.#lastX = startX
+    this.#lastY = startY
 
-      textinput.blur()
-
-      curtext = false
-
-      // if (supportsEditableText()) {
-      //   curtext.removeAttribute('editable');
-      // }
-    },
-    /**
-     * @param {Element} elem
-     * @returns {void}
-     */
-    setInputElem (elem) {
-      textinput = elem
-    },
-    /**
-     * @returns {void}
-     */
-    clear () {
-      if (svgCanvas.getCurrentMode() === 'textedit') {
-        svgCanvas.textActions.toSelectMode()
-      }
-    },
-    /**
-     * @param {Element} _inputElem Not in use
-     * @returns {void}
-     */
-    init (_inputElem) {
-      if (!curtext) {
-        return
-      }
-      let i
-      let end
-      // if (supportsEditableText()) {
-      //   curtext.select();
-      //   return;
-      // }
-
-      if (!curtext.parentNode) {
-        // Result of the ffClone, need to get correct element
-        const selectedElements = svgCanvas.getSelectedElements()
-        curtext = selectedElements[0]
-        svgCanvas.selectorManager.requestSelector(curtext).showGrips(false)
-      }
+    // TODO: Find way to block native selection
+  }
+
+  /**
+   * @param {Float} mouseX
+   * @param {Float} mouseY
+   * @returns {void}
+   */
+  mouseMove (mouseX, mouseY) {
+    const pt = this.#screenToPt(mouseX, mouseY)
+    this.#setEndSelectionFromPoint(pt.x, pt.y)
+  }
+
+  /**
+   * @param {external:MouseEvent} evt
+   * @param {Float} mouseX
+   * @param {Float} mouseY
+   * @returns {void}
+   */
+  mouseUp (evt, mouseX, mouseY) {
+    const pt = this.#screenToPt(mouseX, mouseY)
+
+    this.#setEndSelectionFromPoint(pt.x, pt.y, true)
+
+    // TODO: Find a way to make this work: Use transformed BBox instead of evt.target
+    // if (lastX === mouseX && lastY === mouseY
+    //   && !rectsIntersect(transbb, {x: pt.x, y: pt.y, width: 0, height: 0})) {
+    //   svgCanvas.textActions.toSelectMode(true);
+    // }
+
+    if (
+      evt.target !== this.#curtext &&
+      mouseX < this.#lastX + 2 &&
+      mouseX > this.#lastX - 2 &&
+      mouseY < this.#lastY + 2 &&
+      mouseY > this.#lastY - 2
+    ) {
+      svgCanvas.textActions.toSelectMode(true)
+    }
+  }
+
+  /**
+   * @param {Integer} index
+   * @returns {void}
+   */
+  setCursor (index) {
+    this.#setCursor(index)
+  }
 
-      const str = curtext.textContent
-      const len = str.length
+  /**
+   * @param {Float} x
+   * @param {Float} y
+   * @returns {void}
+   */
+  toEditMode (x, y) {
+    this.#allowDbl = false
+    svgCanvas.setCurrentMode('textedit')
+    svgCanvas.selectorManager.requestSelector(this.#curtext).showGrips(false)
+    // Make selector group accept clicks
+    /* const selector = */ svgCanvas.selectorManager.requestSelector(this.#curtext) // Do we need this? Has side effect of setting lock, so keeping for now, but next line wasn't being used
+    // const sel = selector.selectorRect;
+
+    svgCanvas.textActions.init()
+
+    this.#curtext.style.cursor = 'text'
+
+    // if (supportsEditableText()) {
+    //   curtext.setAttribute('editable', 'simple');
+    //   return;
+    // }
+
+    if (arguments.length === 0) {
+      this.#setCursor()
+    } else {
+      const pt = this.#screenToPt(x, y)
+      this.#setCursorFromPoint(pt.x, pt.y)
+    }
 
-      const xform = curtext.getAttribute('transform')
+    setTimeout(() => {
+      this.#allowDbl = true
+    }, 300)
+  }
 
-      textbb = utilsGetBBox(curtext)
+  /**
+   * @param {boolean|Element} selectElem
+   * @fires module:svgcanvas.SvgCanvas#event:selected
+   * @returns {void}
+   */
+  toSelectMode (selectElem) {
+    svgCanvas.setCurrentMode('select')
+    clearInterval(this.#blinker)
+    this.#blinker = null
+    if (this.#selblock) {
+      this.#selblock.setAttribute('display', 'none')
+    }
+    if (this.#cursor) {
+      this.#cursor.setAttribute('visibility', 'hidden')
+    }
+    this.#curtext.style.cursor = 'move'
 
-      matrix = xform ? getMatrix(curtext) : null
+    if (selectElem) {
+      svgCanvas.clearSelection()
+      this.#curtext.style.cursor = 'move'
 
-      chardata = []
-      chardata.length = len
-      textinput.focus()
+      svgCanvas.call('selected', [this.#curtext])
+      svgCanvas.addToSelection([this.#curtext], true)
+    }
+    if (!this.#curtext?.textContent.length) {
+      // No content, so delete
+      svgCanvas.deleteSelectedElements()
+    }
 
-      curtext.removeEventListener('dblclick', selectWord)
-      curtext.addEventListener('dblclick', selectWord)
+    this.#textinput.blur()
 
-      if (!len) {
-        end = { x: textbb.x + textbb.width / 2, width: 0 }
-      }
+    this.#curtext = false
 
-      for (i = 0; i < len; i++) {
-        const start = curtext.getStartPositionOfChar(i)
-        end = curtext.getEndPositionOfChar(i)
+    // if (supportsEditableText()) {
+    //   curtext.removeAttribute('editable');
+    // }
+  }
 
-        if (!supportsGoodTextCharPos()) {
-          const zoom = svgCanvas.getZoom()
-          const offset = svgCanvas.contentW * zoom
-          start.x -= offset
-          end.x -= offset
+  /**
+   * @param {Element} elem
+   * @returns {void}
+   */
+  setInputElem (elem) {
+    this.#textinput = elem
+  }
 
-          start.x /= zoom
-          end.x /= zoom
-        }
+  /**
+   * @returns {void}
+   */
+  clear () {
+    if (svgCanvas.getCurrentMode() === 'textedit') {
+      svgCanvas.textActions.toSelectMode()
+    }
+  }
 
-        // Get a "bbox" equivalent for each character. Uses the
-        // bbox data of the actual text for y, height purposes
+  /**
+   * @param {Element} _inputElem Not in use
+   * @returns {void}
+   */
+  init (_inputElem) {
+    if (!this.#curtext) {
+      return
+    }
+    let i
+    let end
+    // if (supportsEditableText()) {
+    //   curtext.select();
+    //   return;
+    // }
+
+    if (!this.#curtext.parentNode) {
+      // Result of the ffClone, need to get correct element
+      const selectedElements = svgCanvas.getSelectedElements()
+      this.#curtext = selectedElements[0]
+      svgCanvas.selectorManager.requestSelector(this.#curtext).showGrips(false)
+    }
 
-        // TODO: Decide if y, width and height are actually necessary
-        chardata[i] = {
-          x: start.x,
-          y: textbb.y, // start.y?
-          width: end.x - start.x,
-          height: textbb.height
-        }
+    const str = this.#curtext.textContent
+    const len = str.length
+
+    this.#textbb = utilsGetBBox(this.#curtext)
+
+    // 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
+    this.#textinput.focus()
+
+    this.#curtext.removeEventListener('dblclick', this.#selectWord)
+    this.#curtext.addEventListener('dblclick', this.#selectWord)
+
+    if (!len) {
+      end = { x: this.#textbb.x + this.#textbb.width / 2, width: 0 }
+    }
+
+    for (i = 0; i < len; i++) {
+      const start = this.#curtext.getStartPositionOfChar(i)
+      end = this.#curtext.getEndPositionOfChar(i)
+
+      if (!supportsGoodTextCharPos()) {
+        const zoom = svgCanvas.getZoom()
+        const offset = svgCanvas.contentW * zoom
+        start.x -= offset
+        end.x -= offset
+
+        start.x /= zoom
+        end.x /= zoom
       }
 
-      // Add a last bbox for cursor at end of text
-      chardata.push({
-        x: end.x,
-        width: 0
-      })
-      setSelection(textinput.selectionStart, textinput.selectionEnd, true)
+      // Get a "bbox" equivalent for each character. Uses the
+      // bbox data of the actual text for y, height purposes
+
+      // TODO: Decide if y, width and height are actually necessary
+      this.#chardata[i] = {
+        x: start.x,
+        y: this.#textbb.y, // start.y?
+        width: end.x - start.x,
+        height: this.#textbb.height
+      }
     }
+
+    // Add a last bbox for cursor at end of text
+    this.#chardata.push({
+      x: end.x,
+      width: 0
+    })
+    this.#setSelection(this.#textinput.selectionStart, this.#textinput.selectionEnd, true)
   }
-})()
+}
+
+// Export singleton instance for backward compatibility
+export const textActionsMethod = new TextActions()