TypeScript added types declarations compilation.

.eslintignore

@@ -1,4 +1,5 @@
 lib/*.js
+lib
 tests/js/*.js
 tests/js/src
 tests/src

lib/animation-timeline.d.ts

@@ -0,0 +1,26 @@
+export { Timeline } from './timeline';
+export { TimelineModel } from './timelineModel';
+export { TimelineRow } from './timelineRow';
+export { TimelineKeyframe } from './timelineKeyframe';
+export { TimelineEventsEmitter } from './timelineEventsEmitter';
+export { TimelineOptions } from './settings/timelineOptions';
+export { TimelineStyleUtils } from './settings/timelineStyleUtils';
+export { TimelineKeyframeStyle } from './settings/styles/timelineKeyframeStyle';
+export { TimelineRowStyle } from './settings/styles/timelineRowStyle';
+export { TimelineUtils } from './utils/timelineUtils';
+export { TimelineClickableElement } from './utils/timelineClickableElement';
+export { Selectable } from './utils/selectable';
+export { RowsCalculationsResults } from './utils/rowsCalculationsResults';
+export { RowSize } from './utils/rowsCalculationsResults';
+export { CutBoundsRect } from './utils/cutBoundsRect';
+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 { TimelineConsts } from './settings/timelineConsts';
+export { TimelineKeyframeShape } from './enums/timelineKeyframeShape';
+export { TimelineInteractionMode } from './enums/timelineInteractionMode';
+export { TimelineElementType } from './enums/timelineElementType';
+export { TimelineCursorType } from './enums/timelineCursorType';
+export { TimelineCapShape } from './enums/timelineCapShape';

lib/animation-timeline.js

@@ -3177,7 +3177,7 @@ var timelineSelectedEvent = __webpack_require__(8);
 // EXTERNAL MODULE: ./src/utils/events/timelineScrollEvent.ts
 var timelineScrollEvent = __webpack_require__(9);
 
-// CONCATENATED MODULE: ./src/index.ts
+// CONCATENATED MODULE: ./src/animation-timeline.ts
 // bundle entry point
 
 

lib/enums/timelineCapShape.d.ts

@@ -0,0 +1,5 @@
+export declare enum TimelineCapShape {
+    None = "none",
+    Triangle = "triangle",
+    Rect = "rect"
+}

lib/enums/timelineCursorType.d.ts

@@ -0,0 +1,37 @@
+export declare enum TimelineCursorType {
+    Alias = "alias",
+    AllScroll = "all-scroll",
+    Auto = "auto",
+    Cell = "cell",
+    ContextMenu = "context-menu",
+    ColResize = "col-resize",
+    Copy = "copy",
+    Crosshair = "crosshair",
+    Default = "default",
+    EResize = "e-resize",
+    EWResize = "ew-resize",
+    Grab = "grab",
+    Grabbing = "grabbing",
+    Help = "help",
+    Move = "move",
+    NResize = "n-resize",
+    NEResize = "ne-resize",
+    NESWResize = "nesw-resize",
+    NSResize = "ns-resize",
+    NWResize = "nw-resize",
+    NWSEResize = "nwse-resize",
+    NoDrop = "no-drop",
+    None = "none",
+    NotAllowed = "not-allowed",
+    Pointer = "pointer",
+    Progress = "progress",
+    RowResize = "row-resize",
+    SResize = "s-resize",
+    SEResize = "se-resize",
+    SWResize = "sw-resize",
+    Text = "text",
+    WResize = "w-resize",
+    Wait = "wait",
+    ZoomIn = "zoom-in",
+    ZoomOut = "zoom-out"
+}

lib/enums/timelineElementType.d.ts

@@ -0,0 +1,18 @@
+export declare enum TimelineElementType {
+    /**
+     * Timeline
+     */
+    Timeline = "timeline",
+    /**
+     * Keyframes
+     */
+    Keyframe = "keyframe",
+    /**
+     * Keyframes stripe
+     */
+    Stripe = "stripe",
+    /**
+     * Row
+     */
+    Row = "row"
+}

lib/enums/timelineEvents.d.ts

@@ -0,0 +1,10 @@
+export declare enum TimelineEvents {
+    Selected = "selected",
+    TimeChanged = "timechanged",
+    DragStarted = "dragstarted",
+    Drag = "drag",
+    DragFinished = "dragfinished",
+    Scroll = "scroll",
+    DoubleClick = "doubleclick",
+    MouseDown = "mousedown"
+}

lib/enums/timelineInteractionMode.d.ts

@@ -0,0 +1,4 @@
+export declare enum TimelineInteractionMode {
+    Selection = "selection",
+    Pan = "pan"
+}

lib/enums/timelineKeyframeShape.d.ts

@@ -0,0 +1,6 @@
+export declare enum TimelineKeyframeShape {
+    None = "none",
+    Rhomb = "rhomb",
+    Circle = "circle",
+    Rect = "rect"
+}

lib/settings/styles/TimelineRowStyle.d.ts

@@ -0,0 +1,25 @@
+import { TimelineKeyframeStyle } from './timelineKeyframeStyle';
+export interface TimelineRowStyle {
+    /**
+     * Size of the row in pixels, can be set to 'auto'
+     */
+    height: string | number;
+    hidden?: boolean;
+    color?: string;
+    selectedColor?: string;
+    marginBottom?: number;
+    /**
+     * Keyframes bounds stripe height.
+     * 'auto' to automatically calculate.
+     * number in pixels.
+     */
+    stripeHeight?: number | string;
+    /**
+     * Keyframes bounds stripe color. Default is used when undefined.
+     */
+    stripeFillColor?: string;
+    /**
+     * Style of all keyframes in a current row.
+     */
+    keyframesStyle?: TimelineKeyframeStyle;
+}

lib/settings/styles/timelineKeyframeStyle.d.ts

@@ -0,0 +1,7 @@
+import { TimelineKeyframeShape } from '../../enums/timelineKeyframeShape';
+export interface TimelineKeyframeStyle {
+    cursor?: string;
+    shape?: TimelineKeyframeShape;
+    draggable?: boolean;
+    hidden?: boolean;
+}

lib/settings/timelineConsts.d.ts

@@ -0,0 +1,30 @@
+export declare class TimelineConsts {
+    /**
+     * Auto pan speed.
+     */
+    autoPanSpeed: number;
+    /**
+     * scroll speed when mouse drag is used (from 0 to 1)
+     */
+    scrollByDragSpeed: number;
+    /**
+     * Determine whether item was clicked.
+     */
+    clickDetectionMs: number;
+    /**
+     * Timeout to detect double click.
+     */
+    doubleClickTimeoutMs: number;
+    /**
+     * Time in ms used to refresh scrollbars when pan is finished.
+     */
+    scrollFinishedTimeoutMs: number;
+    /**
+     * Auto pan padding
+     */
+    autoPanByScrollPadding: number;
+    /**
+     * Click threshold
+     */
+    clickThreshold: number;
+}

lib/settings/timelineOptions.d.ts

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

lib/settings/timelineStyleUtils.d.ts

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

lib/timeline.d.ts

@@ -0,0 +1,292 @@
+import { TimelineEventsEmitter } from './timelineEventsEmitter';
+import { TimelineOptions } from './settings/timelineOptions';
+import { TimelineConsts } from './settings/timelineConsts';
+import { TimelineKeyframe } from './timelineKeyframe';
+import { TimelineModel } from './timelineModel';
+import { TimelineClickableElement } from './utils/timelineClickableElement';
+import { TimelineRow } from './timelineRow';
+import { CutBoundsRect } from './utils/cutBoundsRect';
+import { RowSize, RowsCalculationsResults } from './utils/rowsCalculationsResults';
+import { TimelineInteractionMode } from './enums/timelineInteractionMode';
+import { TimelineDraggableData } from './utils/timelineDraggableData';
+import { TimelineDragEvent } from './utils/events/timelineDragEvent';
+interface MousePoint extends DOMPoint {
+    radius: number;
+}
+interface MouseData extends MousePoint {
+    val: number;
+    snapVal: number;
+}
+export declare class Timeline extends TimelineEventsEmitter {
+    /**
+     * component container.
+     */
+    _container: HTMLElement;
+    /**
+     * Dynamically generated event.
+     */
+    _canvas: HTMLCanvasElement;
+    /**
+     * Dynamically generated scroll container.
+     */
+    _scrollContainer: HTMLElement;
+    /**
+     * Dynamically generated virtual scroll content.
+     */
+    _scrollContent: HTMLElement;
+    /**
+     * Rendering context
+     */
+    _ctx: CanvasRenderingContext2D;
+    /**
+     * Components settings
+     */
+    _options: TimelineOptions;
+    /**
+     * Drag start position.
+     */
+    _startPos: MouseData;
+    /**
+     * Drag scroll started position.
+     */
+    _scrollStartPos: DOMPoint | null;
+    _currentPos: MouseData;
+    _selectionRect: DOMRect;
+    _selectionRectEnabled: boolean;
+    _drag: TimelineDraggableData | null;
+    _startedDragWithCtrl: boolean;
+    _startedDragWithShiftKey: boolean;
+    _clickTimeout?: number;
+    _lastClickTime: number;
+    _lastClickPoint: DOMPoint | null;
+    _consts: TimelineConsts;
+    _clickAllowed: boolean;
+    /**
+     * scroll finished timer reference.
+     */
+    _scrollFinishedTimerRef?: number;
+    _selectedKeyframes: Array<TimelineKeyframe>;
+    _val: number;
+    /**
+     * TODO: should be tested on retina.
+     */
+    _pixelRatio: number;
+    _currentZoom: number;
+    _intervalRef?: number;
+    _autoPanLastActionDate: number;
+    _isPanStarted: boolean;
+    _interactionMode: TimelineInteractionMode;
+    _lastUsedArgs: MouseEvent | TouchEvent;
+    _model: TimelineModel;
+    /**
+     * Create Timeline instance
+     * @param options Timeline settings.
+     * @param model Timeline model.
+     */
+    constructor(options?: TimelineOptions | null, model?: TimelineModel | null);
+    /**
+     * Initialize Timeline
+     * @param options Timeline settings.
+     * @param model Timeline model.
+     */
+    initialize(options: TimelineOptions | null, model: TimelineModel | null): void;
+    /**
+     * Subscribe current component on the related events.
+     */
+    _subscribeOnEvents(): void;
+    dispose(): void;
+    _handleBlurEvent: () => void;
+    _handleWindowResizeEvent: () => void;
+    _handleDocumentKeydownEvent: (args: KeyboardEvent) => boolean;
+    _clearScrollFinishedTimer(): void;
+    _handleScrollEvent: (args: MouseEvent) => void;
+    _controlKeyPressed(e: MouseEvent | KeyboardEvent): boolean;
+    _handleWheelEvent: (event: WheelEvent) => void;
+    /**
+     * @param args
+     */
+    _handleMouseDownEvent: (args: MouseEvent) => void;
+    _handleMouseMoveEvent: (args: any) => void;
+    _handleMouseUpEvent: (args: MouseEvent) => void;
+    _performClick(pos: MouseData, args: MouseEvent, drag: TimelineDraggableData): boolean;
+    /**
+     * Set keyframe value.
+     * @param keyframe
+     * @param value
+     */
+    _setKeyframePos(keyframe: TimelineKeyframe, value: number): boolean;
+    /**
+     * @param cursor to set.
+     */
+    _setCursor(cursor: string): void;
+    /**
+     * Set pan mode
+     * @param isPan
+     */
+    setInteractionMode(mode: TimelineInteractionMode): void;
+    _convertToElement(row: TimelineRow, keyframe: TimelineKeyframe): TimelineClickableElement;
+    getSelectedElements(): Array<TimelineClickableElement>;
+    /**
+     * Do the selection.
+     * @param {boolean} isSelected
+     * @param {object} selector can be a rectangle or a keyframe object.
+     * @param {boolean} ignoreOthers value indicating whether all other object should be reversed.
+     * @return {boolean} isChanged
+     */
+    _performSelection(isSelected?: boolean, selector?: DOMRect | TimelineKeyframe | null, ignoreOthers?: boolean): boolean;
+    /**
+     * foreach visible keyframe.
+     */
+    _forEachKeyframe(callback: (keyframe: TimelineKeyframe, keyframeIndex?: number, row?: RowSize, index?: number, newRow?: boolean) => void, calculateStripesBounds?: boolean): void;
+    _trackMousePos(canvas: HTMLCanvasElement, mouseArgs: MouseEvent | TouchEvent): MouseData;
+    _cleanUpSelection(): void;
+    /**
+     * Check whether click timeout is over.
+     */
+    _clickTimeoutIsOver(): boolean;
+    /**
+     * Automatically pan. Scroll canvas when selection is made and mouse outside of the bounds.
+     */
+    _startAutoPan(): void;
+    /**
+     * Stop current running auto pan
+     */
+    _stopAutoPan(): void;
+    /**
+     * Check whether auto pan should be slowed down a bit.
+     */
+    _checkUpdateSpeedTooFast(): boolean;
+    _scrollByPan(start: MouseData, pos: MouseData, scrollStartPos: DOMPoint): void;
+    _scrollBySelectionOutOfBounds(pos: DOMPoint): boolean;
+    /**
+     * Convert screen pixel to value.
+     */
+    pxToVal(coords: number, absolute?: boolean): number;
+    /**
+     * Convert area value to screen pixel coordinates.
+     */
+    valToPx(ms: number, absolute?: boolean): number;
+    /**
+     * Snap a value to a nearest beautiful point.
+     */
+    snapVal(ms: number): number;
+    _mousePosToVal(x: number, snapEnabled?: boolean): number;
+    /**
+     * Format line gauge text.
+     * Default formatting is HMS
+     * @param ms milliseconds to convert.
+     * @param isSeconds whether seconds are passed.
+     */
+    _formatLineGaugeText(ms: number, isSeconds?: boolean): string;
+    _renderTicks(): void;
+    /**
+     * calculate screen positions of the model elements.
+     */
+    _calculateRowsBounds(includeStipesBounds?: boolean): RowsCalculationsResults;
+    _renderRows(): void;
+    /**
+     * Method is used for the optimization.
+     * Only visible part should be rendered.
+     */
+    _cutBounds(rect: DOMRect): CutBoundsRect;
+    /**
+     * get keyframe stripe screen rect coordinates.
+     * @param row
+     * @param rowY row screen coords y position
+     */
+    _getKeyframesStripeSize(row: TimelineRow, rowY: number, minValue: number, maxValue: number): DOMRect;
+    _getKeyframePosition(keyframe: TimelineKeyframe, rowSize: RowSize): DOMRect | null;
+    _renderKeyframes(): void;
+    _renderSelectionRect(): void;
+    _renderBackground(): void;
+    _renderTimeline(): void;
+    _renderHeaderBackground(): void;
+    redraw(): void;
+    /**
+     * perform scroll to max left.
+     */
+    scrollLeft(): void;
+    /**
+     * Redraw parts of the component in the specific order.
+     */
+    _redrawInternal: () => void;
+    /**
+     * Get row by y coordinate.
+     * @param posY y screen coordinate.
+     */
+    getRowByY(posY: number): TimelineRow;
+    /**
+     * Find sharp pixel position
+     */
+    _getSharp(pos: number, thickness?: number): number;
+    /**
+     * Get current time:
+     */
+    getTime(): number;
+    _setTimeInternal(val: number, source: string): boolean;
+    setTime(val: number): boolean;
+    select(value?: boolean): void;
+    getOptions(): TimelineOptions;
+    setScrollLeft(value: number): void;
+    setScrollTop(value: number): void;
+    getScrollLeft(): number;
+    getScrollTop(): number;
+    /**
+     * Set this._options.
+     * Options will be merged with the defaults and control invalidated
+     */
+    setOptions(toSet: TimelineOptions): TimelineOptions;
+    getModel(): TimelineModel;
+    /**
+     * Set model and redraw application.
+     * @param data
+     */
+    setModel(data: TimelineModel): void;
+    _getMousePos(canvas: HTMLCanvasElement, e: TouchEvent | MouseEvent | any): MousePoint;
+    /**
+     * Apply container div size to the container on changes detected.
+     */
+    _updateCanvasScale(): boolean;
+    /**
+     * Rescale and update size of the container.
+     */
+    rescale(): void;
+    _rescaleInternal(newWidth?: number | null, newHeight?: number | null, scrollMode?: string): void;
+    /**
+     * get draggable element.
+     * Filter elements and get first element by a priority.
+     * @param Array
+     * @param val current mouse value
+     */
+    _findDraggable(elements: Array<TimelineClickableElement>, val?: number | null): TimelineClickableElement;
+    /**
+     * get all clickable elements by a screen point.
+     */
+    elementFromPoint(pos: DOMPoint, clickRadius?: number): Array<TimelineClickableElement>;
+    /**
+     * Merge options with the defaults.
+     */
+    _mergeOptions(toSet: TimelineOptions): TimelineOptions;
+    /**
+     * Subscribe on drag started event.
+     */
+    onDragStarted(callback: (dragEvent: TimelineDragEvent) => void): void;
+    /**
+     * Subscribe on drag event.
+     */
+    onDrag(callback: (dragEvent: TimelineDragEvent) => void): void;
+    /**
+     * Subscribe on drag finished event.
+     */
+    onDragFinished(callback: (dragEvent: TimelineDragEvent) => void): void;
+    /**
+     * Subscribe on scroll event
+     */
+    onScroll(callback: Function): void;
+    _emitDragStartedEvent(): TimelineDragEvent;
+    _emitDragFinishedEvent(): TimelineDragEvent;
+    _emitDragEvent(): TimelineDragEvent;
+    _emitKeyframesSelected(selectedKeyframes: Array<TimelineKeyframe>): void;
+    _getDragEventArgs(): TimelineDragEvent;
+}
+export {};

lib/timelineEventsEmitter.d.ts

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

lib/timelineKeyframe.d.ts

@@ -0,0 +1,5 @@
+import { TimelineKeyframeStyle } from './settings/styles/timelineKeyframeStyle';
+import { Selectable } from './utils/selectable';
+export interface TimelineKeyframe extends TimelineKeyframeStyle, Selectable {
+    val: number;
+}

lib/timelineModel.d.ts

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

lib/timelineRow.d.ts

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

lib/utils/cutBoundsRect.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Cut bounds results.
+ */
+export interface CutBoundsRect extends DOMRect {
+    overlapY: boolean;
+    overlapX: boolean;
+}

lib/utils/events/timelineClickEvent.d.ts

@@ -0,0 +1,26 @@
+import { TimelineClickableElement } from '../timelineClickableElement';
+export declare class TimelineClickEvent {
+    args: MouseEvent;
+    /**
+     * Clicked screen position.
+     */
+    pos: DOMPoint;
+    /**
+     * Click time value.
+     */
+    val: number;
+    /**
+     * Elements under the click
+     */
+    elements: Array<TimelineClickableElement>;
+    /**
+     * Target element
+     */
+    target: TimelineClickableElement;
+    private _prevented;
+    /**
+     * Prevent default click logic.
+     */
+    preventDefault(): void;
+    isPrevented(): boolean;
+}

lib/utils/events/timelineDragEvent.d.ts

@@ -0,0 +1,3 @@
+import { TimelineClickEvent } from './timelineClickEvent';
+export declare class TimelineDragEvent extends TimelineClickEvent {
+}

lib/utils/events/timelineScrollEvent.d.ts

@@ -0,0 +1,6 @@
+export interface TimelineScrollEvent extends MouseEvent {
+    scrollLeft: number;
+    scrollTop: number;
+    scrollHeight: number;
+    scrollWidth: number;
+}

lib/utils/events/timelineSelectedEvent.d.ts

@@ -0,0 +1,4 @@
+import { TimelineKeyframe } from '../../timelineKeyframe';
+export interface TimelineSelectedEvent {
+    keyframes: Array<TimelineKeyframe>;
+}

lib/utils/rowsCalculationsResults.d.ts

@@ -0,0 +1,21 @@
+import { TimelineRow } from '../timelineRow';
+export interface RowsCalculationsResults {
+    /**
+     * All rows and keyframes bounds.
+     */
+    area: DOMRect;
+    minValue: number;
+    maxValue: number;
+    /**
+     * Collection of the rows sizes.
+     */
+    rows: Array<RowSize>;
+}
+export interface RowSize extends DOMRect {
+    row: TimelineRow;
+    index: number;
+    minValue: number;
+    maxValue: number;
+    marginBottom: number;
+    stripeRect: DOMRect;
+}

lib/utils/selectable.d.ts

@@ -0,0 +1,4 @@
+export interface Selectable {
+    selected?: boolean;
+    selectable?: boolean;
+}

lib/utils/timelineClickableElement.d.ts

@@ -0,0 +1,21 @@
+import { TimelineKeyframe } from '../timelineKeyframe';
+import { TimelineElementType } from '../enums/timelineElementType';
+import { TimelineRow } from '../timelineRow';
+/**
+ * Timeline clickable element.
+ */
+export interface TimelineClickableElement {
+    type: TimelineElementType;
+    /**
+     * Timeline value,
+     */
+    val: number;
+    /**
+     * Related keyframe model. In a case of stripe this value will be empty.
+     */
+    keyframe: TimelineKeyframe;
+    /**
+     * Related row model.
+     */
+    row: TimelineRow;
+}

lib/utils/timelineDraggableData.d.ts

@@ -0,0 +1,21 @@
+import { TimelineClickableElement } from './timelineClickableElement';
+import { TimelineElementType } from '../enums/timelineElementType';
+export interface TimelineDraggableData {
+    changed: boolean;
+    /**
+     * Drag initial click target.
+     */
+    target: TimelineClickableElement;
+    /**
+     * Elements to be dragged.
+     */
+    elements: Array<TimelineClickableElement>;
+    /**
+     * Dragging type.
+     */
+    type: TimelineElementType;
+    /**
+     * current drag position with the offset.
+     */
+    val: number;
+}

lib/utils/timelineUtils.d.ts

@@ -0,0 +1,16 @@
+export declare class TimelineUtils {
+    static drawLine(ctx: CanvasRenderingContext2D, x1: number, y1: number, x2: number, y2: number): void;
+    /**
+     * Check rectangle overlap.
+     */
+    static isOverlap(x: number, y: number, rectangle: DOMRect): boolean;
+    /**
+     * Find beautiful step for the header line gauge.
+     */
+    static findGoodStep(originalStep: number, divisionCheck?: number): number;
+    static isRectOverlap(rect: DOMRect, rect2: DOMRect): boolean;
+    static getDistance(x1: number, y1: number, x2?: number, y2?: number): number;
+    static sign(p: number): number;
+    static clearBrowserSelection(): void;
+    static getPowArgument(toCheck: number): number;
+}

package.json

@@ -27,8 +27,8 @@
   },
   "scripts": {
     "test": "echo \"Run tests/unittest.html explicitly to execute tests\" && exit 1",
-    "build": "webpack",
-    "webpack": "webpack",
+    "build": "webpack && tsc -emitDeclarationOnly",
+    "webpack": "npm run build",
     "build-tests": "tsc -p tsconfig.tests.json"
   },
   "repository": {

tests/timelineTests.ts

@@ -1,4 +1,4 @@
-import { Timeline, TimelineElementType, TimelineClickableElement } from '../lib/animation-timeline.js';
+import { Timeline, TimelineElementType, TimelineClickableElement } from '../lib/animation-timeline';
 
 describe('Timeline ', function () {
   it('closest keyframe should be returned', function () {

tsconfig.json

@@ -1,14 +1,16 @@
 {
   "compilerOptions": {
-    "outDir": "./lib/",
+    "outDir": "./lib",
+    "rootDir": "./src",
     "noImplicitAny": true,
     "module": "commonjs",
     "lib": ["es2015", "dom"],
     "target": "es5",
-    "allowJs": true,
+    "allowJs": false,
     "sourceMap": true,
     "strict": false,
     "declaration": true
   },
-  "exclude": ["node_modules", "lib", "dist", "tests", "*.json"]
+  "include": ["src"],
+  "exclude": ["node_modules", "lib", "dist", "tests", "*.json", "*.js", "webpack.config.js"]
 }

webpack.config.js

@@ -5,7 +5,7 @@ const UnminifiedWebpackPlugin = require('unminified-webpack-plugin');
 //  devtool: 'inline-source-map',
 module.exports = {
   entry: {
-    'animation-timeline': './lib/animation-timeline.ts',
+    'animation-timeline': './src/animation-timeline.ts',
   },
   module: {
     rules: [