@svgedit/svgcanvas 7.2.7 → 7.4.2

package/core/event.js

@@ -12,7 +12,7 @@ import {
   convertAttrs
 } from './units.js'
 import {
-  transformPoint, hasMatrixTransform, getMatrix, snapToAngle, getTransformList
+  transformPoint, hasMatrixTransform, getMatrix, snapToAngle, getTransformList, transformListToTransform
 } from './math.js'
 import * as draw from './draw.js'
 import * as pathModule from './path.js'
@@ -20,7 +20,9 @@ import * as hstry from './history.js'
 import { findPos } from '../../svgcanvas/common/util.js'
 
 const {
-  InsertElementCommand
+  InsertElementCommand,
+  BatchCommand,
+  ChangeElementCommand
 } = hstry
 
 let svgCanvas = null
@@ -84,9 +86,10 @@ const updateTransformList = (svgRoot, element, dx, dy) => {
   const xform = svgRoot.createSVGTransform()
   xform.setTranslate(dx, dy)
   const tlist = getTransformList(element)
+  if (!tlist) { return }
   if (tlist.numberOfItems) {
     const firstItem = tlist.getItem(0)
-    if (firstItem.type === 2) { // SVG_TRANSFORM_TRANSLATE = 2
+    if (firstItem.type === SVGTransform.SVG_TRANSFORM_TRANSLATE) {
       tlist.replaceItem(xform, 0)
     } else {
       tlist.insertItemBefore(xform, 0)
@@ -96,6 +99,25 @@ const updateTransformList = (svgRoot, element, dx, dy) => {
   }
 }
 
+// Consolidate an element's current transform list into a single matrix,
+// returning an undo command that restores `oldTransform`. Used for groups
+// (whose transform must stay on the group rather than be flattened into
+// their children) and as a fallback when recalculateDimensions() doesn't
+// recognize the transform-list shape a drag interaction left behind.
+const consolidateTransform = (svgRoot, elem, tlist, oldTransform) => {
+  const consolidatedMatrix = transformListToTransform(tlist).matrix
+
+  while (tlist.numberOfItems > 0) {
+    tlist.removeItem(0)
+  }
+
+  const newTransform = svgRoot.createSVGTransform()
+  newTransform.setMatrix(consolidatedMatrix)
+  tlist.appendItem(newTransform)
+
+  return new ChangeElementCommand(elem, { transform: oldTransform })
+}
+
 /**
  *
  * @param {MouseEvent} evt
@@ -145,6 +167,31 @@ const mouseMoveEvent = (evt) => {
   let tlist
   switch (svgCanvas.getCurrentMode()) {
     case 'select': {
+      // Insert dummy transform on first mouse move (drag start), not on click.
+      // This avoids creating multiple transforms that trigger unwanted flattening.
+      if (!svgCanvas.hasDragStartTransform && selectedElements.length > 0) {
+        // Store original transforms BEFORE adding the drag transform (for undo)
+        svgCanvas.dragStartTransforms = new Map()
+        for (const selectedElement of selectedElements) {
+          if (!selectedElement) { continue }
+          // Capture the transform attribute before we modify it
+          svgCanvas.dragStartTransforms.set(selectedElement, selectedElement.getAttribute('transform') || '')
+          const slist = getTransformList(selectedElement)
+          if (!slist) { continue }
+          // The dummy must already be a translate (not the default identity
+          // matrix) so updateTransformList's `firstItem.type === 2` check
+          // recognizes and replaces it in place on the very first mousemove,
+          // instead of leaving it behind as a stray extra transform item.
+          const dummy = svgRoot.createSVGTransform()
+          dummy.setTranslate(0, 0)
+          if (slist.numberOfItems) {
+            slist.insertItemBefore(dummy, 0)
+          } else {
+            slist.appendItem(dummy)
+          }
+        }
+        svgCanvas.hasDragStartTransform = true
+      }
       // 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
@@ -222,6 +269,7 @@ const mouseMoveEvent = (evt) => {
       // while the mouse is down, when mouse goes up, we use this to recalculate
       // the shape's coordinates
       tlist = getTransformList(selected)
+      if (!tlist) { break }
       const hasMatrix = hasMatrixTransform(tlist)
       box = hasMatrix ? svgCanvas.getInitBbox() : getBBox(selected)
       let left = box.x
@@ -548,10 +596,21 @@ const mouseMoveEvent = (evt) => {
 *
 * @returns {void}
 */
-const mouseOutEvent = () => {
+const mouseOutEvent = (evt) => {
   const { $id } = svgCanvas
   if (svgCanvas.getCurrentMode() !== 'select' && svgCanvas.getStarted()) {
-    const event = new Event('mouseup')
+    const event = new MouseEvent('mouseup', {
+      bubbles: true,
+      cancelable: true,
+      clientX: evt?.clientX ?? 0,
+      clientY: evt?.clientY ?? 0,
+      button: evt?.button ?? 0,
+      buttons: evt?.buttons ?? 0,
+      altKey: evt?.altKey ?? false,
+      ctrlKey: evt?.ctrlKey ?? false,
+      metaKey: evt?.metaKey ?? false,
+      shiftKey: evt?.shiftKey ?? false
+    })
     $id('svgcanvas').dispatchEvent(event)
   }
 }
@@ -637,10 +696,73 @@ const mouseUpEvent = (evt) => {
           }
           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()) {
+          // Only recalculate dimensions after actual dragging/resizing to avoid
+          // unwanted transform flattening on simple clicks
+
+          // Create a single batch command for all moved elements
+          const batchCmd = new BatchCommand('position')
+
+          selectedElements.forEach((elem) => {
+            if (!elem) return
+
+            const tlist = getTransformList(elem)
+            if (!tlist || tlist.numberOfItems === 0) return
+
+            // Get the transform from BEFORE this interaction started. `dragStartTransforms`
+            // is only populated for 'select'-mode (move) drags; 'resize'/'rotate' drags fall
+            // through to this same code with dragStartTransforms left null, so fall back to
+            // the value captured at mousedown via setStartTransform, which correctly reflects
+            // the prior transform (e.g. a matrix left by an earlier move) regardless of mode.
+            const oldTransform = svgCanvas.dragStartTransforms?.has(elem)
+              ? svgCanvas.dragStartTransforms.get(elem)
+              : (svgCanvas.getStartTransform() || '')
+
+            // Check if the first transform is a translate (the drag transform we added)
+            const firstTransform = tlist.getItem(0)
+            const hasDragTranslate = firstTransform.type === SVGTransform.SVG_TRANSFORM_TRANSLATE
+
+            // recalculateDimensions() returns null for groups (their transform must stay
+            // on the group itself), so consolidate those directly into one matrix. For
+            // every other element type, recalculateDimensions() already understands the
+            // translate/scale/translate shape produced by a resize (and plain translate
+            // from a move), and flattening into it keeps the shape's real geometry
+            // attributes (x/y/width/height/rx/ry/points/d/etc.) in sync - which is what
+            // drives the coordinate/size panel inputs and keeps stroke width from being
+            // visually distorted by a leftover scale matrix.
+            const isGroup = elem.tagName === 'g' || elem.tagName === 'a'
+
+            if (isGroup && hasDragTranslate) {
+              batchCmd.addSubCommand(consolidateTransform(svgCanvas.getSvgRoot(), elem, tlist, oldTransform))
+              return
+            }
+
+            const cmd = svgCanvas.recalculateDimensions(elem)
+            if (cmd) {
+              batchCmd.addSubCommand(cmd)
+            } else if (tlist.numberOfItems > 1 && hasDragTranslate) {
+              // recalculateDimensions() didn't recognize this transform-list shape;
+              // fall back to consolidating into one matrix so the transform isn't lost.
+              batchCmd.addSubCommand(consolidateTransform(svgCanvas.getSvgRoot(), elem, tlist, oldTransform))
+            } else {
+              // recalculateDimensions returned null and there's nothing left to consolidate
+              // Check if the transform actually changed and record it manually
+              const newTransform = elem.getAttribute('transform') || ''
+              if (newTransform !== oldTransform) {
+                batchCmd.addSubCommand(new ChangeElementCommand(elem, { transform: oldTransform }))
+              }
+            }
+          })
+
+          if (!batchCmd.isEmpty()) {
+            svgCanvas.addCommandToHistory(batchCmd)
+          }
+
+          // Clear the stored transforms AND reset the flag together
+          svgCanvas.dragStartTransforms = null
+          svgCanvas.hasDragStartTransform = false
+
           const len = selectedElements.length
           for (let i = 0; i < len; ++i) {
             if (!selectedElements[i]) { break }
@@ -799,6 +921,8 @@ const mouseUpEvent = (evt) => {
       svgCanvas.textActions.mouseUp(evt, mouseX, mouseY)
       break
     case 'rotate': {
+      svgCanvas.hasDragStartTransform = false
+      svgCanvas.dragStartTransforms = null
       keep = true
       element = null
       svgCanvas.setCurrentMode('select')
@@ -812,8 +936,13 @@ const mouseUpEvent = (evt) => {
       break
     } default:
       // This could occur in an extension
+      svgCanvas.hasDragStartTransform = false
+      svgCanvas.dragStartTransforms = null
       break
   }
+  // Reset drag flag after any mouseUp
+  svgCanvas.hasDragStartTransform = false
+  svgCanvas.dragStartTransforms = null
 
   /**
 * The main (left) mouse button is released (anywhere).
@@ -979,7 +1108,13 @@ const mouseDownEvent = (evt) => {
     svgCanvas.cloneSelectedElements(0, 0)
   }
 
-  svgCanvas.setRootSctm($id('svgcontent').querySelector('g').getScreenCTM().inverse())
+  // Get screenCTM from the first child group of svgcontent
+  // Note: svgcontent itself has x/y offset attributes, so we use its first child
+  const svgContent = $id('svgcontent')
+  const rootGroup = svgContent?.querySelector('g')
+  const screenCTM = rootGroup?.getScreenCTM?.()
+  if (!screenCTM) { return }
+  svgCanvas.setRootSctm(screenCTM.inverse())
 
   const pt = transformPoint(evt.clientX, evt.clientY, svgCanvas.getrootSctm())
   const mouseX = pt.x * zoom
@@ -1039,12 +1174,22 @@ const mouseDownEvent = (evt) => {
   svgCanvas.setStartTransform(mouseTarget.getAttribute('transform'))
 
   const tlist = getTransformList(mouseTarget)
-  // consolidate transforms using standard SVG but keep the transformation used for the move/scale
-  if (tlist.numberOfItems > 1) {
-    const firstTransform = tlist.getItem(0)
-    tlist.removeItem(0)
-    tlist.consolidate()
-    tlist.insertItemBefore(firstTransform, 0)
+
+  // Consolidate transforms for non-group elements to simplify dragging
+  // For elements with multiple transforms (e.g., after ungrouping), consolidate them
+  // into a single matrix so the dummy translate can be properly applied during drag
+  if (tlist?.numberOfItems > 1 && mouseTarget.tagName !== 'g' && mouseTarget.tagName !== 'a') {
+    // Compute the consolidated matrix from all transforms
+    const consolidatedMatrix = transformListToTransform(tlist).matrix
+
+    // Clear the transform list and add a single matrix transform
+    while (tlist.numberOfItems > 0) {
+      tlist.removeItem(0)
+    }
+
+    const newTransform = svgCanvas.getSvgRoot().createSVGTransform()
+    newTransform.setMatrix(consolidatedMatrix)
+    tlist.appendItem(newTransform)
   }
   switch (svgCanvas.getCurrentMode()) {
     case 'select':
@@ -1067,19 +1212,9 @@ const mouseDownEvent = (evt) => {
         }
         // 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 = getTransformList(selectedElement)
-            if (slist.numberOfItems) {
-              slist.insertItemBefore(svgRoot.createSVGTransform(), 0)
-            } else {
-              slist.appendItem(svgRoot.createSVGTransform())
-            }
-          }
-        }
+        // Note: Dummy transform insertion moved to mouseMove to avoid triggering
+        // recalculateDimensions on simple clicks. The dummy transform is only needed
+        // when actually starting a drag operation.
       } else if (!rightClick) {
         svgCanvas.clearSelection()
         svgCanvas.setCurrentMode('multiselect')
@@ -1105,13 +1240,14 @@ const mouseDownEvent = (evt) => {
       }
       assignAttributes(svgCanvas.getRubberBox(), {
         x: realX * zoom,
-        y: realX * zoom,
+        y: realY * zoom,
         width: 0,
         height: 0,
         display: 'inline'
       }, 100)
       break
     case 'resize': {
+      if (!tlist) { break }
       svgCanvas.setStarted(true)
       svgCanvas.setStartX(x)
       svgCanvas.setStartY(y)
@@ -1339,7 +1475,13 @@ const DOMMouseScrollEvent = (e) => {
 
   e.preventDefault()
 
-  svgCanvas.setRootSctm($id('svgcontent').querySelector('g').getScreenCTM().inverse())
+  // Get screenCTM from the first child group of svgcontent
+  // Note: svgcontent itself has x/y offset attributes, so we use its first child
+  const svgContent = $id('svgcontent')
+  const rootGroup = svgContent?.querySelector('g')
+  const screenCTM = rootGroup?.getScreenCTM?.()
+  if (!screenCTM) { return }
+  svgCanvas.setRootSctm(screenCTM.inverse())
 
   const workarea = document.getElementById('workarea')
   const scrbar = 15

package/core/history.js

@@ -6,7 +6,63 @@
  * @copyright 2010 Jeff Schiller
  */
 
+import { NS } from './namespaces.js'
 import { getHref, setHref, getRotationAngle, getBBox } from './utilities.js'
+import { getTransformList, transformListToTransform, transformPoint } from './math.js'
+
+// Attributes that affect an element's bounding box. Only these require
+// recalculating the rotation center when changed.
+export const BBOX_AFFECTING_ATTRS = new Set([
+  'x', 'y', 'x1', 'y1', 'x2', 'y2',
+  'cx', 'cy', 'r', 'rx', 'ry',
+  'width', 'height', 'd', 'points'
+])
+
+/**
+* Relocate rotation center after a bbox-affecting attribute change.
+* Uses the transform list API to update only the rotation entry,
+* preserving compound transforms (translate, scale, etc.).
+* @param {Element} elem - SVG element
+* @param {string[]} changedAttrs - attribute names that were changed
+*/
+function relocateRotationCenter (elem, changedAttrs) {
+  const hasBboxChange = changedAttrs.some(attr => BBOX_AFFECTING_ATTRS.has(attr))
+  if (!hasBboxChange) return
+
+  const angle = getRotationAngle(elem)
+  if (!angle) return
+
+  const tlist = getTransformList(elem)
+  let n = tlist.numberOfItems
+  while (n--) {
+    const xform = tlist.getItem(n)
+    if (xform.type === 4) { // SVG_TRANSFORM_ROTATE
+      // Compute bbox BEFORE removing the rotation so we can bail out
+      // safely if getBBox returns nothing (avoids losing the rotation).
+      const box = getBBox(elem)
+      if (!box) return
+
+      tlist.removeItem(n)
+
+      // Transform bbox center through only post-rotation transforms.
+      // After removeItem(n), what was at n+1 is now at n.
+      let centerMatrix
+      if (n < tlist.numberOfItems) {
+        centerMatrix = transformListToTransform(tlist, n, tlist.numberOfItems - 1).matrix
+      } else {
+        centerMatrix = elem.ownerSVGElement.createSVGMatrix() // identity
+      }
+      const center = transformPoint(
+        box.x + box.width / 2, box.y + box.height / 2, centerMatrix
+      )
+
+      const newrot = elem.ownerSVGElement.createSVGTransform()
+      newrot.setRotate(angle, center.x, center.y)
+      tlist.insertItemBefore(newrot, n)
+      break
+    }
+  }
+}
 
 /**
 * Group: Undo/Redo history management.
@@ -140,7 +196,7 @@ export class MoveElementCommand extends Command {
   constructor (elem, oldNextSibling, oldParent, text) {
     super()
     this.elem = elem
-    this.text = text ? ('Move ' + elem.tagName + ' to ' + text) : ('Move ' + elem.tagName)
+    this.text = text ? `Move ${elem.tagName} to ${text}` : `Move ${elem.tagName}`
     this.oldNextSibling = oldNextSibling
     this.oldParent = oldParent
     this.newNextSibling = elem.nextSibling
@@ -155,7 +211,11 @@ export class MoveElementCommand extends Command {
   */
   apply (handler) {
     super.apply(handler, () => {
-      this.elem = this.newParent.insertBefore(this.elem, this.newNextSibling)
+      const reference =
+        this.newNextSibling && this.newNextSibling.parentNode === this.newParent
+          ? this.newNextSibling
+          : null
+      this.elem = this.newParent.insertBefore(this.elem, reference)
     })
   }
 
@@ -167,7 +227,11 @@ export class MoveElementCommand extends Command {
   */
   unapply (handler) {
     super.unapply(handler, () => {
-      this.elem = this.oldParent.insertBefore(this.elem, this.oldNextSibling)
+      const reference =
+        this.oldNextSibling && this.oldNextSibling.parentNode === this.oldParent
+          ? this.oldNextSibling
+          : null
+      this.elem = this.oldParent.insertBefore(this.elem, reference)
     })
   }
 }
@@ -184,7 +248,7 @@ export class InsertElementCommand extends Command {
   constructor (elem, text) {
     super()
     this.elem = elem
-    this.text = text || ('Create ' + elem.tagName)
+    this.text = text || `Create ${elem.tagName}`
     this.parent = elem.parentNode
     this.nextSibling = this.elem.nextSibling
   }
@@ -197,7 +261,11 @@ export class InsertElementCommand extends Command {
   */
   apply (handler) {
     super.apply(handler, () => {
-      this.elem = this.parent.insertBefore(this.elem, this.nextSibling)
+      const reference =
+        this.nextSibling && this.nextSibling.parentNode === this.parent
+          ? this.nextSibling
+          : null
+      this.elem = this.parent.insertBefore(this.elem, reference)
     })
   }
 
@@ -229,7 +297,7 @@ export class RemoveElementCommand extends Command {
   constructor (elem, oldNextSibling, oldParent, text) {
     super()
     this.elem = elem
-    this.text = text || ('Delete ' + elem.tagName)
+    this.text = text || `Delete ${elem.tagName}`
     this.nextSibling = oldNextSibling
     this.parent = oldParent
   }
@@ -255,10 +323,11 @@ export class RemoveElementCommand extends Command {
   */
   unapply (handler) {
     super.unapply(handler, () => {
-      if (!this.nextSibling) {
-        console.error('Reference element was lost')
-      }
-      this.parent.insertBefore(this.elem, this.nextSibling) // Don't use `before` or `prepend` as `this.nextSibling` may be `null`
+      const reference =
+        this.nextSibling && this.nextSibling.parentNode === this.parent
+          ? this.nextSibling
+          : null
+      this.parent.insertBefore(this.elem, reference) // Don't use `before` or `prepend` as `reference` may be `null`
     })
   }
 }
@@ -284,7 +353,7 @@ export class ChangeElementCommand extends Command {
   constructor (elem, attrs, text) {
     super()
     this.elem = elem
-    this.text = text ? ('Change ' + elem.tagName + ' ' + text) : ('Change ' + elem.tagName)
+    this.text = text ? `Change ${elem.tagName} ${text}` : `Change ${elem.tagName}`
     this.newValues = {}
     this.oldValues = attrs
     for (const attr in attrs) {
@@ -308,19 +377,21 @@ export class ChangeElementCommand extends Command {
     super.apply(handler, () => {
       let bChangedTransform = false
       Object.entries(this.newValues).forEach(([attr, value]) => {
-        if (value) {
-          if (attr === '#text') {
-            this.elem.textContent = value
-          } else if (attr === '#href') {
-            setHref(this.elem, value)
+        const isNullishOrEmpty = value === null || value === undefined || value === ''
+        if (attr === '#text') {
+          this.elem.textContent = value === null || value === undefined ? '' : String(value)
+        } else if (attr === '#href') {
+          if (isNullishOrEmpty) {
+            this.elem.removeAttribute('href')
+            this.elem.removeAttributeNS(NS.XLINK, 'href')
           } else {
-            this.elem.setAttribute(attr, value)
+            setHref(this.elem, String(value))
           }
-        } else if (attr === '#text') {
-          this.elem.textContent = ''
-        } else {
+        } else if (isNullishOrEmpty) {
           this.elem.setAttribute(attr, '')
           this.elem.removeAttribute(attr)
+        } else {
+          this.elem.setAttribute(attr, value)
         }
 
         if (attr === 'transform') { bChangedTransform = true }
@@ -328,16 +399,7 @@ export class ChangeElementCommand extends Command {
 
       // relocate rotational transform, if necessary
       if (!bChangedTransform) {
-        const angle = getRotationAngle(this.elem)
-        if (angle) {
-          const bbox = getBBox(this.elem)
-          const cx = bbox.x + bbox.width / 2
-          const cy = bbox.y + bbox.height / 2
-          const rotate = ['rotate(', angle, ' ', cx, ',', cy, ')'].join('')
-          if (rotate !== this.elem.getAttribute('transform')) {
-            this.elem.setAttribute('transform', rotate)
-          }
-        }
+        relocateRotationCenter(this.elem, Object.keys(this.newValues))
       }
     })
   }
@@ -352,33 +414,26 @@ export class ChangeElementCommand extends Command {
     super.unapply(handler, () => {
       let bChangedTransform = false
       Object.entries(this.oldValues).forEach(([attr, value]) => {
-        if (value) {
-          if (attr === '#text') {
-            this.elem.textContent = value
-          } else if (attr === '#href') {
-            setHref(this.elem, value)
+        const isNullishOrEmpty = value === null || value === undefined || value === ''
+        if (attr === '#text') {
+          this.elem.textContent = value === null || value === undefined ? '' : String(value)
+        } else if (attr === '#href') {
+          if (isNullishOrEmpty) {
+            this.elem.removeAttribute('href')
+            this.elem.removeAttributeNS(NS.XLINK, 'href')
           } else {
-            this.elem.setAttribute(attr, value)
+            setHref(this.elem, String(value))
           }
-        } else if (attr === '#text') {
-          this.elem.textContent = ''
-        } else {
+        } else if (isNullishOrEmpty) {
           this.elem.removeAttribute(attr)
+        } else {
+          this.elem.setAttribute(attr, value)
         }
         if (attr === 'transform') { bChangedTransform = true }
       })
       // relocate rotational transform, if necessary
       if (!bChangedTransform) {
-        const angle = getRotationAngle(this.elem)
-        if (angle) {
-          const bbox = getBBox(this.elem)
-          const cx = bbox.x + bbox.width / 2
-          const cy = bbox.y + bbox.height / 2
-          const rotate = ['rotate(', angle, ' ', cx, ',', cy, ')'].join('')
-          if (rotate !== this.elem.getAttribute('transform')) {
-            this.elem.setAttribute('transform', rotate)
-          }
-        }
+        relocateRotationCenter(this.elem, Object.keys(this.oldValues))
       }
     })
   }
@@ -602,7 +657,7 @@ export class UndoManager {
     const p = this.undoChangeStackPointer--
     const changeset = this.undoableChangeStack[p]
     const { attrName } = changeset
-    const batchCmd = new BatchCommand('Change ' + attrName)
+    const batchCmd = new BatchCommand(`Change ${attrName}`)
     let i = changeset.elements.length
     while (i--) {
       const elem = changeset.elements[i]

package/core/historyrecording.js

@@ -79,7 +79,9 @@ class HistoryRecordingService {
       this.batchCommandStack_.pop()
       const { length: len } = this.batchCommandStack_
       this.currentBatchCommand_ = len ? this.batchCommandStack_[len - 1] : null
-      this.addCommand_(batchCommand)
+      if (!batchCommand.isEmpty()) {
+        this.addCommand_(batchCommand)
+      }
     }
     return this
   }
@@ -157,5 +159,5 @@ class HistoryRecordingService {
  * @memberof module:history.HistoryRecordingService
  * @property {module:history.HistoryRecordingService} NO_HISTORY - Singleton that can be passed to functions that record history, but the caller requires that no history be recorded.
  */
-HistoryRecordingService.NO_HISTORY = new HistoryRecordingService()
+HistoryRecordingService.NO_HISTORY = new HistoryRecordingService(null)
 export default HistoryRecordingService