/**
 * Recalculate.
 * @module recalculate
 * @license MIT
 */

import { NS } from './namespaces.js'
import { convertToNum } from './units.js'
import { getRotationAngle, getHref, getBBox, getRefElem } from './utilities.js'
import { BatchCommand, ChangeElementCommand } from './history.js'
import { remapElement } from './coords.js'
import {
  isIdentity, matrixMultiply, transformPoint, transformListToTransform,
  hasMatrixTransform
} from './math.js'
import {
  mergeDeep
} from '../../src/common/util.js'

let svgCanvas

/**
* @interface module:recalculate.EditorContext
*/
/**
 * @function module:recalculate.EditorContext#getSvgRoot
 * @returns {SVGSVGElement} The root DOM element
 */
/**
 * @function module:recalculate.EditorContext#getStartTransform
 * @returns {string}
*/
/**
 * @function module:recalculate.EditorContext#setStartTransform
 * @param {string} transform
 * @returns {void}
 */

/**
* @function module:recalculate.init
* @param {module:recalculate.EditorContext} editorContext
* @returns {void}
*/
export const init = (canvas) => {
  svgCanvas = canvas
}

/**
* Updates a `<clipPath>`s values based on the given translation of an element.
* @function module:recalculate.updateClipPath
* @param {string} attr - The clip-path attribute value with the clipPath's ID
* @param {Float} tx - The translation's x value
* @param {Float} ty - The translation's y value
* @returns {void}
*/
export const updateClipPath = (attr, tx, ty) => {
  const path = getRefElem(attr).firstChild
  const cpXform = path.transform.baseVal
  const newxlate = svgCanvas.getSvgRoot().createSVGTransform()
  newxlate.setTranslate(tx, ty)

  cpXform.appendItem(newxlate)

  // Update clipPath's dimensions
  recalculateDimensions(path)
}

/**
* Decides the course of action based on the element's transform list.
* @function module:recalculate.recalculateDimensions
* @param {Element} selected - The DOM element to recalculate
* @returns {Command} Undo command object with the resulting change
*/
export const recalculateDimensions = (selected) => {
  if (!selected) return null
  const svgroot = svgCanvas.getSvgRoot()
  const dataStorage = svgCanvas.getDataStorage()
  const tlist = selected.transform?.baseVal
  // remove any unnecessary transforms
  if (tlist?.numberOfItems > 0) {
    let k = tlist.numberOfItems
    const noi = k
    while (k--) {
      const xform = tlist.getItem(k)
      if (xform.type === 0) {
        tlist.removeItem(k)
        // remove identity matrices
      } else if (xform.type === 1) {
        if (isIdentity(xform.matrix)) {
          if (noi === 1) {
            // Overcome Chrome bug (though only when noi is 1) with
            //    `removeItem` preventing `removeAttribute` from
            //    subsequently working
            // See https://bugs.chromium.org/p/chromium/issues/detail?id=843901
            selected.removeAttribute('transform')
            return null
          }
          tlist.removeItem(k)
        }
        // remove zero-degree rotations
      } else if (xform.type === 4 && xform.angle === 0) {
        tlist.removeItem(k)
      }
    }
    // End here if all it has is a rotation
    if (tlist.numberOfItems === 1 &&
      getRotationAngle(selected)) { return null }
  }

  // if this element had no transforms, we are done
  if (!tlist || tlist.numberOfItems === 0) {
    // Chrome apparently had a bug that requires clearing the attribute first.
    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
  }

  // TODO: Make this work for more than 2
  if (tlist) {
    let mxs = []
    let k = tlist.numberOfItems
    while (k--) {
      const xform = tlist.getItem(k)
      if (xform.type === 1) {
        mxs.push([xform.matrix, k])
      } else if (mxs.length) {
        mxs = []
      }
    }
    if (mxs.length === 2) {
      const mNew = svgroot.createSVGTransformFromMatrix(matrixMultiply(mxs[1][0], mxs[0][0]))
      tlist.removeItem(mxs[0][1])
      tlist.removeItem(mxs[1][1])
      tlist.insertItemBefore(mNew, mxs[1][1])
    }

    // combine matrix + translate
    k = tlist.numberOfItems
    if (k >= 2 && tlist.getItem(k - 2).type === 1 && tlist.getItem(k - 1).type === 2) {
      const mt = svgroot.createSVGTransform()

      const m = matrixMultiply(
        tlist.getItem(k - 2).matrix,
        tlist.getItem(k - 1).matrix
      )
      mt.setMatrix(m)
      tlist.removeItem(k - 2)
      tlist.removeItem(k - 2)
      tlist.appendItem(mt)
    }
  }

  // If it still has a single [M] or [R][M], return null too (prevents BatchCommand from being returned).
  switch (selected.tagName) {
    // Ignore these elements, as they can absorb the [M]
    case 'line':
    case 'polyline':
    case 'polygon':
    case 'path':
      break
    default:
      if ((tlist.numberOfItems === 1 && tlist.getItem(0).type === 1) ||
        (tlist.numberOfItems === 2 && tlist.getItem(0).type === 1 && tlist.getItem(0).type === 4)) {
        return null
      }
  }
  // Grouped SVG element
  const gsvg = (dataStorage.has(selected, 'gsvg')) ? dataStorage.get(selected, 'gsvg') : undefined
  // we know we have some transforms, so set up return variable
  const batchCmd = new BatchCommand('Transform')

  // store initial values that will be affected by reducing the transform list
  let changes = {}
  let initial = null
  let attrs = []
  switch (selected.tagName) {
    case 'line':
      attrs = ['x1', 'y1', 'x2', 'y2']
      break
    case 'circle':
      attrs = ['cx', 'cy', 'r']
      break
    case 'ellipse':
      attrs = ['cx', 'cy', 'rx', 'ry']
      break
    case 'foreignObject':
    case 'rect':
    case 'image':
      attrs = ['width', 'height', 'x', 'y']
      break
    case 'use':
    case 'text':
    case 'tspan':
      attrs = ['x', 'y']
      break
    case 'polygon':
    case 'polyline': {
      initial = {}
      initial.points = selected.getAttribute('points')
      const list = selected.points
      const len = list.numberOfItems
      changes.points = new Array(len)
      for (let i = 0; i < len; ++i) {
        const pt = list.getItem(i)
        changes.points[i] = { x: pt.x, y: pt.y }
      }
      break
    } case 'path':
      initial = {}
      initial.d = selected.getAttribute('d')
      changes.d = selected.getAttribute('d')
      break
  } // switch on element type to get initial values

  if (attrs.length) {
    attrs.forEach((attr) => {
      changes[attr] = convertToNum(attr, selected.getAttribute(attr))
    })
  } else if (gsvg) {
    // GSVG exception
    changes = {
      x: Number(gsvg.getAttribute('x')) || 0,
      y: Number(gsvg.getAttribute('y')) || 0
    }
  }

  // if we haven't created an initial array in polygon/polyline/path, then
  // make a copy of initial values and include the transform
  if (!initial) {
    initial = mergeDeep({}, changes)
    for (const [attr, val] of Object.entries(initial)) {
      initial[attr] = convertToNum(attr, val)
    }
  }
  // save the start transform value too
  initial.transform = svgCanvas.getStartTransform() || ''

  let oldcenter; let newcenter

  // if it's a regular group, we have special processing to flatten transforms
  if ((selected.tagName === 'g' && !gsvg) || selected.tagName === 'a') {
    const box = getBBox(selected)

    oldcenter = { x: box.x + box.width / 2, y: box.y + box.height / 2 }
    newcenter = transformPoint(
      box.x + box.width / 2,
      box.y + box.height / 2,
      transformListToTransform(tlist).matrix
    )
    // let m = svgroot.createSVGMatrix();

    // temporarily strip off the rotate and save the old center
    const gangle = getRotationAngle(selected)
    if (gangle) {
      const a = gangle * Math.PI / 180
      const s = Math.abs(a) > (1.0e-10) ? Math.sin(a) / (1 - Math.cos(a)) : 2 / a
      for (let i = 0; i < tlist.numberOfItems; ++i) {
        const xform = tlist.getItem(i)
        if (xform.type === 4) {
          // extract old center through mystical arts
          const rm = xform.matrix
          oldcenter.y = (s * rm.e + rm.f) / 2
          oldcenter.x = (rm.e - s * rm.f) / 2
          tlist.removeItem(i)
          break
        }
      }
    }

    const N = tlist.numberOfItems
    let tx = 0; let ty = 0; let operation = 0

    let firstM
    if (N) {
      firstM = tlist.getItem(0).matrix
    }

    let oldStartTransform
    // first, if it was a scale then the second-last transform will be it
    if (N >= 3 && tlist.getItem(N - 2).type === 3 &&
      tlist.getItem(N - 3).type === 2 && tlist.getItem(N - 1).type === 2) {
      operation = 3 // scale

      // if the children are unrotated, pass the scale down directly
      // otherwise pass the equivalent matrix() down directly
      const tm = tlist.getItem(N - 3).matrix
      const sm = tlist.getItem(N - 2).matrix
      const tmn = tlist.getItem(N - 1).matrix

      const children = selected.childNodes
      let c = children.length
      while (c--) {
        const child = children.item(c)
        tx = 0
        ty = 0
        if (child.nodeType === 1) {
          const childTlist = child.transform.baseVal

          // some children might not have a transform (<metadata>, <defs>, etc)
          if (!childTlist) { continue }

          const m = transformListToTransform(childTlist).matrix

          // Convert a matrix to a scale if applicable
          // if (hasMatrixTransform(childTlist) && childTlist.numberOfItems == 1) {
          //   if (m.b==0 && m.c==0 && m.e==0 && m.f==0) {
          //     childTlist.removeItem(0);
          //     const translateOrigin = svgroot.createSVGTransform(),
          //       scale = svgroot.createSVGTransform(),
          //       translateBack = svgroot.createSVGTransform();
          //     translateOrigin.setTranslate(0, 0);
          //     scale.setScale(m.a, m.d);
          //     translateBack.setTranslate(0, 0);
          //     childTlist.appendItem(translateBack);
          //     childTlist.appendItem(scale);
          //     childTlist.appendItem(translateOrigin);
          //   }
          // }

          const angle = getRotationAngle(child)
          oldStartTransform = svgCanvas.getStartTransform()
          // const childxforms = [];
          svgCanvas.setStartTransform(child.getAttribute('transform'))
          if (angle || hasMatrixTransform(childTlist)) {
            const e2t = svgroot.createSVGTransform()
            e2t.setMatrix(matrixMultiply(tm, sm, tmn, m))
            childTlist.clear()
            childTlist.appendItem(e2t)
            // childxforms.push(e2t);
            // if not rotated or skewed, push the [T][S][-T] down to the child
          } else {
            // update the transform list with translate,scale,translate

            // slide the [T][S][-T] from the front to the back
            // [T][S][-T][M] = [M][T2][S2][-T2]

            // (only bringing [-T] to the right of [M])
            // [T][S][-T][M] = [T][S][M][-T2]
            // [-T2] = [M_inv][-T][M]
            const t2n = matrixMultiply(m.inverse(), tmn, m)
            // [T2] is always negative translation of [-T2]
            const t2 = svgroot.createSVGMatrix()
            t2.e = -t2n.e
            t2.f = -t2n.f

            // [T][S][-T][M] = [M][T2][S2][-T2]
            // [S2] = [T2_inv][M_inv][T][S][-T][M][-T2_inv]
            const s2 = matrixMultiply(t2.inverse(), m.inverse(), tm, sm, tmn, m, t2n.inverse())

            const translateOrigin = svgroot.createSVGTransform()
            const scale = svgroot.createSVGTransform()
            const translateBack = svgroot.createSVGTransform()
            translateOrigin.setTranslate(t2n.e, t2n.f)
            scale.setScale(s2.a, s2.d)
            translateBack.setTranslate(t2.e, t2.f)
            childTlist.appendItem(translateBack)
            childTlist.appendItem(scale)
            childTlist.appendItem(translateOrigin)
          } // not rotated
          const recalculatedDimensions = recalculateDimensions(child)
          if (recalculatedDimensions) {
            batchCmd.addSubCommand(recalculatedDimensions)
          }
          svgCanvas.setStartTransform(oldStartTransform)
        } // element
      } // for each child
      // Remove these transforms from group
      tlist.removeItem(N - 1)
      tlist.removeItem(N - 2)
      tlist.removeItem(N - 3)
    } else if (N >= 3 && tlist.getItem(N - 1).type === 1) {
      operation = 3 // scale
      const m = transformListToTransform(tlist).matrix
      const e2t = svgroot.createSVGTransform()
      e2t.setMatrix(m)
      tlist.clear()
      tlist.appendItem(e2t)
      // next, check if the first transform was a translate
      // if we had [ T1 ] [ M ] we want to transform this into [ M ] [ T2 ]
      // therefore [ T2 ] = [ M_inv ] [ T1 ] [ M ]
    } else if ((N === 1 || (N > 1 && tlist.getItem(1).type !== 3)) &&
      tlist.getItem(0).type === 2) {
      operation = 2 // translate
      const T_M = transformListToTransform(tlist).matrix
      tlist.removeItem(0)
      const mInv = transformListToTransform(tlist).matrix.inverse()
      const M2 = matrixMultiply(mInv, T_M)

      tx = M2.e
      ty = M2.f

      if (tx !== 0 || ty !== 0) {
        // we pass the translates down to the individual children
        const children = selected.childNodes
        let c = children.length

        const clipPathsDone = []
        while (c--) {
          const child = children.item(c)
          if (child.nodeType === 1) {
            // Check if child has clip-path
            if (child.getAttribute('clip-path')) {
              // tx, ty
              const attr = child.getAttribute('clip-path')
              if (!clipPathsDone.includes(attr)) {
                updateClipPath(attr, tx, ty)
                clipPathsDone.push(attr)
              }
            }

            oldStartTransform = svgCanvas.getStartTransform()
            svgCanvas.setStartTransform(child.getAttribute('transform'))

            const childTlist = child.transform?.baseVal
            // some children might not have a transform (<metadata>, <defs>, etc)
            if (childTlist) {
              const newxlate = svgroot.createSVGTransform()
              newxlate.setTranslate(tx, ty)
              if (childTlist.numberOfItems) {
                childTlist.insertItemBefore(newxlate, 0)
              } else {
                childTlist.appendItem(newxlate)
              }
              const recalculatedDimensions = recalculateDimensions(child)
              if (recalculatedDimensions) {
                batchCmd.addSubCommand(recalculatedDimensions)
              }
              // If any <use> have this group as a parent and are
              // referencing this child, then impose a reverse translate on it
              // so that when it won't get double-translated
              const uses = selected.getElementsByTagNameNS(NS.SVG, 'use')
              const href = '#' + child.id
              let u = uses.length
              while (u--) {
                const useElem = uses.item(u)
                if (href === getHref(useElem)) {
                  const usexlate = svgroot.createSVGTransform()
                  usexlate.setTranslate(-tx, -ty)
                  useElem.transform.baseVal.insertItemBefore(usexlate, 0)
                  batchCmd.addSubCommand(recalculateDimensions(useElem))
                }
              }
              svgCanvas.setStartTransform(oldStartTransform)
            }
          }
        }
        svgCanvas.setStartTransform(oldStartTransform)
      }
      // else, a matrix imposition from a parent group
      // keep pushing it down to the children
    } else if (N === 1 && tlist.getItem(0).type === 1 && !gangle) {
      operation = 1
      const m = tlist.getItem(0).matrix
      const children = selected.childNodes
      let c = children.length
      while (c--) {
        const child = children.item(c)
        if (child.nodeType === 1) {
          oldStartTransform = svgCanvas.getStartTransform()
          svgCanvas.setStartTransform(child.getAttribute('transform'))
          const childTlist = child.transform?.baseVal

          if (!childTlist) { continue }

          const em = matrixMultiply(m, transformListToTransform(childTlist).matrix)
          const e2m = svgroot.createSVGTransform()
          e2m.setMatrix(em)
          childTlist.clear()
          childTlist.appendItem(e2m, 0)

          const recalculatedDimensions = recalculateDimensions(child)
          if (recalculatedDimensions) {
            batchCmd.addSubCommand(recalculatedDimensions)
          }
          svgCanvas.setStartTransform(oldStartTransform)

          // Convert stroke
          // TODO: Find out if this should actually happen somewhere else
          const sw = child.getAttribute('stroke-width')
          if (child.getAttribute('stroke') !== 'none' && !isNaN(sw)) {
            const avg = (Math.abs(em.a) + Math.abs(em.d)) / 2
            child.setAttribute('stroke-width', sw * avg)
          }
        }
      }
      tlist.clear()
      // else it was just a rotate
    } else {
      if (gangle) {
        const newRot = svgroot.createSVGTransform()
        newRot.setRotate(gangle, newcenter.x, newcenter.y)
        if (tlist.numberOfItems) {
          tlist.insertItemBefore(newRot, 0)
        } else {
          tlist.appendItem(newRot)
        }
      }
      if (tlist.numberOfItems === 0) {
        selected.removeAttribute('transform')
      }
      return null
    }

    // if it was a translate, put back the rotate at the new center
    if (operation === 2) {
      if (gangle) {
        newcenter = {
          x: oldcenter.x + firstM.e,
          y: oldcenter.y + firstM.f
        }

        const newRot = svgroot.createSVGTransform()
        newRot.setRotate(gangle, newcenter.x, newcenter.y)
        if (tlist.numberOfItems) {
          tlist.insertItemBefore(newRot, 0)
        } else {
          tlist.appendItem(newRot)
        }
      }
      // if it was a resize
    } else if (operation === 3) {
      const m = transformListToTransform(tlist).matrix
      const roldt = svgroot.createSVGTransform()
      roldt.setRotate(gangle, oldcenter.x, oldcenter.y)
      const rold = roldt.matrix
      const rnew = svgroot.createSVGTransform()
      rnew.setRotate(gangle, newcenter.x, newcenter.y)
      const rnewInv = rnew.matrix.inverse()
      const mInv = m.inverse()
      const extrat = matrixMultiply(mInv, rnewInv, rold, m)

      tx = extrat.e
      ty = extrat.f

      if (tx !== 0 || ty !== 0) {
        // now push this transform down to the children
        // we pass the translates down to the individual children
        const children = selected.childNodes
        let c = children.length
        while (c--) {
          const child = children.item(c)
          if (child.nodeType === 1) {
            oldStartTransform = svgCanvas.getStartTransform()
            svgCanvas.setStartTransform(child.getAttribute('transform'))
            const childTlist = child.transform?.baseVal
            const newxlate = svgroot.createSVGTransform()
            newxlate.setTranslate(tx, ty)
            if (childTlist.numberOfItems) {
              childTlist.insertItemBefore(newxlate, 0)
            } else {
              childTlist.appendItem(newxlate)
            }

            const recalculatedDimensions = recalculateDimensions(child)
            if (recalculatedDimensions) {
              batchCmd.addSubCommand(recalculatedDimensions)
            }
            svgCanvas.setStartTransform(oldStartTransform)
          }
        }
      }

      if (gangle) {
        if (tlist.numberOfItems) {
          tlist.insertItemBefore(rnew, 0)
        } else {
          tlist.appendItem(rnew)
        }
      }
    }
    // else, it's a non-group
  } else {
    // TODO: box might be null for some elements (<metadata> etc), need to handle this
    const box = getBBox(selected)

    // Paths (and possbly other shapes) will have no BBox while still in <defs>,
    // but we still may need to recalculate them (see issue 595).
    // TODO: Figure out how to get BBox from these elements in case they
    // have a rotation transform

    if (!box && selected.tagName !== 'path') return null

    let m // = svgroot.createSVGMatrix();
    // temporarily strip off the rotate and save the old center
    const angle = getRotationAngle(selected)
    if (angle) {
      oldcenter = { x: box.x + box.width / 2, y: box.y + box.height / 2 }
      newcenter = transformPoint(
        box.x + box.width / 2,
        box.y + box.height / 2,
        transformListToTransform(tlist).matrix
      )

      const a = angle * Math.PI / 180
      const s = (Math.abs(a) > (1.0e-10))
        ? Math.sin(a) / (1 - Math.cos(a))
        // TODO: This blows up if the angle is exactly 0!
        : 2 / a

      for (let i = 0; i < tlist.numberOfItems; ++i) {
        const xform = tlist.getItem(i)
        if (xform.type === 4) {
          // extract old center through mystical arts
          const rm = xform.matrix
          oldcenter.y = (s * rm.e + rm.f) / 2
          oldcenter.x = (rm.e - s * rm.f) / 2
          tlist.removeItem(i)
          break
        }
      }
    }

    // 2 = translate, 3 = scale, 4 = rotate, 1 = matrix imposition
    let operation = 0
    const N = tlist.numberOfItems

    // Check if it has a gradient with userSpaceOnUse, in which case
    // adjust it by recalculating the matrix transform.

    const fill = selected.getAttribute('fill')
    if (fill?.startsWith('url(')) {
      const paint = getRefElem(fill)
      if (paint) {
        let type = 'pattern'
        if (paint?.tagName !== type) type = 'gradient'
        const attrVal = paint.getAttribute(type + 'Units')
        if (attrVal === 'userSpaceOnUse') {
          // Update the userSpaceOnUse element
          m = transformListToTransform(tlist).matrix
          const gtlist = paint.transform.baseVal
          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(',') + ')'
          paint.setAttribute(type + 'Transform', mStr)
        }
      }
    }

    // first, if it was a scale of a non-skewed element, then the second-last
    // transform will be the [S]
    // if we had [M][T][S][T] we want to extract the matrix equivalent of
    // [T][S][T] and push it down to the element
    if (N >= 3 && tlist.getItem(N - 2).type === 3 &&
      tlist.getItem(N - 3).type === 2 && tlist.getItem(N - 1).type === 2) {
      // Removed this so a <use> with a given [T][S][T] would convert to a matrix.
      // Is that bad?
      //  && selected.nodeName != 'use'
      operation = 3 // scale
      m = transformListToTransform(tlist, N - 3, N - 1).matrix
      tlist.removeItem(N - 1)
      tlist.removeItem(N - 2)
      tlist.removeItem(N - 3)
      // if we had [T][S][-T][M], then this was a skewed element being resized
      // Thus, we simply combine it all into one matrix
    } else if (N === 4 && tlist.getItem(N - 1).type === 1) {
      operation = 3 // scale
      m = transformListToTransform(tlist).matrix
      const e2t = svgroot.createSVGTransform()
      e2t.setMatrix(m)
      tlist.clear()
      tlist.appendItem(e2t)
      // reset the matrix so that the element is not re-mapped
      m = svgroot.createSVGMatrix()
      // if we had [R][T][S][-T][M], then this was a rotated matrix-element
      // if we had [T1][M] we want to transform this into [M][T2]
      // therefore [ T2 ] = [ M_inv ] [ T1 ] [ M ] and we can push [T2]
      // down to the element
    } else if ((N === 1 || (N > 1 && tlist.getItem(1).type !== 3)) &&
      tlist.getItem(0).type === 2) {
      operation = 2 // translate
      const oldxlate = tlist.getItem(0).matrix
      const meq = transformListToTransform(tlist, 1).matrix
      const meqInv = meq.inverse()
      m = matrixMultiply(meqInv, oldxlate, meq)
      tlist.removeItem(0)
      // else if this child now has a matrix imposition (from a parent group)
      // we might be able to simplify
    } else if (N === 1 && tlist.getItem(0).type === 1 && !angle) {
      // Remap all point-based elements
      m = transformListToTransform(tlist).matrix
      switch (selected.tagName) {
        case 'line':
          changes = {
            x1: selected.getAttribute('x1'),
            y1: selected.getAttribute('y1'),
            x2: selected.getAttribute('x2'),
            y2: selected.getAttribute('y2')
          }
        // Fallthrough
        case 'polyline':
        case 'polygon':
          changes.points = selected.getAttribute('points')
          if (changes.points) {
            const list = selected.points
            const len = list.numberOfItems
            changes.points = new Array(len)
            for (let i = 0; i < len; ++i) {
              const pt = list.getItem(i)
              changes.points[i] = { x: pt.x, y: pt.y }
            }
          }
        // Fallthrough
        case 'path':
          changes.d = selected.getAttribute('d')
          operation = 1
          tlist.clear()
          break
        default:
          break
      }
      // if it was a rotation, put the rotate back and return without a command
      // (this function has zero work to do for a rotate())
    } else {
      // operation = 4; // rotation
      if (angle) {
        const newRot = svgroot.createSVGTransform()
        newRot.setRotate(angle, newcenter.x, newcenter.y)

        if (tlist.numberOfItems) {
          tlist.insertItemBefore(newRot, 0)
        } else {
          tlist.appendItem(newRot)
        }
      }
      if (tlist.numberOfItems === 0) {
        selected.removeAttribute('transform')
      }
      return null
    }

    // if it was a translate or resize, we need to remap the element and absorb the xform
    if (operation === 1 || operation === 2 || operation === 3) {
      remapElement(selected, changes, m)
    } // if we are remapping

    // if it was a translate, put back the rotate at the new center
    if (operation === 2) {
      if (angle) {
        if (!hasMatrixTransform(tlist)) {
          newcenter = {
            x: oldcenter.x + m.e,
            y: oldcenter.y + m.f
          }
        }
        const newRot = svgroot.createSVGTransform()
        newRot.setRotate(angle, newcenter.x, newcenter.y)
        if (tlist.numberOfItems) {
          tlist.insertItemBefore(newRot, 0)
        } else {
          tlist.appendItem(newRot)
        }
      }
      // We have special processing for tspans:  Tspans are not transformable
      // but they can have x,y coordinates (sigh).  Thus, if this was a translate,
      // on a text element, also translate any tspan children.
      if (selected.tagName === 'text') {
        const children = selected.childNodes
        let c = children.length
        while (c--) {
          const child = children.item(c)
          if (child.tagName === 'tspan') {
            const tspanChanges = {
              x: Number(child.getAttribute('x')) || 0,
              y: Number(child.getAttribute('y')) || 0
            }
            remapElement(child, tspanChanges, m)
          }
        }
      }
      // [Rold][M][T][S][-T] became [Rold][M]
      // we want it to be [Rnew][M][Tr] where Tr is the
      // translation required to re-center it
      // Therefore, [Tr] = [M_inv][Rnew_inv][Rold][M]
    } else if (operation === 3 && angle) {
      const { matrix } = transformListToTransform(tlist)
      const roldt = svgroot.createSVGTransform()
      roldt.setRotate(angle, oldcenter.x, oldcenter.y)
      const rold = roldt.matrix
      const rnew = svgroot.createSVGTransform()
      rnew.setRotate(angle, newcenter.x, newcenter.y)
      const rnewInv = rnew.matrix.inverse()
      const mInv = matrix.inverse()
      const extrat = matrixMultiply(mInv, rnewInv, rold, matrix)

      remapElement(selected, changes, extrat)
      if (angle) {
        if (tlist.numberOfItems) {
          tlist.insertItemBefore(rnew, 0)
        } else {
          tlist.appendItem(rnew)
        }
      }
    }
  } // a non-group

  // if the transform list has been emptied, remove it
  if (tlist.numberOfItems === 0) {
    selected.removeAttribute('transform')
  }

  batchCmd.addSubCommand(new ChangeElementCommand(selected, initial))

  return batchCmd
}