From 8545ddeaff4f406c21a6539a3ceb53322ebe329a Mon Sep 17 00:00:00 2001
From: Scott Bell <scott@traclabs.com>
Date: Fri, 7 Mar 2025 12:01:26 +0100
Subject: [PATCH] remove eventemitter and use native custom events

---
 .../events/components/EventTimelineView.vue   | 20 +++++++------
 src/plugins/timeline/ExtendedLinesBus.js      | 30 +++++++++++++++----
 src/plugins/timeline/TimelineViewLayout.vue   | 14 +++++----
 3 files changed, 43 insertions(+), 21 deletions(-)

diff --git a/src/plugins/events/components/EventTimelineView.vue b/src/plugins/events/components/EventTimelineView.vue
index e5ba075a48..49a626f651 100644
--- a/src/plugins/events/components/EventTimelineView.vue
+++ b/src/plugins/events/components/EventTimelineView.vue
@@ -136,9 +136,8 @@ export default {
     this.resize = _.debounce(this.resize, 400);
     this.eventStripResizeObserver = new ResizeObserver(this.resize);
     this.eventStripResizeObserver.observe(this.$refs.events);
-
-    this.extendedLinesBus.on('disable-extended-lines', this.disableExtendEventLines);
-    this.extendedLinesBus.on('enable-extended-lines', this.enableExtendEventLines);
+    this.extendedLinesBus.addEventListener('disable-extended-lines', this.disableExtendEventLines);
+    this.extendedLinesBus.addEventListener('enable-extended-lines', this.enableExtendEventLines);
   },
   beforeUnmount() {
     if (this.eventStripResizeObserver) {
@@ -153,9 +152,11 @@ export default {
       this.destroyEventContainer();
     }
 
-    this.extendedLinesBus.off('disable-extended-lines', this.disableExtendEventLines);
-    this.extendedLinesBus.off('enable-extended-lines', this.enableExtendEventLines);
-    this.extendedLinesBus.off('event-hovered', this.checkIfOurEvent);
+    this.extendedLinesBus.removeEventListener(
+      'disable-extended-lines',
+      this.disableExtendEventLines
+    );
+    this.extendedLinesBus.removeEventListener('enable-extended-lines', this.enableExtendEventLines);
   },
   methods: {
     setTimeContext() {
@@ -164,16 +165,17 @@ export default {
       this.timeContext.on('timeSystem', this.setScaleAndPlotEvents);
       this.timeContext.on('boundsChanged', this.updateViewBounds);
     },
-    enableExtendEventLines(keyStringToEnable) {
+    enableExtendEventLines(event) {
+      const keyStringToEnable = event.detail;
       if (this.keyString === keyStringToEnable) {
         this.extendLines = true;
         this.emitExtendedLines();
       }
     },
-    disableExtendEventLines(keyStringToDisable) {
+    disableExtendEventLines(event) {
+      const keyStringToDisable = event.detail;
       if (this.keyString === keyStringToDisable) {
         this.extendLines = false;
-        // emit an empty array to clear the lines
         this.emitExtendedLines();
       }
     },
diff --git a/src/plugins/timeline/ExtendedLinesBus.js b/src/plugins/timeline/ExtendedLinesBus.js
index a575050913..5e3092b8c1 100644
--- a/src/plugins/timeline/ExtendedLinesBus.js
+++ b/src/plugins/timeline/ExtendedLinesBus.js
@@ -20,18 +20,36 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import { EventEmitter } from 'eventemitter3';
-export default class ExtendedLinesBus extends EventEmitter {
+export default class ExtendedLinesBus extends EventTarget {
   updateExtendedLines(keyString, lines) {
-    this.emit('update-extended-lines', { lines, keyString });
+    this.dispatchEvent(
+      new CustomEvent('update-extended-lines', {
+        detail: { keyString, lines }
+      })
+    );
   }
+
   disableExtendEventLines(keyString) {
-    this.emit('disable-extended-lines', keyString);
+    this.dispatchEvent(
+      new CustomEvent('disable-extended-lines', {
+        detail: keyString
+      })
+    );
   }
+
   enableExtendEventLines(keyString) {
-    this.emit('enable-extended-lines', keyString);
+    this.dispatchEvent(
+      new CustomEvent('enable-extended-lines', {
+        detail: keyString
+      })
+    );
   }
+
   updateHoverExtendEventLine(keyString, id) {
-    this.emit('update-extended-hover', { id, keyString });
+    this.dispatchEvent(
+      new CustomEvent('update-extended-hover', {
+        detail: { keyString, id }
+      })
+    );
   }
 }
diff --git a/src/plugins/timeline/TimelineViewLayout.vue b/src/plugins/timeline/TimelineViewLayout.vue
index 350a377115..c9a1b573aa 100644
--- a/src/plugins/timeline/TimelineViewLayout.vue
+++ b/src/plugins/timeline/TimelineViewLayout.vue
@@ -127,16 +127,16 @@ export default {
     this.stopFollowingTimeContext();
     this.handleContentResize.cancel();
     this.contentResizeObserver.disconnect();
-    this.extendedLinesBus.off('update-extended-lines', this.updateExtendedLines);
-    this.extendedLinesBus.off('update-extended-hover', this.updateExtendedHover);
     this.openmct.selection.off('change', this.checkForLineSelection);
+    this.extendedLinesBus.removeEventListener('update-extended-lines', this.updateExtendedLines);
+    this.extendedLinesBus.removeEventListener('update-extended-hover', this.updateExtendedHover);
   },
   mounted() {
     this.items = [];
     this.setTimeContext();
 
-    this.extendedLinesBus.on('update-extended-lines', this.updateExtendedLines);
-    this.extendedLinesBus.on('update-extended-hover', this.updateExtendedHover);
+    this.extendedLinesBus.addEventListener('update-extended-lines', this.updateExtendedLines);
+    this.extendedLinesBus.addEventListener('update-extended-hover', this.updateExtendedHover);
     this.openmct.selection.on('change', this.checkForLineSelection);
 
     if (this.composition) {
@@ -271,10 +271,12 @@ export default {
         this.timeContext.off('clockChanged', this.updateViewBounds);
       }
     },
-    updateExtendedLines({ keyString, lines }) {
+    updateExtendedLines(event) {
+      const { keyString, lines } = event.detail;
       this.extendedLinesPerKey[keyString] = lines;
     },
-    updateExtendedHover({ keyString, id }) {
+    updateExtendedHover(event) {
+      const { keyString, id } = event.detail;
       this.extendedLineHover = { keyString, id };
     },
     checkForLineSelection(selection) {