@svgedit/svgcanvas 7.1.4

package/event.js

@@ -0,0 +1,1388 @@
+/**
+ * Tools for event.
+ * @module event
+ * @license MIT
+ * @copyright 2011 Jeff Schiller
+ */
+import {
+  assignAttributes, cleanupElement, getElement, getRotationAngle, snapToGrid, walkTree,
+  preventClickDefault, setHref, getBBox
+} from './utilities.js'
+import {
+  convertAttrs
+} from '../../src/common/units.js'
+import {
+  transformPoint, hasMatrixTransform, getMatrix, snapToAngle
+} from './math.js'
+import * as draw from './draw.js'
+import * as pathModule from './path.js'
+import * as hstry from './history.js'
+import { findPos } from '../../src/common/util.js'
+
+const {
+  InsertElementCommand
+} = hstry
+
+let svgCanvas = null
+
+/**
+* @function module:undo.init
+* @param {module:undo.eventContext} eventContext
+* @returns {void}
+*/
+export const init = (canvas) => {
+  svgCanvas = canvas
+  svgCanvas.mouseDownEvent = mouseDownEvent
+  svgCanvas.mouseMoveEvent = mouseMoveEvent
+  svgCanvas.dblClickEvent = dblClickEvent
+  svgCanvas.mouseUpEvent = mouseUpEvent
+  svgCanvas.mouseOutEvent = mouseOutEvent
+  svgCanvas.DOMMouseScrollEvent = DOMMouseScrollEvent
+}
+
+const getBsplinePoint = (t) => {
+  const spline = { x: 0, y: 0 }
+  const p0 = { x: svgCanvas.getControllPoint2('x'), y: svgCanvas.getControllPoint2('y') }
+  const p1 = { x: svgCanvas.getControllPoint1('x'), y: svgCanvas.getControllPoint1('y') }
+  const p2 = { x: svgCanvas.getStart('x'), y: svgCanvas.getStart('y') }
+  const p3 = { x: svgCanvas.getEnd('x'), y: svgCanvas.getEnd('y') }
+  const S = 1.0 / 6.0
+  const t2 = t * t
+  const t3 = t2 * t
+
+  const m = [
+    [-1, 3, -3, 1],
+    [3, -6, 3, 0],
+    [-3, 0, 3, 0],
+    [1, 4, 1, 0]
+  ]
+
+  spline.x = S * (
+    (p0.x * m[0][0] + p1.x * m[0][1] + p2.x * m[0][2] + p3.x * m[0][3]) * t3 +
+    (p0.x * m[1][0] + p1.x * m[1][1] + p2.x * m[1][2] + p3.x * m[1][3]) * t2 +
+    (p0.x * m[2][0] + p1.x * m[2][1] + p2.x * m[2][2] + p3.x * m[2][3]) * t +
+    (p0.x * m[3][0] + p1.x * m[3][1] + p2.x * m[3][2] + p3.x * m[3][3])
+  )
+  spline.y = S * (
+    (p0.y * m[0][0] + p1.y * m[0][1] + p2.y * m[0][2] + p3.y * m[0][3]) * t3 +
+    (p0.y * m[1][0] + p1.y * m[1][1] + p2.y * m[1][2] + p3.y * m[1][3]) * t2 +
+    (p0.y * m[2][0] + p1.y * m[2][1] + p2.y * m[2][2] + p3.y * m[2][3]) * t +
+    (p0.y * m[3][0] + p1.y * m[3][1] + p2.y * m[3][2] + p3.y * m[3][3])
+  )
+
+  return {
+    x: spline.x,
+    y: spline.y
+  }
+}
+
+// update the dummy transform in our transform list
+// to be a translate. We need to check if there was a transformation
+// to avoid loosing it
+const updateTransformList = (svgRoot, element, dx, dy) => {
+  const xform = svgRoot.createSVGTransform()
+  xform.setTranslate(dx, dy)
+  const tlist = element.transform?.baseVal
+  if (tlist.numberOfItems) {
+    const firstItem = tlist.getItem(0)
+    if (firstItem.type === 2) { // SVG_TRANSFORM_TRANSLATE = 2
+      tlist.replaceItem(xform, 0)
+    } else {
+      tlist.insertItemBefore(xform, 0)
+    }
+  } else {
+    tlist.appendItem(xform)
+  }
+}
+
+/**
+ *
+ * @param {MouseEvent} evt
+ * @fires module:svgcanvas.SvgCanvas#event:transition
+ * @fires module:svgcanvas.SvgCanvas#event:ext_mouseMove
+ * @returns {void}
+ */
+const mouseMoveEvent = (evt) => {
+  // if the mouse is move without dragging an element, just return.
+  if (!svgCanvas.getStarted()) { return }
+  if (evt.button === 1 || svgCanvas.spaceKey) { return }
+
+  svgCanvas.textActions.init()
+
+  evt.preventDefault()
+
+  const selectedElements = svgCanvas.getSelectedElements()
+  const zoom = svgCanvas.getZoom()
+  const svgRoot = svgCanvas.getSvgRoot()
+  const selected = selectedElements[0]
+
+  let i
+  let xya
+  let cx
+  let cy
+  let dx
+  let dy
+  let len
+  let angle
+  let box
+
+  const pt = transformPoint(evt.clientX, evt.clientY, svgCanvas.getrootSctm())
+  const mouseX = pt.x * zoom
+  const mouseY = pt.y * zoom
+  const shape = getElement(svgCanvas.getId())
+
+  let realX = mouseX / zoom
+  let x = realX
+  let realY = mouseY / zoom
+  let y = realY
+
+  if (svgCanvas.getCurConfig().gridSnapping) {
+    x = snapToGrid(x)
+    y = snapToGrid(y)
+  }
+
+  let tlist
+  switch (svgCanvas.getCurrentMode()) {
+    case 'select': {
+      // we temporarily use a translate on the element(s) being dragged
+      // this transform is removed upon mousing up and the element is
+      // relocated to the new location
+      if (selected) {
+        dx = x - svgCanvas.getStartX()
+        dy = y - svgCanvas.getStartY()
+        if (svgCanvas.getCurConfig().gridSnapping) {
+          dx = snapToGrid(dx)
+          dy = snapToGrid(dy)
+        }
+
+        if (dx || dy) {
+          selectedElements.forEach((el) => {
+            if (el) {
+              updateTransformList(svgRoot, el, dx, dy)
+              // update our internal bbox that we're tracking while dragging
+              svgCanvas.selectorManager.requestSelector(el).resize()
+            }
+          })
+          svgCanvas.call('transition', selectedElements)
+        }
+      }
+      break
+    }
+    case 'multiselect': {
+      realX *= zoom
+      realY *= zoom
+      assignAttributes(svgCanvas.getRubberBox(), {
+        x: Math.min(svgCanvas.getRStartX(), realX),
+        y: Math.min(svgCanvas.getRStartY(), realY),
+        width: Math.abs(realX - svgCanvas.getRStartX()),
+        height: Math.abs(realY - svgCanvas.getRStartY())
+      }, 100)
+
+      // for each selected:
+      // - if newList contains selected, do nothing
+      // - if newList doesn't contain selected, remove it from selected
+      // - for any newList that was not in selectedElements, add it to selected
+      const elemsToRemove = selectedElements.slice(); const elemsToAdd = []
+      const newList = svgCanvas.getIntersectionList()
+
+      // For every element in the intersection, add if not present in selectedElements.
+      len = newList.length
+      for (i = 0; i < len; ++i) {
+        const intElem = newList[i]
+        // Found an element that was not selected before, so we should add it.
+        if (!selectedElements.includes(intElem)) {
+          elemsToAdd.push(intElem)
+        }
+        // Found an element that was already selected, so we shouldn't remove it.
+        const foundInd = elemsToRemove.indexOf(intElem)
+        if (foundInd !== -1) {
+          elemsToRemove.splice(foundInd, 1)
+        }
+      }
+
+      if (elemsToRemove.length > 0) {
+        svgCanvas.removeFromSelection(elemsToRemove)
+      }
+
+      if (elemsToAdd.length > 0) {
+        svgCanvas.addToSelection(elemsToAdd)
+      }
+
+      break
+    }
+    case 'resize': {
+      // 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
+      const hasMatrix = hasMatrixTransform(tlist)
+      box = hasMatrix ? svgCanvas.getInitBbox() : getBBox(selected)
+      let left = box.x
+      let top = box.y
+      let { width, height } = box
+      dx = (x - svgCanvas.getStartX())
+      dy = (y - svgCanvas.getStartY())
+
+      if (svgCanvas.getCurConfig().gridSnapping) {
+        dx = snapToGrid(dx)
+        dy = snapToGrid(dy)
+        height = snapToGrid(height)
+        width = snapToGrid(width)
+      }
+
+      // if rotated, adjust the dx,dy values
+      angle = getRotationAngle(selected)
+      if (angle) {
+        const r = Math.sqrt(dx * dx + dy * dy)
+        const theta = Math.atan2(dy, dx) - angle * Math.PI / 180.0
+        dx = r * Math.cos(theta)
+        dy = r * Math.sin(theta)
+      }
+
+      // if not stretching in y direction, set dy to 0
+      // if not stretching in x direction, set dx to 0
+      if (!svgCanvas.getCurrentResizeMode().includes('n') && !svgCanvas.getCurrentResizeMode().includes('s')) {
+        dy = 0
+      }
+      if (!svgCanvas.getCurrentResizeMode().includes('e') && !svgCanvas.getCurrentResizeMode().includes('w')) {
+        dx = 0
+      }
+
+      let // ts = null,
+        tx = 0; let ty = 0
+      let sy = height ? (height + dy) / height : 1
+      let sx = width ? (width + dx) / width : 1
+      // if we are dragging on the north side, then adjust the scale factor and ty
+      if (svgCanvas.getCurrentResizeMode().includes('n')) {
+        sy = height ? (height - dy) / height : 1
+        ty = height
+      }
+
+      // if we dragging on the east side, then adjust the scale factor and tx
+      if (svgCanvas.getCurrentResizeMode().includes('w')) {
+        sx = width ? (width - dx) / width : 1
+        tx = width
+      }
+
+      // update the transform list with translate,scale,translate
+      const translateOrigin = svgRoot.createSVGTransform()
+      const scale = svgRoot.createSVGTransform()
+      const translateBack = svgRoot.createSVGTransform()
+
+      if (svgCanvas.getCurConfig().gridSnapping) {
+        left = snapToGrid(left)
+        tx = snapToGrid(tx)
+        top = snapToGrid(top)
+        ty = snapToGrid(ty)
+      }
+
+      translateOrigin.setTranslate(-(left + tx), -(top + ty))
+      if (evt.shiftKey) {
+        if (sx === 1) {
+          sx = sy
+        } else { sy = sx }
+      }
+      scale.setScale(sx, sy)
+
+      translateBack.setTranslate(left + tx, top + ty)
+      if (hasMatrix) {
+        const diff = angle ? 1 : 0
+        tlist.replaceItem(translateOrigin, 2 + diff)
+        tlist.replaceItem(scale, 1 + diff)
+        tlist.replaceItem(translateBack, Number(diff))
+      } else {
+        const N = tlist.numberOfItems
+        tlist.replaceItem(translateBack, N - 3)
+        tlist.replaceItem(scale, N - 2)
+        tlist.replaceItem(translateOrigin, N - 1)
+      }
+
+      svgCanvas.selectorManager.requestSelector(selected).resize()
+      svgCanvas.call('transition', selectedElements)
+
+      break
+    }
+    case 'zoom': {
+      realX *= zoom
+      realY *= zoom
+      assignAttributes(svgCanvas.getRubberBox(), {
+        x: Math.min(svgCanvas.getRStartX() * zoom, realX),
+        y: Math.min(svgCanvas.getRStartY() * zoom, realY),
+        width: Math.abs(realX - svgCanvas.getRStartX() * zoom),
+        height: Math.abs(realY - svgCanvas.getRStartY() * zoom)
+      }, 100)
+      break
+    }
+    case 'text': {
+      assignAttributes(shape, {
+        x,
+        y
+      }, 1000)
+      break
+    }
+    case 'line': {
+      if (svgCanvas.getCurConfig().gridSnapping) {
+        x = snapToGrid(x)
+        y = snapToGrid(y)
+      }
+
+      let x2 = x
+      let y2 = y
+
+      if (evt.shiftKey) {
+        xya = snapToAngle(svgCanvas.getStartX(), svgCanvas.getStartY(), x2, y2)
+        x2 = xya.x
+        y2 = xya.y
+      }
+
+      shape.setAttribute('x2', x2)
+      shape.setAttribute('y2', y2)
+      break
+    }
+    case 'foreignObject': // fall through
+    case 'square':
+    case 'rect':
+    case 'image': {
+      const square = (svgCanvas.getCurrentMode() === 'square') || evt.shiftKey
+      let
+        w = Math.abs(x - svgCanvas.getStartX())
+      let h = Math.abs(y - svgCanvas.getStartY())
+      let newX; let newY
+      if (square) {
+        w = h = Math.max(w, h)
+        newX = svgCanvas.getStartX() < x ? svgCanvas.getStartX() : svgCanvas.getStartX() - w
+        newY = svgCanvas.getStartY() < y ? svgCanvas.getStartY() : svgCanvas.getStartY() - h
+      } else {
+        newX = Math.min(svgCanvas.getStartX(), x)
+        newY = Math.min(svgCanvas.getStartY(), y)
+      }
+
+      if (svgCanvas.getCurConfig().gridSnapping) {
+        w = snapToGrid(w)
+        h = snapToGrid(h)
+        newX = snapToGrid(newX)
+        newY = snapToGrid(newY)
+      }
+
+      assignAttributes(shape, {
+        width: w,
+        height: h,
+        x: newX,
+        y: newY
+      }, 1000)
+
+      break
+    }
+    case 'circle': {
+      cx = Number(shape.getAttribute('cx'))
+      cy = Number(shape.getAttribute('cy'))
+      let rad = Math.sqrt((x - cx) * (x - cx) + (y - cy) * (y - cy))
+      if (svgCanvas.getCurConfig().gridSnapping) {
+        rad = snapToGrid(rad)
+      }
+      shape.setAttribute('r', rad)
+      break
+    }
+    case 'ellipse': {
+      cx = Number(shape.getAttribute('cx'))
+      cy = Number(shape.getAttribute('cy'))
+      if (svgCanvas.getCurConfig().gridSnapping) {
+        x = snapToGrid(x)
+        cx = snapToGrid(cx)
+        y = snapToGrid(y)
+        cy = snapToGrid(cy)
+      }
+      shape.setAttribute('rx', Math.abs(x - cx))
+      const ry = Math.abs(evt.shiftKey ? (x - cx) : (y - cy))
+      shape.setAttribute('ry', ry)
+      break
+    }
+    case 'fhellipse':
+    case 'fhrect': {
+      svgCanvas.setFreehand('minx', Math.min(realX, svgCanvas.getFreehand('minx')))
+      svgCanvas.setFreehand('maxx', Math.max(realX, svgCanvas.getFreehand('maxx')))
+      svgCanvas.setFreehand('miny', Math.min(realY, svgCanvas.getFreehand('miny')))
+      svgCanvas.setFreehand('maxy', Math.max(realY, svgCanvas.getFreehand('maxy')))
+    }
+    // Fallthrough
+    case 'fhpath': {
+      // dAttr += + realX + ',' + realY + ' ';
+      // shape.setAttribute('points', dAttr);
+      svgCanvas.setEnd('x', realX)
+      svgCanvas.setEnd('y', realY)
+      if (svgCanvas.getControllPoint2('x') && svgCanvas.getControllPoint2('y')) {
+        for (i = 0; i < svgCanvas.getStepCount() - 1; i++) {
+          svgCanvas.setParameter(i / svgCanvas.getStepCount())
+          svgCanvas.setNextParameter((i + 1) / svgCanvas.getStepCount())
+          svgCanvas.setbSpline(getBsplinePoint(svgCanvas.getNextParameter()))
+          svgCanvas.setNextPos({ x: svgCanvas.getbSpline('x'), y: svgCanvas.getbSpline('y') })
+          svgCanvas.setbSpline(getBsplinePoint(svgCanvas.getParameter()))
+          svgCanvas.setSumDistance(
+            svgCanvas.getSumDistance() + Math.sqrt((svgCanvas.getNextPos('x') -
+              svgCanvas.getbSpline('x')) * (svgCanvas.getNextPos('x') -
+                svgCanvas.getbSpline('x')) + (svgCanvas.getNextPos('y') -
+                  svgCanvas.getbSpline('y')) * (svgCanvas.getNextPos('y') - svgCanvas.getbSpline('y')))
+          )
+          if (svgCanvas.getSumDistance() > svgCanvas.getThreSholdDist()) {
+            svgCanvas.setSumDistance(svgCanvas.getSumDistance() - svgCanvas.getThreSholdDist())
+
+            // Faster than completely re-writing the points attribute.
+            const point = svgCanvas.getSvgContent().createSVGPoint()
+            point.x = svgCanvas.getbSpline('x')
+            point.y = svgCanvas.getbSpline('y')
+            shape.points.appendItem(point)
+          }
+        }
+      }
+      svgCanvas.setControllPoint2('x', svgCanvas.getControllPoint1('x'))
+      svgCanvas.setControllPoint2('y', svgCanvas.getControllPoint1('y'))
+      svgCanvas.setControllPoint1('x', svgCanvas.getStart('x'))
+      svgCanvas.setControllPoint1('y', svgCanvas.getStart('y'))
+      svgCanvas.setStart({ x: svgCanvas.getEnd('x'), y: svgCanvas.getEnd('y') })
+      break
+      // update path stretch line coordinates
+    }
+    case 'path': // fall through
+    case 'pathedit': {
+      x *= zoom
+      y *= zoom
+
+      if (svgCanvas.getCurConfig().gridSnapping) {
+        x = snapToGrid(x)
+        y = snapToGrid(y)
+        svgCanvas.setStartX(snapToGrid(svgCanvas.getStartX()))
+        svgCanvas.setStartY(snapToGrid(svgCanvas.getStartY()))
+      }
+      if (evt.shiftKey) {
+        const { path } = pathModule
+        let x1; let y1
+        if (path) {
+          x1 = path.dragging ? path.dragging[0] : svgCanvas.getStartX()
+          y1 = path.dragging ? path.dragging[1] : svgCanvas.getStartY()
+        } else {
+          x1 = svgCanvas.getStartX()
+          y1 = svgCanvas.getStartY()
+        }
+        xya = snapToAngle(x1, y1, x, y);
+        ({ x, y } = xya)
+      }
+
+      if (svgCanvas.getRubberBox()?.getAttribute('display') !== 'none') {
+        realX *= zoom
+        realY *= zoom
+        assignAttributes(svgCanvas.getRubberBox(), {
+          x: Math.min(svgCanvas.getRStartX() * zoom, realX),
+          y: Math.min(svgCanvas.getRStartY() * zoom, realY),
+          width: Math.abs(realX - svgCanvas.getRStartX() * zoom),
+          height: Math.abs(realY - svgCanvas.getRStartY() * zoom)
+        }, 100)
+      }
+      svgCanvas.pathActions.mouseMove(x, y)
+
+      break
+    }
+    case 'textedit': {
+      x *= zoom
+      y *= zoom
+      svgCanvas.textActions.mouseMove(mouseX, mouseY)
+
+      break
+    }
+    case 'rotate': {
+      box = getBBox(selected)
+      cx = box.x + box.width / 2
+      cy = box.y + box.height / 2
+      const m = getMatrix(selected)
+      const center = transformPoint(cx, cy, m)
+      cx = center.x
+      cy = center.y
+      angle = ((Math.atan2(cy - y, cx - x) * (180 / Math.PI)) - 90) % 360
+      if (svgCanvas.getCurConfig().gridSnapping) {
+        angle = snapToGrid(angle)
+      }
+      if (evt.shiftKey) { // restrict rotations to nice angles (WRS)
+        const snap = 45
+        angle = Math.round(angle / snap) * snap
+      }
+
+      svgCanvas.setRotationAngle(angle < -180 ? (360 + angle) : angle, true)
+      svgCanvas.call('transition', selectedElements)
+      break
+    }
+    default:
+      // A mode can be defined by an extenstion
+      break
+  }
+
+  /**
+  * The mouse has moved on the canvas area.
+  * @event module:svgcanvas.SvgCanvas#event:ext_mouseMove
+  * @type {PlainObject}
+  * @property {MouseEvent} event The event object
+  * @property {Float} mouse_x x coordinate on canvas
+  * @property {Float} mouse_y y coordinate on canvas
+  * @property {Element} selected Refers to the first selected element
+  */
+  svgCanvas.runExtensions('mouseMove', /** @type {module:svgcanvas.SvgCanvas#event:ext_mouseMove} */ {
+    event: evt,
+    mouse_x: mouseX,
+    mouse_y: mouseY,
+    selected
+  })
+} // mouseMove()
+
+/**
+*
+* @returns {void}
+*/
+const mouseOutEvent = () => {
+  const { $id } = svgCanvas
+  if (svgCanvas.getCurrentMode() !== 'select' && svgCanvas.getStarted()) {
+    const event = new Event('mouseup')
+    $id('svgcanvas').dispatchEvent(event)
+  }
+}
+
+// - in create mode, the element's opacity is set properly, we create an InsertElementCommand
+// and store it on the Undo stack
+// - in move/resize mode, the element's attributes which were affected by the move/resize are
+// identified, a ChangeElementCommand is created and stored on the stack for those attrs
+// this is done in when we recalculate the selected dimensions()
+/**
+*
+* @param {MouseEvent} evt
+* @fires module:svgcanvas.SvgCanvas#event:zoomed
+* @fires module:svgcanvas.SvgCanvas#event:changed
+* @fires module:svgcanvas.SvgCanvas#event:ext_mouseUp
+* @returns {void}
+*/
+const mouseUpEvent = (evt) => {
+  if (evt.button === 2) { return }
+  if (!svgCanvas.getStarted()) { return }
+
+  svgCanvas.textActions.init()
+
+  const selectedElements = svgCanvas.getSelectedElements()
+  const zoom = svgCanvas.getZoom()
+
+  const tempJustSelected = svgCanvas.getJustSelected()
+  svgCanvas.setJustSelected(null)
+
+  const pt = transformPoint(evt.clientX, evt.clientY, svgCanvas.getrootSctm())
+  const mouseX = pt.x * zoom
+  const mouseY = pt.y * zoom
+  const x = mouseX / zoom
+  const y = mouseY / zoom
+
+  let element = getElement(svgCanvas.getId())
+  let keep = false
+
+  const realX = x
+  const realY = y
+
+  // TODO: Make true when in multi-unit mode
+  const useUnit = false // (svgCanvas.getCurConfig().baseUnit !== 'px');
+  svgCanvas.setStarted(false)
+  let t
+  switch (svgCanvas.getCurrentMode()) {
+    // intentionally fall-through to select here
+    case 'resize':
+    case 'multiselect':
+      if (svgCanvas.getRubberBox()) {
+        svgCanvas.getRubberBox().setAttribute('display', 'none')
+        svgCanvas.setCurBBoxes([])
+      }
+      svgCanvas.setCurrentMode('select')
+    // Fallthrough
+    case 'select':
+      if (selectedElements[0]) {
+        // if we only have one selected element
+        if (!selectedElements[1]) {
+          // set our current stroke/fill properties to the element's
+          const selected = selectedElements[0]
+          switch (selected.tagName) {
+            case 'g':
+            case 'use':
+            case 'image':
+            case 'foreignObject':
+              break
+            case 'text':
+              svgCanvas.setCurText('font_size', selected.getAttribute('font-size'))
+              svgCanvas.setCurText('font_family', selected.getAttribute('font-family'))
+            // fallthrough
+            default:
+              svgCanvas.setCurProperties('fill', selected.getAttribute('fill'))
+              svgCanvas.setCurProperties('fill_opacity', selected.getAttribute('fill-opacity'))
+              svgCanvas.setCurProperties('stroke', selected.getAttribute('stroke'))
+              svgCanvas.setCurProperties('stroke_opacity', selected.getAttribute('stroke-opacity'))
+              svgCanvas.setCurProperties('stroke_width', selected.getAttribute('stroke-width'))
+              svgCanvas.setCurProperties('stroke_dasharray', selected.getAttribute('stroke-dasharray'))
+              svgCanvas.setCurProperties('stroke_linejoin', selected.getAttribute('stroke-linejoin'))
+              svgCanvas.setCurProperties('stroke_linecap', selected.getAttribute('stroke-linecap'))
+          }
+          svgCanvas.selectorManager.requestSelector(selected).showGrips(true)
+        }
+        // always recalculate dimensions to strip off stray identity transforms
+        svgCanvas.recalculateAllSelectedDimensions()
+        // if it was being dragged/resized
+        if (realX !== svgCanvas.getRStartX() || realY !== svgCanvas.getRStartY()) {
+          const len = selectedElements.length
+          for (let i = 0; i < len; ++i) {
+            if (!selectedElements[i]) { break }
+            svgCanvas.selectorManager.requestSelector(selectedElements[i]).resize()
+          }
+          // no change in position/size, so maybe we should move to pathedit
+        } else {
+          t = evt.target
+          if (selectedElements[0].nodeName === 'path' && !selectedElements[1]) {
+            svgCanvas.pathActions.select(selectedElements[0])
+            // if it was a path
+            // else, if it was selected and this is a shift-click, remove it from selection
+          } else if (evt.shiftKey && tempJustSelected !== t) {
+            svgCanvas.removeFromSelection([t])
+          }
+        } // no change in mouse position
+
+        // Remove non-scaling stroke
+        const elem = selectedElements[0]
+        if (elem) {
+          elem.removeAttribute('style')
+          walkTree(elem, (el) => {
+            el.removeAttribute('style')
+          })
+        }
+      }
+      return
+    case 'zoom': {
+      svgCanvas.getRubberBox()?.setAttribute('display', 'none')
+      const factor = evt.shiftKey ? 0.5 : 2
+      svgCanvas.call('zoomed', {
+        x: Math.min(svgCanvas.getRStartX(), realX),
+        y: Math.min(svgCanvas.getRStartY(), realY),
+        width: Math.abs(realX - svgCanvas.getRStartX()),
+        height: Math.abs(realY - svgCanvas.getRStartY()),
+        factor
+      })
+      return
+    } case 'fhpath': {
+      // Check that the path contains at least 2 points; a degenerate one-point path
+      // causes problems.
+      // Webkit ignores how we set the points attribute with commas and uses space
+      // to separate all coordinates, see https://bugs.webkit.org/show_bug.cgi?id=29870
+      svgCanvas.setSumDistance(0)
+      svgCanvas.setControllPoint2('x', 0)
+      svgCanvas.setControllPoint2('y', 0)
+      svgCanvas.setControllPoint1('x', 0)
+      svgCanvas.setControllPoint1('y', 0)
+      svgCanvas.setStart({ x: 0, y: 0 })
+      svgCanvas.setEnd('x', 0)
+      svgCanvas.setEnd('y', 0)
+      const coords = element.getAttribute('points')
+      const commaIndex = coords.indexOf(',')
+      keep = commaIndex >= 0 ? coords.includes(',', commaIndex + 1) : coords.includes(' ', coords.indexOf(' ') + 1)
+      if (keep) {
+        element = svgCanvas.pathActions.smoothPolylineIntoPath(element)
+      }
+      break
+    } case 'line': {
+      const x1 = element.getAttribute('x1')
+      const y1 = element.getAttribute('y1')
+      const x2 = element.getAttribute('x2')
+      const y2 = element.getAttribute('y2')
+      keep = (x1 !== x2 || y1 !== y2)
+    }
+      break
+    case 'foreignObject':
+    case 'square':
+    case 'rect':
+    case 'image': {
+      const width = element.getAttribute('width')
+      const height = element.getAttribute('height')
+      // Image should be kept regardless of size (use inherit dimensions later)
+      keep = (width || height) || svgCanvas.getCurrentMode() === 'image'
+    }
+      break
+    case 'circle':
+      keep = (element.getAttribute('r') !== '0')
+      break
+    case 'ellipse': {
+      const rx = Number(element.getAttribute('rx'))
+      const ry = Number(element.getAttribute('ry'))
+      keep = (rx || ry)
+    }
+      break
+    case 'fhellipse':
+      if ((svgCanvas.getFreehand('maxx') - svgCanvas.getFreehand('minx')) > 0 &&
+        (svgCanvas.getFreehand('maxy') - svgCanvas.getFreehand('miny')) > 0) {
+        element = svgCanvas.addSVGElementsFromJson({
+          element: 'ellipse',
+          curStyles: true,
+          attr: {
+            cx: (svgCanvas.getFreehand('minx') + svgCanvas.getFreehand('maxx')) / 2,
+            cy: (svgCanvas.getFreehand('miny') + svgCanvas.getFreehand('maxy')) / 2,
+            rx: (svgCanvas.getFreehand('maxx') - svgCanvas.getFreehand('minx')) / 2,
+            ry: (svgCanvas.getFreehand('maxy') - svgCanvas.getFreehand('miny')) / 2,
+            id: svgCanvas.getId()
+          }
+        })
+        svgCanvas.call('changed', [element])
+        keep = true
+      }
+      break
+    case 'fhrect':
+      if ((svgCanvas.getFreehand('maxx') - svgCanvas.getFreehand('minx')) > 0 &&
+        (svgCanvas.getFreehand('maxy') - svgCanvas.getFreehand('miny')) > 0) {
+        element = svgCanvas.addSVGElementsFromJson({
+          element: 'rect',
+          curStyles: true,
+          attr: {
+            x: svgCanvas.getFreehand('minx'),
+            y: svgCanvas.getFreehand('miny'),
+            width: (svgCanvas.getFreehand('maxx') - svgCanvas.getFreehand('minx')),
+            height: (svgCanvas.getFreehand('maxy') - svgCanvas.getFreehand('miny')),
+            id: svgCanvas.getId()
+          }
+        })
+        svgCanvas.call('changed', [element])
+        keep = true
+      }
+      break
+    case 'text':
+      keep = true
+      svgCanvas.selectOnly([element])
+      svgCanvas.textActions.start(element)
+      break
+    case 'path': {
+      // set element to null here so that it is not removed nor finalized
+      element = null
+      // continue to be set to true so that mouseMove happens
+      svgCanvas.setStarted(true)
+
+      const res = svgCanvas.pathActions.mouseUp(evt, element, mouseX, mouseY);
+      ({ element } = res);
+      ({ keep } = res)
+      break
+    } case 'pathedit':
+      keep = true
+      element = null
+      svgCanvas.pathActions.mouseUp(evt)
+      break
+    case 'textedit':
+      keep = false
+      element = null
+      svgCanvas.textActions.mouseUp(evt, mouseX, mouseY)
+      break
+    case 'rotate': {
+      keep = true
+      element = null
+      svgCanvas.setCurrentMode('select')
+      const batchCmd = svgCanvas.undoMgr.finishUndoableChange()
+      if (!batchCmd.isEmpty()) {
+        svgCanvas.addCommandToHistory(batchCmd)
+      }
+      // perform recalculation to weed out any stray identity transforms that might get stuck
+      svgCanvas.recalculateAllSelectedDimensions()
+      svgCanvas.call('changed', selectedElements)
+      break
+    } default:
+      // This could occur in an extension
+      break
+  }
+
+  /**
+* The main (left) mouse button is released (anywhere).
+* @event module:svgcanvas.SvgCanvas#event:ext_mouseUp
+* @type {PlainObject}
+* @property {MouseEvent} event The event object
+* @property {Float} mouse_x x coordinate on canvas
+* @property {Float} mouse_y y coordinate on canvas
+*/
+  const extResult = svgCanvas.runExtensions('mouseUp', {
+    event: evt,
+    mouse_x: mouseX,
+    mouse_y: mouseY
+  }, true)
+
+  extResult.forEach((r) => {
+    if (r) {
+      keep = r.keep || keep;
+      ({ element } = r)
+      svgCanvas.setStarted(r.started || svgCanvas.getStarted())
+    }
+  })
+
+  if (!keep && element) {
+    svgCanvas.getCurrentDrawing().releaseId(svgCanvas.getId())
+    element.remove()
+    element = null
+
+    t = evt.target
+
+    // if this element is in a group, go up until we reach the top-level group
+    // just below the layer groups
+    // TODO: once we implement links, we also would have to check for <a> elements
+    while (t?.parentNode?.parentNode?.tagName === 'g') {
+      t = t.parentNode
+    }
+    // if we are not in the middle of creating a path, and we've clicked on some shape,
+    // then go to Select mode.
+    // WebKit returns <div> when the canvas is clicked, Firefox/Opera return <svg>
+    if ((svgCanvas.getCurrentMode() !== 'path' || !svgCanvas.getDrawnPath()) &&
+      t &&
+      t.parentNode?.id !== 'selectorParentGroup' &&
+      t.id !== 'svgcanvas' && t.id !== 'svgroot'
+    ) {
+      // switch into "select" mode if we've clicked on an element
+      svgCanvas.setMode('select')
+      svgCanvas.selectOnly([t], true)
+    }
+  } else if (element) {
+    /**
+* @name module:svgcanvas.SvgCanvas#addedNew
+* @type {boolean}
+*/
+    svgCanvas.addedNew = true
+
+    if (useUnit) { convertAttrs(element) }
+
+    let aniDur = 0.2
+    let cAni
+    const curShape = svgCanvas.getStyle()
+    const opacAni = svgCanvas.getOpacAni()
+    if (opacAni.beginElement && Number.parseFloat(element.getAttribute('opacity')) !== curShape.opacity) {
+      cAni = opacAni.cloneNode(true)
+      cAni.setAttribute('to', curShape.opacity)
+      cAni.setAttribute('dur', aniDur)
+      element.appendChild(cAni)
+      try {
+        // Fails in FF4 on foreignObject
+        cAni.beginElement()
+      } catch (e) { /* empty fn */ }
+    } else {
+      aniDur = 0
+    }
+
+    // Ideally this would be done on the endEvent of the animation,
+    // but that doesn't seem to be supported in Webkit
+    setTimeout(() => {
+      if (cAni) { cAni.remove() }
+      element.setAttribute('opacity', curShape.opacity)
+      element.setAttribute('style', 'pointer-events:inherit')
+      cleanupElement(element)
+      if (svgCanvas.getCurrentMode() === 'path') {
+        svgCanvas.pathActions.toEditMode(element)
+      } else if (svgCanvas.getCurConfig().selectNew) {
+        const modes = ['circle', 'ellipse', 'square', 'rect', 'fhpath', 'line', 'fhellipse', 'fhrect', 'star', 'polygon']
+        if (modes.indexOf(svgCanvas.getCurrentMode()) !== -1) {
+          svgCanvas.setMode('select')
+        }
+        svgCanvas.selectOnly([element], true)
+      }
+      // we create the insert command that is stored on the stack
+      // undo means to call cmd.unapply(), redo means to call cmd.apply()
+      svgCanvas.addCommandToHistory(new InsertElementCommand(element))
+      svgCanvas.call('changed', [element])
+    }, aniDur * 1000)
+  }
+  svgCanvas.setStartTransform(null)
+}
+
+const dblClickEvent = (evt) => {
+  const selectedElements = svgCanvas.getSelectedElements()
+  const evtTarget = evt.target
+  const parent = evtTarget.parentNode
+
+  let mouseTarget = svgCanvas.getMouseTarget(evt)
+  const { tagName } = mouseTarget
+
+  if (tagName === 'text' && svgCanvas.getCurrentMode() !== 'textedit') {
+    const pt = transformPoint(evt.clientX, evt.clientY, svgCanvas.getrootSctm())
+    svgCanvas.textActions.select(mouseTarget, pt.x, pt.y)
+  }
+
+  // Do nothing if already in current group
+  if (parent === svgCanvas.getCurrentGroup()) { return }
+
+  if ((tagName === 'g' || tagName === 'a') && getRotationAngle(mouseTarget)) {
+    // TODO: Allow method of in-group editing without having to do
+    // this (similar to editing rotated paths)
+
+    // Ungroup and regroup
+    svgCanvas.pushGroupProperties(mouseTarget)
+    mouseTarget = selectedElements[0]
+    svgCanvas.clearSelection(true)
+  }
+  // Reset context
+  if (svgCanvas.getCurrentGroup()) {
+    draw.leaveContext()
+  }
+
+  if ((parent.tagName !== 'g' && parent.tagName !== 'a') ||
+    parent === svgCanvas.getCurrentDrawing().getCurrentLayer() ||
+    mouseTarget === svgCanvas.selectorManager.selectorParentGroup
+  ) {
+    // Escape from in-group edit
+    return
+  }
+  draw.setContext(mouseTarget)
+}
+
+/**
+ * Follows these conditions:
+ * - When we are in a create mode, the element is added to the canvas but the
+ *   action is not recorded until mousing up.
+ * - When we are in select mode, select the element, remember the position
+ *   and do nothing else.
+ * @param {MouseEvent} evt
+ * @fires module:svgcanvas.SvgCanvas#event:ext_mouseDown
+ * @returns {void}
+ */
+const mouseDownEvent = (evt) => {
+  const dataStorage = svgCanvas.getDataStorage()
+  const selectedElements = svgCanvas.getSelectedElements()
+  const zoom = svgCanvas.getZoom()
+  const curShape = svgCanvas.getStyle()
+  const svgRoot = svgCanvas.getSvgRoot()
+  const { $id } = svgCanvas
+
+  if (svgCanvas.spaceKey || evt.button === 1) { return }
+
+  const rightClick = (evt.button === 2)
+
+  if (evt.altKey) { // duplicate when dragging
+    svgCanvas.cloneSelectedElements(0, 0)
+  }
+
+  svgCanvas.setRootSctm($id('svgcontent').querySelector('g').getScreenCTM().inverse())
+
+  const pt = transformPoint(evt.clientX, evt.clientY, svgCanvas.getrootSctm())
+  const mouseX = pt.x * zoom
+  const mouseY = pt.y * zoom
+
+  evt.preventDefault()
+
+  if (rightClick) {
+    if (svgCanvas.getCurrentMode() === 'path') {
+      return
+    }
+    svgCanvas.setCurrentMode('select')
+    svgCanvas.setLastClickPoint(pt)
+  }
+
+  let x = mouseX / zoom
+  let y = mouseY / zoom
+  let mouseTarget = svgCanvas.getMouseTarget(evt)
+
+  if (mouseTarget.tagName === 'a' && mouseTarget.childNodes.length === 1) {
+    mouseTarget = mouseTarget.firstChild
+  }
+
+  // realX/y ignores grid-snap value
+  const realX = x
+  svgCanvas.setStartX(x)
+  svgCanvas.setRStartX(x)
+  const realY = y
+  svgCanvas.setStartY(y)
+  svgCanvas.setRStartY(y)
+
+  if (svgCanvas.getCurConfig().gridSnapping) {
+    x = snapToGrid(x)
+    y = snapToGrid(y)
+    svgCanvas.setStartX(snapToGrid(svgCanvas.getStartX()))
+    svgCanvas.setStartY(snapToGrid(svgCanvas.getStartY()))
+  }
+
+  // if it is a selector grip, then it must be a single element selected,
+  // set the mouseTarget to that and update the mode to rotate/resize
+
+  if (mouseTarget === svgCanvas.selectorManager.selectorParentGroup && selectedElements[0]) {
+    const grip = evt.target
+    const griptype = dataStorage.get(grip, 'type')
+    // rotating
+    if (griptype === 'rotate') {
+      svgCanvas.setCurrentMode('rotate')
+      // svgCanvas.setCurrentRotateMode(dataStorage.get(grip, 'dir'));
+      // resizing
+    } else if (griptype === 'resize') {
+      svgCanvas.setCurrentMode('resize')
+      svgCanvas.setCurrentResizeMode(dataStorage.get(grip, 'dir'))
+    }
+    mouseTarget = selectedElements[0]
+  }
+
+  svgCanvas.setStartTransform(mouseTarget.getAttribute('transform'))
+
+  const tlist = mouseTarget.transform.baseVal
+  // consolidate transforms using standard SVG but keep the transformation used for the move/scale
+  if (tlist.numberOfItems > 1) {
+    const firstTransform = tlist.getItem(0)
+    tlist.removeItem(0)
+    tlist.consolidate()
+    tlist.insertItemBefore(firstTransform, 0)
+  }
+  switch (svgCanvas.getCurrentMode()) {
+    case 'select':
+      svgCanvas.setStarted(true)
+      svgCanvas.setCurrentResizeMode('none')
+      if (rightClick) { svgCanvas.setStarted(false) }
+
+      if (mouseTarget !== svgRoot) {
+        // if this element is not yet selected, clear selection and select it
+        if (!selectedElements.includes(mouseTarget)) {
+          // only clear selection if shift is not pressed (otherwise, add
+          // element to selection)
+          if (!evt.shiftKey) {
+            // No need to do the call here as it will be done on addToSelection
+            svgCanvas.clearSelection(true)
+          }
+          svgCanvas.addToSelection([mouseTarget])
+          svgCanvas.setJustSelected(mouseTarget)
+          svgCanvas.pathActions.clear()
+        }
+        // else if it's a path, go into pathedit mode in mouseup
+
+        if (!rightClick) {
+          // insert a dummy transform so if the element(s) are moved it will have
+          // a transform to use for its translate
+          for (const selectedElement of selectedElements) {
+            if (!selectedElement) { continue }
+            const slist = selectedElement.transform?.baseVal
+            if (slist.numberOfItems) {
+              slist.insertItemBefore(svgRoot.createSVGTransform(), 0)
+            } else {
+              slist.appendItem(svgRoot.createSVGTransform())
+            }
+          }
+        }
+      } else if (!rightClick) {
+        svgCanvas.clearSelection()
+        svgCanvas.setCurrentMode('multiselect')
+        if (!svgCanvas.getRubberBox()) {
+          svgCanvas.setRubberBox(svgCanvas.selectorManager.getRubberBandBox())
+        }
+        svgCanvas.setRStartX(svgCanvas.getRStartX() * zoom)
+        svgCanvas.setRStartY(svgCanvas.getRStartY() * zoom)
+
+        assignAttributes(svgCanvas.getRubberBox(), {
+          x: svgCanvas.getRStartX(),
+          y: svgCanvas.getRStartY(),
+          width: 0,
+          height: 0,
+          display: 'inline'
+        }, 100)
+      }
+      break
+    case 'zoom':
+      svgCanvas.setStarted(true)
+      if (!svgCanvas.getRubberBox()) {
+        svgCanvas.setRubberBox(svgCanvas.selectorManager.getRubberBandBox())
+      }
+      assignAttributes(svgCanvas.getRubberBox(), {
+        x: realX * zoom,
+        y: realX * zoom,
+        width: 0,
+        height: 0,
+        display: 'inline'
+      }, 100)
+      break
+    case 'resize': {
+      svgCanvas.setStarted(true)
+      svgCanvas.setStartX(x)
+      svgCanvas.setStartY(y)
+
+      // Getting the BBox from the selection box, since we know we
+      // want to orient around it
+      svgCanvas.setInitBbox(getBBox($id('selectedBox0')))
+      const bb = {}
+      for (const [key, val] of Object.entries(svgCanvas.getInitBbox())) {
+        bb[key] = val / zoom
+      }
+      svgCanvas.setInitBbox(bb)
+
+      // append three dummy transforms to the tlist so that
+      // we can translate,scale,translate in mousemove
+      const pos = getRotationAngle(mouseTarget) ? 1 : 0
+
+      if (hasMatrixTransform(tlist)) {
+        tlist.insertItemBefore(svgRoot.createSVGTransform(), pos)
+        tlist.insertItemBefore(svgRoot.createSVGTransform(), pos)
+        tlist.insertItemBefore(svgRoot.createSVGTransform(), pos)
+      } else {
+        tlist.appendItem(svgRoot.createSVGTransform())
+        tlist.appendItem(svgRoot.createSVGTransform())
+        tlist.appendItem(svgRoot.createSVGTransform())
+      }
+      break
+    }
+    case 'fhellipse':
+    case 'fhrect':
+    case 'fhpath':
+      svgCanvas.setStart({ x: realX, y: realY })
+      svgCanvas.setControllPoint1('x', 0)
+      svgCanvas.setControllPoint1('y', 0)
+      svgCanvas.setControllPoint2('x', 0)
+      svgCanvas.setControllPoint2('y', 0)
+      svgCanvas.setStarted(true)
+      svgCanvas.setDAttr(realX + ',' + realY + ' ')
+      // Commented out as doing nothing now:
+      // strokeW = parseFloat(curShape.stroke_width) === 0 ? 1 : curShape.stroke_width;
+      svgCanvas.addSVGElementsFromJson({
+        element: 'polyline',
+        curStyles: true,
+        attr: {
+          points: svgCanvas.getDAttr(),
+          id: svgCanvas.getNextId(),
+          fill: 'none',
+          opacity: curShape.opacity / 2,
+          'stroke-linecap': 'round',
+          style: 'pointer-events:none'
+        }
+      })
+      svgCanvas.setFreehand('minx', realX)
+      svgCanvas.setFreehand('maxx', realX)
+      svgCanvas.setFreehand('miny', realY)
+      svgCanvas.setFreehand('maxy', realY)
+      break
+    case 'image': {
+      svgCanvas.setStarted(true)
+      const newImage = svgCanvas.addSVGElementsFromJson({
+        element: 'image',
+        attr: {
+          x,
+          y,
+          width: 0,
+          height: 0,
+          id: svgCanvas.getNextId(),
+          opacity: curShape.opacity / 2,
+          style: 'pointer-events:inherit'
+        }
+      })
+      setHref(newImage, svgCanvas.getLastGoodImgUrl())
+      preventClickDefault(newImage)
+      break
+    } case 'square':
+    // TODO: once we create the rect, we lose information that this was a square
+    // (for resizing purposes this could be important)
+    // Fallthrough
+    case 'rect':
+      svgCanvas.setStarted(true)
+      svgCanvas.setStartX(x)
+      svgCanvas.setStartY(y)
+      svgCanvas.addSVGElementsFromJson({
+        element: 'rect',
+        curStyles: true,
+        attr: {
+          x,
+          y,
+          width: 0,
+          height: 0,
+          id: svgCanvas.getNextId(),
+          opacity: curShape.opacity / 2
+        }
+      })
+      break
+    case 'line': {
+      svgCanvas.setStarted(true)
+      const strokeW = Number(curShape.stroke_width) === 0 ? 1 : curShape.stroke_width
+      svgCanvas.addSVGElementsFromJson({
+        element: 'line',
+        curStyles: true,
+        attr: {
+          x1: x,
+          y1: y,
+          x2: x,
+          y2: y,
+          id: svgCanvas.getNextId(),
+          stroke: curShape.stroke,
+          'stroke-width': strokeW,
+          'stroke-dasharray': curShape.stroke_dasharray,
+          'stroke-linejoin': curShape.stroke_linejoin,
+          'stroke-linecap': curShape.stroke_linecap,
+          'stroke-opacity': curShape.stroke_opacity,
+          fill: 'none',
+          opacity: curShape.opacity / 2,
+          style: 'pointer-events:none'
+        }
+      })
+      break
+    } case 'circle':
+      svgCanvas.setStarted(true)
+      svgCanvas.addSVGElementsFromJson({
+        element: 'circle',
+        curStyles: true,
+        attr: {
+          cx: x,
+          cy: y,
+          r: 0,
+          id: svgCanvas.getNextId(),
+          opacity: curShape.opacity / 2
+        }
+      })
+      break
+    case 'ellipse':
+      svgCanvas.setStarted(true)
+      svgCanvas.addSVGElementsFromJson({
+        element: 'ellipse',
+        curStyles: true,
+        attr: {
+          cx: x,
+          cy: y,
+          rx: 0,
+          ry: 0,
+          id: svgCanvas.getNextId(),
+          opacity: curShape.opacity / 2
+        }
+      })
+      break
+    case 'text':
+      svgCanvas.setStarted(true)
+      /* const newText = */ svgCanvas.addSVGElementsFromJson({
+        element: 'text',
+        curStyles: true,
+        attr: {
+          x,
+          y,
+          id: svgCanvas.getNextId(),
+          fill: svgCanvas.getCurText('fill'),
+          'stroke-width': svgCanvas.getCurText('stroke_width'),
+          'font-size': svgCanvas.getCurText('font_size'),
+          'font-family': svgCanvas.getCurText('font_family'),
+          'text-anchor': 'middle',
+          'xml:space': 'preserve',
+          opacity: curShape.opacity
+        }
+      })
+      // newText.textContent = 'text';
+      break
+    case 'path':
+    // Fall through
+    case 'pathedit':
+      svgCanvas.setStartX(svgCanvas.getStartX() * zoom)
+      svgCanvas.setStartY(svgCanvas.getStartY() * zoom)
+      svgCanvas.pathActions.mouseDown(evt, mouseTarget, svgCanvas.getStartX(), svgCanvas.getStartY())
+      svgCanvas.setStarted(true)
+      break
+    case 'textedit':
+      svgCanvas.setStartX(svgCanvas.getStartX() * zoom)
+      svgCanvas.setStartY(svgCanvas.getStartY() * zoom)
+      svgCanvas.textActions.mouseDown(evt, mouseTarget, svgCanvas.getStartX(), svgCanvas.getStartY())
+      svgCanvas.setStarted(true)
+      break
+    case 'rotate':
+      svgCanvas.setStarted(true)
+      // we are starting an undoable change (a drag-rotation)
+      svgCanvas.undoMgr.beginUndoableChange('transform', selectedElements)
+      break
+    default:
+      // This could occur in an extension
+      break
+  }
+
+  /**
+* The main (left) mouse button is held down on the canvas area.
+* @event module:svgcanvas.SvgCanvas#event:ext_mouseDown
+* @type {PlainObject}
+* @property {MouseEvent} event The event object
+* @property {Float} start_x x coordinate on canvas
+* @property {Float} start_y y coordinate on canvas
+* @property {Element[]} selectedElements An array of the selected Elements
+*/
+  const extResult = svgCanvas.runExtensions('mouseDown', {
+    event: evt,
+    start_x: svgCanvas.getStartX(),
+    start_y: svgCanvas.getStartY(),
+    selectedElements
+  }, true)
+
+  extResult.forEach((r) => {
+    if (r?.started) {
+      svgCanvas.setStarted(true)
+    }
+  })
+}
+/**
+ * @param {Event} e
+ * @fires module:event.SvgCanvas#event:updateCanvas
+ * @fires module:event.SvgCanvas#event:zoomDone
+ * @returns {void}
+ */
+const DOMMouseScrollEvent = (e) => {
+  const zoom = svgCanvas.getZoom()
+  const { $id } = svgCanvas
+  if (!e.shiftKey) { return }
+
+  e.preventDefault()
+
+  svgCanvas.setRootSctm($id('svgcontent').querySelector('g').getScreenCTM().inverse())
+
+  const workarea = document.getElementById('workarea')
+  const scrbar = 15
+  const rulerwidth = svgCanvas.getCurConfig().showRulers ? 16 : 0
+
+  // mouse relative to content area in content pixels
+  const pt = transformPoint(e.clientX, e.clientY, svgCanvas.getrootSctm())
+
+  // full work area width in screen pixels
+  const editorFullW = parseFloat(getComputedStyle(workarea, null).width.replace('px', ''))
+  const editorFullH = parseFloat(getComputedStyle(workarea, null).height.replace('px', ''))
+
+  // work area width minus scroll and ruler in screen pixels
+  const editorW = editorFullW - scrbar - rulerwidth
+  const editorH = editorFullH - scrbar - rulerwidth
+
+  // work area width in content pixels
+  const workareaViewW = editorW * svgCanvas.getrootSctm().a
+  const workareaViewH = editorH * svgCanvas.getrootSctm().d
+
+  // content offset from canvas in screen pixels
+  const wOffset = findPos(workarea)
+  const wOffsetLeft = wOffset.left + rulerwidth
+  const wOffsetTop = wOffset.top + rulerwidth
+
+  const delta = (e.wheelDelta) ? e.wheelDelta : (e.detail) ? -e.detail : 0
+  if (!delta) { return }
+
+  let factor = Math.max(3 / 4, Math.min(4 / 3, (delta)))
+
+  let wZoom; let hZoom
+  if (factor > 1) {
+    wZoom = Math.ceil(editorW / workareaViewW * factor * 100) / 100
+    hZoom = Math.ceil(editorH / workareaViewH * factor * 100) / 100
+  } else {
+    wZoom = Math.floor(editorW / workareaViewW * factor * 100) / 100
+    hZoom = Math.floor(editorH / workareaViewH * factor * 100) / 100
+  }
+  let zoomlevel = Math.min(wZoom, hZoom)
+  zoomlevel = Math.min(10, Math.max(0.01, zoomlevel))
+  if (zoomlevel === zoom) {
+    return
+  }
+  factor = zoomlevel / zoom
+
+  // top left of workarea in content pixels before zoom
+  const topLeftOld = transformPoint(wOffsetLeft, wOffsetTop, svgCanvas.getrootSctm())
+
+  // top left of workarea in content pixels after zoom
+  const topLeftNew = {
+    x: pt.x - (pt.x - topLeftOld.x) / factor,
+    y: pt.y - (pt.y - topLeftOld.y) / factor
+  }
+
+  // top left of workarea in canvas pixels relative to content after zoom
+  const topLeftNewCanvas = {
+    x: topLeftNew.x * zoomlevel,
+    y: topLeftNew.y * zoomlevel
+  }
+
+  // new center in canvas pixels
+  const newCtr = {
+    x: topLeftNewCanvas.x - rulerwidth + editorFullW / 2,
+    y: topLeftNewCanvas.y - rulerwidth + editorFullH / 2
+  }
+
+  svgCanvas.setZoom(zoomlevel)
+  document.getElementById('zoom').value = ((zoomlevel * 100).toFixed(1))
+
+  svgCanvas.call('updateCanvas', { center: false, newCtr })
+  svgCanvas.call('zoomDone')
+}