events fixes, added unittests

lib/animation-timeline.js

@@ -2948,7 +2948,7 @@ var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
         timelineEvent.prevVal = prevVal;
         timelineEvent.source = source;
         this._val = val;
-        this.emit(TimelineEvents.Selected, timelineEvent);
+        this.emit(TimelineEvents.TimeChanged, timelineEvent);
 
         if (timelineEvent.isPrevented()) {
           this._val = prevVal;
@@ -3326,11 +3326,11 @@ var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
 
   }, {
     key: "_mergeOptions",
-    value: function _mergeOptions(toSet) {
-      toSet = toSet || {}; // Apply incoming options to default. (override default)
+    value: function _mergeOptions(from) {
+      from = from || {}; // Apply incoming options to default. (override default)
       // Deep clone default options:
 
-      var options = JSON.parse(JSON.stringify(defaultTimelineOptions)); // Merge options with the default.
+      var to = JSON.parse(JSON.stringify(defaultTimelineOptions)); // Merge options with the default.
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
       var mergeOptionsDeep = function mergeOptionsDeep(to, from) {
@@ -3341,17 +3341,23 @@ var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
 
         for (var key in to) {
           if (Object.prototype.hasOwnProperty.call(from, key)) {
-            if (to[key] == undefined) {
-              to[key] = from[key];
-            } else if (timeline_typeof(to[key]) === 'object') {
-              mergeOptionsDeep(to[key], from[key]);
+            if (from[key] !== undefined) {
+              if (timeline_typeof(from[key]) === 'object') {
+                if (!to[key]) {
+                  to[key] = from[key];
+                } else {
+                  mergeOptionsDeep(to[key], from[key]);
+                }
+              } else {
+                to[key] = from[key];
+              }
             }
           }
         }
       };
 
-      mergeOptionsDeep(options, toSet);
-      return options;
+      mergeOptionsDeep(to, from);
+      return to;
     }
     /**
      * Subscribe on time changed.
@@ -3360,7 +3366,7 @@ var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
   }, {
     key: "onTimeChanged",
     value: function onTimeChanged(callback) {
-      this.on(TimelineEvents.DragStarted, callback);
+      this.on(TimelineEvents.TimeChanged, callback);
     }
     /**
      * Subscribe on drag started event.

lib/timeline.d.ts

@@ -280,7 +280,7 @@ export declare class Timeline extends TimelineEventsEmitter {
     /**
      * Merge options with the defaults.
      */
-    _mergeOptions(toSet: TimelineOptions): TimelineOptions;
+    _mergeOptions(from: TimelineOptions): TimelineOptions;
     /**
      * Subscribe on time changed.
      */

src/timeline.ts

@@ -1597,7 +1597,7 @@ export class Timeline extends TimelineEventsEmitter {
       timelineEvent.prevVal = prevVal;
       timelineEvent.source = source;
       this._val = val;
-      this.emit(TimelineEvents.Selected, timelineEvent);
+      this.emit(TimelineEvents.TimeChanged, timelineEvent);
       if (timelineEvent.isPrevented()) {
         this._val = prevVal;
         return false;
@@ -1912,11 +1912,11 @@ export class Timeline extends TimelineEventsEmitter {
   /**
    * Merge options with the defaults.
    */
-  _mergeOptions(toSet: TimelineOptions): TimelineOptions {
-    toSet = toSet || ({} as TimelineOptions);
+  _mergeOptions(from: TimelineOptions): TimelineOptions {
+    from = from || ({} as TimelineOptions);
     // Apply incoming options to default. (override default)
     // Deep clone default options:
-    const options = JSON.parse(JSON.stringify(defaultTimelineOptions));
+    const to = JSON.parse(JSON.stringify(defaultTimelineOptions));
     // Merge options with the default.
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const mergeOptionsDeep = (to: any, from: any): void => {
@@ -1926,23 +1926,29 @@ export class Timeline extends TimelineEventsEmitter {
       // eslint-disable-next-line prefer-const
       for (let key in to) {
         if (Object.prototype.hasOwnProperty.call(from, key)) {
-          if (to[key] == undefined) {
-            to[key] = from[key];
-          } else if (typeof to[key] === 'object') {
-            mergeOptionsDeep(to[key], from[key]);
+          if (from[key] !== undefined) {
+            if (typeof from[key] === 'object') {
+              if (!to[key]) {
+                to[key] = from[key];
+              } else {
+                mergeOptionsDeep(to[key], from[key]);
+              }
+            } else {
+              to[key] = from[key];
+            }
           }
         }
       }
     };
 
-    mergeOptionsDeep(options, toSet);
-    return options;
+    mergeOptionsDeep(to, from);
+    return to;
   }
   /**
    * Subscribe on time changed.
    */
   public onTimeChanged(callback: (eventArgs: TimelineTimeChangedEvent) => void): void {
-    this.on(TimelineEvents.DragStarted, callback);
+    this.on(TimelineEvents.TimeChanged, callback);
   }
   /**
    * Subscribe on drag started event.

tests/js/settingsTests.js

@@ -30,6 +30,7 @@ describe('_mergeOptions', function () {
         var options = {
             id: 'new id',
             snapsPerSeconds: 10,
+            headerHeight: 44,
             snapEnabled: true,
             rowsStyle: {
                 height: 100,
@@ -40,12 +41,24 @@ describe('_mergeOptions', function () {
             },
         };
         var merged = timeline._mergeOptions(options);
-        asserts_1.assert.equal(merged.id, options.id);
-        asserts_1.assert.equal(merged.rowsStyle.height, options.rowsStyle.height);
-        asserts_1.assert.equal(merged.rowsStyle.keyframesStyle.hidden, options.rowsStyle.hidden);
-        asserts_1.assert.equal(merged.rowsStyle.keyframesStyle.draggable, options.rowsStyle.keyframesStyle.draggable);
+        asserts_1.assert.equal(merged.id, 'new id');
+        asserts_1.assert.equal(merged.headerHeight, 44);
+        asserts_1.assert.equal(merged.rowsStyle.height, 100);
+        asserts_1.assert.equal(merged.rowsStyle.keyframesStyle.hidden, true);
+        asserts_1.assert.equal(merged.rowsStyle.keyframesStyle.draggable, false);
         var defOptions = animation_timeline_1.defaultTimelineOptions;
         asserts_1.assert.equal(merged.rowsStyle.keyframesStyle.shape, defOptions.rowsStyle.keyframesStyle.shape);
     });
+    it('Original options are not affected', function () {
+        var timeline = new animation_timeline_1.Timeline();
+        var options = {
+            id: 'new id',
+            snapsPerSeconds: 10,
+        };
+        var merged = timeline._mergeOptions(options);
+        asserts_1.assert.equal(merged.id, 'new id');
+        asserts_1.assert.equal(merged.snapsPerSeconds, 10);
+        asserts_1.assert.equal(options.headerHeight === undefined, true);
+    });
 });
 //# sourceMappingURL=settingsTests.js.map

tests/settingsTests.ts

@@ -31,6 +31,7 @@ describe('_mergeOptions', function () {
     const options = {
       id: 'new id',
       snapsPerSeconds: 10,
+      headerHeight: 44,
       snapEnabled: true,
       rowsStyle: {
         height: 100,
@@ -41,11 +42,23 @@ describe('_mergeOptions', function () {
       } as TimelineRowStyle,
     } as TimelineOptions;
     const merged = timeline._mergeOptions(options);
-    assert.equal(merged.id, options.id);
-    assert.equal(merged.rowsStyle.height, options.rowsStyle.height);
-    assert.equal(merged.rowsStyle.keyframesStyle.hidden, options.rowsStyle.hidden);
-    assert.equal(merged.rowsStyle.keyframesStyle.draggable, options.rowsStyle.keyframesStyle.draggable);
+    assert.equal(merged.id, 'new id');
+    assert.equal(merged.headerHeight, 44);
+    assert.equal(merged.rowsStyle.height, 100);
+    assert.equal(merged.rowsStyle.keyframesStyle.hidden, true);
+    assert.equal(merged.rowsStyle.keyframesStyle.draggable, false);
     const defOptions = defaultTimelineOptions as TimelineOptions;
     assert.equal(merged.rowsStyle.keyframesStyle.shape, defOptions.rowsStyle.keyframesStyle.shape);
   });
+  it('Original options are not affected', function () {
+    const timeline = new Timeline();
+    const options = {
+      id: 'new id',
+      snapsPerSeconds: 10,
+    } as TimelineOptions;
+    const merged = timeline._mergeOptions(options);
+    assert.equal(merged.id, 'new id');
+    assert.equal(merged.snapsPerSeconds, 10);
+    assert.equal(options.headerHeight === undefined, true);
+  });
 });