versions update - draft

.eslintrc.js

@@ -6,7 +6,6 @@ module.exports = {
     },
     extends: [
         "plugin:@typescript-eslint/recommended", // Uses the recommended rules from the @typescript-eslint/eslint-plugin
-        "prettier/@typescript-eslint", // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
         "plugin:prettier/recommended" 
 
     ],

.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+  // See https://go.microsoft.com/fwlink/?LinkId=827846
+  // for the documentation about the extensions.json format
+  "recommendations": ["davidanson.vscode-markdownlint", "esbenp.prettier-vscode", "dbaeumer.vscode-eslint"]
+}

.vscode/settings.json

@@ -7,6 +7,7 @@
     "browserslist",
     "consts",
     "corejs",
+    "deepmerge",
     "devtool",
     "doubleclick",
     "downlevel",

karma.conf.js

@@ -0,0 +1,25 @@
+// Karma is a tool to start server and test component in the real or headless browser.
+const {createDefaultConfig} = require('@open-wc/testing-karma');
+const merge = require('deepmerge');
+
+module.exports = config => {
+    config.set(
+        merge(createDefaultConfig(config), {
+            frameworks: ['mocha', 'chai'],
+            client: {
+                mocha: {ui: 'bdd'}
+            },
+            files: [
+                {
+                    pattern: config.grep ? config.grep : 'test/**/*.test.js',
+                    type: 'module'
+                },
+            ],
+            esm: {
+                // if you are using 'bare module imports' you will need this option
+                nodeResolve: true,
+            },
+        }),
+    );
+    return config;
+}

lib/animation-timeline.d.ts

@@ -1,45 +1,41 @@
-export { Timeline } from './timeline';
-export { TimelineModel } from './timelineModel';
-export { TimelineRow } from './timelineRow';
-export { TimelineKeyframe } from './timelineKeyframe';
-export { TimelineEventsEmitter } from './timelineEventsEmitter';
-export { TimelineConsts } from './settings/timelineConsts';
-export { TimelineRanged } from './timelineRanged';
-export { TimelineOptions } from './settings/timelineOptions';
-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 { TimelineElement } from './utils/timelineElement';
-export { Selectable } from './utils/selectable';
-export { TimelineCutBoundsRectResults } from './utils/timelineCutBoundsRectResults';
-export { TimelineSelectionResults } from './utils/timelineSelectionResults';
-export { TimelineValues } from './utils/timelineValues';
-export { TimelineMouseData } from './utils/timelineMouseData';
-export { TimelineElementDragState } from './utils/timelineDraggableData';
-export { TimelineDraggableData } from './utils/timelineDraggableData';
-export { TimelineModelCalcResults } from './utils/timelineModelCalcResults';
-export { TimelineCalculatedRow } from './utils/timelineModelCalcResults';
-export { TimelineCalculatedGroup } from './utils/timelineModelCalcResults';
-export { TimelineCalculated } from './utils/timelineModelCalcResults';
-export { TimelineCalculatedKeyframe } from './utils/timelineModelCalcResults';
-export { TimelineKeyframeChangedEvent } from './utils/events/timelineKeyframeChangedEvent';
-export { TimelineTimeChangedEvent } from './utils/events/timelineTimeChangedEvent';
-export { TimelineSelectedEvent } from './utils/events/timelineSelectedEvent';
-export { TimelineScrollEvent } from './utils/events/timelineScrollEvent';
-export { TimelineClickEvent } from './utils/events/timelineClickEvent';
-export { TimelineDragEvent } from './utils/events/timelineDragEvent';
-export { TimelineEvents } from './enums/timelineEvents';
-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 { TimelineEventSource } from './enums/timelineEventSource';
-export { TimelineSelectionMode } from './enums/timelineSelectionMode';
-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';
+export * from './timeline';
+export * from './timelineModel';
+export * from './timelineRow';
+export * from './timelineKeyframe';
+export * from './timelineEventsEmitter';
+export * from './settings/timelineConsts';
+export * from './timelineRanged';
+export * from './settings/timelineOptions';
+export * from './settings/styles/timelineKeyframeStyle';
+export * from './settings/styles/timelineRowStyle';
+export * from './settings/styles/timelineStyle';
+export * from './utils/timelineStyleUtils';
+export * from './utils/timelineUtils';
+export * from './utils/timelineElement';
+export * from './utils/selectable';
+export * from './utils/timelineCutBoundsRectResults';
+export * from './utils/timelineSelectionResults';
+export * from './utils/timelineValues';
+export * from './utils/timelineMouseData';
+export * from './utils/timelineElementDragState';
+export * from './utils/timelineDraggableData';
+export * from './utils/timelineModelCalcResults';
+export * from './utils/timelineCalculatedRow';
+export * from './utils/timelineCalculatedGroup';
+export * from './utils/timelineCalculated';
+export * from './utils/timelineCalculatedKeyframe';
+export * from './utils/events/timelineKeyframeChangedEvent';
+export * from './utils/events/timelineTimeChangedEvent';
+export * from './utils/events/timelineSelectedEvent';
+export * from './utils/events/timelineScrollEvent';
+export * from './utils/events/timelineClickEvent';
+export * from './utils/events/timelineDragEvent';
+export * from './enums/timelineKeyframeShape';
+export * from './enums/timelineInteractionMode';
+export * from './enums/timelineElementType';
+export * from './enums/timelineCursorType';
+export * from './enums/timelineCapShape';
+export * from './enums/timelineEventSource';
+export * from './enums/timelineSelectionMode';
+export * from './enums/timelineEvents';
+export * from './settings/defaults';

lib/animation-timeline.js.map

@@ -1 +1 @@
-{"version":3,"file":"animation-timeline.js","sourceRoot":"","sources":["../src/animation-timeline.ts"],"names":[],"mappings":";AAAA,qBAAqB;;;AAErB,uCAAsC;AAA7B,oGAAA,QAAQ,OAAA;AAIjB,iEAAgE;AAAvD,8HAAA,qBAAqB,OAAA;AAU9B,iEAAgE;AAAvD,wHAAA,kBAAkB,OAAA;AAC3B,uDAAsD;AAA7C,8GAAA,aAAa,OAAA;AAmBtB,iBAAiB;AACjB,4FAA2F;AAAlF,4IAAA,4BAA4B,OAAA;AACrC,oFAAmF;AAA1E,oIAAA,wBAAwB,OAAA;AACjC,8EAA6E;AAApE,8HAAA,qBAAqB,OAAA;AAE9B,wEAAuE;AAA9D,wHAAA,kBAAkB,OAAA;AAC3B,sEAAqE;AAA5D,sHAAA,iBAAiB,OAAA;AAC1B,yDAAwD;AAA/C,gHAAA,cAAc,OAAA;AAEvB,gBAAgB;AAChB,uEAAsE;AAA7D,8HAAA,qBAAqB,OAAA;AAC9B,2EAA0E;AAAjE,kIAAA,uBAAuB,OAAA;AAChC,mEAAkE;AAAzD,0HAAA,mBAAmB,OAAA;AAC5B,iEAAgE;AAAvD,wHAAA,kBAAkB,OAAA;AAC3B,6DAA4D;AAAnD,oHAAA,gBAAgB,OAAA;AACzB,mEAAkE;AAAzD,0HAAA,mBAAmB,OAAA;AAC5B,uEAAsE;AAA7D,8HAAA,qBAAqB,OAAA;AAE9B,iCAAiC;AACjC,gDAA6D;AAApD,kHAAA,sBAAsB,OAAA;AAC/B,gDAAmE;AAA1D,wHAAA,4BAA4B,OAAA;AACrC,gDAA8D;AAArD,mHAAA,uBAAuB,OAAA;AAChC,gDAA2D;AAAlD,gHAAA,oBAAoB,OAAA;AAC7B,gDAA4D;AAAnD,iHAAA,qBAAqB,OAAA"}
+{"version":3,"file":"animation-timeline.js","sourceRoot":"","sources":["../src/animation-timeline.ts"],"names":[],"mappings":";AAAA,qBAAqB;;;;;;;;;;;;AAErB,6CAA2B;AAC3B,kDAAgC;AAChC,gDAA8B;AAC9B,qDAAmC;AACnC,0DAAwC;AACxC,4DAA0C;AAC1C,mDAAiC;AAEjC,iBAAiB;AACjB,6DAA2C;AAC3C,0EAAwD;AACxD,qEAAmD;AACnD,kEAAgD;AAEhD,6DAA2C;AAC3C,wDAAsC;AACtC,0DAAwC;AAExC,8BAA8B;AAC9B,qDAAmC;AACnC,uEAAqD;AACrD,mEAAiD;AACjD,yDAAuC;AACvC,4DAA0C;AAC1C,mEAAiD;AACjD,gEAA8C;AAE9C,yBAAyB;AACzB,mEAAiD;AACjD,gEAA8C;AAC9C,kEAAgD;AAChD,6DAA2C;AAC3C,qEAAmD;AAEnD,iBAAiB;AACjB,8EAA4D;AAC5D,0EAAwD;AACxD,uEAAqD;AACrD,qEAAmD;AACnD,oEAAkD;AAClD,mEAAiD;AAEjD,gBAAgB;AAChB,gEAA8C;AAC9C,kEAAgD;AAChD,8DAA4C;AAC5C,6DAA2C;AAC3C,2DAAyC;AACzC,8DAA4C;AAC5C,gEAA8C;AAC9C,yDAAuC;AACvC,iCAAiC;AACjC,sDAAoC"}

lib/timeline.d.ts

@@ -1,24 +1,27 @@
+import { TimelineModel } from './timelineModel';
+import { TimelineRow } from './timelineRow';
+import { TimelineKeyframe } from './timelineKeyframe';
 import { TimelineEventsEmitter } from './timelineEventsEmitter';
-import { TimelineOptions } from './settings/timelineOptions';
 import { TimelineConsts } from './settings/timelineConsts';
-import { TimelineKeyframe } from './timelineKeyframe';
-import { TimelineModel } from './timelineModel';
+import { TimelineOptions } from './settings/timelineOptions';
 import { TimelineElement } from './utils/timelineElement';
-import { TimelineRow } from './timelineRow';
 import { TimelineCutBoundsRectResults } from './utils/timelineCutBoundsRectResults';
-import { TimelineCalculatedRow, TimelineModelCalcResults, TimelineCalculatedKeyframe } from './utils/timelineModelCalcResults';
-import { TimelineInteractionMode } from './enums/timelineInteractionMode';
-import { TimelineScrollEvent } from './utils/events/timelineScrollEvent';
+import { TimelineSelectionResults } from './utils/timelineSelectionResults';
+import { TimelineMouseData } from './utils/timelineMouseData';
+import { TimelineElementDragState } from './utils/TimelineElementDragState';
+import { TimelineDraggableData } from './utils/timelineDraggableData';
+import { TimelineModelCalcResults } from './utils/timelineModelCalcResults';
+import { TimelineCalculatedRow } from './utils/timelineCalculatedRow';
+import { TimelineCalculatedKeyframe } from './utils/timelineCalculatedKeyframe';
+import { TimelineKeyframeChangedEvent } from './utils/events/timelineKeyframeChangedEvent';
+import { TimelineTimeChangedEvent } from './utils/events/timelineTimeChangedEvent';
 import { TimelineSelectedEvent } from './utils/events/timelineSelectedEvent';
-import { TimelineDraggableData, TimelineElementDragState } from './utils/timelineDraggableData';
+import { TimelineScrollEvent } from './utils/events/timelineScrollEvent';
 import { TimelineClickEvent } from './utils/events/timelineClickEvent';
 import { TimelineDragEvent } from './utils/events/timelineDragEvent';
+import { TimelineInteractionMode } from './enums/timelineInteractionMode';
 import { TimelineEventSource } from './enums/timelineEventSource';
-import { TimelineTimeChangedEvent } from './utils/events/timelineTimeChangedEvent';
 import { TimelineSelectionMode } from './enums/timelineSelectionMode';
-import { TimelineSelectionResults } from './utils/timelineSelectionResults';
-import { TimelineMouseData } from './utils/timelineMouseData';
-import { TimelineKeyframeChangedEvent } from './utils/events/timelineKeyframeChangedEvent';
 export declare class Timeline extends TimelineEventsEmitter {
     /**
      * component container.
@@ -353,7 +356,7 @@ export declare class Timeline extends TimelineEventsEmitter {
     /**
      * Merge options with the defaults.
      */
-    _mergeOptions(from: TimelineOptions): TimelineOptions;
+    _mergeOptions(fromArg: TimelineOptions): TimelineOptions;
     /**
      * Subscribe on time changed.
      */

lib/timelineEventsEmitter.d.ts

@@ -1,14 +1,14 @@
 interface Event {
     topic: string;
-    callback: Function;
+    callback: (args: any) => void;
 }
 export declare class TimelineEventsEmitter {
     protected _subscriptions: Array<Event>;
-    on(topic: string, callback: Function): void;
+    on(topic: string, callback: (args: any) => void): void;
     /**
      * Remove an event from the subscriptions list.
      */
-    off(topic: string, callback: Function): void;
+    off(topic: string, callback: (args: any) => void): void;
     /**
      * Unsubscribe all
      */

lib/timelineEventsEmitter.js.map

@@ -1 +1 @@
-{"version":3,"file":"timelineEventsEmitter.js","sourceRoot":"","sources":["../src/timelineEventsEmitter.ts"],"names":[],"mappings":";;;AAKA;IAAA;QACY,mBAAc,GAAiB,EAAE,CAAC;IAsC9C,CAAC;IApCC,YAAY;IACZ,kCAAE,GAAF,UAAG,KAAa,EAAE,QAAkB;QAClC,IAAI,CAAC,QAAQ,EAAE;YACb,OAAO;SACR;QAED,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;YACvB,KAAK,EAAE,KAAK;YACZ,QAAQ,EAAE,QAAQ;SACnB,CAAC,CAAC;IACL,CAAC;IACD;;OAEG;IACH,mCAAG,GAAH,UAAI,KAAa,EAAE,QAAkB;QACnC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,UAAC,KAAK;YACrD,OAAO,KAAK,IAAI,KAAK,CAAC,QAAQ,IAAI,QAAQ,IAAI,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC;QACrE,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;OAEG;IACH,sCAAM,GAAN;QACE,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC;IACjC,CAAC;IAED,cAAc;IACd,8DAA8D;IAC9D,oCAAI,GAAJ,UAAK,KAAa,EAAE,IAAS;QAC3B,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,UAAC,KAAK;YAChC,IAAI,KAAK,IAAI,KAAK,CAAC,KAAK,IAAI,KAAK,IAAI,KAAK,CAAC,QAAQ,EAAE;gBACnD,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;aACtB;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IACH,4BAAC;AAAD,CAAC,AAvCD,IAuCC;AAvCY,sDAAqB"}
+{"version":3,"file":"timelineEventsEmitter.js","sourceRoot":"","sources":["../src/timelineEventsEmitter.ts"],"names":[],"mappings":";;;AAMA;IAAA;QACY,mBAAc,GAAiB,EAAE,CAAC;IAsC9C,CAAC;IApCC,YAAY;IACZ,kCAAE,GAAF,UAAG,KAAa,EAAE,QAA6B;QAC7C,IAAI,CAAC,QAAQ,EAAE;YACb,OAAO;SACR;QAED,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;YACvB,KAAK,EAAE,KAAK;YACZ,QAAQ,EAAE,QAAQ;SACnB,CAAC,CAAC;IACL,CAAC;IACD;;OAEG;IACH,mCAAG,GAAH,UAAI,KAAa,EAAE,QAA6B;QAC9C,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,UAAC,KAAK;YACrD,OAAO,KAAK,IAAI,KAAK,CAAC,QAAQ,IAAI,QAAQ,IAAI,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC;QACrE,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;OAEG;IACH,sCAAM,GAAN;QACE,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC;IACjC,CAAC;IAED,cAAc;IACd,8DAA8D;IAC9D,oCAAI,GAAJ,UAAK,KAAa,EAAE,IAAS;QAC3B,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,UAAC,KAAK;YAChC,IAAI,KAAK,IAAI,KAAK,CAAC,KAAK,IAAI,KAAK,IAAI,KAAK,CAAC,QAAQ,EAAE;gBACnD,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;aACtB;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IACH,4BAAC;AAAD,CAAC,AAvCD,IAuCC;AAvCY,sDAAqB"}

lib/utils/TimelineElementDragState.d.ts

@@ -0,0 +1,11 @@
+import { TimelineElement } from './timelineElement';
+export interface TimelineElementDragState extends TimelineElement {
+    /**
+     * Drag started value.
+     */
+    startedVal: number;
+    /**
+     * Value before change.
+     */
+    prevVal: number;
+}

lib/utils/TimelineElementDragState.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=TimelineElementDragState.js.map

lib/utils/TimelineElementDragState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimelineElementDragState.js","sourceRoot":"","sources":["../../src/utils/TimelineElementDragState.ts"],"names":[],"mappings":""}

lib/utils/events/timelineClickEvent.js.map

@@ -1 +1 @@
-{"version":3,"file":"timelineClickEvent.js","sourceRoot":"","sources":["../../../src/utils/events/timelineClickEvent.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AACA,yDAAwD;AAGxD;IAAwC,sCAAiB;IAAzD;;IA2BA,CAAC;IAAD,yBAAC;AAAD,CAAC,AA3BD,CAAwC,qCAAiB,GA2BxD;AA3BY,gDAAkB"}
+{"version":3,"file":"timelineClickEvent.js","sourceRoot":"","sources":["../../../src/utils/events/timelineClickEvent.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AACA,yDAAwD;AAGxD;IAAwC,sCAAiB;IAAzD;;IA2BA,CAAC;IAAD,yBAAC;AAAD,CAAC,AA3BD,CAAwC,qCAAiB,GA2BxD;AA3BY,gDAAkB"}

lib/utils/events/timelineDragEvent.d.ts

@@ -1,6 +1,6 @@
 import { TimelineValues } from '../timelineValues';
 import { TimelineBaseEvent } from './timelineBaseEvent';
-import { TimelineElementDragState } from '../timelineDraggableData';
+import { TimelineElementDragState } from '../timelineElementDragState';
 export declare class TimelineDragEvent extends TimelineBaseEvent implements TimelineValues {
     args: MouseEvent;
     /**

lib/utils/events/timelineDragEvent.js.map

@@ -1 +1 @@
-{"version":3,"file":"timelineDragEvent.js","sourceRoot":"","sources":["../../../src/utils/events/timelineDragEvent.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AACA,yDAAwD;AAGxD;IAAuC,qCAAiB;IAAxD;;IAiCA,CAAC;IAAD,wBAAC;AAAD,CAAC,AAjCD,CAAuC,qCAAiB,GAiCvD;AAjCY,8CAAiB"}
+{"version":3,"file":"timelineDragEvent.js","sourceRoot":"","sources":["../../../src/utils/events/timelineDragEvent.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AACA,yDAAwD;AAGxD;IAAuC,qCAAiB;IAAxD;;IAiCA,CAAC;IAAD,wBAAC;AAAD,CAAC,AAjCD,CAAuC,qCAAiB,GAiCvD;AAjCY,8CAAiB"}

lib/utils/events/timelineKeyframeChangedEvent.d.ts

@@ -1,6 +1,6 @@
 import { TimelineBaseEvent } from './timelineBaseEvent';
 import { TimelineElement } from '../timelineElement';
-import { TimelineEventSource } from '../../animation-timeline';
+import { TimelineEventSource } from '../../enums/timelineEventSource';
 export declare class TimelineKeyframeChangedEvent extends TimelineBaseEvent {
     /**
      * Value to be used.

lib/utils/events/timelineKeyframeChangedEvent.js

@@ -7,6 +7,8 @@ var __extends = (this && this.__extends) || (function () {
         return extendStatics(d, b);
     };
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());

lib/utils/events/timelineKeyframeChangedEvent.js.map

@@ -1 +1 @@
-{"version":3,"file":"timelineKeyframeChangedEvent.js","sourceRoot":"","sources":["../../../src/utils/events/timelineKeyframeChangedEvent.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,yDAAwD;AAIxD;IAAkD,gDAAiB;IAAnE;;IAiBA,CAAC;IAAD,mCAAC;AAAD,CAAC,AAjBD,CAAkD,qCAAiB,GAiBlE;AAjBY,oEAA4B"}
+{"version":3,"file":"timelineKeyframeChangedEvent.js","sourceRoot":"","sources":["../../../src/utils/events/timelineKeyframeChangedEvent.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,yDAAwD;AAIxD;IAAkD,gDAAiB;IAAnE;;IAiBA,CAAC;IAAD,mCAAC;AAAD,CAAC,AAjBD,CAAkD,qCAAiB,GAiBlE;AAjBY,oEAA4B"}

lib/utils/events/timelineKeyframeTimeChangedEvent.d.ts

@@ -1,17 +0,0 @@
-import { TimelineBaseEvent } from './timelineBaseEvent';
-import { TimelineElement } from '../timelineElement';
-import { TimelineEventSource } from '../../animation-timeline';
-export declare class TimelineKeyframeChangedEvent extends TimelineBaseEvent {
-    /**
-     * Value to be used.
-     */
-    val: number;
-    /**
-     * Target element
-     */
-    target: TimelineElement;
-    /**
-     * Event source.
-     */
-    source: TimelineEventSource;
-}

lib/utils/events/timelineKeyframeTimeChangedEvent.js

@@ -1,26 +0,0 @@
-"use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineKeyframeChangedEvent = void 0;
-var timelineBaseEvent_1 = require("./timelineBaseEvent");
-var TimelineKeyframeChangedEvent = /** @class */ (function (_super) {
-    __extends(TimelineKeyframeChangedEvent, _super);
-    function TimelineKeyframeChangedEvent() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    return TimelineKeyframeChangedEvent;
-}(timelineBaseEvent_1.TimelineBaseEvent));
-exports.TimelineKeyframeChangedEvent = TimelineKeyframeChangedEvent;
-//# sourceMappingURL=timelineKeyframeChangedEvent.js.map

lib/utils/events/timelineKeyframeTimeChangedEvent.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"timelineKeyframeChangedEvent.js","sourceRoot":"","sources":["../../../src/utils/events/timelineKeyframeChangedEvent.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,yDAAwD;AAIxD;IAAsD,oDAAiB;IAAvE;;IAaA,CAAC;IAAD,uCAAC;AAAD,CAAC,AAbD,CAAsD,qCAAiB,GAatE;AAbY,4EAAgC"}

lib/utils/events/timelineSelectedEvent.js.map

@@ -1 +1 @@
-{"version":3,"file":"timelineSelectedEvent.js","sourceRoot":"","sources":["../../../src/utils/events/timelineSelectedEvent.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AACA,yDAAwD;AAExD;IAA2C,yCAAiB;IAA5D;QAAA,qEAGC;QAFC,cAAQ,GAA4B,EAAE,CAAC;QACvC,aAAO,GAA4B,EAAE,CAAC;;IACxC,CAAC;IAAD,4BAAC;AAAD,CAAC,AAHD,CAA2C,qCAAiB,GAG3D;AAHY,sDAAqB"}
+{"version":3,"file":"timelineSelectedEvent.js","sourceRoot":"","sources":["../../../src/utils/events/timelineSelectedEvent.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AACA,yDAAwD;AAExD;IAA2C,yCAAiB;IAA5D;QAAA,qEAGC;QAFC,cAAQ,GAA4B,EAAE,CAAC;QACvC,aAAO,GAA4B,EAAE,CAAC;;IACxC,CAAC;IAAD,4BAAC;AAAD,CAAC,AAHD,CAA2C,qCAAiB,GAG3D;AAHY,sDAAqB"}

lib/utils/events/timelineTimeChangedEvent.js.map

@@ -1 +1 @@
-{"version":3,"file":"timelineTimeChangedEvent.js","sourceRoot":"","sources":["../../../src/utils/events/timelineTimeChangedEvent.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,yDAAwD;AACxD,uEAAsE;AAEtE;IAA8C,4CAAiB;IAA/D;QAAA,qEAUC;QATC;;WAEG;QACH,SAAG,GAAG,CAAC,CAAC;QACR;;WAEG;QACH,aAAO,GAAG,CAAC,CAAC;QACZ,YAAM,GAAwB,yCAAmB,CAAC,IAAI,CAAC;;IACzD,CAAC;IAAD,+BAAC;AAAD,CAAC,AAVD,CAA8C,qCAAiB,GAU9D;AAVY,4DAAwB"}
+{"version":3,"file":"timelineTimeChangedEvent.js","sourceRoot":"","sources":["../../../src/utils/events/timelineTimeChangedEvent.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,yDAAwD;AACxD,uEAAsE;AAEtE;IAA8C,4CAAiB;IAA/D;QAAA,qEAUC;QATC;;WAEG;QACH,SAAG,GAAG,CAAC,CAAC;QACR;;WAEG;QACH,aAAO,GAAG,CAAC,CAAC;QACZ,YAAM,GAAwB,yCAAmB,CAAC,IAAI,CAAC;;IACzD,CAAC;IAAD,+BAAC;AAAD,CAAC,AAVD,CAA8C,qCAAiB,GAU9D;AAVY,4DAAwB"}

lib/utils/timelineCalculated.d.ts

@@ -0,0 +1,12 @@
+import { TimelineRanged } from '../timelineRanged';
+import { TimelineCalculatedKeyframe } from './timelineCalculatedKeyframe';
+export interface TimelineCalculated extends TimelineRanged {
+    /**
+     * Screen coordinates of the element.
+     */
+    size: DOMRect;
+    /**
+     * model keyframes.
+     */
+    keyframes: Array<TimelineCalculatedKeyframe>;
+}

lib/utils/timelineCalculated.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=timelineCalculated.js.map

lib/utils/timelineCalculated.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timelineCalculated.js","sourceRoot":"","sources":["../../src/utils/timelineCalculated.ts"],"names":[],"mappings":""}

lib/utils/timelineCalculatedGroup.d.ts

@@ -0,0 +1,12 @@
+import { TimelineCalculated } from './timelineCalculated';
+import { TimelineCalculatedKeyframe } from './timelineCalculatedKeyframe';
+export interface TimelineCalculatedGroup extends TimelineCalculated {
+    /**
+     * related group.
+     */
+    group: unknown;
+    /**
+     * Grouped keyframes.
+     */
+    keyframes: Array<TimelineCalculatedKeyframe>;
+}

lib/utils/timelineCalculatedGroup.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=timelineCalculatedGroup.js.map

lib/utils/timelineCalculatedGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timelineCalculatedGroup.js","sourceRoot":"","sources":["../../src/utils/timelineCalculatedGroup.ts"],"names":[],"mappings":""}

lib/utils/timelineCalculatedKeyframe.d.ts

@@ -0,0 +1,9 @@
+import { TimelineKeyframe } from '../timelineKeyframe';
+import { TimelineCalculatedGroup } from './timelineCalculatedGroup';
+import { TimelineCalculatedRow } from './timelineCalculatedRow';
+export interface TimelineCalculatedKeyframe {
+    size: DOMRect;
+    model: TimelineKeyframe;
+    parentRow: TimelineCalculatedRow;
+    parentGroup: TimelineCalculatedGroup;
+}

lib/utils/timelineCalculatedKeyframe.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=timelineCalculatedKeyframe.js.map

lib/utils/timelineCalculatedKeyframe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timelineCalculatedKeyframe.js","sourceRoot":"","sources":["../../src/utils/timelineCalculatedKeyframe.ts"],"names":[],"mappings":""}

lib/utils/timelineCalculatedRow.d.ts

@@ -0,0 +1,26 @@
+import { TimelineRow } from '../timelineRow';
+import { TimelineCalculated } from './timelineCalculated';
+import { TimelineCalculatedGroup } from './timelineCalculatedGroup';
+import { TimelineCalculatedKeyframe } from './timelineCalculatedKeyframe';
+export interface TimelineCalculatedRow extends TimelineCalculated {
+    /**
+     * Related row model.
+     */
+    model: TimelineRow;
+    /**
+     * Current row index.
+     */
+    index: number;
+    /**
+     * Row margin bottom
+     */
+    marginBottom: number;
+    /**
+     * Collection of the keyframes groups exists in a current row.
+     */
+    groups: Array<TimelineCalculatedGroup>;
+    /**
+     * All row keyframes
+     */
+    keyframes: Array<TimelineCalculatedKeyframe>;
+}

lib/utils/timelineCalculatedRow.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=timelineCalculatedRow.js.map

lib/utils/timelineCalculatedRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timelineCalculatedRow.js","sourceRoot":"","sources":["../../src/utils/timelineCalculatedRow.ts"],"names":[],"mappings":""}

lib/utils/timelineDraggableData.d.ts

@@ -1,6 +1,6 @@
-import { TimelineElement } from './timelineElement';
 import { TimelineElementType } from '../enums/timelineElementType';
 import { TimelineValues } from './timelineValues';
+import { TimelineElementDragState } from './timelineElementDragState';
 export interface TimelineDraggableData extends TimelineValues {
     changed: boolean;
     /**
@@ -20,13 +20,3 @@ export interface TimelineDraggableData extends TimelineValues {
      */
     prevVal: number;
 }
-export interface TimelineElementDragState extends TimelineElement {
-    /**
-     * Drag started value.
-     */
-    startedVal: number;
-    /**
-     * Value before change.
-     */
-    prevVal: number;
-}

lib/utils/timelineModelCalcResults.d.ts

@@ -1,57 +1,8 @@
-import { TimelineRow } from '../timelineRow';
-import { TimelineKeyframe } from '../timelineKeyframe';
-import { TimelineRanged } from '../timelineRanged';
-export interface TimelineCalculated extends TimelineRanged {
-    /**
-     * Screen coordinates of the element.
-     */
-    size: DOMRect;
-    /**
-     * model keyframes.
-     */
-    keyframes: Array<TimelineCalculatedKeyframe>;
-}
+import { TimelineCalculated } from './timelineCalculated';
+import { TimelineCalculatedRow } from './timelineCalculatedRow';
 export interface TimelineModelCalcResults extends TimelineCalculated {
     /**
      * Collection of the rows sizes.
      */
     rows: Array<TimelineCalculatedRow>;
 }
-export interface TimelineCalculatedGroup extends TimelineCalculated {
-    /**
-     * related group.
-     */
-    group: any;
-    /**
-     * Grouped keyframes.
-     */
-    keyframes: Array<TimelineCalculatedKeyframe>;
-}
-export interface TimelineCalculatedKeyframe {
-    size: DOMRect;
-    model: TimelineKeyframe;
-    parentRow: TimelineCalculatedRow;
-    parentGroup: TimelineCalculatedGroup;
-}
-export interface TimelineCalculatedRow extends TimelineCalculated {
-    /**
-     * Related row model.
-     */
-    model: TimelineRow;
-    /**
-     * Current row index.
-     */
-    index: number;
-    /**
-     * Row margin bottom
-     */
-    marginBottom: number;
-    /**
-     * Collection of the keyframes groups exists in a current row.
-     */
-    groups: Array<TimelineCalculatedGroup>;
-    /**
-     * All row keyframes
-     */
-    keyframes: Array<TimelineCalculatedKeyframe>;
-}

package.json

@@ -1,36 +1,47 @@
 {
   "name": "animation-timeline-js",
-  "version": "2.1.7",
+  "version": "2.2.0",
   "description": "animation timeline control based on the canvas.",
   "main": "lib/animation-timeline.min.js",
   "types": "lib/animation-timeline.d.ts",
-  "dependencies": {},
   "devDependencies": {
-    "@babel/cli": "7.12.10",
-    "@babel/core": "7.12.10",
-    "@babel/plugin-proposal-class-properties": "7.12.1",
-    "@babel/preset-env": "7.12.10",
-    "@babel/preset-typescript": "7.12.7",
-    "@types/chai": "4.2.14",
-    "@types/mocha": "8.2.0",
-    "@typescript-eslint/eslint-plugin": "4.10.0",
-    "@typescript-eslint/parser": "4.10.0",
-    "babel-loader": "8.2.2",
-    "eslint": "7.15.0",
-    "eslint-config-prettier": "7.0.0",
-    "eslint-plugin-prettier": "3.3.0",
-    "prettier": "2.2.1",
-    "ts-loader": "8.0.12",
-    "typescript": "4.1.3",
-    "webpack": "5.10.1",
-    "webpack-cli": "4.2.0"
+    "@babel/cli": "7.16.0",
+    "@babel/core": "7.16.5",
+    "@babel/plugin-proposal-class-properties": "7.16.5",
+    "@babel/preset-env": "7.16.5",
+    "@babel/preset-typescript": "7.16.5",
+    "@open-wc/testing": "^3.0.3",
+    "@open-wc/testing-karma": "^4.0.9",
+    "@types/chai": "4.3.0",
+    "@types/mocha": "9.0.0",
+    "@typescript-eslint/eslint-plugin": "5.8.1",
+    "@typescript-eslint/parser": "5.8.1",
+    "@web/test-runner": "^0.13.23",
+    "babel-loader": "8.2.3",
+    "chai": "^4.3.4",
+    "deepmerge": "^4.2.2",
+    "eslint": "8.5.0",
+    "eslint-config-prettier": "8.3.0",
+    "eslint-plugin-prettier": "4.0.0",
+    "karma": "^6.3.9",
+    "mocha": "^9.1.3",
+    "prettier": "2.5.1",
+    "ts-loader": "9.2.6",
+    "typescript": "4.5.4",
+    "webpack": "5.65.0",
+    "webpack-cli": "4.9.1"
   },
   "scripts": {
-    "test": "echo \"Run tests/unittest.html explicitly to execute tests\" && exit 1",
+    "test": "echo \"Build project and open tests/unittest.html explicitly in browser to execute tests\" && exit 1",
+    "test-web":"test": "wtr tests/**/*.test.js --node-resolve",
     "build-typescript-definitions": "tsc -emitDeclarationOnly",
-    "build": "tsc && webpack && npm run build-tests",
+    "build-ts-defs": "npm run build-typescript-definitions",
+    "build": "tsc && webpack && npm run build-ts-defs && npm run build-tests",
     "webpack": "npm run build",
-    "build-tests": "tsc -p tsconfig.tests.json"
+    "build-tests": "tsc -p tsconfig.tests.json",
+    "prettier-fix": "prettier --write src/**/*.{ts,js,css,scss,html}",
+    "prettier": "prettier --check src/**/*.{ts,js,css,scss,html}",
+    "lint": "eslint src"
   },
   "repository": {
     "type": "git",

src/animation-timeline.ts

@@ -1,60 +1,55 @@
 // bundle entry point
 
-export { Timeline } from './timeline';
-export { TimelineModel } from './timelineModel';
-export { TimelineRow } from './timelineRow';
-export { TimelineKeyframe } from './timelineKeyframe';
-export { TimelineEventsEmitter } from './timelineEventsEmitter';
-export { TimelineConsts } from './settings/timelineConsts';
-export { TimelineRanged } from './timelineRanged';
+export * from './timeline';
+export * from './timelineModel';
+export * from './timelineRow';
+export * from './timelineKeyframe';
+export * from './timelineEventsEmitter';
+export * from './settings/timelineConsts';
+export * from './timelineRanged';
 
 // @public styles
-export { TimelineOptions } from './settings/timelineOptions';
-export { TimelineKeyframeStyle } from './settings/styles/timelineKeyframeStyle';
-export { TimelineRowStyle } from './settings/styles/timelineRowStyle';
-export { TimelineStyle } from './settings/styles/timelineStyle';
+export * from './settings/timelineOptions';
+export * from './settings/styles/timelineKeyframeStyle';
+export * from './settings/styles/timelineRowStyle';
+export * from './settings/styles/timelineStyle';
 
-export { TimelineStyleUtils } from './utils/timelineStyleUtils';
-export { TimelineUtils } from './utils/timelineUtils';
-export { TimelineElement } from './utils/timelineElement';
+export * from './utils/timelineStyleUtils';
+export * from './utils/timelineUtils';
+export * from './utils/timelineElement';
 
 // @private helper containers.
-export { Selectable } from './utils/selectable';
-export { TimelineCutBoundsRectResults } from './utils/timelineCutBoundsRectResults';
-export { TimelineSelectionResults } from './utils/timelineSelectionResults';
-export { TimelineValues } from './utils/timelineValues';
-export { TimelineMouseData } from './utils/timelineMouseData';
-export { TimelineElementDragState } from './utils/timelineDraggableData';
-export { TimelineDraggableData } from './utils/timelineDraggableData';
+export * from './utils/selectable';
+export * from './utils/timelineCutBoundsRectResults';
+export * from './utils/timelineSelectionResults';
+export * from './utils/timelineValues';
+export * from './utils/timelineMouseData';
+export * from './utils/timelineElementDragState';
+export * from './utils/timelineDraggableData';
 
 // @private virtual model
-export { TimelineModelCalcResults } from './utils/timelineModelCalcResults';
-export { TimelineCalculatedRow } from './utils/timelineModelCalcResults';
-export { TimelineCalculatedGroup } from './utils/timelineModelCalcResults';
-export { TimelineCalculated } from './utils/timelineModelCalcResults';
-export { TimelineCalculatedKeyframe } from './utils/timelineModelCalcResults';
+export * from './utils/timelineModelCalcResults';
+export * from './utils/timelineCalculatedRow';
+export * from './utils/timelineCalculatedGroup';
+export * from './utils/timelineCalculated';
+export * from './utils/timelineCalculatedKeyframe';
 
 // @public events
-export { TimelineKeyframeChangedEvent } from './utils/events/timelineKeyframeChangedEvent';
-export { TimelineTimeChangedEvent } from './utils/events/timelineTimeChangedEvent';
-export { TimelineSelectedEvent } from './utils/events/timelineSelectedEvent';
-export { TimelineScrollEvent } from './utils/events/timelineScrollEvent';
-export { TimelineClickEvent } from './utils/events/timelineClickEvent';
-export { TimelineDragEvent } from './utils/events/timelineDragEvent';
-export { TimelineEvents } from './enums/timelineEvents';
+export * from './utils/events/timelineKeyframeChangedEvent';
+export * from './utils/events/timelineTimeChangedEvent';
+export * from './utils/events/timelineSelectedEvent';
+export * from './utils/events/timelineScrollEvent';
+export * from './utils/events/timelineClickEvent';
+export * from './utils/events/timelineDragEvent';
 
 // @public enums
-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 { TimelineEventSource } from './enums/timelineEventSource';
-export { TimelineSelectionMode } from './enums/timelineSelectionMode';
-
+export * from './enums/timelineKeyframeShape';
+export * from './enums/timelineInteractionMode';
+export * from './enums/timelineElementType';
+export * from './enums/timelineCursorType';
+export * from './enums/timelineCapShape';
+export * from './enums/timelineEventSource';
+export * from './enums/timelineSelectionMode';
+export * from './enums/timelineEvents';
 // @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';
+export * from './settings/defaults';

src/timeline.ts

@@ -1,34 +1,52 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { TimelineEventsEmitter } from './timelineEventsEmitter';
-import { TimelineUtils } from './utils/timelineUtils';
-import { TimelineOptions } from './settings/timelineOptions';
-import { TimelineConsts } from './settings/timelineConsts';
-import { TimelineKeyframe } from './timelineKeyframe';
+// bundle entry point
+
 import { TimelineModel } from './timelineModel';
-import { TimelineElement } from './utils/timelineElement';
 import { TimelineRow } from './timelineRow';
-import { TimelineCursorType } from './enums/timelineCursorType';
-import { TimelineKeyframeShape } from './enums/timelineKeyframeShape';
+import { TimelineKeyframe } from './timelineKeyframe';
+import { TimelineEventsEmitter } from './timelineEventsEmitter';
+import { TimelineConsts } from './settings/timelineConsts';
+import { TimelineRanged } from './timelineRanged';
+
+// @public styles
+import { TimelineOptions } from './settings/timelineOptions';
+
 import { TimelineStyleUtils } from './utils/timelineStyleUtils';
-import { TimelineElementType } from './enums/timelineElementType';
-import { TimelineEvents } from './enums/timelineEvents';
+import { TimelineUtils } from './utils/timelineUtils';
+import { TimelineElement } from './utils/timelineElement';
+
+// @private helper containers.
 import { TimelineCutBoundsRectResults } from './utils/timelineCutBoundsRectResults';
-import { TimelineCapShape } from './enums/timelineCapShape';
-import { TimelineCalculatedRow, TimelineModelCalcResults, TimelineCalculatedGroup, TimelineCalculatedKeyframe } from './utils/timelineModelCalcResults';
-import { TimelineInteractionMode } from './enums/timelineInteractionMode';
-import { TimelineScrollEvent } from './utils/events/timelineScrollEvent';
+import { TimelineSelectionResults } from './utils/timelineSelectionResults';
+import { TimelineMouseData } from './utils/timelineMouseData';
+import { TimelineElementDragState } from './utils/TimelineElementDragState';
+import { TimelineDraggableData } from './utils/timelineDraggableData';
+
+// @private virtual model
+import { TimelineModelCalcResults } from './utils/timelineModelCalcResults';
+import { TimelineCalculatedRow } from './utils/timelineCalculatedRow';
+import { TimelineCalculatedGroup } from './utils/timelineCalculatedGroup';
+import { TimelineCalculatedKeyframe } from './utils/timelineCalculatedKeyframe';
+
+// @public events
+import { TimelineKeyframeChangedEvent } from './utils/events/timelineKeyframeChangedEvent';
+import { TimelineTimeChangedEvent } from './utils/events/timelineTimeChangedEvent';
 import { TimelineSelectedEvent } from './utils/events/timelineSelectedEvent';
-import { TimelineDraggableData, TimelineElementDragState } from './utils/timelineDraggableData';
+import { TimelineScrollEvent } from './utils/events/timelineScrollEvent';
 import { TimelineClickEvent } from './utils/events/timelineClickEvent';
 import { TimelineDragEvent } from './utils/events/timelineDragEvent';
-import { defaultTimelineConsts, defaultTimelineOptions } from './settings/defaults';
+
+// @public enums
+import { TimelineKeyframeShape } from './enums/timelineKeyframeShape';
+import { TimelineInteractionMode } from './enums/timelineInteractionMode';
+import { TimelineElementType } from './enums/timelineElementType';
+import { TimelineCursorType } from './enums/timelineCursorType';
+import { TimelineCapShape } from './enums/timelineCapShape';
 import { TimelineEventSource } from './enums/timelineEventSource';
-import { TimelineTimeChangedEvent } from './utils/events/timelineTimeChangedEvent';
 import { TimelineSelectionMode } from './enums/timelineSelectionMode';
-import { TimelineSelectionResults } from './utils/timelineSelectionResults';
-import { TimelineRanged } from './timelineRanged';
-import { TimelineMouseData } from './utils/timelineMouseData';
-import { TimelineKeyframeChangedEvent } from './utils/events/timelineKeyframeChangedEvent';
+import { TimelineEvents } from './enums/timelineEvents';
+// @private defaults are exposed:
+import { defaultTimelineOptions, defaultTimelineConsts } from './settings/defaults';
 
 export class Timeline extends TimelineEventsEmitter {
   /**
@@ -1615,13 +1633,12 @@ export class Timeline extends TimelineEventsEmitter {
     }
     if (height > 0) {
       if (!isNaN(val)) {
-        const toReturn = {
+        return {
           x: Math.floor(this._toScreenPx(val)), // local
           y: Math.floor(y),
           height: height,
           width: width,
         } as DOMRect;
-        return toReturn;
       }
     }
 
@@ -1663,8 +1680,14 @@ export class Timeline extends TimelineEventsEmitter {
 
         const keyframeColor = keyframe.selected ? TimelineStyleUtils.keyframeSelectedFillColor(keyframe, row, this._options) : TimelineStyleUtils.keyframeFillColor(keyframe, row, this._options);
         const border = TimelineStyleUtils.keyframeStrokeThickness(keyframe, row, this._options);
-        const strokeColor =
-          border > 0 ? (keyframe.selected ? TimelineStyleUtils.keyframeSelectedStrokeColor(keyframe, row, this._options) : TimelineStyleUtils.keyframeStrokeColor(keyframe, row, this._options)) : '';
+        let strokeColor = '';
+        if (border > 0) {
+          if (keyframe.selected) {
+            strokeColor = TimelineStyleUtils.keyframeSelectedStrokeColor(keyframe, row, this._options);
+          } else {
+            strokeColor = TimelineStyleUtils.keyframeStrokeColor(keyframe, row, this._options);
+          }
+        }
 
         if (shape == TimelineKeyframeShape.Rhomb) {
           this._ctx.beginPath();
@@ -1707,7 +1730,6 @@ export class Timeline extends TimelineEventsEmitter {
 
         this._ctx.restore();
       }
-      return;
     });
   }
 
@@ -2130,8 +2152,7 @@ export class Timeline extends TimelineEventsEmitter {
       }
       return true;
     });
-
-    const sorted = filteredElements.sort((a, b): number => {
+    const sortDraggable = (a: TimelineElement, b: TimelineElement): number => {
       let prioA = getPriority(a.type);
       let prioB = getPriority(b.type);
       if (prioA === prioB) {
@@ -2149,7 +2170,8 @@ export class Timeline extends TimelineEventsEmitter {
       }
 
       return prioA < prioB ? 1 : -1;
-    });
+    };
+    const sorted = filteredElements.sort(sortDraggable);
     if (sorted.length > 0) {
       return sorted[sorted.length - 1];
     }
@@ -2233,7 +2255,6 @@ export class Timeline extends TimelineEventsEmitter {
             } as TimelineElement);
           }
         }
-        return;
       });
     }
     return toReturn;
@@ -2242,11 +2263,11 @@ export class Timeline extends TimelineEventsEmitter {
   /**
    * Merge options with the defaults.
    */
-  _mergeOptions(from: TimelineOptions): TimelineOptions {
-    from = from || ({} as TimelineOptions);
+  _mergeOptions(fromArg: TimelineOptions): TimelineOptions {
+    fromArg = fromArg || ({} as TimelineOptions);
     // Apply incoming options to default. (override default)
     // Deep clone default options:
-    const to = JSON.parse(JSON.stringify(defaultTimelineOptions));
+    const toArg = 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 => {
@@ -2271,8 +2292,8 @@ export class Timeline extends TimelineEventsEmitter {
       }
     };
 
-    mergeOptionsDeep(to, from);
-    return to;
+    mergeOptionsDeep(toArg, fromArg);
+    return toArg;
   }
   /**
    * Subscribe on time changed.

src/timelineEventsEmitter.ts

@@ -1,13 +1,14 @@
+/* eslint-disable  @typescript-eslint/no-explicit-any */
 interface Event {
   topic: string;
-  callback: Function;
+  callback: (args: any) => void;
 }
 
 export class TimelineEventsEmitter {
   protected _subscriptions: Array<Event> = [];
 
   // on event.
-  on(topic: string, callback: Function): void {
+  on(topic: string, callback: (args: any) => void): void {
     if (!callback) {
       return;
     }
@@ -20,7 +21,7 @@ export class TimelineEventsEmitter {
   /**
    * Remove an event from the subscriptions list.
    */
-  off(topic: string, callback: Function): void {
+  off(topic: string, callback: (args: any) => void): void {
     this._subscriptions = this._subscriptions.filter((event) => {
       return event && event.callback != callback && event.topic != topic;
     });

src/utils/events/timelineDragEvent.ts

@@ -1,6 +1,6 @@
 import { TimelineValues } from '../timelineValues';
 import { TimelineBaseEvent } from './timelineBaseEvent';
-import { TimelineElementDragState } from '../timelineDraggableData';
+import { TimelineElementDragState } from '../timelineElementDragState';
 
 export class TimelineDragEvent extends TimelineBaseEvent implements TimelineValues {
   args: MouseEvent;

src/utils/events/timelineKeyframeChangedEvent.ts

@@ -1,6 +1,6 @@
 import { TimelineBaseEvent } from './timelineBaseEvent';
 import { TimelineElement } from '../timelineElement';
-import { TimelineEventSource } from '../../animation-timeline';
+import { TimelineEventSource } from '../../enums/timelineEventSource';
 
 export class TimelineKeyframeChangedEvent extends TimelineBaseEvent {
   /**

src/utils/timelineCalculated.ts

@@ -0,0 +1,13 @@
+import { TimelineRanged } from '../timelineRanged';
+import { TimelineCalculatedKeyframe } from './timelineCalculatedKeyframe';
+
+export interface TimelineCalculated extends TimelineRanged {
+  /**
+   * Screen coordinates of the element.
+   */
+  size: DOMRect;
+  /**
+   * model keyframes.
+   */
+  keyframes: Array<TimelineCalculatedKeyframe>;
+}

src/utils/timelineCalculatedGroup.ts

@@ -0,0 +1,15 @@
+/* eslint-disable  @typescript-eslint/no-explicit-any */
+import { TimelineCalculated } from './timelineCalculated';
+import { TimelineCalculatedKeyframe } from './timelineCalculatedKeyframe';
+
+export interface TimelineCalculatedGroup extends TimelineCalculated {
+  /**
+   * related group.
+   */
+  group: unknown;
+
+  /**
+   * Grouped keyframes.
+   */
+  keyframes: Array<TimelineCalculatedKeyframe>;
+}

src/utils/timelineCalculatedKeyframe.ts

@@ -0,0 +1,10 @@
+import { TimelineKeyframe } from '../timelineKeyframe';
+import { TimelineCalculatedGroup } from './timelineCalculatedGroup';
+import { TimelineCalculatedRow } from './timelineCalculatedRow';
+
+export interface TimelineCalculatedKeyframe {
+  size: DOMRect;
+  model: TimelineKeyframe;
+  parentRow: TimelineCalculatedRow;
+  parentGroup: TimelineCalculatedGroup;
+}

src/utils/timelineCalculatedRow.ts

@@ -0,0 +1,28 @@
+import { TimelineRow } from '../timelineRow';
+import { TimelineCalculated } from './timelineCalculated';
+import { TimelineCalculatedGroup } from './timelineCalculatedGroup';
+import { TimelineCalculatedKeyframe } from './timelineCalculatedKeyframe';
+
+export interface TimelineCalculatedRow extends TimelineCalculated {
+  /**
+   * Related row model.
+   */
+  model: TimelineRow;
+  /**
+   * Current row index.
+   */
+  index: number;
+  /**
+   * Row margin bottom
+   */
+  marginBottom: number;
+  /**
+   * Collection of the keyframes groups exists in a current row.
+   */
+  groups: Array<TimelineCalculatedGroup>;
+
+  /**
+   * All row keyframes
+   */
+  keyframes: Array<TimelineCalculatedKeyframe>;
+}

src/utils/timelineDraggableData.ts

@@ -1,6 +1,6 @@
-import { TimelineElement } from './timelineElement';
 import { TimelineElementType } from '../enums/timelineElementType';
 import { TimelineValues } from './timelineValues';
+import { TimelineElementDragState } from './timelineElementDragState';
 
 export interface TimelineDraggableData extends TimelineValues {
   changed: boolean;
@@ -21,14 +21,3 @@ export interface TimelineDraggableData extends TimelineValues {
    */
   prevVal: number;
 }
-
-export interface TimelineElementDragState extends TimelineElement {
-  /**
-   * Drag started value.
-   */
-  startedVal: number;
-  /**
-   * Value before change.
-   */
-  prevVal: number;
-}

src/utils/timelineElementDragState.ts

@@ -0,0 +1,12 @@
+import { TimelineElement } from './timelineElement';
+
+export interface TimelineElementDragState extends TimelineElement {
+  /**
+   * Drag started value.
+   */
+  startedVal: number;
+  /**
+   * Value before change.
+   */
+  prevVal: number;
+}

src/utils/timelineModelCalcResults.ts

@@ -1,60 +1,9 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { TimelineRow } from '../timelineRow';
-import { TimelineKeyframe } from '../timelineKeyframe';
-import { TimelineRanged } from '../timelineRanged';
-export interface TimelineCalculated extends TimelineRanged {
-  /**
-   * Screen coordinates of the element.
-   */
-  size: DOMRect;
-  /**
-   * model keyframes.
-   */
-  keyframes: Array<TimelineCalculatedKeyframe>;
-}
+import { TimelineCalculated } from './timelineCalculated';
+import { TimelineCalculatedRow } from './timelineCalculatedRow';
+
 export interface TimelineModelCalcResults extends TimelineCalculated {
   /**
    * Collection of the rows sizes.
    */
   rows: Array<TimelineCalculatedRow>;
 }
-export interface TimelineCalculatedGroup extends TimelineCalculated {
-  /**
-   * related group.
-   */
-  group: any;
-
-  /**
-   * Grouped keyframes.
-   */
-  keyframes: Array<TimelineCalculatedKeyframe>;
-}
-export interface TimelineCalculatedKeyframe {
-  size: DOMRect;
-  model: TimelineKeyframe;
-  parentRow: TimelineCalculatedRow;
-  parentGroup: TimelineCalculatedGroup;
-}
-export interface TimelineCalculatedRow extends TimelineCalculated {
-  /**
-   * Related row model.
-   */
-  model: TimelineRow;
-  /**
-   * Current row index.
-   */
-  index: number;
-  /**
-   * Row margin bottom
-   */
-  marginBottom: number;
-  /**
-   * Collection of the keyframes groups exists in a current row.
-   */
-  groups: Array<TimelineCalculatedGroup>;
-
-  /**
-   * All row keyframes
-   */
-  keyframes: Array<TimelineCalculatedKeyframe>;
-}

src/utils/timelineUtils.ts

@@ -98,7 +98,7 @@ export class TimelineUtils {
       to.min = fromMin;
     }
 
-    const fromMax = Math.min(from.getMax && from.getMax ? from.getMax() : from.max, from.max);
+    const fromMax = Math.min(from.getMax ? from.getMax() : from.max, from.max);
     const toMax = Math.min(to.getMax ? to.getMax() : to.max, to.max);
     const isFromMaxNumber = TimelineUtils.isNumber(fromMax);
     const isToMaxNumber = TimelineUtils.isNumber(toMax);

tests/styleTests.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { TimelineStyleUtils, TimelineKeyframeShape, TimelineOptions, TimelineRowStyle, TimelineKeyframeStyle } from './../lib/animation-timeline';
+import { TimelineStyleUtils, TimelineKeyframeShape, TimelineOptions, TimelineRowStyle, TimelineKeyframeStyle } from '../lib/animation-timeline';
 
 describe('TimelineStyleUtils', function () {
   describe('Draggable', function () {

tests/timelineTests.ts

@@ -11,7 +11,7 @@ import {
   TimelineRowStyle,
   TimelineElementDragState,
   TimelineKeyframeStyle,
-} from './../lib/animation-timeline';
+} from '../lib/animation-timeline';
 
 describe('Timeline', function () {
   describe('_findDraggable', function () {

tests/unittests.html

@@ -11,6 +11,10 @@
 <body>
     <div>
         <a href="../index.html">Back</a>
+        <p>
+            Build tests first and then tests can be executed here.
+            Results:
+        </p>
     </div>
     <div id="mocha"></div>
 

webpack.config.js

@@ -7,7 +7,7 @@ module.exports = [
     mode: 'production',
     name: 'minimized-prod',
     entry: {
-      'animation-timeline': './src/animation-timeline.ts',
+      'animation-timeline': './src/timeline.ts',
     },
     module: {
       rules: [
@@ -33,7 +33,7 @@ module.exports = [
     mode: 'production',
     name: 'unminimized',
     entry: {
-      'animation-timeline': './src/animation-timeline.ts',
+      'animation-timeline': './src/timeline.ts',
     },
     module: {
       rules: [