perf: emit timeline events only when listeners exist (#474)

* perf: emit timeline events only when listeners exist * fix: use correct method name * fix: rename listeners to timelineListeners prevent naming collision with component-emitter Co-authored-by: Marvin Luchs <[email protected]>
visjs · May 16, 2020 · e9ba10d · e9ba10d
1 parent 775d3c9
commit e9ba10d
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 16 deletions.
diff --git a/lib/timeline/Core.js b/lib/timeline/Core.js
@@ -142,7 +142,7 @@ class Core {
     const pinchRecognizer = this.hammer.get('pinch').set({enable: true});
     pinchRecognizer && hammerUtil.disablePreventDefaultVertically(pinchRecognizer);
     this.hammer.get('pan').set({threshold:5, direction: Hammer.DIRECTION_ALL});
-    this.listeners = {};
+    this.timelineListeners = {};
 
     const events = [
       'tap', 'doubletap', 'press',
@@ -161,7 +161,7 @@ class Core {
         }
       };
       me.hammer.on(type, listener);
-      me.listeners[type] = listener;
+      me.timelineListeners[type] = listener;
     });
 
     // emulate a touch event (emitted before the start of a pan, pinch, tap, or press)
@@ -557,12 +557,12 @@ class Core {
     }
 
     // cleanup hammer touch events
-    for (const event in this.listeners) {
-      if (this.listeners.hasOwnProperty(event)) {
-        delete this.listeners[event];
+    for (const event in this.timelineListeners) {
+      if (this.timelineListeners.hasOwnProperty(event)) {
+        delete this.timelineListeners[event];
       }
     }
-    this.listeners = null;
+    this.timelineListeners = null;
     this.hammer && this.hammer.destroy();
     this.hammer = null;
 

diff --git a/lib/timeline/Timeline.js b/lib/timeline/Timeline.js
@@ -151,37 +151,45 @@ export default class Timeline extends Core {
     this.itemsData = null;      // DataSet
     this.groupsData = null;     // DataSet
 
+    function emit(eventName, event) {
+      if (!me.hasListeners(eventName)) {
+        return;
+      }
+
+      me.emit(eventName, me.getEventProperties(event));
+    }
+
     this.dom.root.onclick = event => {
-      me.emit('click', me.getEventProperties(event))
+      emit('click', event)
     };
     this.dom.root.ondblclick = event => {
-      me.emit('doubleClick', me.getEventProperties(event))
+      emit('doubleClick', event)
     };
     this.dom.root.oncontextmenu = event => {
-      me.emit('contextmenu', me.getEventProperties(event))
+      emit('contextmenu', event)
     };
     this.dom.root.onmouseover = event => {
-      me.emit('mouseOver', me.getEventProperties(event))
+      emit('mouseOver', event)
     };
     if(window.PointerEvent) {
       this.dom.root.onpointerdown = event => {
-        me.emit('mouseDown', me.getEventProperties(event))
+        emit('mouseDown', event)
       };
       this.dom.root.onpointermove = event => {
-        me.emit('mouseMove', me.getEventProperties(event))
+        emit('mouseMove', event)
       };
       this.dom.root.onpointerup = event => {
-        me.emit('mouseUp', me.getEventProperties(event))
+        emit('mouseUp', event)
       };
     } else {
       this.dom.root.onmousemove = event => {
-        me.emit('mouseMove', me.getEventProperties(event))
+        emit('mouseMove', event)
       };
       this.dom.root.onmousedown = event => {
-        me.emit('mouseDown', me.getEventProperties(event))
+        emit('mouseDown', event)
       };
       this.dom.root.onmouseup = event => {
-        me.emit('mouseUp', me.getEventProperties(event))
+        emit('mouseUp', event)
       };
     }