Merge branch 'master' into new-version

.vscode/extensions.json

@@ -1,5 +1,4 @@
-{
-  // 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"]
-}
+{
+  "recommendations": ["esbenp.prettier-vscode", "davidanson.vscode-markdownlint", "dbaeumer.vscode-eslint", "streetsidesoftware.code-spell-checker"],
+  "unwantedRecommendations": []
+}

.vscode/launch.json

@@ -1,18 +1,15 @@
 {
-    // Use IntelliSense to learn about possible attributes.
-    // Hover to view descriptions of existing attributes.
-    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-    "version": "0.2.0",
-    "configurations": [
-        {
-            "type": "chrome",
-            "request": "launch",
-            "name": "Launch Chrome against localhost",
-            "url": "http://localhost:5500/index.html",
-            "webRoot": "${workspaceFolder}",
-            "sourceMapPathOverrides": {
-                "*": "${webRoot}/*"
-            }
-        }
-    ]
-}
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "pwa-chrome",
+      "request": "launch",
+      "name": "Launch Debug File",
+      "url": "file:///${workspaceFolder}/index.html",
+      "webRoot": "${workspaceFolder}"
+    }
+  ]
+}

.vscode/settings.json

@@ -1,34 +1,6 @@
 {
-  "cSpell.words": [
-    "NESW",
-    "NWSE",
-    "Unminified",
-    "Unsubsribe",
-    "browserslist",
-    "consts",
-    "corejs",
-    "deepmerge",
-    "devtool",
-    "doubleclick",
-    "downlevel",
-    "dragfinished",
-    "dragstarted",
-    "esnext",
-    "keyframes",
-    "khtml",
-    "minmax",
-    "pixelated",
-    "prio",
-    "scrollbar",
-    "scrollbars",
-    "sourcemap",
-    "timechanged",
-    "tslib",
-    "unittests",
-    "unminimized"
-  ],
   "files.exclude": {
     "**/.git": true, // this is a default value
-    "**/.DS_Store": true, // this is a default value
+    "**/.DS_Store": true // this is a default value
   }
 }

README.md

@@ -2,7 +2,6 @@
 
 [npm](https://www.npmjs.com/package/animation-timeline-js)
 
-
 Animation timeline is a TypeScript, no-dependency, canvas component designed to visualize and manipulate animation keyframes.
 
 Features:
@@ -116,6 +115,7 @@ timeline.setTime(1000);
 ```
 
 Current time can be fetched by a method call or by an event:
+
 ```TypeScript
 let units = timeline.getTime();
 
@@ -157,7 +157,7 @@ run once to install development references:
   npm install
 ```
 
-to pack JavaScript as a bundle:
+Run next command to pack JavaScript as a bundle:
 
 ```bash
   npm run build
@@ -165,12 +165,21 @@ to pack JavaScript as a bundle:
 
 ### Debug
 
-VSCode can be used to debug the component with the next extensions:
+VSCode is used as IDE.
+
+Recommended extensions:
+
+- markdownlint
+- ESLint
+- esbenp.prettier-vscode
+
+Click 'debug start' and ensure that unminified version of the file is used.
 
-- Debugger for Chrome
-- Live HTML PReviewer.
+### Dev Dependencies
 
-Also embedded chrome debugger can be used when demo page is running.
+Component has no production dependencies when built.
+To pack and transpile TypeScript Babel + Webpack is used.
+For the testing mocha and chai, as the assertion library are used.
 
 ### Build Tests
 

cspell.json

@@ -0,0 +1,32 @@
+{
+  "version": "0.1",
+  "words": [
+    "NESW",
+    "NWSE",
+    "Unminified",
+    "Unsubsribe",
+    "browserslist",
+    "consts",
+    "corejs",
+    "deepmerge",
+    "devtool",
+    "doubleclick",
+    "downlevel",
+    "dragfinished",
+    "dragstarted",
+    "esbenp",
+    "esnext",
+    "keyframes",
+    "khtml",
+    "minmax",
+    "pixelated",
+    "prio",
+    "scrollbar",
+    "scrollbars",
+    "sourcemap",
+    "timechanged",
+    "tslib",
+    "unittests",
+    "unminimized"
+  ]
+}

index.html

@@ -1,443 +1,440 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <style>
-    html,
-    body {
-      margin: 0px;
-    }
-
-    .app-container {
-      background-color: #1e1e1e;
-      scrollbar-color: gray #161616;
-      color: #adadad;
-      font-size: 12px;
-      height: 100vh;
-      overflow: hidden;
-      display: flex;
-      flex-direction: column;
-    }
-
-    #timeline {
-      box-sizing: border-box;
-      flex-grow: 8;
-      width: 100%;
-      height: 100%;
-      scrollbar-color: gray #161616;
-    }
-
-    ::-webkit-scrollbar {
-      background: #161616;
-      color: gray;
-    }
-
-    ::-webkit-scrollbar-thumb {
-      background: gray;
-    }
-
-    ::-webkit-scrollbar-corner {
-      background: #161616;
-    }
-
-    main {
-      display: grid;
-      /*grid-template-columns: ;*/
-      height: 100%;
-      width: 100%;
-    }
-
-    .button {
-      padding: 0px;
-      width: 44px;
-      min-width: 44px;
-      margin-right: 5px;
-      color: #adadad;
-      background: transparent;
-      border: none;
-    }
-
-    .button:focus {
-      outline: 0;
-      border: none;
-    }
-
-    .button:hover {
-      background: #201616;
-    }
-
-    .button:focus {
-      border: none;
-    }
-
-    main {
-      flex-grow: 4;
-      height: 0px;
-      display: grid;
-      grid-template-rows: auto minmax(0, 1fr) auto;
-    }
-
-    footer {
-      display: flex;
-      height: 45%;
-      max-height: 70%;
-    }
-
-    .toolbar {
-      background-color: #383838;
-      padding-left: 44px;
-      max-height: 36px;
-      height: 36px;
-      position: relative;
-      overflow: hidden;
-      display: flex;
-      height: 36px;
-      background-color: #3c3c3c;
-    }
-
-    .outline-header {
-      height: 30px;
-    }
-
-    .outline-scroll-container {
-      overflow: hidden;
-    }
-
-    .outline-node {
-      padding-left: 20px;
-      font-size: 12px !important;
-      display: flex;
-      align-items: center;
-      width: 100%;
-      font-family: Roboto, "Helvetica Neue", sans-serif;
-      color: white;
-      user-select: none;
-      height: 30px;
-    }
-
-    .outline-node:hover {
-      background-color: #3399ff
-    }
-
-    .links {
-      display: flex;
-      position: absolute;
-      right: 10px;
-      top: 10px;
-      align-items: center;
-    }
-
-    a {
-      font-family: Roboto, "Helvetica Neue", sans-serif;
-      color: white;
-      margin-right: 30px;
-    }
-
-    .logs {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      height: 100%;
-    }
-
-    .output {
-      height: 100%;
-      width: 100%;
-    }
-
-    .outline {
-      width: 250px;
-      min-width: 150px;
-      overflow: hidden;
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-      align-items: stretch;
-      align-content: stretch;
-    }
-
-    .content {
-      overflow: scroll;
-    }
-  </style>
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block" rel="stylesheet">
-  <script src="./lib/animation-timeline.js" type="text/javascript"></script>
-</head>
-
-<body>
-
-  <div class="app-container">
-
-    <main>
-      <aside>
-      </aside>
-      <div class="content">
-        <div id="currentTime"></div>
-        <div class="logs">
-          <div class="output" id="output1"></div>
-          <div class="output" id="output2"></div>
-        </div>
-
-      </div>
-    </main>
-    <div class="toolbar">
-      <button class="button mat-icon material-icons mat-icon-no-color" onclick="selectMode()">tab_unselected </button>
-      <button class="button mat-icon material-icons mat-icon-no-color" onclick="panMode()">pan_tool</button>
-      <button class="button mat-icon material-icons mat-icon-no-color" onclick="zoomMode()">search</button>
-      <div class="links">
-        <a href="./tests/unittests.html">UnitTests</a>
-        <a class="git-hub-link" href="https://github.com/ievgennaida/animation-timeline-control">GitHub</a>
-      </div>
-    </div>
-    <footer>
-      <div class="outline">
-        <div class="outline-header" id="outline-header">
-        </div>
-        <div class="outline-scroll-container" id="outline-scroll-container" onwheel="outlineMouseWheel(arguments[0])">
-          <div class="outline-items" id="outline-container">
-          </div>
-        </div>
-      </div>
-      <div id="timeline"></div>
-    </footer>
-  </div>
-  <script type="text/javascript">
-
-    var outlineContainer = document.getElementById('outline-container');
-
-    let rows = [
-      {
-        selected: false,
-        draggable: false,
-
-        keyframes: [
-          {
-            val: 40,
-            shape: "rhomb"
-          },
-          {
-            shape: "rhomb",
-            val: 3000,
-            selected: false
-          }
-        ]
-      },
-      {
-        selected: false,
-        hidden: false,
-        keyframes: [
-          {
-            cursor: "default",
-            val: 2000,
-          },
-          {
-            val: 2500
-          },
-          {
-            val: 2600
-          }
-        ],
-      },
-      {
-        hidden: false,
-        keyframes: [
-          {
-            val: 1000
-          },
-          {
-            val: 1500
-          },
-          {
-            val: 2000
-          }
-        ]
-      },
-      {
-        title: 'Groups (Limited)',
-        keyframes: [
-          {
-            val: 40,
-            max: 850,
-            group: 'a'
-          },
-          {
-            val: 800,
-            max: 900,
-            group: 'a'
-          },
-          {
-            min: 1000,
-            max: 3400,
-            val: 1900,
-            group: 'b'
-          },
-          {
-            val: 3000,
-            max: 3500,
-            group: 'b'
-          },
-          {
-            min: 3500,
-            val: 4000,
-            group: 'c'
-          }
-        ]
-      },
-      {
-        keyframes: [
-          {
-            val: 100
-          },
-          {
-            val: 3410
-          },
-          {
-            val: 2000
-          }
-        ]
-      },
-      {
-        title: 'Style Customized',
-        groupHeight: 20,
-        keyframesStyle: {
-          shape: "rect",
-          width: 5,
-          height: 20,
-        },
-        keyframes: [
-          {
-            val: 90
-          },
-          {
-            val: 3000
-          }
-        ]
-      }, {
-
-      }, {
-        title: 'Max Value',
-        max: 4000,
-        keyframes: [,
-          {
-            width: 4,
-            height: 20,
-            group: 'block',
-            shape: "rect",
-            fillColor: 'Red',
-            strokeColor: 'Black',
-            val: 4000,
-            selectable: false,
-            draggable: false
-          },
-          {
-            val: 1500
-          },
-          {
-            val: 2500
-          },
-        ]
-      }, {}, {}, {}, {}, {}, {}, {}
-    ];
-
-    var timeline = new timelineModule.Timeline()
-    timeline.initialize({ id: 'timeline', headerHeight: 45 })
-    timeline.setModel({ rows: rows });
-
-    // Select all elements on key down
-    document.addEventListener('keydown', function (args) {
-      if (args.which === 65 && timeline._controlKeyPressed(args)) {
-        timeline.selectAllKeyframes();
-        args.preventDefault();
-      }
-    });
-    var logMessage = function (message, log = 1) {
-      if (message) {
-        let el = document.getElementById("output" + log);
-        el.innerHTML = message + '<br/>' + el.innerHTML;
-      }
-    }
-
-
-    var logDraggingMessage = function (object, eventName) {
-      if (object.elements) {
-        logMessage('Keyframe value: ' + object.elements[0].val + '. Selected (' + object.elements.length + ').' + eventName);
-      }
-    }
-
-
-    timeline.onTimeChanged(function (event) {
-      document.getElementById("currentTime").innerHTML = event.val + "ms source:" + event.source;
-    });
-    timeline.onSelected(function (obj) {
-      logMessage('selected :' + obj.selected.length + '. changed :' + obj.changed.length, 2);
-    });
-    timeline.onDragStarted(function (obj) {
-      logDraggingMessage(obj, 'dragstarted');
-    });
-    timeline.onDrag(function (obj) {
-      logDraggingMessage(obj, 'drag');
-    });
-    timeline.onKeyframeChanged(function (obj) {
-      console.log('keyframe: ' + obj.val);
-    });
-    timeline.onDragFinished(function (obj) {
-      logDraggingMessage(obj, 'dragfinished');
-    });
-    timeline.onMouseDown(function (obj) {
-      var type = (obj.target ? obj.target.type : '');
-      logMessage('mousedown:' + obj.val + '.  elements:' + type, 2);
-    });
-    timeline.onDoubleClick(function (obj) {
-      var type = (obj.target ? obj.target.type : '');
-      logMessage('doubleclick:' + obj.val + '.  elements:' + type, 2);
-    });
-    timeline.onScroll(function (obj) {
-      var options = timeline.getOptions();
-      if (options) {
-        if (outlineContainer) {
-          outlineContainer.style.minHeight = obj.scrollHeight + 'px';
-          document.getElementById('outline-scroll-container').scrollTop = obj.scrollTop;
-        }
-      }
-    });
-
-    /* generate outline left nodes */
-    var options = timeline.getOptions();
-    var headerElement = document.getElementById('outline-header');
-    headerElement.style.maxHeight = headerElement.style.minHeight = options.headerHeight + 'px';
-    // headerElement.style.backgroundColor = options.headerFillColor;
-
-    rows.forEach(function (obj, index) {
-      var div = document.createElement('div');
-      div.classList.add('outline-node');
-      div.style.maxHeight = div.style.minHeight = options.rowsStyle.height + 'px';
-      div.style.marginBottom = options.rowsStyle.marginBottom + 'px';
-      div.innerText = obj.title || "Track " + index;
-      outlineContainer.appendChild(div);
-    });
-    /*Handle events from html page*/
-    function selectMode() {
-      if (timeline) {
-        timeline.setInteractionMode('selector');
-      }
-    }
-    function zoomMode() {
-      if (timeline) {
-        timeline.setInteractionMode('zoom');
-      }
-    }
-
-    function panMode() {
-      if (timeline) {
-        timeline.setInteractionMode('pan');
-      }
-    }
-    // Set scroll back to timeline when mouse scroll over the outline
-    function outlineMouseWheel(event) {
-      if (timeline) {
-        this.timeline._handleWheelEvent(event);
-      }
-    }
-  </script>
-</body>
-
-</html>
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <title>Animation timeline demo</title>
+    <style>
+      html,
+      body {
+        margin: 0px;
+      }
+
+      .app-container {
+        background-color: #1e1e1e;
+        scrollbar-color: gray #161616;
+        color: #adadad;
+        font-size: 12px;
+        height: 100vh;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+      }
+
+      #timeline {
+        box-sizing: border-box;
+        flex-grow: 8;
+        width: 100%;
+        height: 100%;
+        scrollbar-color: gray #161616;
+      }
+
+      ::-webkit-scrollbar {
+        background: #161616;
+        color: gray;
+      }
+
+      ::-webkit-scrollbar-thumb {
+        background: gray;
+      }
+
+      ::-webkit-scrollbar-corner {
+        background: #161616;
+      }
+
+      main {
+        display: grid;
+        /*grid-template-columns: ;*/
+        height: 100%;
+        width: 100%;
+      }
+
+      .button {
+        padding: 0px;
+        width: 44px;
+        min-width: 44px;
+        margin-right: 5px;
+        color: #adadad;
+        background: transparent;
+        border: none;
+      }
+
+      .button:focus {
+        outline: 0;
+        border: none;
+      }
+
+      .button:hover {
+        background: #201616;
+      }
+
+      .button:focus {
+        border: none;
+      }
+
+      main {
+        flex-grow: 4;
+        height: 0px;
+        display: grid;
+        grid-template-rows: auto minmax(0, 1fr) auto;
+      }
+
+      footer {
+        display: flex;
+        height: 45%;
+        max-height: 70%;
+      }
+
+      .toolbar {
+        background-color: #383838;
+        padding-left: 44px;
+        max-height: 36px;
+        height: 36px;
+        position: relative;
+        overflow: hidden;
+        display: flex;
+        height: 36px;
+        background-color: #3c3c3c;
+      }
+
+      .outline-header {
+        height: 30px;
+      }
+
+      .outline-scroll-container {
+        overflow: hidden;
+      }
+
+      .outline-node {
+        padding-left: 20px;
+        font-size: 12px !important;
+        display: flex;
+        align-items: center;
+        width: 100%;
+        font-family: Roboto, 'Helvetica Neue', sans-serif;
+        color: white;
+        user-select: none;
+        height: 30px;
+      }
+
+      .outline-node:hover {
+        background-color: #3399ff;
+      }
+
+      .links {
+        display: flex;
+        position: absolute;
+        right: 10px;
+        top: 10px;
+        align-items: center;
+      }
+
+      a {
+        font-family: Roboto, 'Helvetica Neue', sans-serif;
+        color: white;
+        margin-right: 30px;
+      }
+
+      .logs {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        height: 100%;
+      }
+
+      .output {
+        height: 100%;
+        width: 100%;
+      }
+
+      .outline {
+        width: 250px;
+        min-width: 150px;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        align-items: stretch;
+        align-content: stretch;
+      }
+
+      .content {
+        overflow: scroll;
+      }
+    </style>
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block" rel="stylesheet" />
+    <script src="./lib/animation-timeline.js" type="text/javascript"></script>
+  </head>
+
+  <body>
+    <div class="app-container">
+      <main>
+        <aside></aside>
+        <div class="content">
+          <div id="currentTime"></div>
+          <div class="logs">
+            <div class="output" id="output1"></div>
+            <div class="output" id="output2"></div>
+          </div>
+        </div>
+      </main>
+      <div class="toolbar">
+        <button class="button mat-icon material-icons mat-icon-no-color" onclick="selectMode()">tab_unselected</button>
+        <button class="button mat-icon material-icons mat-icon-no-color" onclick="panMode()">pan_tool</button>
+        <button class="button mat-icon material-icons mat-icon-no-color" onclick="zoomMode()">search</button>
+        <div class="links">
+          <a class="git-hub-link" href="https://github.com/ievgennaida/animation-timeline-control">GitHub</a>
+        </div>
+      </div>
+      <footer>
+        <div class="outline">
+          <div class="outline-header" id="outline-header"></div>
+          <div class="outline-scroll-container" id="outline-scroll-container" onwheel="outlineMouseWheel(arguments[0])">
+            <div class="outline-items" id="outline-container"></div>
+          </div>
+        </div>
+        <div id="timeline"></div>
+      </footer>
+    </div>
+    <script type="text/javascript">
+      var outlineContainer = document.getElementById('outline-container');
+
+      let rows = [
+        {
+          selected: false,
+          draggable: false,
+
+          keyframes: [
+            {
+              val: 40,
+              shape: 'rhomb',
+            },
+            {
+              shape: 'rhomb',
+              val: 3000,
+              selected: false,
+            },
+          ],
+        },
+        {
+          selected: false,
+          hidden: false,
+          keyframes: [
+            {
+              cursor: 'default',
+              val: 2000,
+            },
+            {
+              val: 2500,
+            },
+            {
+              val: 2600,
+            },
+          ],
+        },
+        {
+          hidden: false,
+          keyframes: [
+            {
+              val: 1000,
+            },
+            {
+              val: 1500,
+            },
+            {
+              val: 2000,
+            },
+          ],
+        },
+        {
+          title: 'Groups (Limited)',
+          keyframes: [
+            {
+              val: 40,
+              max: 850,
+              group: 'a',
+            },
+            {
+              val: 800,
+              max: 900,
+              group: 'a',
+            },
+            {
+              min: 1000,
+              max: 3400,
+              val: 1900,
+              group: 'b',
+            },
+            {
+              val: 3000,
+              max: 3500,
+              group: 'b',
+            },
+            {
+              min: 3500,
+              val: 4000,
+              group: 'c',
+            },
+          ],
+        },
+        {
+          keyframes: [
+            {
+              val: 100,
+            },
+            {
+              val: 3410,
+            },
+            {
+              val: 2000,
+            },
+          ],
+        },
+        {
+          title: 'Style Customized',
+          groupHeight: 20,
+          keyframesStyle: {
+            shape: 'rect',
+            width: 5,
+            height: 20,
+          },
+          keyframes: [
+            {
+              val: 90,
+            },
+            {
+              val: 3000,
+            },
+          ],
+        },
+        {},
+        {
+          title: 'Max Value',
+          max: 4000,
+          keyframes: [
+            ,
+            {
+              width: 4,
+              height: 20,
+              group: 'block',
+              shape: 'rect',
+              fillColor: 'Red',
+              strokeColor: 'Black',
+              val: 4000,
+              selectable: false,
+              draggable: false,
+            },
+            {
+              val: 1500,
+            },
+            {
+              val: 2500,
+            },
+          ],
+        },
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+      ];
+
+      var timeline = new timelineModule.Timeline();
+      timeline.initialize({ id: 'timeline', headerHeight: 45 });
+      timeline.setModel({ rows: rows });
+
+      // Select all elements on key down
+      document.addEventListener('keydown', function (args) {
+        if (args.which === 65 && timeline._controlKeyPressed(args)) {
+          timeline.selectAllKeyframes();
+          args.preventDefault();
+        }
+      });
+      var logMessage = function (message, log = 1) {
+        if (message) {
+          let el = document.getElementById('output' + log);
+          el.innerHTML = message + '<br/>' + el.innerHTML;
+        }
+      };
+
+      var logDraggingMessage = function (object, eventName) {
+        if (object.elements) {
+          logMessage('Keyframe value: ' + object.elements[0].val + '. Selected (' + object.elements.length + ').' + eventName);
+        }
+      };
+
+      timeline.onTimeChanged(function (event) {
+        document.getElementById('currentTime').innerHTML = event.val + 'ms source:' + event.source;
+      });
+      timeline.onSelected(function (obj) {
+        logMessage('selected :' + obj.selected.length + '. changed :' + obj.changed.length, 2);
+      });
+      timeline.onDragStarted(function (obj) {
+        logDraggingMessage(obj, 'dragstarted');
+      });
+      timeline.onDrag(function (obj) {
+        logDraggingMessage(obj, 'drag');
+      });
+      timeline.onKeyframeChanged(function (obj) {
+        console.log('keyframe: ' + obj.val);
+      });
+      timeline.onDragFinished(function (obj) {
+        logDraggingMessage(obj, 'dragfinished');
+      });
+      timeline.onMouseDown(function (obj) {
+        var type = obj.target ? obj.target.type : '';
+        logMessage('mousedown:' + obj.val + '.  elements:' + type, 2);
+      });
+      timeline.onDoubleClick(function (obj) {
+        var type = obj.target ? obj.target.type : '';
+        logMessage('doubleclick:' + obj.val + '.  elements:' + type, 2);
+      });
+      timeline.onScroll(function (obj) {
+        var options = timeline.getOptions();
+        if (options) {
+          if (outlineContainer) {
+            outlineContainer.style.minHeight = obj.scrollHeight + 'px';
+            document.getElementById('outline-scroll-container').scrollTop = obj.scrollTop;
+          }
+        }
+      });
+
+      /* generate outline left nodes */
+      var options = timeline.getOptions();
+      var headerElement = document.getElementById('outline-header');
+      headerElement.style.maxHeight = headerElement.style.minHeight = options.headerHeight + 'px';
+      // headerElement.style.backgroundColor = options.headerFillColor;
+
+      rows.forEach(function (obj, index) {
+        var div = document.createElement('div');
+        div.classList.add('outline-node');
+        div.style.maxHeight = div.style.minHeight = options.rowsStyle.height + 'px';
+        div.style.marginBottom = options.rowsStyle.marginBottom + 'px';
+        div.innerText = obj.title || 'Track ' + index;
+        outlineContainer.appendChild(div);
+      });
+      /*Handle events from html page*/
+      function selectMode() {
+        if (timeline) {
+          timeline.setInteractionMode('selector');
+        }
+      }
+      function zoomMode() {
+        if (timeline) {
+          timeline.setInteractionMode('zoom');
+        }
+      }
+
+      function panMode() {
+        if (timeline) {
+          timeline.setInteractionMode('pan');
+        }
+      }
+      // Set scroll back to timeline when mouse scroll over the outline
+      function outlineMouseWheel(event) {
+        if (timeline) {
+          this.timeline._handleWheelEvent(event);
+        }
+      }
+    </script>
+  </body>
+</html>

lib/animation-timeline.js

@@ -621,7 +621,7 @@ function timelineKeyframeChangedEvent_createClass(Constructor, protoProps, stati
 
 function timelineKeyframeChangedEvent_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } Object.defineProperty(subClass, "prototype", { value: Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }), writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
 
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 
@@ -684,7 +684,7 @@ function timelineTimeChangedEvent_createClass(Constructor, protoProps, staticPro
 
 function timelineTimeChangedEvent_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-function timelineTimeChangedEvent_inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } Object.defineProperty(subClass, "prototype", { value: Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }), writable: false }); if (superClass) timelineTimeChangedEvent_setPrototypeOf(subClass, superClass); }
+function timelineTimeChangedEvent_inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) timelineTimeChangedEvent_setPrototypeOf(subClass, superClass); }
 
 function timelineTimeChangedEvent_setPrototypeOf(o, p) { timelineTimeChangedEvent_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return timelineTimeChangedEvent_setPrototypeOf(o, p); }
 
@@ -738,7 +738,7 @@ function timelineSelectedEvent_createClass(Constructor, protoProps, staticProps)
 
 function timelineSelectedEvent_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-function timelineSelectedEvent_inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } Object.defineProperty(subClass, "prototype", { value: Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }), writable: false }); if (superClass) timelineSelectedEvent_setPrototypeOf(subClass, superClass); }
+function timelineSelectedEvent_inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) timelineSelectedEvent_setPrototypeOf(subClass, superClass); }
 
 function timelineSelectedEvent_setPrototypeOf(o, p) { timelineSelectedEvent_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return timelineSelectedEvent_setPrototypeOf(o, p); }
 
@@ -789,7 +789,7 @@ function timelineClickEvent_createClass(Constructor, protoProps, staticProps) {
 
 function timelineClickEvent_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-function timelineClickEvent_inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } Object.defineProperty(subClass, "prototype", { value: Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }), writable: false }); if (superClass) timelineClickEvent_setPrototypeOf(subClass, superClass); }
+function timelineClickEvent_inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) timelineClickEvent_setPrototypeOf(subClass, superClass); }
 
 function timelineClickEvent_setPrototypeOf(o, p) { timelineClickEvent_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return timelineClickEvent_setPrototypeOf(o, p); }
 
@@ -850,7 +850,7 @@ function timelineDragEvent_createClass(Constructor, protoProps, staticProps) { i
 
 function timelineDragEvent_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-function timelineDragEvent_inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } Object.defineProperty(subClass, "prototype", { value: Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }), writable: false }); if (superClass) timelineDragEvent_setPrototypeOf(subClass, superClass); }
+function timelineDragEvent_inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) timelineDragEvent_setPrototypeOf(subClass, superClass); }
 
 function timelineDragEvent_setPrototypeOf(o, p) { timelineDragEvent_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return timelineDragEvent_setPrototypeOf(o, p); }
 
@@ -1186,7 +1186,7 @@ function timeline_defineProperties(target, props) { for (var i = 0; i < props.le
 
 function timeline_createClass(Constructor, protoProps, staticProps) { if (protoProps) timeline_defineProperties(Constructor.prototype, protoProps); if (staticProps) timeline_defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 
-function timeline_inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } Object.defineProperty(subClass, "prototype", { value: Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }), writable: false }); if (superClass) timeline_setPrototypeOf(subClass, superClass); }
+function timeline_inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) timeline_setPrototypeOf(subClass, superClass); }
 
 function timeline_setPrototypeOf(o, p) { timeline_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return timeline_setPrototypeOf(o, p); }
 
@@ -4190,4 +4190,5 @@ var Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
 /******/ 	return __webpack_exports__;
 /******/ })()
 ;
-});
+});
+//# sourceMappingURL=animation-timeline.js.map

lib/enums/timelineCapShape.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"timelineCapShape.js","sourceRoot":"","sources":["../../src/enums/timelineCapShape.ts"],"names":[],"mappings":";;;AAAA,IAAY,gBAIX;AAJD,WAAY,gBAAgB;IAC1B,iCAAa,CAAA;IACb,yCAAqB,CAAA;IACrB,iCAAa,CAAA;AACf,CAAC,EAJW,gBAAgB,GAAhB,wBAAgB,KAAhB,wBAAgB,QAI3B"}

lib/enums/timelineCursorType.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"timelineCursorType.js","sourceRoot":"","sources":["../../src/enums/timelineCursorType.ts"],"names":[],"mappings":";;;AAAA,IAAY,kBAoCX;AApCD,WAAY,kBAAkB;IAC5B,qCAAe,CAAA;IACf,8CAAwB,CAAA;IACxB,mCAAa,CAAA;IACb,mCAAa,CAAA;IACb,kDAA4B,CAAA;IAC5B,8CAAwB,CAAA;IACxB,mCAAa,CAAA;IACb,6CAAuB,CAAA;IACvB,yCAAmB,CAAA;IACnB,0CAAoB,CAAA;IACpB,4CAAsB,CAAA;IACtB,mCAAa,CAAA;IACb,2CAAqB,CAAA;IACrB,mCAAa,CAAA;IACb,mCAAa,CAAA;IACb,0CAAoB,CAAA;IACpB,4CAAsB,CAAA;IACtB,gDAA0B,CAAA;IAC1B,4CAAsB,CAAA;IACtB,4CAAsB,CAAA;IACtB,gDAA0B,CAAA;IAC1B,wCAAkB,CAAA;IAClB,mCAAa,CAAA;IACb,gDAA0B,CAAA;IAC1B,yCAAmB,CAAA;IACnB,2CAAqB,CAAA;IACrB,8CAAwB,CAAA;IACxB,0CAAoB,CAAA;IACpB,4CAAsB,CAAA;IACtB,4CAAsB,CAAA;IACtB,mCAAa,CAAA;IACb,0CAAoB,CAAA;IACpB,mCAAa,CAAA;IACb,wCAAkB,CAAA;IAClB,0CAAoB,CAAA;AACtB,CAAC,EApCW,kBAAkB,GAAlB,0BAAkB,KAAlB,0BAAkB,QAoC7B"}

lib/enums/timelineElementType.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"timelineElementType.js","sourceRoot":"","sources":["../../src/enums/timelineElementType.ts"],"names":[],"mappings":";;;AAAA,IAAY,mBAiBX;AAjBD,WAAY,mBAAmB;IAC7B;;OAEG;IACH,4CAAqB,CAAA;IACrB;;OAEG;IACH,4CAAqB,CAAA;IACrB;;OAEG;IACH,sCAAe,CAAA;IACf;;OAEG;IACH,kCAAW,CAAA;AACb,CAAC,EAjBW,mBAAmB,GAAnB,2BAAmB,KAAnB,2BAAmB,QAiB9B"}

lib/enums/timelineEventSource.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"timelineEventSource.js","sourceRoot":"","sources":["../../src/enums/timelineEventSource.ts"],"names":[],"mappings":";;;AAAA,IAAY,mBAIX;AAJD,WAAY,mBAAmB;IAC7B,oCAAa,CAAA;IACb,4DAAqC,CAAA;IACrC,sDAA+B,CAAA;AACjC,CAAC,EAJW,mBAAmB,GAAnB,2BAAmB,KAAnB,2BAAmB,QAI9B"}

lib/enums/timelineEvents.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"timelineEvents.js","sourceRoot":"","sources":["../../src/enums/timelineEvents.ts"],"names":[],"mappings":";;;AAAA,IAAY,cAUX;AAVD,WAAY,cAAc;IACxB,uCAAqB,CAAA;IACrB,6CAA2B,CAAA;IAC3B,qDAAmC,CAAA;IACnC,6CAA2B,CAAA;IAC3B,+BAAa,CAAA;IACb,+CAA6B,CAAA;IAC7B,mCAAiB,CAAA;IACjB,6CAA2B,CAAA;IAC3B,yCAAuB,CAAA;AACzB,CAAC,EAVW,cAAc,GAAd,sBAAc,KAAd,sBAAc,QAUzB"}

lib/enums/timelineInteractionMode.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"timelineInteractionMode.js","sourceRoot":"","sources":["../../src/enums/timelineInteractionMode.ts"],"names":[],"mappings":";;;AAAA,IAAY,uBAaX;AAbD,WAAY,uBAAuB;IACjC;;OAEG;IACH,kDAAuB,CAAA;IACvB;;OAEG;IACH,sCAAW,CAAA;IACX;;OAEG;IACH,wCAAa,CAAA;AACf,CAAC,EAbW,uBAAuB,GAAvB,+BAAuB,KAAvB,+BAAuB,QAalC"}

lib/enums/timelineKeyframeShape.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"timelineKeyframeShape.js","sourceRoot":"","sources":["../../src/enums/timelineKeyframeShape.ts"],"names":[],"mappings":";;;AAAA,IAAY,qBAKX;AALD,WAAY,qBAAqB;IAC/B,sCAAa,CAAA;IACb,wCAAe,CAAA;IACf,0CAAiB,CAAA;IACjB,sCAAa,CAAA;AACf,CAAC,EALW,qBAAqB,GAArB,6BAAqB,KAArB,6BAAqB,QAKhC"}

lib/enums/timelineSelectionMode.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"timelineSelectionMode.js","sourceRoot":"","sources":["../../src/enums/timelineSelectionMode.ts"],"names":[],"mappings":";;;AAAA;;GAEG;AACH,IAAY,qBAaX;AAbD,WAAY,qBAAqB;IAC/B;;OAEG;IACH,0CAAiB,CAAA;IACjB;;OAEG;IACH,0CAAiB,CAAA;IACjB;;OAEG;IACH,0CAAiB,CAAA;AACnB,CAAC,EAbW,qBAAqB,GAArB,6BAAqB,KAArB,6BAAqB,QAahC"}

lib/settings/defaults.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"defaults.js","sourceRoot":"","sources":["../../src/settings/defaults.ts"],"names":[],"mappings":";;;AACA,8DAA6D;AAG7D,wEAAuE;AAI1D,QAAA,oBAAoB,GAAG;IAClC,KAAK,EAAE,CAAC;IACR,SAAS,EAAE,EAAE;IACb,QAAQ,EAAE,CAAC;IACX,SAAS,EAAE,EAAE;IACb;;OAEG;IACH,OAAO,EAAE,mCAAgB,CAAC,IAAI;IAC9B,WAAW,EAAE,YAAY;IACzB,SAAS,EAAE,YAAY;CACP,CAAC;AAEN,QAAA,4BAA4B,GAAG;IAC1C;;OAEG;IACH,SAAS,EAAE,YAAY;IACvB,KAAK,EAAE,6CAAqB,CAAC,KAAK;IAClC;;OAEG;IACH,iBAAiB,EAAE,KAAK;IACxB,WAAW,EAAE,OAAO;IACpB,mBAAmB,EAAE,OAAO;IAC5B,eAAe,EAAE,GAAG;IACpB,SAAS,EAAE,IAAI;CACS,CAAC;AAEd,QAAA,uBAAuB,GAAG;IACrC;;OAEG;IACH,MAAM,EAAE,EAAE;IACV,YAAY,EAAE,CAAC;IACf,SAAS,EAAE,SAAS;IACpB;;OAEG;IACH,cAAc,EAAE,SAAS;IACzB,WAAW,EAAE,MAAM;IACnB,cAAc,EAAE,oCAA4B;CACzB,CAAC;AAET,QAAA,sBAAsB,GAAG;IACpC;;OAEG;IACH,sBAAsB,EAAE,KAAK;IAE7B;;OAEG;IACH,WAAW,EAAE,IAAI;IAEjB,aAAa,EAAE,4BAAoB;IACnC;;OAEG;IACH,MAAM,EAAE,GAAG;IACX;;OAEG;IACH,OAAO,EAAE,IAAI;IACb,WAAW,EAAE,EAAE;IACf;;OAEG;IACH,QAAQ,EAAE,GAAG;IACb;;OAEG;IACH,UAAU,EAAE,EAAE;IACd,eAAe,EAAE,SAAS;IAC1B,SAAS,EAAE,SAAS;IAEpB,WAAW,EAAE,SAAS;IACtB;;OAEG;IACH,SAAS,EAAE,SAAS;IACpB;;OAEG;IACH,cAAc,EAAE,OAAO;IAEvB;;;OAGG;IACH,SAAS,EAAE,+BAAuB;IAClC;;OAEG;IACH,YAAY,EAAE,EAAE;IAChB,IAAI,EAAE,iBAAiB;IACvB;;OAEG;IACH,IAAI,EAAE,CAAC;IACP;;OAEG;IACH,SAAS,EAAE,GAAG;IACd;;OAEG;IACH,OAAO,EAAE,GAAG;IACZ;;OAEG;IACH,OAAO,EAAE,CAAC;IACV;;OAEG;IACH,mBAAmB,EAAE,KAAK;IAC1B;;OAEG;IACH,oBAAoB,EAAE,kBAAkB;IACxC;;OAEG;IACH,eAAe,EAAE,IAAI;IACrB;;OAEG;IACH,kBAAkB,EAAE,IAAI;IACxB,GAAG,EAAE,CAAC;IACN,GAAG,EAAE,MAAM,CAAC,SAAS;CACH,CAAC;AAER,QAAA,qBAAqB,GAAmB;IACnD;;OAEG;IACH,YAAY,EAAE,EAAE;IAChB;;OAEG;IACH,iBAAiB,EAAE,IAAI;IACvB;;OAEG;IACH,gBAAgB,EAAE,GAAG;IACrB;;OAEG;IACH,oBAAoB,EAAE,GAAG;IACzB;;OAEG;IACH,uBAAuB,EAAE,GAAG;IAC5B;;OAEG;IACH,sBAAsB,EAAE,EAAE;IAC1B;;OAEG;IACH,cAAc,EAAE,CAAC;CACA,CAAC"}

lib/settings/styles/timelineKeyframeStyle.js.map

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

lib/settings/styles/timelineRowStyle.js.map

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

lib/settings/styles/timelineStyle.js.map

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

lib/settings/timelineConsts.js.map

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

lib/settings/timelineOptions.js.map

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

lib/timelineEventsEmitter.js.map

@@ -1 +0,0 @@
-{"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/timelineKeyframe.js.map

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

lib/timelineModel.js.map

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

lib/timelineRanged.js.map

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

lib/timelineRow.js.map

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

lib/utils/events/timelineBaseEvent.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"timelineBaseEvent.js","sourceRoot":"","sources":["../../../src/utils/events/timelineBaseEvent.ts"],"names":[],"mappings":";;;AAAA;IAAA;QACU,eAAU,GAAG,KAAK,CAAC;IAW7B,CAAC;IAVC;;OAEG;IACH,0CAAc,GAAd;QACE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;IACzB,CAAC;IAED,uCAAW,GAAX;QACE,OAAO,IAAI,CAAC,UAAU,CAAC;IACzB,CAAC;IACH,wBAAC;AAAD,CAAC,AAZD,IAYC;AAZY,8CAAiB"}

lib/utils/events/timelineClickEvent.js.map

@@ -1 +0,0 @@
-{"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.js.map

@@ -1 +0,0 @@
-{"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.js

@@ -1,28 +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 (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        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 __());
-    };
-})();
-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/timelineKeyframeChangedEvent.js.map

@@ -1 +0,0 @@
-{"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/timelineScrollEvent.js.map

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

lib/utils/events/timelineSelectedEvent.js.map

@@ -1 +0,0 @@
-{"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 +0,0 @@
-{"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/selectable.js.map

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

lib/utils/timelineCutBoundsRectResults.js

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

lib/utils/timelineCutBoundsRectResults.js.map

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

lib/utils/timelineDraggableData.js.map

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

lib/utils/timelineElement.js.map

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

lib/utils/timelineModelCalcResults.js.map

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

lib/utils/timelineMouseData.js

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

lib/utils/timelineMouseData.js.map

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

lib/utils/timelineSelectionResults.js.map

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

lib/utils/timelineValues.js

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

lib/utils/timelineValues.js.map

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

package.json

@@ -5,26 +5,21 @@
   "main": "lib/animation-timeline.min.js",
   "types": "lib/animation-timeline.d.ts",
   "devDependencies": {
-    "@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",
+    "@babel/cli": "7.16.7",
+    "@babel/core": "7.16.7",
+    "@babel/plugin-proposal-class-properties": "7.16.7",
+    "@babel/preset-env": "7.16.7",
+    "@babel/preset-typescript": "7.16.7",
     "@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",
+    "chai": "4.3.4",
+    "eslint": "8.6.0",
     "eslint-config-prettier": "8.3.0",
     "eslint-plugin-prettier": "4.0.0",
-    "karma": "^6.3.9",
-    "mocha": "^9.1.3",
+    "mocha": "9.1.3",
     "prettier": "2.5.1",
     "ts-loader": "9.2.6",
     "typescript": "4.5.4",
@@ -32,16 +27,14 @@
     "webpack-cli": "4.9.1"
   },
   "scripts": {
-    "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-ts-defs": "npm run build-typescript-definitions",
-    "build": "tsc && webpack && npm run build-ts-defs && npm run build-tests",
+    "test": "echo \"Run tests/unittest.html explicitly to execute tests\" && exit 1",
+    "build-ts-def": "tsc -emitDeclarationOnly",
+    "build": "webpack && npm run build-tests && npm run build-ts-def",
+    "lint": "eslint --ext .ts,.html src --ignore-path .gitignore && prettier \"src/*.ts\" --check --ignore-path .gitignore",
     "webpack": "npm run build",
     "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"
+    "prettier": "prettier --check src/**/*.{ts,js,css,scss,html}"
   },
   "repository": {
     "type": "git",

tests/unittests.html

@@ -40,9 +40,9 @@
         mocha.setup('bdd');
         mocha.checkLeaks();
     </script>
-    <script src="./js/styleTests.js"></script>
-    <script src="./js/timelineTests.js"></script>
-    <script src="./js/settingsTests.js"></script>
+    <script src="./js/styleTests.test.js"></script>
+    <script src="./js/timelineTests.test.js"></script>
+    <script src="./js/settingsTests.test.js"></script>
     <script class="mocha-exec">
         mocha.run();
     </script>

webpack.config.js

@@ -1,6 +1,11 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 const path = require('path');
+const webpack = require('webpack'); //to access built-in plugins
 
+const sourceMapPlugin = new webpack.SourceMapDevToolPlugin({
+  filename: 'sourcemaps/[file].map',
+  fileContext: 'public',
+});
 //  devtool: 'inline-source-map',
 module.exports = [
   {
@@ -30,6 +35,7 @@ module.exports = [
     },
   },
   {
+    // Development unminimized file
     mode: 'production',
     name: 'unminimized',
     entry: {
@@ -57,5 +63,7 @@ module.exports = [
       // eslint-disable-next-line no-undef
       path: path.resolve(__dirname, 'lib'),
     },
+    // Add source maps for the dev instance
+    plugins: [sourceMapPlugin],
   },
 ];