styles are refined, extracted timelineStyle.

.vscode/settings.json

@@ -1,24 +1,36 @@
 {
-    "cSpell.words": [
-        "NESW",
-        "NWSE",
-        "Unminified",
-        "Unsubsribe",
-        "browserslist",
-        "consts",
-        "corejs",
-        "devtool",
-        "doubleclick",
-        "downlevel",
-        "dragfinished",
-        "dragstarted",
-        "esnext",
-        "khtml",
-        "pixelated",
-        "prio",
-        "sourcemap",
-        "timechanged",
-        "tslib",
-        "unittests"
-    ]
-}
+  "cSpell.words": [
+    "NESW",
+    "NWSE",
+    "Unminified",
+    "Unsubsribe",
+    "browserslist",
+    "consts",
+    "corejs",
+    "devtool",
+    "doubleclick",
+    "downlevel",
+    "dragfinished",
+    "dragstarted",
+    "esnext",
+    "khtml",
+    "pixelated",
+    "prio",
+    "sourcemap",
+    "timechanged",
+    "tslib",
+    "unittests"
+  ],
+  "files.exclude": {
+    "**/.git": true, // this is a default value
+    "**/.DS_Store": true, // this is a default value
+
+    "**/node_modules": true, // this excludes all folders
+    // named "node_modules" from
+    // the explore tree
+
+    // alternative version
+    "node_modules": true,
+    "lib": true
+  }
+}

lib/animation-timeline.d.ts

@@ -3,10 +3,12 @@ export { TimelineModel } from './timelineModel';
 export { TimelineRow } from './timelineRow';
 export { TimelineKeyframe } from './timelineKeyframe';
 export { TimelineEventsEmitter } from './timelineEventsEmitter';
+export { TimelineConsts } from './settings/timelineConsts';
 export { TimelineOptions } from './settings/timelineOptions';
-export { TimelineStyleUtils } from './settings/timelineStyleUtils';
 export { TimelineKeyframeStyle } from './settings/styles/timelineKeyframeStyle';
 export { TimelineRowStyle } from './settings/styles/timelineRowStyle';
+export { TimelineStyle } from './settings/styles/timelineStyle';
+export { TimelineStyleUtils } from './utils/timelineStyleUtils';
 export { TimelineUtils } from './utils/timelineUtils';
 export { TimelineClickableElement } from './utils/timelineClickableElement';
 export { Selectable } from './utils/selectable';
@@ -18,9 +20,13 @@ export { TimelineScrollEvent } from './utils/events/timelineScrollEvent';
 export { TimelineClickEvent } from './utils/events/timelineClickEvent';
 export { TimelineDragEvent } from './utils/events/timelineDragEvent';
 export { TimelineEvents } from './enums/timelineEvents';
-export { TimelineConsts } from './settings/timelineConsts';
 export { TimelineKeyframeShape } from './enums/timelineKeyframeShape';
 export { TimelineInteractionMode } from './enums/timelineInteractionMode';
 export { TimelineElementType } from './enums/timelineElementType';
 export { TimelineCursorType } from './enums/timelineCursorType';
 export { TimelineCapShape } from './enums/timelineCapShape';
+export { defaultTimelineOptions } from './settings/defaults';
+export { defaultTimelineKeyframeStyle } from './settings/defaults';
+export { defaultTimelineRowStyle } from './settings/defaults';
+export { defaultTimelineStyle } from './settings/defaults';
+export { defaultTimelineConsts } from './settings/defaults';

lib/animation-timeline.js

@@ -91,7 +91,7 @@ return /******/ (function(modules) { // webpackBootstrap
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 10);
+/******/ 	return __webpack_require__(__webpack_require__.s = 14);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -156,6 +156,30 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ }),
 /* 10 */
+/***/ (function(module, exports) {
+
+
+
+/***/ }),
+/* 11 */
+/***/ (function(module, exports) {
+
+
+
+/***/ }),
+/* 12 */
+/***/ (function(module, exports) {
+
+
+
+/***/ }),
+/* 13 */
+/***/ (function(module, exports) {
+
+
+
+/***/ }),
+/* 14 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -164,14 +188,16 @@ __webpack_require__.r(__webpack_exports__);
 
 // EXPORTS
 __webpack_require__.d(__webpack_exports__, "Timeline", function() { return /* reexport */ timeline_Timeline; });
-__webpack_require__.d(__webpack_exports__, "TimelineModel", function() { return /* reexport */ TimelineModel; });
+__webpack_require__.d(__webpack_exports__, "TimelineModel", function() { return /* reexport */ timelineModel["TimelineModel"]; });
 __webpack_require__.d(__webpack_exports__, "TimelineRow", function() { return /* reexport */ timelineRow["TimelineRow"]; });
 __webpack_require__.d(__webpack_exports__, "TimelineKeyframe", function() { return /* reexport */ timelineKeyframe["TimelineKeyframe"]; });
 __webpack_require__.d(__webpack_exports__, "TimelineEventsEmitter", function() { return /* reexport */ TimelineEventsEmitter; });
-__webpack_require__.d(__webpack_exports__, "TimelineOptions", function() { return /* reexport */ timelineOptions_TimelineOptions; });
-__webpack_require__.d(__webpack_exports__, "TimelineStyleUtils", function() { return /* reexport */ TimelineStyleUtils; });
+__webpack_require__.d(__webpack_exports__, "TimelineConsts", function() { return /* reexport */ timelineConsts["TimelineConsts"]; });
+__webpack_require__.d(__webpack_exports__, "TimelineOptions", function() { return /* reexport */ timelineOptions["TimelineOptions"]; });
 __webpack_require__.d(__webpack_exports__, "TimelineKeyframeStyle", function() { return /* reexport */ timelineKeyframeStyle["TimelineKeyframeStyle"]; });
 __webpack_require__.d(__webpack_exports__, "TimelineRowStyle", function() { return /* reexport */ timelineRowStyle["TimelineRowStyle"]; });
+__webpack_require__.d(__webpack_exports__, "TimelineStyle", function() { return /* reexport */ styles_timelineStyle["TimelineStyle"]; });
+__webpack_require__.d(__webpack_exports__, "TimelineStyleUtils", function() { return /* reexport */ TimelineStyleUtils; });
 __webpack_require__.d(__webpack_exports__, "TimelineUtils", function() { return /* reexport */ TimelineUtils; });
 __webpack_require__.d(__webpack_exports__, "TimelineClickableElement", function() { return /* reexport */ timelineClickableElement["TimelineClickableElement"]; });
 __webpack_require__.d(__webpack_exports__, "Selectable", function() { return /* reexport */ selectable["Selectable"]; });
@@ -183,12 +209,16 @@ __webpack_require__.d(__webpack_exports__, "TimelineScrollEvent", function() { r
 __webpack_require__.d(__webpack_exports__, "TimelineClickEvent", function() { return /* reexport */ TimelineClickEvent; });
 __webpack_require__.d(__webpack_exports__, "TimelineDragEvent", function() { return /* reexport */ TimelineDragEvent; });
 __webpack_require__.d(__webpack_exports__, "TimelineEvents", function() { return /* reexport */ TimelineEvents; });
-__webpack_require__.d(__webpack_exports__, "TimelineConsts", function() { return /* reexport */ /* Cannot get final name for export "TimelineConsts" in "./src/settings/timelineConsts.ts" (known exports: defaultTimelineConsts, known reexports: ) */ undefined; });
 __webpack_require__.d(__webpack_exports__, "TimelineKeyframeShape", function() { return /* reexport */ TimelineKeyframeShape; });
 __webpack_require__.d(__webpack_exports__, "TimelineInteractionMode", function() { return /* reexport */ TimelineInteractionMode; });
 __webpack_require__.d(__webpack_exports__, "TimelineElementType", function() { return /* reexport */ TimelineElementType; });
 __webpack_require__.d(__webpack_exports__, "TimelineCursorType", function() { return /* reexport */ TimelineCursorType; });
 __webpack_require__.d(__webpack_exports__, "TimelineCapShape", function() { return /* reexport */ TimelineCapShape; });
+__webpack_require__.d(__webpack_exports__, "defaultTimelineOptions", function() { return /* reexport */ defaultTimelineOptions; });
+__webpack_require__.d(__webpack_exports__, "defaultTimelineKeyframeStyle", function() { return /* reexport */ defaultTimelineKeyframeStyle; });
+__webpack_require__.d(__webpack_exports__, "defaultTimelineRowStyle", function() { return /* reexport */ defaultTimelineRowStyle; });
+__webpack_require__.d(__webpack_exports__, "defaultTimelineStyle", function() { return /* reexport */ defaultTimelineStyle; });
+__webpack_require__.d(__webpack_exports__, "defaultTimelineConsts", function() { return /* reexport */ defaultTimelineConsts; });
 
 // CONCATENATED MODULE: ./src/timelineEventsEmitter.ts
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -415,158 +445,6 @@ var TimelineUtils = /*#__PURE__*/function () {
 
   return TimelineUtils;
 }();
-// CONCATENATED MODULE: ./src/enums/timelineKeyframeShape.ts
-var TimelineKeyframeShape;
-
-(function (TimelineKeyframeShape) {
-  TimelineKeyframeShape["None"] = "none";
-  TimelineKeyframeShape["Rhomb"] = "rhomb";
-  TimelineKeyframeShape["Circle"] = "circle";
-  TimelineKeyframeShape["Rect"] = "rect";
-})(TimelineKeyframeShape || (TimelineKeyframeShape = {}));
-// CONCATENATED MODULE: ./src/enums/timelineCapShape.ts
-var TimelineCapShape;
-
-(function (TimelineCapShape) {
-  TimelineCapShape["None"] = "none";
-  TimelineCapShape["Triangle"] = "triangle";
-  TimelineCapShape["Rect"] = "rect";
-})(TimelineCapShape || (TimelineCapShape = {}));
-// CONCATENATED MODULE: ./src/settings/timelineOptions.ts
-function timelineOptions_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function timelineOptions_defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-
-
-var timelineOptions_TimelineOptions = function TimelineOptions() {
-  timelineOptions_classCallCheck(this, TimelineOptions);
-
-  timelineOptions_defineProperty(this, "id", void 0);
-
-  timelineOptions_defineProperty(this, "snapsPerSeconds", 5);
-
-  timelineOptions_defineProperty(this, "snapEnabled", true);
-
-  timelineOptions_defineProperty(this, "snapAllKeyframesOnMove", false);
-
-  timelineOptions_defineProperty(this, "timelineThicknessPx", 2);
-
-  timelineOptions_defineProperty(this, "timelineMarginTopPx", 15);
-
-  timelineOptions_defineProperty(this, "timelineCapWidthPx", 4);
-
-  timelineOptions_defineProperty(this, "timelineCapHeightPx", 10);
-
-  timelineOptions_defineProperty(this, "timelineCap", TimelineCapShape.Rect);
-
-  timelineOptions_defineProperty(this, "timelineColor", 'DarkOrange');
-
-  timelineOptions_defineProperty(this, "stepPx", 120);
-
-  timelineOptions_defineProperty(this, "stepSmallPx", 30);
-
-  timelineOptions_defineProperty(this, "smallSteps", 50);
-
-  timelineOptions_defineProperty(this, "leftMarginPx", 25);
-
-  timelineOptions_defineProperty(this, "headerFillColor", '#101011');
-
-  timelineOptions_defineProperty(this, "fillColor", '#101011');
-
-  timelineOptions_defineProperty(this, "labelsColor", '#D5D5D5');
-
-  timelineOptions_defineProperty(this, "tickColor", '#D5D5D5');
-
-  timelineOptions_defineProperty(this, "selectionColor", 'White');
-
-  timelineOptions_defineProperty(this, "rowsStyle", {
-    /**
-     * Row height in pixels.
-     */
-    height: 24,
-    marginBottom: 2,
-    fillColor: '#252526',
-
-    /**
-     * Keyframes stripe color
-     */
-    stripeFillColor: '#094771',
-    stripeHeight: 'auto',
-    keyframesStyle: {
-      /**
-       * keyframe fill color.
-       */
-      fillColor: 'red',
-      shape: TimelineKeyframeShape.Rhomb,
-
-      /**
-       * Selected keyframe fill color.
-       */
-      selectedFillColor: 'DarkOrange',
-      strokeColor: 'Black',
-      strokeThickness: 0.2,
-      draggable: true
-    }
-  });
-
-  timelineOptions_defineProperty(this, "headerHeight", 30);
-
-  timelineOptions_defineProperty(this, "ticksFont", '11px sans-serif');
-
-  timelineOptions_defineProperty(this, "zoom", 1000);
-
-  timelineOptions_defineProperty(this, "zoomSpeed", 0.1);
-
-  timelineOptions_defineProperty(this, "zoomMin", 80);
-
-  timelineOptions_defineProperty(this, "zoomMax", 8000);
-
-  timelineOptions_defineProperty(this, "controlKeyIsMetaKey", false);
-
-  timelineOptions_defineProperty(this, "scrollContainerClass", 'scroll-container');
-
-  timelineOptions_defineProperty(this, "stripesDraggable", true);
-
-  timelineOptions_defineProperty(this, "keyframesDraggable", true);
-};
-// CONCATENATED MODULE: ./src/settings/timelineConsts.ts
-var defaultTimelineConsts = {
-  /**
-   * Auto pan speed.
-   */
-  autoPanSpeed: 50,
-
-  /**
-   * scroll speed when mouse drag is used (from 0 to 1)
-   */
-  scrollByDragSpeed: 0.12,
-
-  /**
-   * Determine whether item was clicked.
-   */
-  clickDetectionMs: 120,
-
-  /**
-   * Timeout to detect double click.
-   */
-  doubleClickTimeoutMs: 400,
-
-  /**
-   * Time in ms used to refresh scrollbars when pan is finished.
-   */
-  scrollFinishedTimeoutMs: 500,
-
-  /**
-   * Auto pan padding
-   */
-  autoPanByScrollPadding: 10,
-
-  /**
-   * Click threshold
-   */
-  clickThreshold: 3
-};
 // CONCATENATED MODULE: ./src/enums/timelineCursorType.ts
 var TimelineCursorType;
 
@@ -607,7 +485,16 @@ var TimelineCursorType;
   TimelineCursorType["ZoomIn"] = "zoom-in";
   TimelineCursorType["ZoomOut"] = "zoom-out";
 })(TimelineCursorType || (TimelineCursorType = {}));
-// CONCATENATED MODULE: ./src/settings/timelineStyleUtils.ts
+// CONCATENATED MODULE: ./src/enums/timelineKeyframeShape.ts
+var TimelineKeyframeShape;
+
+(function (TimelineKeyframeShape) {
+  TimelineKeyframeShape["None"] = "none";
+  TimelineKeyframeShape["Rhomb"] = "rhomb";
+  TimelineKeyframeShape["Circle"] = "circle";
+  TimelineKeyframeShape["Rect"] = "rect";
+})(TimelineKeyframeShape || (TimelineKeyframeShape = {}));
+// CONCATENATED MODULE: ./src/utils/timelineStyleUtils.ts
 function timelineStyleUtils_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function timelineStyleUtils_defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -630,7 +517,7 @@ var TimelineStyleUtils = /*#__PURE__*/function () {
      * @param propertyName property to get.
      * @param defaultValue default value to return
      */
-    value: function getKeyframeStyle(keyframe, row, rowsStyle, propertyName, defaultValue) {
+    value: function getKeyframeStyle(keyframe, row, options, propertyName, defaultValue) {
       if (keyframe && keyframe) {
         var style = keyframe;
 
@@ -647,8 +534,10 @@ var TimelineStyleUtils = /*#__PURE__*/function () {
         }
       }
 
-      if (rowsStyle && rowsStyle.keyframesStyle) {
-        var _style2 = rowsStyle.keyframesStyle;
+      var globalRowStyle = options ? options.rowsStyle : null;
+
+      if (globalRowStyle && globalRowStyle.keyframesStyle) {
+        var _style2 = globalRowStyle.keyframesStyle;
 
         if (_style2[propertyName] !== undefined) {
           return _style2[propertyName];
@@ -659,13 +548,11 @@ var TimelineStyleUtils = /*#__PURE__*/function () {
     }
     /**
      * Get row style from default settings or overrides by a row settings.
-     * @param row
-     * @param property
      */
 
   }, {
     key: "getRowStyle",
-    value: function getRowStyle(rowStyle, globalRowStyle, propertyName, defaultValue) {
+    value: function getRowStyle(rowStyle, options, propertyName, defaultValue) {
       if (rowStyle) {
         var style = rowStyle;
 
@@ -674,6 +561,8 @@ var TimelineStyleUtils = /*#__PURE__*/function () {
         }
       }
 
+      var globalRowStyle = options ? options.rowsStyle : null;
+
       if (globalRowStyle) {
         var _style3 = globalRowStyle;
 
@@ -686,29 +575,27 @@ var TimelineStyleUtils = /*#__PURE__*/function () {
     }
     /**
      * Get current row height from styling
-     * @param row
-     * @param includeMargin include margin to the bounds
      */
 
   }, {
     key: "getRowHeight",
-    value: function getRowHeight(rowStyle, globalRowStyle) {
-      return TimelineStyleUtils.getRowStyle(rowStyle, globalRowStyle, 'height', 24);
+    value: function getRowHeight(rowStyle, options) {
+      return TimelineStyleUtils.getRowStyle(rowStyle, options, 'height', 24);
     }
   }, {
     key: "rowStripeHeight",
-    value: function rowStripeHeight(rowStyle, globalRowStyle) {
-      return TimelineStyleUtils.getRowStyle(rowStyle, globalRowStyle, 'stripeHeight', 'auto');
+    value: function rowStripeHeight(rowStyle, options) {
+      return TimelineStyleUtils.getRowStyle(rowStyle, options, 'stripeHeight', 'auto');
     }
   }, {
     key: "stripeFillColor",
-    value: function stripeFillColor(rowStyle, globalRowStyle) {
-      return TimelineStyleUtils.getRowStyle(rowStyle, globalRowStyle, 'stripeFillColor');
+    value: function stripeFillColor(rowStyle, options) {
+      return TimelineStyleUtils.getRowStyle(rowStyle, options, 'stripeFillColor');
     }
   }, {
     key: "getRowMarginBottom",
-    value: function getRowMarginBottom(rowStyle, globalRowStyle) {
-      return TimelineStyleUtils.getRowStyle(rowStyle, globalRowStyle, 'marginBottom', 0);
+    value: function getRowMarginBottom(rowStyle, options) {
+      return TimelineStyleUtils.getRowStyle(rowStyle, options, 'marginBottom', 0);
     }
   }]);
 
@@ -736,6 +623,14 @@ var TimelineEvents;
   TimelineEvents["DoubleClick"] = "doubleclick";
   TimelineEvents["MouseDown"] = "mousedown";
 })(TimelineEvents || (TimelineEvents = {}));
+// CONCATENATED MODULE: ./src/enums/timelineCapShape.ts
+var TimelineCapShape;
+
+(function (TimelineCapShape) {
+  TimelineCapShape["None"] = "none";
+  TimelineCapShape["Triangle"] = "triangle";
+  TimelineCapShape["Rect"] = "rect";
+})(TimelineCapShape || (TimelineCapShape = {}));
 // CONCATENATED MODULE: ./src/enums/timelineInteractionMode.ts
 var TimelineInteractionMode;
 
@@ -820,6 +715,170 @@ var TimelineDragEvent = /*#__PURE__*/function (_TimelineClickEvent) {
 
   return TimelineDragEvent;
 }(TimelineClickEvent);
+// CONCATENATED MODULE: ./src/settings/defaults.ts
+
+
+var defaultTimelineStyle = {
+  width: 2,
+  marginTop: 15,
+  capWidth: 4,
+  capHeight: 10,
+
+  /**
+   * Draw timeline rectangular cap.
+   */
+  capType: TimelineCapShape.Rect,
+  strokeColor: 'DarkOrange',
+  fillColor: 'DarkOrange'
+};
+var defaultTimelineKeyframeStyle = {
+  /**
+   * keyframe fill color.
+   */
+  fillColor: 'red',
+  shape: TimelineKeyframeShape.Rhomb,
+
+  /**
+   * Selected keyframe fill color.
+   */
+  selectedFillColor: 'DarkOrange',
+  strokeColor: 'Black',
+  strokeThickness: 0.2,
+  draggable: true
+};
+var defaultTimelineRowStyle = {
+  /**
+   * Row height in pixels.
+   */
+  height: 24,
+  marginBottom: 2,
+  fillColor: '#252526',
+
+  /**
+   * Keyframes stripe color
+   */
+  stripeFillColor: '#094771',
+  stripeHeight: 'auto',
+  keyframesStyle: defaultTimelineKeyframeStyle
+};
+var defaultTimelineOptions = {
+  /**
+   * Snap the mouse to the values on a timeline.
+   * Value can be from 1 to 60
+   */
+  snapsPerSeconds: 5,
+
+  /**
+   *  Snap all selected keyframes as a bundle during the drag.
+   */
+  snapAllKeyframesOnMove: false,
+
+  /**
+   * Check whether snapping is enabled.
+   */
+  snapEnabled: true,
+  timelineStyle: defaultTimelineStyle,
+
+  /**
+   * approximate step for the timeline in pixels for 1 second
+   */
+  stepPx: 120,
+  stepSmallPx: 30,
+  smallSteps: 50,
+
+  /**
+   * additional left margin in pixels to start the line gauge from.
+   */
+  leftMarginPx: 25,
+  headerFillColor: '#101011',
+  fillColor: '#101011',
+  labelsColor: '#D5D5D5',
+
+  /**
+   * Header gauge tick color.
+   */
+  tickColor: '#D5D5D5',
+
+  /**
+   * Selection rectangle color.
+   */
+  selectionColor: 'White',
+
+  /**
+   * Default rows style.
+   * Can be overridden by setting style individually for each row.
+   */
+  rowsStyle: defaultTimelineRowStyle,
+
+  /**
+   * Header height in pixels
+   */
+  headerHeight: 30,
+  font: '11px sans-serif',
+  zoom: 1000,
+  // Zoom speed. Use percent of the screen to set zoom speed.
+  zoomSpeed: 0.1,
+  // Max zoom
+  zoomMin: 80,
+  // Min zoom
+  zoomMax: 8000,
+
+  /**
+   * Set this to true in a MAC OS environment: The Meta key will be used instead of the Ctrl key.
+   */
+  controlKeyIsMetaKey: false,
+
+  /**
+   * Access the scroll container via this class for e.g. scroll bar styling.
+   */
+  scrollContainerClass: 'scroll-container',
+
+  /**
+   * keyframes stripe is draggable.
+   */
+  stripesDraggable: true,
+
+  /**
+   * keyframes stripe is draggable.
+   */
+  keyframesDraggable: true
+};
+var defaultTimelineConsts = {
+  /**
+   * Auto pan speed.
+   */
+  autoPanSpeed: 50,
+
+  /**
+   * scroll speed when mouse drag is used (from 0 to 1)
+   */
+  scrollByDragSpeed: 0.12,
+
+  /**
+   * Determine whether item was clicked.
+   */
+  clickDetectionMs: 120,
+
+  /**
+   * Timeout to detect double click.
+   */
+  doubleClickTimeoutMs: 400,
+
+  /**
+   * Time in ms used to refresh scrollbars when pan is finished.
+   */
+  scrollFinishedTimeoutMs: 500,
+
+  /**
+   * Auto pan padding
+   */
+  autoPanByScrollPadding: 10,
+
+  /**
+   * Click threshold
+   */
+  clickThreshold: 3
+};
 // CONCATENATED MODULE: ./src/timeline.ts
 function timeline_typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { timeline_typeof = function _typeof(obj) { return typeof obj; }; } else { timeline_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return timeline_typeof(obj); }
 
@@ -861,7 +920,6 @@ function timeline_defineProperty(obj, key, value) { if (key in obj) { Object.def
 
 
 
-
 var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
   timeline_inherits(Timeline, _TimelineEventsEmitte);
 
@@ -983,7 +1041,7 @@ var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
 
     timeline_defineProperty(timeline_assertThisInitialized(_this), "_lastUsedArgs", null);
 
-    timeline_defineProperty(timeline_assertThisInitialized(_this), "_model", void 0);
+    timeline_defineProperty(timeline_assertThisInitialized(_this), "_model", null);
 
     timeline_defineProperty(timeline_assertThisInitialized(_this), "_handleBlurEvent", function () {
       _this._cleanUpSelection();
@@ -1025,13 +1083,15 @@ var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
 
       _this.redraw();
 
-      var scrollData = args || {};
-      scrollData.scrollLeft = _this._scrollContainer.scrollLeft;
-      scrollData.scrollTop = _this._scrollContainer.scrollTop;
-      scrollData.scrollHeight = _this._scrollContainer.scrollHeight;
-      scrollData.scrollWidth = _this._scrollContainer.scrollWidth;
+      var scrollEvent = {
+        args: args,
+        scrollLeft: _this._scrollContainer.scrollLeft,
+        scrollTop: _this._scrollContainer.scrollTop,
+        scrollHeight: _this._scrollContainer.scrollHeight,
+        scrollWidth: _this._scrollContainer.scrollWidth
+      };
 
-      _get((_thisSuper = timeline_assertThisInitialized(_this), timeline_getPrototypeOf(Timeline.prototype)), "emit", _thisSuper).call(_thisSuper, TimelineEvents.Scroll, scrollData);
+      _get((_thisSuper = timeline_assertThisInitialized(_this), timeline_getPrototypeOf(Timeline.prototype)), "emit", _thisSuper).call(_thisSuper, TimelineEvents.Scroll, scrollEvent);
     });
 
     timeline_defineProperty(timeline_assertThisInitialized(_this), "_handleWheelEvent", function (event) {
@@ -1313,7 +1373,11 @@ var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
     });
 
     timeline_defineProperty(timeline_assertThisInitialized(_this), "_redrawInternal", function () {
-      // Rescale when animation is played out of the bounds.
+      if (!_this._ctx) {
+        return;
+      } // Rescale when animation is played out of the bounds.
+
+
       if (_this.valToPx(_this._val, true) > _this._scrollContainer.scrollWidth) {
         _this.rescale();
 
@@ -2075,8 +2139,8 @@ var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
 
         this._ctx.fillStyle = this._options.labelsColor;
 
-        if (this._options.ticksFont) {
-          this._ctx.font = this._options.ticksFont;
+        if (this._options.font) {
+          this._ctx.font = this._options.font;
         }
 
         var text = this._formatLineGaugeText(i);
@@ -2152,8 +2216,8 @@ var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
         } // draw with scroll virtualization:
 
 
-        var rowHeight = TimelineStyleUtils.getRowHeight(row, _this5._options.rowsStyle);
-        var marginBottom = TimelineStyleUtils.getRowMarginBottom(row, _this5._options.rowsStyle);
+        var rowHeight = TimelineStyleUtils.getRowHeight(row, _this5._options);
+        var marginBottom = TimelineStyleUtils.getRowMarginBottom(row, _this5._options);
         rowAbsoluteHeight += rowHeight + marginBottom;
         var currentRowY = rowAbsoluteHeight - _this5._scrollContainer.scrollTop;
 
@@ -2234,7 +2298,7 @@ var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
             return;
           }
 
-          _this6._ctx.fillStyle = TimelineStyleUtils.getRowStyle(rowData.row, _this6._options.rowsStyle, 'fillColor', '#252526'); //this._ctx.fillRect(data.areaRect.x, data.areaRect.y, data.areaRect.w, data.areaRect.h);
+          _this6._ctx.fillStyle = TimelineStyleUtils.getRowStyle(rowData.row, _this6._options, 'fillColor', '#252526'); //this._ctx.fillRect(data.areaRect.x, data.areaRect.y, data.areaRect.w, data.areaRect.h);
           // Note: bounds used instead of the clip while clip is slow!
 
           var bounds = _this6._cutBounds(rowData);
@@ -2243,7 +2307,7 @@ var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
             _this6._ctx.fillRect(bounds.x, bounds.y, bounds.width, bounds.height);
           }
 
-          var keyframeLaneColor = TimelineStyleUtils.stripeFillColor(rowData.row, _this6._options.rowsStyle);
+          var keyframeLaneColor = TimelineStyleUtils.stripeFillColor(rowData.row, _this6._options);
 
           if (rowData.row.keyframes && rowData.row.keyframes.length <= 1 || !keyframeLaneColor) {
             return;
@@ -2311,8 +2375,8 @@ var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
   }, {
     key: "_getKeyframesStripeSize",
     value: function _getKeyframesStripeSize(row, rowY, minValue, maxValue) {
-      var stripeHeight = TimelineStyleUtils.rowStripeHeight(row, this._options.rowsStyle);
-      var height = TimelineStyleUtils.getRowHeight(row, this._options.rowsStyle);
+      var stripeHeight = TimelineStyleUtils.rowStripeHeight(row, this._options);
+      var height = TimelineStyleUtils.getRowHeight(row, this._options);
 
       if (!stripeHeight && stripeHeight !== 0 || isNaN(stripeHeight) || stripeHeight == 'auto') {
         stripeHeight = Math.floor(height * 0.8);
@@ -2408,15 +2472,15 @@ var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
             _this7._ctx.clip();
           }
 
-          var shape = TimelineStyleUtils.getKeyframeStyle(keyframe, row, _this7._options.rowsStyle, 'shape', TimelineKeyframeShape.Rhomb);
+          var shape = TimelineStyleUtils.getKeyframeStyle(keyframe, row, _this7._options, 'shape', TimelineKeyframeShape.Rhomb);
 
           if (shape === TimelineKeyframeShape.None) {
             return;
           }
 
-          var keyframeColor = TimelineStyleUtils.getKeyframeStyle(keyframe, row, _this7._options.rowsStyle, keyframe.selected ? 'fillColor' : 'selectedFillColor', keyframe.selected ? 'red' : 'DarkOrange');
-          var border = TimelineStyleUtils.getKeyframeStyle(keyframe, row, _this7._options.rowsStyle, 'strokeThickness', 0.2);
-          var strokeColor = border > 0 ? TimelineStyleUtils.getKeyframeStyle(keyframe, row, _this7._options.rowsStyle, 'strokeColor', 'Black') : '';
+          var keyframeColor = TimelineStyleUtils.getKeyframeStyle(keyframe, row, _this7._options, keyframe.selected ? 'fillColor' : 'selectedFillColor', keyframe.selected ? 'red' : 'DarkOrange');
+          var border = TimelineStyleUtils.getKeyframeStyle(keyframe, row, _this7._options, 'strokeThickness', 0.2);
+          var strokeColor = border > 0 ? TimelineStyleUtils.getKeyframeStyle(keyframe, row, _this7._options, 'strokeColor', 'Black') : '';
 
           if (shape == TimelineKeyframeShape.Rhomb) {
             _this7._ctx.beginPath();
@@ -2526,16 +2590,22 @@ var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
   }, {
     key: "_renderTimeline",
     value: function _renderTimeline() {
+      if (!this._options || !this._options.timelineStyle) {
+        return;
+      }
+
+      var style = this._options.timelineStyle;
+
       this._ctx.save();
 
-      var thickness = this._options.timelineThicknessPx;
+      var thickness = style.width || 1;
       this._ctx.lineWidth = thickness * this._pixelRatio;
 
       var timeLinePos = this._getSharp(Math.round(this.valToPx(this._val)), thickness);
 
-      this._ctx.strokeStyle = this._options.timelineColor;
-      this._ctx.fillStyle = this._ctx.strokeStyle;
-      var y = this._options.timelineMarginTopPx;
+      this._ctx.strokeStyle = style.strokeColor;
+      this._ctx.fillStyle = style.fillColor;
+      var y = style.marginTop;
 
       this._ctx.beginPath();
 
@@ -2543,11 +2613,11 @@ var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
 
       this._ctx.stroke();
 
-      if (this._options.timelineCapWidthPx && this._options.timelineCapHeightPx) {
-        var rectSize = this._options.timelineCapWidthPx;
-        var capHeight = this._options.timelineCapHeightPx;
+      if (style.capHeight && style.capWidth) {
+        var rectSize = style.capWidth;
+        var capHeight = style.capHeight;
 
-        if (this._options.timelineCap === TimelineCapShape.Triangle) {
+        if (style.capType === TimelineCapShape.Triangle) {
           this._ctx.beginPath();
 
           this._ctx.moveTo(timeLinePos - rectSize / 2, y);
@@ -2559,7 +2629,7 @@ var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
           this._ctx.closePath();
 
           this._ctx.stroke();
-        } else if (this._options.timelineCap === TimelineCapShape.Rect) {
+        } else if (style.capType === TimelineCapShape.Rect) {
           this._ctx.fillRect(timeLinePos - rectSize / 2, y, rectSize, capHeight);
 
           this._ctx.fill();
@@ -2801,6 +2871,11 @@ var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
   }, {
     key: "_updateCanvasScale",
     value: function _updateCanvasScale() {
+      if (!this._scrollContainer || !this._ctx) {
+        console.log('control should be initialized first');
+        return;
+      }
+
       var changed = false;
       var width = this._scrollContainer.clientWidth * this._pixelRatio;
       var height = this._scrollContainer.clientHeight * this._pixelRatio;
@@ -2976,7 +3051,12 @@ var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
 
 
       var timeLinePos = this.valToPx(this._val);
-      var width = Math.max((this._options.timelineThicknessPx || 1) * this._pixelRatio, this._options.timelineCapWidthPx * this._pixelRatio || 1) + clickRadius;
+      var width = 0;
+
+      if (this._options && this._options.timelineStyle) {
+        var timelineStyle = this._options.timelineStyle;
+        width = Math.max((timelineStyle.width || 1) * this._pixelRatio, (timelineStyle.capWidth || 0) * this._pixelRatio || 1) + clickRadius;
+      }
 
       if (pos.y <= this._options.headerHeight || pos.x >= timeLinePos - width / 2 && pos.x <= timeLinePos + width / 2) {
         toReturn.push({
@@ -3047,7 +3127,7 @@ var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
     value: function _mergeOptions(toSet) {
       toSet = toSet || {}; // Apply incoming options to default. (override default)
 
-      var options = new timelineOptions_TimelineOptions(); // Merge options with the default.
+      var options = {}; // Merge options with the default.
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
       var mergeOptionsDeep = function mergeOptionsDeep(to, from) {
@@ -3164,45 +3244,47 @@ var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
 
   return Timeline;
 }(TimelineEventsEmitter);
-// CONCATENATED MODULE: ./src/timelineModel.ts
-function timelineModel_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+// EXTERNAL MODULE: ./src/timelineModel.ts
+var timelineModel = __webpack_require__(1);
 
-function timelineModel_defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-var TimelineModel = function TimelineModel() {
-  timelineModel_classCallCheck(this, TimelineModel);
-
-  timelineModel_defineProperty(this, "rows", []);
-};
 // EXTERNAL MODULE: ./src/timelineRow.ts
-var timelineRow = __webpack_require__(1);
+var timelineRow = __webpack_require__(2);
 
 // EXTERNAL MODULE: ./src/timelineKeyframe.ts
-var timelineKeyframe = __webpack_require__(2);
+var timelineKeyframe = __webpack_require__(3);
+
+// EXTERNAL MODULE: ./src/settings/timelineConsts.ts
+var timelineConsts = __webpack_require__(4);
+
+// EXTERNAL MODULE: ./src/settings/timelineOptions.ts
+var timelineOptions = __webpack_require__(5);
 
 // EXTERNAL MODULE: ./src/settings/styles/timelineKeyframeStyle.ts
-var timelineKeyframeStyle = __webpack_require__(3);
+var timelineKeyframeStyle = __webpack_require__(6);
 
 // EXTERNAL MODULE: ./src/settings/styles/timelineRowStyle.ts
-var timelineRowStyle = __webpack_require__(4);
+var timelineRowStyle = __webpack_require__(7);
+
+// EXTERNAL MODULE: ./src/settings/styles/timelineStyle.ts
+var styles_timelineStyle = __webpack_require__(8);
 
 // EXTERNAL MODULE: ./src/utils/timelineClickableElement.ts
-var timelineClickableElement = __webpack_require__(5);
+var timelineClickableElement = __webpack_require__(9);
 
 // EXTERNAL MODULE: ./src/utils/selectable.ts
-var selectable = __webpack_require__(6);
+var selectable = __webpack_require__(10);
 
 // EXTERNAL MODULE: ./src/utils/rowsCalculationsResults.ts
 var rowsCalculationsResults = __webpack_require__(0);
 
 // EXTERNAL MODULE: ./src/utils/cutBoundsRect.ts
-var cutBoundsRect = __webpack_require__(7);
+var cutBoundsRect = __webpack_require__(11);
 
 // EXTERNAL MODULE: ./src/utils/events/timelineSelectedEvent.ts
-var timelineSelectedEvent = __webpack_require__(8);
+var timelineSelectedEvent = __webpack_require__(12);
 
 // EXTERNAL MODULE: ./src/utils/events/timelineScrollEvent.ts
-var timelineScrollEvent = __webpack_require__(9);
+var timelineScrollEvent = __webpack_require__(13);
 
 // CONCATENATED MODULE: ./src/animation-timeline.ts
 // bundle entry point
@@ -3226,6 +3308,13 @@ var timelineScrollEvent = __webpack_require__(9);
 
 
 
+
+
+
+
+
+
+ // private defaults are exposed:
 
 
 

lib/settings/defaults.d.ts

@@ -0,0 +1,10 @@
+import { TimelineConsts } from './timelineConsts';
+import { TimelineStyle } from './styles/timelineStyle';
+import { TimelineOptions } from './timelineOptions';
+import { TimelineKeyframeStyle } from './styles/timelineKeyframeStyle';
+import { TimelineRowStyle } from './styles/timelineRowStyle';
+export declare const defaultTimelineStyle: TimelineStyle;
+export declare const defaultTimelineKeyframeStyle: TimelineKeyframeStyle;
+export declare const defaultTimelineRowStyle: TimelineRowStyle;
+export declare const defaultTimelineOptions: TimelineOptions;
+export declare const defaultTimelineConsts: TimelineConsts;

lib/settings/styles/timelineStyle.d.ts

@@ -0,0 +1,14 @@
+import { TimelineCapShape } from '../../enums/timelineCapShape';
+export interface TimelineStyle {
+    width?: number;
+    marginTop?: number;
+    capWidth?: number;
+    capHeight?: number;
+    /**
+     * Cap type
+     */
+    capType?: TimelineCapShape;
+    timelineColor?: string;
+    strokeColor: string;
+    fillColor: string;
+}

lib/settings/timelineConsts.d.ts

@@ -28,4 +28,3 @@ export interface TimelineConsts {
      */
     clickThreshold: number;
 }
-export declare const defaultTimelineConsts: TimelineConsts;

lib/settings/timelineOptions.d.ts

@@ -1,81 +1,88 @@
-import { TimelineRowStyle } from './styles/TimelineRowStyle';
-import { TimelineCapShape } from '../enums/timelineCapShape';
-export declare class TimelineOptions {
+import { TimelineRowStyle } from './styles/timelineRowStyle';
+import { TimelineStyle } from './styles/timelineStyle';
+export interface TimelineOptions {
     /**
      * Id or HTMLElement of the timeline container.
      */
-    id: string | HTMLElement;
+    id?: string | HTMLElement;
     /**
      * Snap the mouse to the values on a timeline.
      * Value can be from 1 to 60
      */
-    snapsPerSeconds: number;
+    snapsPerSeconds?: number;
     /**
      * Check whether snapping is enabled.
      */
-    snapEnabled: boolean;
+    snapEnabled?: boolean;
     /**
      *  Snap all selected keyframes as a bundle during the drag.
      */
-    snapAllKeyframesOnMove: boolean;
-    timelineThicknessPx: number;
-    timelineMarginTopPx: number;
-    timelineCapWidthPx: number;
-    timelineCapHeightPx: number;
-    /**
-     * Draw timeline rectangular cap.
-     */
-    timelineCap: TimelineCapShape;
-    timelineColor: string;
+    snapAllKeyframesOnMove?: boolean;
     /**
      * approximate step for the timeline in pixels for 1 second
      */
-    stepPx: number;
-    stepSmallPx: number;
-    smallSteps: number;
+    stepPx?: number;
+    stepSmallPx?: number;
+    smallSteps?: number;
     /**
      * additional left margin in pixels to start the line gauge from.
      */
-    leftMarginPx: number;
-    headerFillColor: string;
-    fillColor: string;
-    labelsColor: string;
+    leftMarginPx?: number;
+    /**
+     * Component header background color.
+     */
+    headerFillColor?: string;
+    /**
+     * Component background color.
+     */
+    fillColor?: string;
+    labelsColor?: string;
     /**
      * Header gauge tick color.
      */
-    tickColor: string;
+    tickColor?: string;
     /**
      * Selection rectangle color.
      */
-    selectionColor: string;
+    selectionColor?: string;
     /**
      * Default rows style.
      * Can be overridden by setting style individually for each row.
      */
-    rowsStyle: TimelineRowStyle;
+    rowsStyle?: TimelineRowStyle;
+    /**
+     * Timeline indicator style.
+     */
+    timelineStyle?: TimelineStyle;
     /**
      * Header height in pixels
      */
-    headerHeight: number;
-    ticksFont: string;
-    zoom: number;
-    zoomSpeed: number;
-    zoomMin: number;
-    zoomMax: number;
+    headerHeight?: number;
+    /**
+     * Header ticks font
+     */
+    font?: string;
+    zoom?: number;
+    /**
+     * Zoom speed. Use percent of the screen to set zoom speed.
+     */
+    zoomSpeed?: number;
+    zoomMin?: number;
+    zoomMax?: number;
     /**
      * Set this to true in a MAC OS environment: The Meta key will be used instead of the Ctrl key.
      */
-    controlKeyIsMetaKey: boolean;
+    controlKeyIsMetaKey?: boolean;
     /**
      * Access the scroll container via this class for e.g. scroll bar styling.
      */
-    scrollContainerClass: string;
+    scrollContainerClass?: string;
     /**
      * keyframes stripe is draggable.
      */
-    stripesDraggable: boolean;
+    stripesDraggable?: boolean;
     /**
      * keyframes stripe is draggable.
      */
-    keyframesDraggable: boolean;
+    keyframesDraggable?: boolean;
 }

lib/settings/timelineStyleUtils.d.ts

@@ -1,28 +0,0 @@
-import { TimelineRow } from '../timelineRow';
-import { TimelineKeyframe } from '../timelineKeyframe';
-import { TimelineRowStyle } from './styles/timelineRowStyle';
-export declare class TimelineStyleUtils {
-    /**
-     * Get keyframe style from a keyframe, than from a row, than from a global settings.
-     * @param keyframe keyframe to get style for.
-     * @param row keyframe row.
-     * @param propertyName property to get.
-     * @param defaultValue default value to return
-     */
-    static getKeyframeStyle<T>(keyframe: TimelineKeyframe, row: TimelineRow, rowsStyle: TimelineRowStyle, propertyName: string, defaultValue?: T): T;
-    /**
-     * Get row style from default settings or overrides by a row settings.
-     * @param row
-     * @param property
-     */
-    static getRowStyle<T>(rowStyle: TimelineRow, globalRowStyle: TimelineRowStyle, propertyName: string, defaultValue?: T): T | undefined;
-    /**
-     * Get current row height from styling
-     * @param row
-     * @param includeMargin include margin to the bounds
-     */
-    static getRowHeight(rowStyle: TimelineRowStyle, globalRowStyle: TimelineRowStyle): number;
-    static rowStripeHeight(rowStyle: TimelineRowStyle, globalRowStyle: TimelineRowStyle): number | string;
-    static stripeFillColor(rowStyle: TimelineRowStyle, globalRowStyle: TimelineRowStyle): string;
-    static getRowMarginBottom(rowStyle: TimelineRowStyle, globalRowStyle: TimelineRowStyle): number;
-}

lib/timeline.d.ts

@@ -21,37 +21,37 @@ export declare class Timeline extends TimelineEventsEmitter {
     /**
      * component container.
      */
-    _container: HTMLElement;
+    _container: HTMLElement | null;
     /**
      * Dynamically generated event.
      */
-    _canvas: HTMLCanvasElement;
+    _canvas: HTMLCanvasElement | null;
     /**
      * Dynamically generated scroll container.
      */
-    _scrollContainer: HTMLElement;
+    _scrollContainer: HTMLElement | null;
     /**
      * Dynamically generated virtual scroll content.
      */
-    _scrollContent: HTMLElement;
+    _scrollContent: HTMLElement | null;
     /**
      * Rendering context
      */
-    _ctx: CanvasRenderingContext2D;
+    _ctx: CanvasRenderingContext2D | null;
     /**
      * Components settings
      */
-    _options: TimelineOptions;
+    _options: TimelineOptions | null;
     /**
      * Drag start position.
      */
-    _startPos: MouseData;
+    _startPos: MouseData | null;
     /**
      * Drag scroll started position.
      */
     _scrollStartPos: DOMPoint | null;
-    _currentPos: MouseData;
-    _selectionRect: DOMRect;
+    _currentPos: MouseData | null;
+    _selectionRect: DOMRect | null;
     _selectionRectEnabled: boolean;
     _drag: TimelineDraggableData | null;
     _startedDragWithCtrl: boolean;
@@ -72,12 +72,12 @@ export declare class Timeline extends TimelineEventsEmitter {
      */
     _pixelRatio: number;
     _currentZoom: number;
-    _intervalRef?: number;
+    _intervalRef?: number | null;
     _autoPanLastActionDate: number;
     _isPanStarted: boolean;
     _interactionMode: TimelineInteractionMode;
-    _lastUsedArgs: MouseEvent | TouchEvent;
-    _model: TimelineModel;
+    _lastUsedArgs: MouseEvent | TouchEvent | null;
+    _model: TimelineModel | null;
     /**
      * Create Timeline instance
      * @param options Timeline settings.

lib/timelineModel.d.ts

@@ -1,4 +1,4 @@
 import { TimelineRow } from './timelineRow';
-export declare class TimelineModel {
+export interface TimelineModel {
     rows: Array<TimelineRow>;
 }

lib/timelineRow.d.ts

@@ -1,7 +1,6 @@
 import { TimelineKeyframe } from './timelineKeyframe';
-import { TimelineRowStyle } from './settings/styles/TimelineRowStyle';
+import { TimelineRowStyle } from './settings/styles/timelineRowStyle';
 export interface TimelineRow extends TimelineRowStyle {
-    name?: string;
     keyframes?: Array<TimelineKeyframe>;
     /**
      * keyframes stripe is draggable.

lib/utils/events/timelineScrollEvent.d.ts

@@ -1,4 +1,5 @@
-export interface TimelineScrollEvent extends MouseEvent {
+export interface TimelineScrollEvent {
+    args: MouseEvent;
     scrollLeft: number;
     scrollTop: number;
     scrollHeight: number;

lib/utils/timelineStyleUtils.d.ts

@@ -0,0 +1,25 @@
+import { TimelineRow } from '../timelineRow';
+import { TimelineKeyframe } from '../timelineKeyframe';
+import { TimelineOptions } from '../settings/timelineOptions';
+import { TimelineRowStyle } from '../settings/styles/timelineRowStyle';
+export declare class TimelineStyleUtils {
+    /**
+     * Get keyframe style from a keyframe, than from a row, than from a global settings.
+     * @param keyframe keyframe to get style for.
+     * @param row keyframe row.
+     * @param propertyName property to get.
+     * @param defaultValue default value to return
+     */
+    static getKeyframeStyle<T>(keyframe: TimelineKeyframe | null, row: TimelineRow | null, options: TimelineOptions | null, propertyName: string, defaultValue?: T): T;
+    /**
+     * Get row style from default settings or overrides by a row settings.
+     */
+    static getRowStyle<T>(rowStyle: TimelineRow, options: TimelineOptions | null, propertyName: string, defaultValue?: T): T | undefined;
+    /**
+     * Get current row height from styling
+     */
+    static getRowHeight(rowStyle: TimelineRowStyle, options: TimelineOptions): number;
+    static rowStripeHeight(rowStyle: TimelineRowStyle, options: TimelineOptions): number | string;
+    static stripeFillColor(rowStyle: TimelineRowStyle, options: TimelineOptions): string;
+    static getRowMarginBottom(rowStyle: TimelineRowStyle, options: TimelineOptions): number;
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "animation-timeline-js",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "description": "animation timeline control based on the canvas.",
   "main": "lib/animation-timeline.min.js",
   "types": "lib/animation-timeline.d.ts",

src/animation-timeline.ts

@@ -6,11 +6,14 @@ export { TimelineRow } from './timelineRow';
 export { TimelineKeyframe } from './timelineKeyframe';
 export { TimelineEventsEmitter } from './timelineEventsEmitter';
 
+export { TimelineConsts } from './settings/timelineConsts';
+
 export { TimelineOptions } from './settings/timelineOptions';
-export { TimelineStyleUtils } from './settings/timelineStyleUtils';
 export { TimelineKeyframeStyle } from './settings/styles/timelineKeyframeStyle';
 export { TimelineRowStyle } from './settings/styles/timelineRowStyle';
+export { TimelineStyle } from './settings/styles/timelineStyle';
 
+export { TimelineStyleUtils } from './utils/timelineStyleUtils';
 export { TimelineUtils } from './utils/timelineUtils';
 export { TimelineClickableElement } from './utils/timelineClickableElement';
 export { Selectable } from './utils/selectable';
@@ -24,10 +27,16 @@ export { TimelineClickEvent } from './utils/events/timelineClickEvent';
 export { TimelineDragEvent } from './utils/events/timelineDragEvent';
 
 export { TimelineEvents } from './enums/timelineEvents';
-export { TimelineConsts } from './settings/timelineConsts';
 
 export { TimelineKeyframeShape } from './enums/timelineKeyframeShape';
 export { TimelineInteractionMode } from './enums/timelineInteractionMode';
 export { TimelineElementType } from './enums/timelineElementType';
 export { TimelineCursorType } from './enums/timelineCursorType';
 export { TimelineCapShape } from './enums/timelineCapShape';
+
+// private defaults are exposed:
+export { defaultTimelineOptions } from './settings/defaults';
+export { defaultTimelineKeyframeStyle } from './settings/defaults';
+export { defaultTimelineRowStyle } from './settings/defaults';
+export { defaultTimelineStyle } from './settings/defaults';
+export { defaultTimelineConsts } from './settings/defaults';

src/settings/defaults.ts

@@ -0,0 +1,156 @@
+import { TimelineConsts } from './timelineConsts';
+import { TimelineCapShape } from '../enums/timelineCapShape';
+import { TimelineStyle } from './styles/timelineStyle';
+import { TimelineOptions } from './timelineOptions';
+import { TimelineKeyframeShape } from '../enums/timelineKeyframeShape';
+import { TimelineKeyframeStyle } from './styles/timelineKeyframeStyle';
+import { TimelineRowStyle } from './styles/timelineRowStyle';
+
+export const defaultTimelineStyle = {
+  width: 2,
+  marginTop: 15,
+  capWidth: 4,
+  capHeight: 10,
+  /**
+   * Draw timeline rectangular cap.
+   */
+  capType: TimelineCapShape.Rect,
+  strokeColor: 'DarkOrange',
+  fillColor: 'DarkOrange',
+} as TimelineStyle;
+
+export const defaultTimelineKeyframeStyle = {
+  /**
+   * keyframe fill color.
+   */
+  fillColor: 'red',
+  shape: TimelineKeyframeShape.Rhomb,
+  /**
+   * Selected keyframe fill color.
+   */
+  selectedFillColor: 'DarkOrange',
+  strokeColor: 'Black',
+  strokeThickness: 0.2,
+  draggable: true,
+} as TimelineKeyframeStyle;
+
+export const defaultTimelineRowStyle = {
+  /**
+   * Row height in pixels.
+   */
+  height: 24,
+  marginBottom: 2,
+  fillColor: '#252526',
+  /**
+   * Keyframes stripe color
+   */
+  stripeFillColor: '#094771',
+  stripeHeight: 'auto',
+  keyframesStyle: defaultTimelineKeyframeStyle,
+} as TimelineRowStyle;
+
+export const defaultTimelineOptions = {
+  /**
+   * Snap the mouse to the values on a timeline.
+   * Value can be from 1 to 60
+   */
+  snapsPerSeconds: 5,
+  /**
+   *  Snap all selected keyframes as a bundle during the drag.
+   */
+  snapAllKeyframesOnMove: false,
+
+  /**
+   * Check whether snapping is enabled.
+   */
+  snapEnabled: true,
+
+  timelineStyle: defaultTimelineStyle,
+  /**
+   * approximate step for the timeline in pixels for 1 second
+   */
+  stepPx: 120,
+  stepSmallPx: 30,
+  smallSteps: 50,
+  /**
+   * additional left margin in pixels to start the line gauge from.
+   */
+  leftMarginPx: 25,
+  headerFillColor: '#101011',
+  fillColor: '#101011',
+
+  labelsColor: '#D5D5D5',
+  /**
+   * Header gauge tick color.
+   */
+  tickColor: '#D5D5D5',
+  /**
+   * Selection rectangle color.
+   */
+  selectionColor: 'White',
+
+  /**
+   * Default rows style.
+   * Can be overridden by setting style individually for each row.
+   */
+  rowsStyle: defaultTimelineRowStyle,
+  /**
+   * Header height in pixels
+   */
+  headerHeight: 30,
+  font: '11px sans-serif',
+  zoom: 1000,
+  // Zoom speed. Use percent of the screen to set zoom speed.
+  zoomSpeed: 0.1,
+  // Max zoom
+  zoomMin: 80,
+  // Min zoom
+  zoomMax: 8000,
+  /**
+   * Set this to true in a MAC OS environment: The Meta key will be used instead of the Ctrl key.
+   */
+  controlKeyIsMetaKey: false,
+  /**
+   * Access the scroll container via this class for e.g. scroll bar styling.
+   */
+  scrollContainerClass: 'scroll-container',
+  /**
+   * keyframes stripe is draggable.
+   */
+  stripesDraggable: true,
+  /**
+   * keyframes stripe is draggable.
+   */
+  keyframesDraggable: true,
+} as TimelineOptions;
+
+export const defaultTimelineConsts: TimelineConsts = {
+  /**
+   * Auto pan speed.
+   */
+  autoPanSpeed: 50,
+  /**
+   * scroll speed when mouse drag is used (from 0 to 1)
+   */
+  scrollByDragSpeed: 0.12,
+  /**
+   * Determine whether item was clicked.
+   */
+  clickDetectionMs: 120,
+  /**
+   * Timeout to detect double click.
+   */
+  doubleClickTimeoutMs: 400,
+  /**
+   * Time in ms used to refresh scrollbars when pan is finished.
+   */
+  scrollFinishedTimeoutMs: 500,
+  /**
+   * Auto pan padding
+   */
+  autoPanByScrollPadding: 10,
+  /**
+   * Click threshold
+   */
+  clickThreshold: 3,
+} as TimelineConsts;

src/settings/styles/timelineStyle.ts

@@ -0,0 +1,15 @@
+import { TimelineCapShape } from '../../enums/timelineCapShape';
+
+export interface TimelineStyle {
+  width?: number;
+  marginTop?: number;
+  capWidth?: number;
+  capHeight?: number;
+  /**
+   * Cap type
+   */
+  capType?: TimelineCapShape;
+  timelineColor?: string;
+  strokeColor: string;
+  fillColor: string;
+}

src/settings/timelineConsts.ts

@@ -28,33 +28,3 @@ export interface TimelineConsts {
    */
   clickThreshold: number;
 }
-export const defaultTimelineConsts = {
-  /**
-   * Auto pan speed.
-   */
-  autoPanSpeed: 50,
-  /**
-   * scroll speed when mouse drag is used (from 0 to 1)
-   */
-  scrollByDragSpeed: 0.12,
-  /**
-   * Determine whether item was clicked.
-   */
-  clickDetectionMs: 120,
-  /**
-   * Timeout to detect double click.
-   */
-  doubleClickTimeoutMs: 400,
-  /**
-   * Time in ms used to refresh scrollbars when pan is finished.
-   */
-  scrollFinishedTimeoutMs: 500,
-  /**
-   * Auto pan padding
-   */
-  autoPanByScrollPadding: 10,
-  /**
-   * Click threshold
-   */
-  clickThreshold: 3,
-} as TimelineConsts;

src/settings/timelineOptions.ts

@@ -1,115 +1,92 @@
-import { TimelineKeyframeShape } from '../enums/timelineKeyframeShape';
-import { TimelineRowStyle } from './styles/TimelineRowStyle';
-import { TimelineKeyframeStyle } from './styles/timelineKeyframeStyle';
-import { TimelineCapShape } from '../enums/timelineCapShape';
+import { TimelineRowStyle } from './styles/timelineRowStyle';
+import { TimelineStyle } from './styles/timelineStyle';
 
-export class TimelineOptions {
+export interface TimelineOptions {
   /**
    * Id or HTMLElement of the timeline container.
    */
-  id: string | HTMLElement;
+  id?: string | HTMLElement;
   /**
    * Snap the mouse to the values on a timeline.
    * Value can be from 1 to 60
    */
-  snapsPerSeconds = 5;
+  snapsPerSeconds?: number;
   /**
    * Check whether snapping is enabled.
    */
-  snapEnabled = true;
+  snapEnabled?: boolean;
   /**
    *  Snap all selected keyframes as a bundle during the drag.
    */
-  snapAllKeyframesOnMove = false;
-  timelineThicknessPx = 2;
-  timelineMarginTopPx = 15;
-  timelineCapWidthPx = 4;
-  timelineCapHeightPx = 10;
-  /**
-   * Draw timeline rectangular cap.
-   */
-  timelineCap = TimelineCapShape.Rect;
-  timelineColor = 'DarkOrange';
+  snapAllKeyframesOnMove?: boolean;
   /**
    * approximate step for the timeline in pixels for 1 second
    */
-  stepPx = 120;
-  stepSmallPx = 30;
-  smallSteps = 50;
+  stepPx?: number;
+  stepSmallPx?: number;
+  smallSteps?: number;
   /**
    * additional left margin in pixels to start the line gauge from.
    */
-  leftMarginPx = 25;
-  headerFillColor = '#101011';
-  fillColor = '#101011';
-
-  labelsColor = '#D5D5D5';
+  leftMarginPx?: number;
+  /**
+   * Component header background color.
+   */
+  headerFillColor?: string;
+  /**
+   * Component background color.
+   */
+  fillColor?: string;
+  labelsColor?: string;
   /**
    * Header gauge tick color.
    */
-  tickColor = '#D5D5D5';
+  tickColor?: string;
   /**
    * Selection rectangle color.
    */
-  selectionColor = 'White';
+  selectionColor?: string;
 
   /**
    * Default rows style.
    * Can be overridden by setting style individually for each row.
    */
-  rowsStyle: TimelineRowStyle = {
-    /**
-     * Row height in pixels.
-     */
-    height: 24,
-    marginBottom: 2,
-    fillColor: '#252526',
-    /**
-     * Keyframes stripe color
-     */
-    stripeFillColor: '#094771',
-    stripeHeight: 'auto',
-    keyframesStyle: {
-      /**
-       * keyframe fill color.
-       */
-      fillColor: 'red',
-      shape: TimelineKeyframeShape.Rhomb,
-      /**
-       * Selected keyframe fill color.
-       */
-      selectedFillColor: 'DarkOrange',
-      strokeColor: 'Black',
-      strokeThickness: 0.2,
-      draggable: true,
-    } as TimelineKeyframeStyle,
-  } as TimelineRowStyle;
+  rowsStyle?: TimelineRowStyle;
+  /**
+   * Timeline indicator style.
+   */
+  timelineStyle?: TimelineStyle;
   /**
    * Header height in pixels
    */
-  headerHeight = 30;
-  ticksFont = '11px sans-serif';
-  zoom = 1000;
-  // Zoom speed. Use percent of the screen to set zoom speed.
-  zoomSpeed = 0.1;
+  headerHeight?: number;
+  /**
+   * Header ticks font
+   */
+  font?: string;
+  zoom?: number;
+  /**
+   * Zoom speed. Use percent of the screen to set zoom speed.
+   */
+  zoomSpeed?: number;
   // Max zoom
-  zoomMin = 80;
+  zoomMin?: number;
   // Min zoom
-  zoomMax = 8000;
+  zoomMax?: number;
   /**
    * Set this to true in a MAC OS environment: The Meta key will be used instead of the Ctrl key.
    */
-  controlKeyIsMetaKey = false;
+  controlKeyIsMetaKey?: boolean;
   /**
    * Access the scroll container via this class for e.g. scroll bar styling.
    */
-  scrollContainerClass = 'scroll-container';
+  scrollContainerClass?: string;
   /**
    * keyframes stripe is draggable.
    */
-  stripesDraggable = true;
+  stripesDraggable?: boolean;
   /**
    * keyframes stripe is draggable.
    */
-  keyframesDraggable = true;
+  keyframesDraggable?: boolean;
 }

src/timeline.ts

@@ -1,14 +1,14 @@
 import { TimelineEventsEmitter } from './timelineEventsEmitter';
 import { TimelineUtils } from './utils/timelineUtils';
 import { TimelineOptions } from './settings/timelineOptions';
-import { defaultTimelineConsts, TimelineConsts } from './settings/timelineConsts';
+import { TimelineConsts } from './settings/timelineConsts';
 import { TimelineKeyframe } from './timelineKeyframe';
 import { TimelineModel } from './timelineModel';
 import { TimelineClickableElement } from './utils/timelineClickableElement';
 import { TimelineRow } from './timelineRow';
 import { TimelineCursorType } from './enums/timelineCursorType';
 import { TimelineKeyframeShape } from './enums/timelineKeyframeShape';
-import { TimelineStyleUtils } from './settings/timelineStyleUtils';
+import { TimelineStyleUtils } from './utils/timelineStyleUtils';
 import { TimelineElementType } from './enums/timelineElementType';
 import { TimelineEvents } from './enums/timelineEvents';
 import { CutBoundsRect } from './utils/cutBoundsRect';
@@ -20,6 +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';
 
 interface MousePoint extends DOMPoint {
   radius: number;
@@ -33,38 +34,38 @@ export class Timeline extends TimelineEventsEmitter {
   /**
    * component container.
    */
-  _container: HTMLElement = null;
+  _container: HTMLElement | null = null;
   /**
    * Dynamically generated event.
    */
-  _canvas: HTMLCanvasElement = null;
+  _canvas: HTMLCanvasElement | null = null;
   /**
    * Dynamically generated scroll container.
    */
-  _scrollContainer: HTMLElement = null;
+  _scrollContainer: HTMLElement | null = null;
   /**
    * Dynamically generated virtual scroll content.
    */
-  _scrollContent: HTMLElement = null;
+  _scrollContent: HTMLElement | null = null;
   /**
    * Rendering context
    */
-  _ctx: CanvasRenderingContext2D = null;
+  _ctx: CanvasRenderingContext2D | null = null;
   /**
    * Components settings
    */
-  _options: TimelineOptions = null;
+  _options: TimelineOptions | null = null;
   /**
    * Drag start position.
    */
-  _startPos: MouseData = null;
+  _startPos: MouseData | null = null;
   /**
    * Drag scroll started position.
    */
   _scrollStartPos: DOMPoint | null = { x: 0, y: 0 } as DOMPoint;
-  _currentPos: MouseData = null;
+  _currentPos: MouseData | null = null;
 
-  _selectionRect: DOMRect = null;
+  _selectionRect: DOMRect | null = null;
   _selectionRectEnabled = false;
   _drag: TimelineDraggableData | null = null;
   _startedDragWithCtrl = false;
@@ -86,12 +87,12 @@ export class Timeline extends TimelineEventsEmitter {
    */
   _pixelRatio = 1;
   _currentZoom = 0;
-  _intervalRef?: number = null;
+  _intervalRef?: number | null = null;
   _autoPanLastActionDate = 0;
   _isPanStarted = false;
   _interactionMode = TimelineInteractionMode.Selection;
-  _lastUsedArgs: MouseEvent | TouchEvent = null;
-  _model: TimelineModel;
+  _lastUsedArgs: MouseEvent | TouchEvent | null = null;
+  _model: TimelineModel | null = null;
   /**
    * Create Timeline instance
    * @param options Timeline settings.
@@ -276,12 +277,14 @@ export class Timeline extends TimelineEventsEmitter {
     }, this._consts.scrollFinishedTimeoutMs);
 
     this.redraw();
-    const scrollData = (args || {}) as TimelineScrollEvent;
-    scrollData.scrollLeft = this._scrollContainer.scrollLeft;
-    scrollData.scrollTop = this._scrollContainer.scrollTop;
-    scrollData.scrollHeight = this._scrollContainer.scrollHeight;
-    scrollData.scrollWidth = this._scrollContainer.scrollWidth;
-    super.emit(TimelineEvents.Scroll, scrollData);
+    const scrollEvent = {
+      args: args,
+      scrollLeft: this._scrollContainer.scrollLeft,
+      scrollTop: this._scrollContainer.scrollTop,
+      scrollHeight: this._scrollContainer.scrollHeight,
+      scrollWidth: this._scrollContainer.scrollWidth,
+    } as TimelineScrollEvent;
+    super.emit(TimelineEvents.Scroll, scrollEvent);
   };
   _controlKeyPressed(e: MouseEvent | KeyboardEvent): boolean {
     return this._options.controlKeyIsMetaKey || this._options.controlKeyIsMetaKey ? e.metaKey : e.ctrlKey;
@@ -1032,8 +1035,8 @@ export class Timeline extends TimelineEventsEmitter {
       this._ctx.stroke();
 
       this._ctx.fillStyle = this._options.labelsColor;
-      if (this._options.ticksFont) {
-        this._ctx.font = this._options.ticksFont;
+      if (this._options.font) {
+        this._ctx.font = this._options.font;
       }
 
       const text = this._formatLineGaugeText(i);
@@ -1094,8 +1097,8 @@ export class Timeline extends TimelineEventsEmitter {
         }
 
         // draw with scroll virtualization:
-        const rowHeight = TimelineStyleUtils.getRowHeight(row, this._options.rowsStyle);
-        const marginBottom = TimelineStyleUtils.getRowMarginBottom(row, this._options.rowsStyle);
+        const rowHeight = TimelineStyleUtils.getRowHeight(row, this._options);
+        const marginBottom = TimelineStyleUtils.getRowMarginBottom(row, this._options);
 
         rowAbsoluteHeight += rowHeight + marginBottom;
         const currentRowY = rowAbsoluteHeight - this._scrollContainer.scrollTop;
@@ -1168,7 +1171,7 @@ export class Timeline extends TimelineEventsEmitter {
           return;
         }
 
-        this._ctx.fillStyle = TimelineStyleUtils.getRowStyle<string>(rowData.row, this._options.rowsStyle, 'fillColor', '#252526');
+        this._ctx.fillStyle = TimelineStyleUtils.getRowStyle<string>(rowData.row, this._options, 'fillColor', '#252526');
         //this._ctx.fillRect(data.areaRect.x, data.areaRect.y, data.areaRect.w, data.areaRect.h);
         // Note: bounds used instead of the clip while clip is slow!
         const bounds = this._cutBounds(rowData);
@@ -1176,7 +1179,7 @@ export class Timeline extends TimelineEventsEmitter {
           this._ctx.fillRect(bounds.x, bounds.y, bounds.width, bounds.height);
         }
 
-        const keyframeLaneColor = TimelineStyleUtils.stripeFillColor(rowData.row, this._options.rowsStyle);
+        const keyframeLaneColor = TimelineStyleUtils.stripeFillColor(rowData.row, this._options);
 
         if ((rowData.row.keyframes && rowData.row.keyframes.length <= 1) || !keyframeLaneColor) {
           return;
@@ -1239,9 +1242,9 @@ export class Timeline extends TimelineEventsEmitter {
    * @param rowY row screen coords y position
    */
   _getKeyframesStripeSize(row: TimelineRow, rowY: number, minValue: number, maxValue: number): DOMRect {
-    let stripeHeight: number | string = TimelineStyleUtils.rowStripeHeight(row, this._options.rowsStyle);
+    let stripeHeight: number | string = TimelineStyleUtils.rowStripeHeight(row, this._options);
 
-    const height = TimelineStyleUtils.getRowHeight(row, this._options.rowsStyle);
+    const height = TimelineStyleUtils.getRowHeight(row, this._options);
     if ((!stripeHeight && stripeHeight !== 0) || isNaN(stripeHeight as number) || stripeHeight == 'auto') {
       stripeHeight = Math.floor(height * 0.8);
     }
@@ -1327,7 +1330,7 @@ export class Timeline extends TimelineEventsEmitter {
           this._ctx.clip();
         }
 
-        const shape = TimelineStyleUtils.getKeyframeStyle<TimelineKeyframeShape>(keyframe, row, this._options.rowsStyle, 'shape', TimelineKeyframeShape.Rhomb);
+        const shape = TimelineStyleUtils.getKeyframeStyle<TimelineKeyframeShape>(keyframe, row, this._options, 'shape', TimelineKeyframeShape.Rhomb);
         if (shape === TimelineKeyframeShape.None) {
           return;
         }
@@ -1335,12 +1338,12 @@ export class Timeline extends TimelineEventsEmitter {
         const keyframeColor = TimelineStyleUtils.getKeyframeStyle<string>(
           keyframe,
           row,
-          this._options.rowsStyle,
+          this._options,
           keyframe.selected ? 'fillColor' : 'selectedFillColor',
           keyframe.selected ? 'red' : 'DarkOrange',
         );
-        const border = TimelineStyleUtils.getKeyframeStyle<number>(keyframe, row, this._options.rowsStyle, 'strokeThickness', 0.2);
-        const strokeColor = border > 0 ? TimelineStyleUtils.getKeyframeStyle<string>(keyframe, row, this._options.rowsStyle, 'strokeColor', 'Black') : '';
+        const border = TimelineStyleUtils.getKeyframeStyle<number>(keyframe, row, this._options, 'strokeThickness', 0.2);
+        const strokeColor = border > 0 ? TimelineStyleUtils.getKeyframeStyle<string>(keyframe, row, this._options, 'strokeColor', 'Black') : '';
 
         if (shape == TimelineKeyframeShape.Rhomb) {
           this._ctx.beginPath();
@@ -1423,28 +1426,32 @@ export class Timeline extends TimelineEventsEmitter {
   }
 
   _renderTimeline(): void {
+    if (!this._options || !this._options.timelineStyle) {
+      return;
+    }
+    const style = this._options.timelineStyle;
     this._ctx.save();
-    const thickness = this._options.timelineThicknessPx;
+    const thickness = style.width || 1;
     this._ctx.lineWidth = thickness * this._pixelRatio;
     const timeLinePos = this._getSharp(Math.round(this.valToPx(this._val)), thickness);
-    this._ctx.strokeStyle = this._options.timelineColor;
-    this._ctx.fillStyle = this._ctx.strokeStyle;
-    const y = this._options.timelineMarginTopPx;
+    this._ctx.strokeStyle = style.strokeColor;
+    this._ctx.fillStyle = style.fillColor;
+    const y = style.marginTop;
     this._ctx.beginPath();
     TimelineUtils.drawLine(this._ctx, timeLinePos, y, timeLinePos, this._canvas.clientHeight);
     this._ctx.stroke();
 
-    if (this._options.timelineCapWidthPx && this._options.timelineCapHeightPx) {
-      const rectSize = this._options.timelineCapWidthPx;
-      const capHeight = this._options.timelineCapHeightPx;
-      if (this._options.timelineCap === TimelineCapShape.Triangle) {
+    if (style.capHeight && style.capWidth) {
+      const rectSize = style.capWidth;
+      const capHeight = style.capHeight;
+      if (style.capType === TimelineCapShape.Triangle) {
         this._ctx.beginPath();
         this._ctx.moveTo(timeLinePos - rectSize / 2, y);
         this._ctx.lineTo(timeLinePos + rectSize / 2, y);
         this._ctx.lineTo(timeLinePos, capHeight);
         this._ctx.closePath();
         this._ctx.stroke();
-      } else if (this._options.timelineCap === TimelineCapShape.Rect) {
+      } else if (style.capType === TimelineCapShape.Rect) {
         this._ctx.fillRect(timeLinePos - rectSize / 2, y, rectSize, capHeight);
         this._ctx.fill();
       }
@@ -1492,6 +1499,9 @@ export class Timeline extends TimelineEventsEmitter {
    * Redraw parts of the component in the specific order.
    */
   _redrawInternal = (): void => {
+    if (!this._ctx) {
+      return;
+    }
     // Rescale when animation is played out of the bounds.
     if (this.valToPx(this._val, true) > this._scrollContainer.scrollWidth) {
       this.rescale();
@@ -1658,6 +1668,10 @@ export class Timeline extends TimelineEventsEmitter {
    * Apply container div size to the container on changes detected.
    */
   _updateCanvasScale(): boolean {
+    if (!this._scrollContainer || !this._ctx) {
+      console.log('control should be initialized first');
+      return;
+    }
     let changed = false;
     const width = this._scrollContainer.clientWidth * this._pixelRatio;
     const height = this._scrollContainer.clientHeight * this._pixelRatio;
@@ -1806,7 +1820,12 @@ export class Timeline extends TimelineEventsEmitter {
 
     // Check whether we can drag timeline.
     const timeLinePos = this.valToPx(this._val);
-    const width = Math.max((this._options.timelineThicknessPx || 1) * this._pixelRatio, this._options.timelineCapWidthPx * this._pixelRatio || 1) + clickRadius;
+    let width = 0;
+    if (this._options && this._options.timelineStyle) {
+      const timelineStyle = this._options.timelineStyle;
+      width = Math.max((timelineStyle.width || 1) * this._pixelRatio, (timelineStyle.capWidth || 0) * this._pixelRatio || 1) + clickRadius;
+    }
+
     if (pos.y <= this._options.headerHeight || (pos.x >= timeLinePos - width / 2 && pos.x <= timeLinePos + width / 2)) {
       toReturn.push({
         val: this._val,
@@ -1867,7 +1886,7 @@ export class Timeline extends TimelineEventsEmitter {
   _mergeOptions(toSet: TimelineOptions): TimelineOptions {
     toSet = toSet || ({} as TimelineOptions);
     // Apply incoming options to default. (override default)
-    const options = new TimelineOptions();
+    const options = {} as TimelineOptions;
     // Merge options with the default.
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const mergeOptionsDeep = (to: any, from: any): void => {

src/timelineModel.ts

@@ -1,4 +1,4 @@
 import { TimelineRow } from './timelineRow';
-export class TimelineModel {
-  rows: Array<TimelineRow> = [];
+export interface TimelineModel {
+  rows: Array<TimelineRow>;
 }

src/timelineRow.ts

@@ -1,8 +1,7 @@
 import { TimelineKeyframe } from './timelineKeyframe';
-import { TimelineRowStyle } from './settings/styles/TimelineRowStyle';
+import { TimelineRowStyle } from './settings/styles/timelineRowStyle';
 
 export interface TimelineRow extends TimelineRowStyle {
-  name?: string;
   keyframes?: Array<TimelineKeyframe>;
   /**
    * keyframes stripe is draggable.

src/utils/events/timelineScrollEvent.ts

@@ -1,4 +1,5 @@
-export interface TimelineScrollEvent extends MouseEvent {
+export interface TimelineScrollEvent {
+  args: MouseEvent;
   scrollLeft: number;
   scrollTop: number;
   scrollHeight: number;

src/settings/timelineStyleUtils.ts → src/utils/timelineStyleUtils.ts

@@ -1,7 +1,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { TimelineRow } from '../timelineRow';
 import { TimelineKeyframe } from '../timelineKeyframe';
-import { TimelineRowStyle } from './styles/timelineRowStyle';
+import { TimelineOptions } from '../settings/timelineOptions';
+import { TimelineRowStyle } from '../settings/styles/timelineRowStyle';
 
 export class TimelineStyleUtils {
   /**
@@ -11,7 +12,7 @@ export class TimelineStyleUtils {
    * @param propertyName property to get.
    * @param defaultValue default value to return
    */
-  static getKeyframeStyle<T>(keyframe: TimelineKeyframe, row: TimelineRow, rowsStyle: TimelineRowStyle, propertyName: string, defaultValue?: T): T {
+  static getKeyframeStyle<T>(keyframe: TimelineKeyframe | null, row: TimelineRow | null, options: TimelineOptions | null, propertyName: string, defaultValue?: T): T {
     if (keyframe && keyframe) {
       const style: any = keyframe;
       if (style[propertyName] !== undefined) {
@@ -25,8 +26,9 @@ export class TimelineStyleUtils {
         return style[propertyName] as T;
       }
     }
-    if (rowsStyle && rowsStyle.keyframesStyle) {
-      const style: any = rowsStyle.keyframesStyle;
+    const globalRowStyle = options ? options.rowsStyle : null;
+    if (globalRowStyle && globalRowStyle.keyframesStyle) {
+      const style: any = globalRowStyle.keyframesStyle;
       if (style[propertyName] !== undefined) {
         return style[propertyName] as T;
       }
@@ -37,16 +39,15 @@ export class TimelineStyleUtils {
 
   /**
    * Get row style from default settings or overrides by a row settings.
-   * @param row
-   * @param property
    */
-  static getRowStyle<T>(rowStyle: TimelineRow, globalRowStyle: TimelineRowStyle, propertyName: string, defaultValue?: T): T | undefined {
+  static getRowStyle<T>(rowStyle: TimelineRow, options: TimelineOptions | null, propertyName: string, defaultValue?: T): T | undefined {
     if (rowStyle) {
       const style: any = rowStyle;
       if (style[propertyName] !== undefined) {
         return style[propertyName] as T;
       }
     }
+    const globalRowStyle = options ? options.rowsStyle : null;
     if (globalRowStyle) {
       const style: any = globalRowStyle;
       if (style[propertyName] !== undefined) {
@@ -59,19 +60,17 @@ export class TimelineStyleUtils {
 
   /**
    * Get current row height from styling
-   * @param row
-   * @param includeMargin include margin to the bounds
    */
-  static getRowHeight(rowStyle: TimelineRowStyle, globalRowStyle: TimelineRowStyle): number {
-    return TimelineStyleUtils.getRowStyle<number>(rowStyle, globalRowStyle, 'height', 24);
+  static getRowHeight(rowStyle: TimelineRowStyle, options: TimelineOptions): number {
+    return TimelineStyleUtils.getRowStyle<number>(rowStyle, options, 'height', 24);
   }
-  static rowStripeHeight(rowStyle: TimelineRowStyle, globalRowStyle: TimelineRowStyle): number | string {
-    return TimelineStyleUtils.getRowStyle<number | string>(rowStyle, globalRowStyle, 'stripeHeight', 'auto');
+  static rowStripeHeight(rowStyle: TimelineRowStyle, options: TimelineOptions): number | string {
+    return TimelineStyleUtils.getRowStyle<number | string>(rowStyle, options, 'stripeHeight', 'auto');
   }
-  static stripeFillColor(rowStyle: TimelineRowStyle, globalRowStyle: TimelineRowStyle): string {
-    return TimelineStyleUtils.getRowStyle<string>(rowStyle, globalRowStyle, 'stripeFillColor');
+  static stripeFillColor(rowStyle: TimelineRowStyle, options: TimelineOptions): string {
+    return TimelineStyleUtils.getRowStyle<string>(rowStyle, options, 'stripeFillColor');
   }
-  static getRowMarginBottom(rowStyle: TimelineRowStyle, globalRowStyle: TimelineRowStyle): number {
-    return TimelineStyleUtils.getRowStyle<number>(rowStyle, globalRowStyle, 'marginBottom', 0);
+  static getRowMarginBottom(rowStyle: TimelineRowStyle, options: TimelineOptions): number {
+    return TimelineStyleUtils.getRowStyle<number>(rowStyle, options, 'marginBottom', 0);
   }
 }

tests/timelineTests.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 /* eslint-disable @typescript-eslint/no-explicit-any */
-var animation_timeline_1 = require("../lib/animation-timeline");
+var animation_timeline_1 = require("./../lib/animation-timeline");
 function assertEquals(value, expected, message) {
     if (message === void 0) { message = null; }
     if (expected !== value) {

tests/timelineTests.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { Timeline, TimelineElementType, TimelineClickableElement } from '../lib/animation-timeline';
+import { Timeline, TimelineElementType, TimelineClickableElement } from './../lib/animation-timeline';
 
 function assertEquals(value: any, expected: any, message: string | null = null): void {
   if (expected !== value) {