unittests for merge options

lib/animation-timeline.js

@@ -2019,7 +2019,7 @@ var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
       var absolute = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
 
       if (!absolute) {
-        coords -= this._options.leftMarginPx;
+        coords -= this._options.leftMargin;
       }
 
       var ms = coords / this._options.stepPx * this._options.zoom;
@@ -2136,9 +2136,13 @@ var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
   }, {
     key: "_renderTicks",
     value: function _renderTicks() {
+      if (!this._ctx || !this._options) {
+        return;
+      }
+
       this._ctx.save();
 
-      var areaWidth = this._scrollContainer.scrollWidth - this._options.leftMarginPx;
+      var areaWidth = this._scrollContainer.scrollWidth - (this._options.leftMargin || 0);
       var from = this.pxToVal(0);
       var to = this.pxToVal(areaWidth);
       var dist = TimelineUtils.getDistance(from, to);
@@ -2168,7 +2172,7 @@ var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
       } // filter to draw only visible
 
 
-      var visibleFrom = this.pxToVal(this._scrollContainer.scrollLeft + this._options.leftMarginPx);
+      var visibleFrom = this.pxToVal(this._scrollContainer.scrollLeft + this._options.leftMargin || 0);
       var visibleTo = this.pxToVal(this._scrollContainer.scrollLeft + this._scrollContainer.clientWidth); // Find beautiful start point:
 
       from = Math.floor(visibleFrom / step) * step; // Find a beautiful end point:
@@ -2987,7 +2991,7 @@ var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
           }
         }
 
-        var keyframeW = data.area.width + this._options.leftMarginPx + additionalOffset;
+        var keyframeW = data.area.width + this._options.leftMargin + additionalOffset;
         newWidth = Math.max(newWidth, // keyframes size
         keyframeW, // not less than current scroll position
         this._scrollContainer.scrollLeft + this._canvas.clientWidth, timelinePos);
@@ -3174,8 +3178,9 @@ var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
     key: "_mergeOptions",
     value: function _mergeOptions(toSet) {
       toSet = toSet || {}; // Apply incoming options to default. (override default)
+      // Deep clone default options:
 
-      var options = {}; // Merge options with the default.
+      var options = 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) {

lib/settings/timelineOptions.d.ts

@@ -27,7 +27,7 @@ export interface TimelineOptions {
     /**
      * additional left margin in pixels to start the line gauge from.
      */
-    leftMarginPx?: number;
+    leftMargin?: number;
     /**
      * Component header background color.
      */

src/settings/defaults.ts

@@ -75,7 +75,7 @@ export const defaultTimelineOptions = {
   /**
    * additional left margin in pixels to start the line gauge from.
    */
-  leftMarginPx: 25,
+  leftMargin: 25,
   headerFillColor: '#101011',
   fillColor: '#101011',
 

src/settings/timelineOptions.ts

@@ -28,7 +28,7 @@ export interface TimelineOptions {
   /**
    * additional left margin in pixels to start the line gauge from.
    */
-  leftMarginPx?: number;
+  leftMargin?: number;
   /**
    * Component header background color.
    */

src/timeline.ts

@@ -20,7 +20,7 @@ import { TimelineSelectedEvent } from './utils/events/timelineSelectedEvent';
 import { TimelineDraggableData } from './utils/timelineDraggableData';
 import { TimelineClickEvent } from './utils/events/timelineClickEvent';
 import { TimelineDragEvent } from './utils/events/timelineDragEvent';
-import { defaultTimelineConsts } from './settings/defaults';
+import { defaultTimelineConsts, defaultTimelineOptions } from './settings/defaults';
 
 interface MousePoint extends DOMPoint {
   radius: number;
@@ -888,7 +888,7 @@ export class Timeline extends TimelineEventsEmitter {
    */
   public pxToVal(coords: number, absolute = false): number {
     if (!absolute) {
-      coords -= this._options.leftMarginPx;
+      coords -= this._options.leftMargin;
     }
     const ms = (coords / this._options.stepPx) * this._options.zoom;
     return ms;
@@ -988,9 +988,12 @@ export class Timeline extends TimelineEventsEmitter {
   }
 
   _renderTicks(): void {
+    if (!this._ctx || !this._options) {
+      return;
+    }
     this._ctx.save();
 
-    const areaWidth = this._scrollContainer.scrollWidth - this._options.leftMarginPx;
+    const areaWidth = this._scrollContainer.scrollWidth - (this._options.leftMargin || 0);
     let from = this.pxToVal(0);
     let to = this.pxToVal(areaWidth);
     const dist = TimelineUtils.getDistance(from, to);
@@ -1014,7 +1017,7 @@ export class Timeline extends TimelineEventsEmitter {
       smallStep = realSmallStep;
     }
     // filter to draw only visible
-    const visibleFrom = this.pxToVal(this._scrollContainer.scrollLeft + this._options.leftMarginPx);
+    const visibleFrom = this.pxToVal(this._scrollContainer.scrollLeft + this._options.leftMargin || 0);
     const visibleTo = this.pxToVal(this._scrollContainer.scrollLeft + this._scrollContainer.clientWidth);
     // Find beautiful start point:
     from = Math.floor(visibleFrom / step) * step;
@@ -1714,7 +1717,7 @@ export class Timeline extends TimelineEventsEmitter {
           timelinePos = Math.floor(timelineGlobalPos + this._canvas.clientWidth / 1.5);
         }
       }
-      const keyframeW = data.area.width + this._options.leftMarginPx + additionalOffset;
+      const keyframeW = data.area.width + this._options.leftMargin + additionalOffset;
 
       newWidth = Math.max(
         newWidth,
@@ -1880,7 +1883,8 @@ export class Timeline extends TimelineEventsEmitter {
   _mergeOptions(toSet: TimelineOptions): TimelineOptions {
     toSet = toSet || ({} as TimelineOptions);
     // Apply incoming options to default. (override default)
-    const options = {} as TimelineOptions;
+    // Deep clone default options:
+    const options = 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 => {

tests/js/settingsTests.js

@@ -3,103 +3,26 @@ Object.defineProperty(exports, "__esModule", { value: true });
 /* eslint-disable @typescript-eslint/no-explicit-any */
 var animation_timeline_1 = require("../lib/animation-timeline");
 var asserts_1 = require("./asserts");
-describe('_findDraggable', function () {
-    it('Keyframe should be selected', function () {
-        var timeline = new animation_timeline_1.Timeline();
-        var elements = [
-            {
-                type: animation_timeline_1.TimelineElementType.Stripe,
-                val: 5,
-            },
-            {
-                type: animation_timeline_1.TimelineElementType.Keyframe,
-                val: 5,
-            },
-        ];
-        var element = timeline._findDraggable(elements, 5);
-        if (!element) {
-            throw new Error('element cannot be empty');
-        }
-        asserts_1.assert.equal(element.type, animation_timeline_1.TimelineElementType.Keyframe, animation_timeline_1.TimelineElementType.Keyframe + ' should be selected');
+describe('_mergeOptions', function () {
+    it('Top level options are merged', function () {
+        var defOptions = animation_timeline_1.defaultTimelineOptions;
+        var options = { id: 'new id', snapsPerSeconds: 10, snapEnabled: true };
+        var merged = new animation_timeline_1.Timeline()._mergeOptions(options);
+        asserts_1.assert.equal(merged.id, options.id);
+        asserts_1.assert.equal(merged.snapEnabled, options.snapEnabled);
+        asserts_1.assert.equal(merged.snapsPerSeconds, options.snapsPerSeconds);
+        asserts_1.assert.equal(merged.labelsColor, defOptions.labelsColor);
+        asserts_1.assert.equal(merged.leftMargin, defOptions.leftMargin);
+        asserts_1.assert.equal(merged.selectionColor, defOptions.selectionColor);
+        asserts_1.assert.equal(defOptions.selectionColor === undefined, 'initial options should not be affected');
     });
-    it('Timeline should be selected', function () {
-        var timeline = new animation_timeline_1.Timeline();
-        var elements = [
-            {
-                type: animation_timeline_1.TimelineElementType.Timeline,
-                val: 5,
-            },
-            {
-                type: animation_timeline_1.TimelineElementType.Stripe,
-                val: 5,
-            },
-        ];
-        var element = timeline._findDraggable(elements, 5);
-        if (!element) {
-            throw new Error('element cannot be empty');
-        }
-        asserts_1.assert.equal(element.type, animation_timeline_1.TimelineElementType.Timeline, animation_timeline_1.TimelineElementType.Timeline + ' should be selected');
-    });
-    it('Timeline should taken first', function () {
-        var timeline = new animation_timeline_1.Timeline();
-        var elements = [
-            {
-                type: animation_timeline_1.TimelineElementType.Timeline,
-                val: 5,
-            },
-            {
-                type: animation_timeline_1.TimelineElementType.Keyframe,
-                val: 4,
-            },
-            {
-                type: animation_timeline_1.TimelineElementType.Keyframe,
-                val: 5,
-            },
-            {
-                type: animation_timeline_1.TimelineElementType.Stripe,
-                val: 5,
-            },
-        ];
-        var element = timeline._findDraggable(elements, 5);
-        if (!element) {
-            throw new Error('element cannot be empty');
-        }
-        asserts_1.assert.equal(element.type, animation_timeline_1.TimelineElementType.Timeline, animation_timeline_1.TimelineElementType.Timeline + ' should be selected');
-        // Keyframe with value 5 should be selected
-        asserts_1.assert.equal(element.val, 5);
-    });
-    it('Stripe should be selected', function () {
-        var timeline = new animation_timeline_1.Timeline();
-        var elements = [
-            {
-                type: animation_timeline_1.TimelineElementType.Stripe,
-                val: 5,
-            },
-        ];
-        var element = timeline._findDraggable(elements, 5);
-        if (!element) {
-            throw new Error('element cannot be empty');
-        }
-        asserts_1.assert.equal(element.type, animation_timeline_1.TimelineElementType.Stripe, animation_timeline_1.TimelineElementType.Stripe + ' should be selected');
-    });
-    it('closest keyframe should be returned', function () {
-        var timeline = new animation_timeline_1.Timeline();
-        var elements = [
-            {
-                type: animation_timeline_1.TimelineElementType.Keyframe,
-                val: 0,
-            },
-            {
-                type: animation_timeline_1.TimelineElementType.Keyframe,
-                val: 4,
-            },
-            {
-                type: animation_timeline_1.TimelineElementType.Keyframe,
-                val: 9,
-            },
-        ];
-        var element = timeline._findDraggable(elements, 5);
-        asserts_1.assert.equal(element.val, elements[2].val);
+    it('Default styles are merged', function () {
+        var defOptions = animation_timeline_1.defaultTimelineOptions;
+        var options = { id: 'new id', snapsPerSeconds: 10, snapEnabled: true };
+        var merged = new animation_timeline_1.Timeline()._mergeOptions(options);
+        asserts_1.assert.equal(merged.id, options.id);
+        asserts_1.assert.equal(!!merged.rowsStyle, true, 'Row style cannot be null');
+        asserts_1.assert.equal(!!merged.rowsStyle.keyframesStyle, true, 'Keyframes style cannot be null');
     });
 });
 //# sourceMappingURL=settingsTests.js.map

tests/js/styleTests.js

@@ -4,100 +4,102 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var animation_timeline_1 = require("./../lib/animation-timeline");
 var asserts_1 = require("./asserts");
 describe('TimelineStyleUtils', function () {
-    it('Keyframe is draggable by default', function () {
-        var globalStyle = {
-            rowsStyle: {
-                keyframesStyle: {},
-            },
-        };
-        var keyframeStyle = { shape: animation_timeline_1.TimelineKeyframeShape.Rect };
-        asserts_1.assert.equal(animation_timeline_1.TimelineStyleUtils.keyframeDraggable(keyframeStyle, null, globalStyle), true);
-    });
-    it('Keyframe draggable', function () {
-        var globalStyle = {
-            rowsStyle: {
-                keyframesStyle: {},
-            },
-        };
-        var keyframeStyle = { draggable: true, shape: animation_timeline_1.TimelineKeyframeShape.Rect };
-        asserts_1.assert.equal(animation_timeline_1.TimelineStyleUtils.keyframeDraggable(keyframeStyle, null, globalStyle), true);
-    });
-    it('Keyframe is not draggable', function () {
-        var globalStyle = {
-            rowsStyle: {
-                keyframesStyle: {},
-            },
-        };
-        var keyframeStyle = { draggable: false, shape: animation_timeline_1.TimelineKeyframeShape.Rect };
-        asserts_1.assert.equal(animation_timeline_1.TimelineStyleUtils.keyframeDraggable(keyframeStyle, null, globalStyle), false);
-    });
-    it('Keyframe row is not draggable than keyframe is not draggable', function () {
-        var globalStyle = {
-            rowsStyle: {
-                keyframesStyle: {},
-            },
-        };
-        var rowStyle = { keyframesStyle: { draggable: false, shape: animation_timeline_1.TimelineKeyframeShape.Rect } };
-        var keyframeStyle = { draggable: true, shape: animation_timeline_1.TimelineKeyframeShape.Rect };
-        asserts_1.assert.equal(animation_timeline_1.TimelineStyleUtils.keyframeDraggable(keyframeStyle, rowStyle, globalStyle), false);
-    });
-    it('Keyframes are not draggable by general settings', function () {
-        var globalStyle = {
-            rowsStyle: {
-                keyframesStyle: {
-                    draggable: false,
+    describe('Draggable', function () {
+        it('Keyframe is draggable by default', function () {
+            var globalStyle = {
+                rowsStyle: {
+                    keyframesStyle: {},
                 },
-            },
-        };
-        var rowStyle = { keyframesStyle: { draggable: true, shape: animation_timeline_1.TimelineKeyframeShape.Rect } };
-        var keyframeStyle = { draggable: true, shape: animation_timeline_1.TimelineKeyframeShape.Rect };
-        asserts_1.assert.equal(animation_timeline_1.TimelineStyleUtils.keyframeDraggable(keyframeStyle, rowStyle, globalStyle), false);
-    });
-    it('Keyframes are draggable', function () {
-        var globalStyle = {
-            rowsStyle: {
-                keyframesStyle: {
-                    draggable: true,
+            };
+            var keyframeStyle = { shape: animation_timeline_1.TimelineKeyframeShape.Rect };
+            asserts_1.assert.equal(animation_timeline_1.TimelineStyleUtils.keyframeDraggable(keyframeStyle, null, globalStyle), true);
+        });
+        it('Keyframe draggable', function () {
+            var globalStyle = {
+                rowsStyle: {
+                    keyframesStyle: {},
                 },
-            },
-        };
-        var rowStyle = { keyframesStyle: { draggable: true, shape: animation_timeline_1.TimelineKeyframeShape.Rect } };
-        var keyframeStyle = { draggable: true, shape: animation_timeline_1.TimelineKeyframeShape.Rect };
-        asserts_1.assert.equal(animation_timeline_1.TimelineStyleUtils.keyframeDraggable(keyframeStyle, rowStyle, globalStyle), false);
-    });
-    it('Stripe is draggable by default', function () {
-        var globalStyle = {
-            rowsStyle: {
-                keyframesStyle: {
-                    draggable: true,
+            };
+            var keyframeStyle = { draggable: true, shape: animation_timeline_1.TimelineKeyframeShape.Rect };
+            asserts_1.assert.equal(animation_timeline_1.TimelineStyleUtils.keyframeDraggable(keyframeStyle, null, globalStyle), true);
+        });
+        it('Keyframe is not draggable', function () {
+            var globalStyle = {
+                rowsStyle: {
+                    keyframesStyle: {},
                 },
-            },
-        };
-        var rowStyle = { keyframesStyle: { draggable: true, shape: animation_timeline_1.TimelineKeyframeShape.Rect } };
-        asserts_1.assert.equal(animation_timeline_1.TimelineStyleUtils.stripeDraggable(rowStyle, globalStyle), true);
-    });
-    it('Stripe is not draggable by row settings', function () {
-        var globalStyle = {
-            rowsStyle: {
-                keyframesStyle: {
-                    draggable: true,
+            };
+            var keyframeStyle = { draggable: false, shape: animation_timeline_1.TimelineKeyframeShape.Rect };
+            asserts_1.assert.equal(animation_timeline_1.TimelineStyleUtils.keyframeDraggable(keyframeStyle, null, globalStyle), false);
+        });
+        it('Keyframe row is not draggable than keyframe is not draggable', function () {
+            var globalStyle = {
+                rowsStyle: {
+                    keyframesStyle: {},
                 },
-            },
-        };
-        var rowStyle = { stripeDraggable: false, keyframesStyle: { draggable: true, shape: animation_timeline_1.TimelineKeyframeShape.Rect } };
-        asserts_1.assert.equal(animation_timeline_1.TimelineStyleUtils.stripeDraggable(rowStyle, globalStyle), false);
-    });
-    it('Stripe is not draggable by global settings', function () {
-        var globalStyle = {
-            rowsStyle: {
-                stripeDraggable: false,
-                keyframesStyle: {
-                    draggable: true,
+            };
+            var rowStyle = { keyframesStyle: { draggable: false, shape: animation_timeline_1.TimelineKeyframeShape.Rect } };
+            var keyframeStyle = { draggable: true, shape: animation_timeline_1.TimelineKeyframeShape.Rect };
+            asserts_1.assert.equal(animation_timeline_1.TimelineStyleUtils.keyframeDraggable(keyframeStyle, rowStyle, globalStyle), false);
+        });
+        it('Keyframes are not draggable by general settings', function () {
+            var globalStyle = {
+                rowsStyle: {
+                    keyframesStyle: {
+                        draggable: false,
+                    },
+                },
+            };
+            var rowStyle = { keyframesStyle: { draggable: true, shape: animation_timeline_1.TimelineKeyframeShape.Rect } };
+            var keyframeStyle = { draggable: true, shape: animation_timeline_1.TimelineKeyframeShape.Rect };
+            asserts_1.assert.equal(animation_timeline_1.TimelineStyleUtils.keyframeDraggable(keyframeStyle, rowStyle, globalStyle), false);
+        });
+        it('Keyframes are draggable', function () {
+            var globalStyle = {
+                rowsStyle: {
+                    keyframesStyle: {
+                        draggable: true,
+                    },
+                },
+            };
+            var rowStyle = { keyframesStyle: { draggable: true, shape: animation_timeline_1.TimelineKeyframeShape.Rect } };
+            var keyframeStyle = { draggable: true, shape: animation_timeline_1.TimelineKeyframeShape.Rect };
+            asserts_1.assert.equal(animation_timeline_1.TimelineStyleUtils.keyframeDraggable(keyframeStyle, rowStyle, globalStyle), false);
+        });
+        it('Stripe is draggable by default', function () {
+            var globalStyle = {
+                rowsStyle: {
+                    keyframesStyle: {
+                        draggable: true,
+                    },
+                },
+            };
+            var rowStyle = { keyframesStyle: { draggable: true, shape: animation_timeline_1.TimelineKeyframeShape.Rect } };
+            asserts_1.assert.equal(animation_timeline_1.TimelineStyleUtils.stripeDraggable(rowStyle, globalStyle), true);
+        });
+        it('Stripe is not draggable by row settings', function () {
+            var globalStyle = {
+                rowsStyle: {
+                    keyframesStyle: {
+                        draggable: true,
+                    },
+                },
+            };
+            var rowStyle = { stripeDraggable: false, keyframesStyle: { draggable: true, shape: animation_timeline_1.TimelineKeyframeShape.Rect } };
+            asserts_1.assert.equal(animation_timeline_1.TimelineStyleUtils.stripeDraggable(rowStyle, globalStyle), false);
+        });
+        it('Stripe is not draggable by global settings', function () {
+            var globalStyle = {
+                rowsStyle: {
+                    stripeDraggable: false,
+                    keyframesStyle: {
+                        draggable: true,
+                    },
                 },
-            },
-        };
-        var rowStyle = { stripeDraggable: false, keyframesStyle: { draggable: true, shape: animation_timeline_1.TimelineKeyframeShape.Rect } };
-        asserts_1.assert.equal(animation_timeline_1.TimelineStyleUtils.stripeDraggable(rowStyle, globalStyle), false);
+            };
+            var rowStyle = { stripeDraggable: false, keyframesStyle: { draggable: true, shape: animation_timeline_1.TimelineKeyframeShape.Rect } };
+            asserts_1.assert.equal(animation_timeline_1.TimelineStyleUtils.stripeDraggable(rowStyle, globalStyle), false);
+        });
     });
 });
 //# sourceMappingURL=styleTests.js.map

tests/settingsTests.ts

@@ -1,103 +1,26 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { Timeline, TimelineElementType, TimelineClickableElement } from '../lib/animation-timeline';
+import { Timeline, TimelineElementType, TimelineClickableElement, TimelineOptions, defaultTimelineOptions } from '../lib/animation-timeline';
 import { assert } from './asserts';
+describe('_mergeOptions', function () {
+  it('Top level options are merged', function () {
+    const defOptions = defaultTimelineOptions as TimelineOptions;
+    const options = { id: 'new id', snapsPerSeconds: 10, snapEnabled: true } as TimelineOptions;
+    const merged = new Timeline()._mergeOptions(options);
+    assert.equal(merged.id, options.id);
+    assert.equal(merged.snapEnabled, options.snapEnabled);
+    assert.equal(merged.snapsPerSeconds, options.snapsPerSeconds);
+    assert.equal(merged.labelsColor, defOptions.labelsColor);
+    assert.equal(merged.leftMargin, defOptions.leftMargin);
+    assert.equal(merged.selectionColor, defOptions.selectionColor);
 
-describe('_findDraggable', function () {
-  it('Keyframe should be selected', function () {
-    const timeline = new Timeline();
-    const elements = [
-      {
-        type: TimelineElementType.Stripe,
-        val: 5,
-      } as TimelineClickableElement,
-      {
-        type: TimelineElementType.Keyframe,
-        val: 5,
-      } as TimelineClickableElement,
-    ];
-    const element = timeline._findDraggable(elements, 5);
-    if (!element) {
-      throw new Error('element cannot be empty');
-    }
-    assert.equal(element.type, TimelineElementType.Keyframe, TimelineElementType.Keyframe + ' should be selected');
+    assert.equal(defOptions.selectionColor === undefined, 'initial options should not be affected');
   });
-  it('Timeline should be selected', function () {
-    const timeline = new Timeline();
-    const elements = [
-      {
-        type: TimelineElementType.Timeline,
-        val: 5,
-      } as TimelineClickableElement,
-      {
-        type: TimelineElementType.Stripe,
-        val: 5,
-      } as TimelineClickableElement,
-    ];
-    const element = timeline._findDraggable(elements, 5);
-    if (!element) {
-      throw new Error('element cannot be empty');
-    }
-    assert.equal(element.type, TimelineElementType.Timeline, TimelineElementType.Timeline + ' should be selected');
-  });
-  it('Timeline should taken first', function () {
-    const timeline = new Timeline();
-    const elements = [
-      {
-        type: TimelineElementType.Timeline,
-        val: 5,
-      } as TimelineClickableElement,
-      {
-        type: TimelineElementType.Keyframe,
-        val: 4,
-      },
-      {
-        type: TimelineElementType.Keyframe,
-        val: 5,
-      } as TimelineClickableElement,
-      {
-        type: TimelineElementType.Stripe,
-        val: 5,
-      } as TimelineClickableElement,
-    ];
-    const element = timeline._findDraggable(elements, 5);
-    if (!element) {
-      throw new Error('element cannot be empty');
-    }
-    assert.equal(element.type, TimelineElementType.Timeline, TimelineElementType.Timeline + ' should be selected');
-    // Keyframe with value 5 should be selected
-    assert.equal(element.val, 5);
-  });
-  it('Stripe should be selected', function () {
-    const timeline = new Timeline();
-    const elements = [
-      {
-        type: TimelineElementType.Stripe,
-        val: 5,
-      } as TimelineClickableElement,
-    ];
-    const element = timeline._findDraggable(elements, 5);
-    if (!element) {
-      throw new Error('element cannot be empty');
-    }
-    assert.equal(element.type, TimelineElementType.Stripe, TimelineElementType.Stripe + ' should be selected');
-  });
-  it('closest keyframe should be returned', function () {
-    const timeline = new Timeline();
-    const elements = [
-      {
-        type: TimelineElementType.Keyframe,
-        val: 0,
-      } as TimelineClickableElement,
-      {
-        type: TimelineElementType.Keyframe,
-        val: 4,
-      } as TimelineClickableElement,
-      {
-        type: TimelineElementType.Keyframe,
-        val: 9,
-      } as TimelineClickableElement,
-    ];
-    const element = timeline._findDraggable(elements, 5);
-    assert.equal(element.val, elements[2].val);
+
+  it('Default styles are merged', function () {
+    const options = { id: 'new id', snapsPerSeconds: 10, snapEnabled: true } as TimelineOptions;
+    const merged = new Timeline()._mergeOptions(options);
+    assert.equal(merged.id, options.id);
+    assert.equal(!!merged.rowsStyle, true, 'Row style cannot be null');
+    assert.equal(!!merged.rowsStyle.keyframesStyle, true, 'Keyframes style cannot be null');
   });
 });

tests/styleTests.ts

@@ -12,108 +12,110 @@ import {
 import { assert } from './asserts';
 
 describe('TimelineStyleUtils', function () {
-  it('Keyframe is draggable by default', function () {
-    const globalStyle = {
-      rowsStyle: {
-        keyframesStyle: {},
-      } as TimelineRowStyle,
-    } as TimelineOptions;
+  describe('Draggable', function () {
+    it('Keyframe is draggable by default', function () {
+      const globalStyle = {
+        rowsStyle: {
+          keyframesStyle: {},
+        } as TimelineRowStyle,
+      } as TimelineOptions;
 
-    const keyframeStyle = { shape: TimelineKeyframeShape.Rect } as TimelineKeyframeStyle;
-    assert.equal(TimelineStyleUtils.keyframeDraggable(keyframeStyle, null, globalStyle), true);
-  });
-  it('Keyframe draggable', function () {
-    const globalStyle = {
-      rowsStyle: {
-        keyframesStyle: {},
-      } as TimelineRowStyle,
-    } as TimelineOptions;
+      const keyframeStyle = { shape: TimelineKeyframeShape.Rect } as TimelineKeyframeStyle;
+      assert.equal(TimelineStyleUtils.keyframeDraggable(keyframeStyle, null, globalStyle), true);
+    });
+    it('Keyframe draggable', function () {
+      const globalStyle = {
+        rowsStyle: {
+          keyframesStyle: {},
+        } as TimelineRowStyle,
+      } as TimelineOptions;
 
-    const keyframeStyle = { draggable: true, shape: TimelineKeyframeShape.Rect } as TimelineKeyframeStyle;
-    assert.equal(TimelineStyleUtils.keyframeDraggable(keyframeStyle, null, globalStyle), true);
-  });
+      const keyframeStyle = { draggable: true, shape: TimelineKeyframeShape.Rect } as TimelineKeyframeStyle;
+      assert.equal(TimelineStyleUtils.keyframeDraggable(keyframeStyle, null, globalStyle), true);
+    });
 
-  it('Keyframe is not draggable', function () {
-    const globalStyle = {
-      rowsStyle: {
-        keyframesStyle: {},
-      } as TimelineRowStyle,
-    } as TimelineOptions;
+    it('Keyframe is not draggable', function () {
+      const globalStyle = {
+        rowsStyle: {
+          keyframesStyle: {},
+        } as TimelineRowStyle,
+      } as TimelineOptions;
 
-    const keyframeStyle = { draggable: false, shape: TimelineKeyframeShape.Rect } as TimelineKeyframeStyle;
-    assert.equal(TimelineStyleUtils.keyframeDraggable(keyframeStyle, null, globalStyle), false);
-  });
+      const keyframeStyle = { draggable: false, shape: TimelineKeyframeShape.Rect } as TimelineKeyframeStyle;
+      assert.equal(TimelineStyleUtils.keyframeDraggable(keyframeStyle, null, globalStyle), false);
+    });
 
-  it('Keyframe row is not draggable than keyframe is not draggable', function () {
-    const globalStyle = {
-      rowsStyle: {
-        keyframesStyle: {},
-      } as TimelineRowStyle,
-    } as TimelineOptions;
-    const rowStyle = { keyframesStyle: { draggable: false, shape: TimelineKeyframeShape.Rect } } as TimelineRowStyle;
-    const keyframeStyle = { draggable: true, shape: TimelineKeyframeShape.Rect } as TimelineKeyframeStyle;
-    assert.equal(TimelineStyleUtils.keyframeDraggable(keyframeStyle, rowStyle, globalStyle), false);
-  });
+    it('Keyframe row is not draggable than keyframe is not draggable', function () {
+      const globalStyle = {
+        rowsStyle: {
+          keyframesStyle: {},
+        } as TimelineRowStyle,
+      } as TimelineOptions;
+      const rowStyle = { keyframesStyle: { draggable: false, shape: TimelineKeyframeShape.Rect } } as TimelineRowStyle;
+      const keyframeStyle = { draggable: true, shape: TimelineKeyframeShape.Rect } as TimelineKeyframeStyle;
+      assert.equal(TimelineStyleUtils.keyframeDraggable(keyframeStyle, rowStyle, globalStyle), false);
+    });
 
-  it('Keyframes are not draggable by general settings', function () {
-    const globalStyle = {
-      rowsStyle: {
-        keyframesStyle: {
-          draggable: false,
-        },
-      } as TimelineRowStyle,
-    } as TimelineOptions;
-    const rowStyle = { keyframesStyle: { draggable: true, shape: TimelineKeyframeShape.Rect } } as TimelineRowStyle;
-    const keyframeStyle = { draggable: true, shape: TimelineKeyframeShape.Rect } as TimelineKeyframeStyle;
-    assert.equal(TimelineStyleUtils.keyframeDraggable(keyframeStyle, rowStyle, globalStyle), false);
-  });
-  it('Keyframes are draggable', function () {
-    const globalStyle = {
-      rowsStyle: {
-        keyframesStyle: {
-          draggable: true,
-        },
-      } as TimelineRowStyle,
-    } as TimelineOptions;
-    const rowStyle = { keyframesStyle: { draggable: true, shape: TimelineKeyframeShape.Rect } } as TimelineRowStyle;
-    const keyframeStyle = { draggable: true, shape: TimelineKeyframeShape.Rect } as TimelineKeyframeStyle;
-    assert.equal(TimelineStyleUtils.keyframeDraggable(keyframeStyle, rowStyle, globalStyle), false);
-  });
+    it('Keyframes are not draggable by general settings', function () {
+      const globalStyle = {
+        rowsStyle: {
+          keyframesStyle: {
+            draggable: false,
+          },
+        } as TimelineRowStyle,
+      } as TimelineOptions;
+      const rowStyle = { keyframesStyle: { draggable: true, shape: TimelineKeyframeShape.Rect } } as TimelineRowStyle;
+      const keyframeStyle = { draggable: true, shape: TimelineKeyframeShape.Rect } as TimelineKeyframeStyle;
+      assert.equal(TimelineStyleUtils.keyframeDraggable(keyframeStyle, rowStyle, globalStyle), false);
+    });
+    it('Keyframes are draggable', function () {
+      const globalStyle = {
+        rowsStyle: {
+          keyframesStyle: {
+            draggable: true,
+          },
+        } as TimelineRowStyle,
+      } as TimelineOptions;
+      const rowStyle = { keyframesStyle: { draggable: true, shape: TimelineKeyframeShape.Rect } } as TimelineRowStyle;
+      const keyframeStyle = { draggable: true, shape: TimelineKeyframeShape.Rect } as TimelineKeyframeStyle;
+      assert.equal(TimelineStyleUtils.keyframeDraggable(keyframeStyle, rowStyle, globalStyle), false);
+    });
 
-  it('Stripe is draggable by default', function () {
-    const globalStyle = {
-      rowsStyle: {
-        keyframesStyle: {
-          draggable: true,
-        },
-      } as TimelineRowStyle,
-    } as TimelineOptions;
-    const rowStyle = { keyframesStyle: { draggable: true, shape: TimelineKeyframeShape.Rect } } as TimelineRowStyle;
-    assert.equal(TimelineStyleUtils.stripeDraggable(rowStyle, globalStyle), true);
-  });
+    it('Stripe is draggable by default', function () {
+      const globalStyle = {
+        rowsStyle: {
+          keyframesStyle: {
+            draggable: true,
+          },
+        } as TimelineRowStyle,
+      } as TimelineOptions;
+      const rowStyle = { keyframesStyle: { draggable: true, shape: TimelineKeyframeShape.Rect } } as TimelineRowStyle;
+      assert.equal(TimelineStyleUtils.stripeDraggable(rowStyle, globalStyle), true);
+    });
 
-  it('Stripe is not draggable by row settings', function () {
-    const globalStyle = {
-      rowsStyle: {
-        keyframesStyle: {
-          draggable: true,
-        },
-      } as TimelineRowStyle,
-    } as TimelineOptions;
-    const rowStyle = { stripeDraggable: false, keyframesStyle: { draggable: true, shape: TimelineKeyframeShape.Rect } } as TimelineRowStyle;
-    assert.equal(TimelineStyleUtils.stripeDraggable(rowStyle, globalStyle), false);
-  });
+    it('Stripe is not draggable by row settings', function () {
+      const globalStyle = {
+        rowsStyle: {
+          keyframesStyle: {
+            draggable: true,
+          },
+        } as TimelineRowStyle,
+      } as TimelineOptions;
+      const rowStyle = { stripeDraggable: false, keyframesStyle: { draggable: true, shape: TimelineKeyframeShape.Rect } } as TimelineRowStyle;
+      assert.equal(TimelineStyleUtils.stripeDraggable(rowStyle, globalStyle), false);
+    });
 
-  it('Stripe is not draggable by global settings', function () {
-    const globalStyle = {
-      rowsStyle: {
-        stripeDraggable: false,
-        keyframesStyle: {
-          draggable: true,
-        },
-      } as TimelineRowStyle,
-    } as TimelineOptions;
-    const rowStyle = { stripeDraggable: false, keyframesStyle: { draggable: true, shape: TimelineKeyframeShape.Rect } } as TimelineRowStyle;
-    assert.equal(TimelineStyleUtils.stripeDraggable(rowStyle, globalStyle), false);
+    it('Stripe is not draggable by global settings', function () {
+      const globalStyle = {
+        rowsStyle: {
+          stripeDraggable: false,
+          keyframesStyle: {
+            draggable: true,
+          },
+        } as TimelineRowStyle,
+      } as TimelineOptions;
+      const rowStyle = { stripeDraggable: false, keyframesStyle: { draggable: true, shape: TimelineKeyframeShape.Rect } } as TimelineRowStyle;
+      assert.equal(TimelineStyleUtils.stripeDraggable(rowStyle, globalStyle), false);
+    });
   });
 });