README.md

README.md

@@ -60,16 +60,12 @@ timeline.initialize({ id: 'timeline' });
 
 ### Draw the outline tree
 
-Use and synchronize scroll events to draw outline list/tree at the left side of the animation panel.
+Scroll events can be synchronized with the outline at the left side of the control.
 
-- Each element of the list should have the same height as animation lane.
+- Each element of the list should have the same height as animation row.
 - Hide the vertical scroll of the outline container.
 
 ```JavaScript
-  timeline.on("scroll", function (args) {
-	outlineScrollContainer.scrollTop = args.scrollTop;
-    outlineContent.height = args.scrollHeight;
-  });
 
 ```
 
@@ -79,36 +75,9 @@ Use and synchronize scroll events to draw outline list/tree at the left side of
 
 Despite of the main options each keyframe or lane has own properties that can override main configuration:
 
-| Event name   | description                                                                                                                                            |
-| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| timeChanged  | time changed: { val: val, source: "user" or "setTime" }                                                                                                |
-| selected     | keyframe selected: keyframe                                                                                                                            |
-| scroll       | On scroll. Can be used to synchronize outline list with the current timeline container { args: args, scrollLeft, scrollTop, scrollHeight, scrollWidth } |
-| dragStarted  | emitted on drag started: { keyframes: [] }                                                                                                              |
-| drag         | emitted when dragging: { keyframes: [] }                                                                                                                |
-| dragFinished | emitted when drag finished: { keyframes: [] }                                                                                                           |
 
-### Description
+### Styling
 
-Despite of the main options each keyframe or lane has own properties that can override main configuration:
-
-| Lane property | description                   |
-| ------------- | ----------------------------- |
-| draggable     | whether lane draggable or not |
-| keyframes     | an array of the keyframes     |
-| hidden        | used to hide lane             |
-| name          | label to be displayed         |
-
-| Keyframe property | description                       |
-| ----------------- | --------------------------------- |
-| draggable         | whether keyframe draggable or not |
-| hidden            | used to hide lane                 |
-| val               | keyframe position                 |
-
-See the full list in the typescript definitions.
-
-Module is keeping the passed options as the read-only references.
-You can pass additional metadata for the keyframes to identify them when events are emitted.
 
 ### Initialization
 

src/timeline.ts

@@ -1012,7 +1012,7 @@ export class Timeline extends TimelineEventsEmitter {
           return;
         }
 
-        // Get min and max ms to draw keyframe lane:
+        // Get min and max ms to draw keyframe rows:
         if (row && row.keyframes) {
           row.keyframes.forEach((keyframe) => {
             const val = keyframe.val;
@@ -1129,27 +1129,27 @@ export class Timeline extends TimelineEventsEmitter {
    * @param rowY row screen coords y position
    */
   private getKeyframesStripeSize(row: TimelineRow, rowY: number, minValue: number, maxValue: number): DOMRect {
-    let keyframeLaneHeight: number | string = TimelineStyleUtils.rowStripeHeight(row, this.options.rowsStyle);
+    let stripeHeight: number | string = TimelineStyleUtils.rowStripeHeight(row, this.options.rowsStyle);
 
     const height = TimelineStyleUtils.getRowHeight(row, this.options.rowsStyle);
-    if ((!keyframeLaneHeight && keyframeLaneHeight !== 0) || isNaN(keyframeLaneHeight as number) || keyframeLaneHeight == 'auto') {
-      keyframeLaneHeight = Math.floor(height * 0.8);
+    if ((!stripeHeight && stripeHeight !== 0) || isNaN(stripeHeight as number) || stripeHeight == 'auto') {
+      stripeHeight = Math.floor(height * 0.8);
     }
 
-    if (keyframeLaneHeight > height) {
-      keyframeLaneHeight = height;
+    if (stripeHeight > height) {
+      stripeHeight = height;
     }
 
-    const margin = height - (keyframeLaneHeight as number);
+    const margin = height - (stripeHeight as number);
 
-    // draw keyframes lane.
+    // draw keyframes rows.
     const xMin = this.valToPx(minValue);
     const xMax = this.valToPx(maxValue);
 
     return {
       x: xMin,
       y: rowY + Math.floor(margin / 2),
-      height: keyframeLaneHeight,
+      height: stripeHeight,
       width: TimelineUtils.getDistance(xMin, xMax),
     } as DOMRect;
   }