updated readme.md

README.md

@@ -77,12 +77,23 @@ See the [live demo](https://ievgennaida.github.io/animation-timeline-control/)
 
 ## Model
 
+Keyframes model is used to pass keyframes and rows to be visualized.
+Component is not changing passed model and it's used only for the visual purpose. It also means that any attached metadata can be passed and it will be preserved (Use case: you can attach additional data for each keyframe).
+
 Read only and defined by the interfaces:
 
 - TimelineModel
 - TimelineRow
 - TimelineKeyframe
 
+Example on how to add a keyframe to existing model:
+
+```JavaScript
+    const existingModel = timeline.getModel();
+    existingModel.rows[0].keyframes.append({ val: 20 });
+    timeline.setModel(existingModel);
+```
+
 ### Events
 
 | Event name      | description                                                                                 |
@@ -108,6 +119,8 @@ this.timeline.onDragStarted((args: TimelineDragEvent) => {
 
 ### Timeline units and position
 
+Expected that you have a component or engine that can execute playing a timeline. Ex: SVG has events to run the animations and report current time position. This component is meant only to visualize the position.
+
 Time indicator position can be changed by a method call:
 
 ```JavaScript
@@ -134,6 +147,13 @@ timeline._formatUnitsText = (val)=> { return val + ' ms'; };
 
 ### Styling
 
+Timeline is rendered as a canvas, so has no HTML elements for the css styling.
+Styles can be applied on a few levels:
+
+- Global control setting (See TypeScript interface  TimelineStyle)
+- row styles (See TypeScript interface TimelineRowStyle)
+- keyframe styles (See TypeScript interface TimelineKeyframeStyle)
+
 Styles are applied by a global settings and can be overridden by a row or keyframe style.
 
 ## Changes

index.html

@@ -412,21 +412,27 @@
           }
         }
       });
-
-      /* 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 (row, index) {
-        var div = document.createElement('div');
-        div.classList.add('outline-node');
-        div.style.maxHeight = div.style.minHeight = (row.height || options.rowsStyle.height) + 'px';
-        div.style.marginBottom = options.rowsStyle.marginBottom + 'px';
-        div.innerText = row.title || 'Track ' + index;
-        outlineContainer.appendChild(div);
-      });
+      generateHTMLOutlineListNodes(rows);
+      
+      /**
+       * Generate html for the left menu for each row.
+       * */
+      function generateHTMLOutlineListNodes(rows) {
+        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 (row, index) {
+          var div = document.createElement('div');
+          div.classList.add('outline-node');
+          div.style.maxHeight = div.style.minHeight = (row.height || options.rowsStyle.height) + 'px';
+          div.style.marginBottom = options.rowsStyle.marginBottom + 'px';
+          div.innerText = row.title || 'Track ' + index;
+          outlineContainer.appendChild(div);
+        });
+      }
+      
       /*Handle events from html page*/
       function selectMode() {
         if (timeline) {